株式会社ワラカン 様 / ホームページ制作 / デザイン案のご確認

ホームページのデザイン案を、店ごとに2〜3つ用意しました。
気に入った方を選んでください。

作るのは3つ。会社のホームページ1つと、お店のページ2つ(スナック笑いの缶詰・ワインバー)です。会社は2案、お店は3案ずつ並べました。

画像は「方向性を決めるための絵」で、上から下まで1ページ分を縦長に描いています。細かい文字や写真は、選んだ案をもとに作り込みます。

STEP 1下の構成図で、3つのページのつながりを見る
STEP 2各ページで「この案がいい」を1つ選ぶ(迷ったら「どれも違う」でOK)
STEP 3一番下の「送信」を押す。ひとことも添えてもらえると助かります
全体の構成

会社のページが入口。そこから3つのお店へ。

会社ホームページの中に3つのバナーを置き、それぞれのお店のページへ飛ぶ形です。かたりべ治療院は今のサイトをそのまま使います。

入口 株式会社ワラカン 会社ホームページ 訪問マッサージ かたりべ治療院 今のサイトへリンク(そのまま使う) スナック 笑いの缶詰 新しく作る(1ページ) ワインバー 店名は決まり次第 新しく作る(1ページ)

会社ホームページのバナーは、各お店のページと同じ雰囲気で作ります。

1 / 3

株式会社ワラカン 会社ホームページ

入口になるページ。会社の思い → 3つの事業のバナー(ここから各お店へ) → お知らせ → 採用 → 会社概要 → お問い合わせ、を1ページに。

corp 案1 笑い、開缶。タップで大きく見る
案1笑い、開缶。
どんな案か
開く缶と極太の文字で笑いを放ち、鮮やかな色面のリズムで事業から採用・お問い合わせまでつなぐ。
こういうときに
街の人や若い層に、明るさと勢いで覚えてもらいたいとき。
文字と動き
前回と同じ、極太で詰め気味の角ゴシック。見出しの大きさで勢いを出し、本文とフォームは読みやすいゴシックで整える。 最初の表示で缶のプルタブが一度だけ開き、写真の断片が軽く現れる。事業バナーと採用カードはホバーで写真がわずかに動き、矢印が伸びる。動きを抑える設定では静止表示にする。
corp 案2 盛岡の一日タップで大きく見る
案2盛岡の一日
どんな案か
昼のいたわりから夜の語らいへ移る光を、大きな写真と静かな余白で伝える。
こういうときに
信頼感・落ち着きを出したいとき。治療院のお客さま(ご高齢の方)にも見やすい。
文字と動き
前回と同じ、細身から中太の端正な角ゴシック。やや広めの字間、落ち着いた行間、細い罫線で写真の空気を引き立てる。 スクロールに合わせて写真がゆっくり現れ、昼の青白い光から夜の琥珀色へ移る。事業バナーと採用カードはホバーで明るさが少し上がり、細い矢印が動く。動きを抑える設定では切り替えを静止表示にする。
2 / 3

スナック 笑いの缶詰

お店の紹介 → 楽しみ方 → 料金システム → メニュー → 店内・席 → 営業案内・地図 → 採用、を1ページに。

snack 案1 夜の看板タップで大きく見る
案1夜の看板
どんな案か
琥珀色の店内と力強い看板文字、ピンクの缶ネオンで、仕事帰りに立ち寄りたくなる夜をつくる。
こういうときに
今の求人バナーの雰囲気をそのまま活かしたいとき。夜のお店らしさが一番出る。
文字と動き
極太で詰め気味の角ゴシック。見出しを看板のように大きく置き、料金・連絡先は明瞭なゴシックで整える。 初回表示で缶のネオンがゆっくり点灯。リンクに触れると金色の下線が伸び、写真は静かに見せる。
snack 案2 いつものカウンタータップで大きく見る
案2いつものカウンター
どんな案か
ママの自然な笑顔と淡い緑で、初めてでもひとりでも話しやすいカウンターの距離感を伝える。
こういうときに
初めての方・女性・お酒が弱い方にも入りやすい印象にしたいとき。
文字と動き
手書きのゆらぎを含む、親しみやすい丸ゴシック。本文と料金表には、読みやすい太さとゆったりした行間を使う。 スクロールに合わせて細い手描き線が一度だけ伸び、写真が穏やかに現れる。缶のマスコットはホバー時に小さく手を振る。
snack 案3 盛岡レトロタップで大きく見る
案3盛岡レトロ
どんな案か
ワインレッドの看板文字とクリームの余白に、木のカウンターと白熱灯の温かい記憶を重ねる。
こういうときに
昔ながらのスナックの良さ・懐かしさを出したいとき。世代を問わず親しみやすい。
文字と動き
昭和のスナック看板や喫茶店を思わせる、肉厚で丸い日本語見出し。本文は端正なゴシックにし、真鍮色の二重罫で情報を区切る。 写真がフィルムを映すようにゆっくり現れ、細い二重罫が短く伸びる。ボタンはホバーで配色を反転し、ネオンや点滅は使わない。
3 / 3

ワインバー(店名は決まり次第)

コンセプト → ワインと日本酒(価格の例) → 料理 → 料金システム(例) → 店内・席 → はじめての方へ → お知らせ → 店舗情報・ご予約、を1ページに(全国のワインバー公式サイト8店の定番構成)。店名・場所・時間は準備中。

wine 案1 宵の余白タップで大きく見る
案1宵の余白
どんな案か
暗がりに浮かぶグラスと深緑の余白で、和と洋が出会う静かな夜を描く。
こういうときに
参考にしたお店(glassto)に近い、静かで上質な夜の雰囲気にしたいとき。
文字と動き
繊細で細身の明朝体を見出しに、端正なゴシック体を本文・ナビゲーションに使用。欧文は控えめなセリフ体。 写真と見出しを緩やかにフェード表示。リンクの細い下線やグラス写真の明るさを、ごく穏やかに変化させる。
wine 案2 白の余白タップで大きく見る
案2白の余白
どんな案か
白いギャラリーのような余白に、昼光のグラスと小皿を並べる。
こういうときに
明るく洗練された印象にしたいとき。昼から夜まで使える店に見せられる。
文字と動き
細い明朝体と繊細な欧文セリフ体。本文は端正なゴシック体で、純白の背景と細い真鍮色の罫線に余裕を持たせる。 スクロールに合わせて写真を短くフェード表示。リンクの真鍮色の下線を穏やかに伸ばす。
wine 案3 深紅の書斎タップで大きく見る
案3深紅の書斎
どんな案か
深紅と墨色、蝋燭の暖かさで、書斎のように落ち着くビストロを描く。
こういうときに
クラシックで重厚、隠れ家のような雰囲気にしたいとき。記念日利用に強い。
文字と動き
クラシックな欧文セリフ体と優美な明朝体。本文は端正なゴシック体。真鍮色の細い罫線と整った文字組みで、密度と品を両立。 写真をゆっくり現し、予約ボタンへのホバーで真鍮色の枠と背景を穏やかに変える。
送信

選んだ案を送る

選んだ内容は下にまとまります。ひとことを添えて「送信」を押してください。

会社HP未選択
スナック未選択
ワインバー未選択

送信できませんでした。電波の良いところでもう一度押してください。

送信しました。ありがとうございます。いただいた内容をもとに作り込みます。