MENU

自主制作

ウェブサイト

カフェwebサイト

クライアント

自主制作のためクライアント不在

製作時間

5日間(デザインカンプ2日/コーディング3日)

使用ツール

Photoshop , VisualStudioCode

制作物

要件定義

制作目的

ベンチタイムの魅力やこだわりを伝え、お店への来店を増やす

ターゲット

20代後半~40代男女

カフェやベーカリーが好きな人

ゆっくり落ち着いた時間を過ごしたい人

トンマナ

あたたかさ/やわらかさ/落ち着き/親しみやすさ

デザインの工夫

【使用カラーについて】

カフェについて知ってもらい、お店の雰囲気をイメージしやすくするため、外観の水色ではなく内観に合わせて茶色を使用しています。また、柔らかく温かな雰囲気を演出するため、薄い黄色を取り入れました。

【フォントについて】

見出しは、手作り感のある看板と、こだわりのあるカフェの雰囲気に合わせ、手書き感のあるフォントを選定しました。本文には、親しみやすさを感じてもらいながらも、可読性の高いフォントを使用しています。

【背景について】

柔らかさや温かさを感じられるよう、背景を円状に区切り、色を変えることで情報の区切りをわかりやすくしました。

【メインビジュアルについて】

メインビジュアルの画像

内観の写真をそのまま使用するよりも、イラスト風に加工することで、カフェのぬくもりや温かな雰囲気をより感じてもらえると考え、メインビジュアルはイラスト風に加工しました。

【トップページ-コンセプト/ショップについて】

コンセプトとショップ項目の画像

コンセプトの項目は、キャッチコピーを目立たせるために2行で大きく配置し、幅を広く取りました。そのため、コンセプトの文章はキャッチコピーとのバランスを考え、左揃えにしています。 一方、ショップの項目は「お店にはこんなものもある」という補足的な内容のため、文字を中央揃えにしています。周囲の余白にはショップの雰囲気が伝わる写真を配置し、食事だけでなく、店内を見て回る楽しさを表現しました。

【トップページ-メニュについて】

メニュー項目の画像

すべてのメニューを一つのページに載せるとスクロール量が多くなってしまうため、フード・ドリンク・デザートの種類別に分け、見たいメニューへすぐに移動できるようにしています。

【フッターについて】

フッターの画像

「このカフェに行ってみたい」と思ったとき、最後に知りたい情報として「どこにあるのか」「いつ営業しているのか」が重要だと考え、フッターには住所と営業時間を配置しています。

【メニューページ・コンセプトページについて】

メニューページとコンセプトページの画像

ナンバリングや種類別に分けることで、どのような内容が書かれているのか分かりやすくなるようにしています。 また、すべてを左側に写真、右側に文字という配置にすると、右側に文字が集中してしまい、単調な印象になると考えました。そのため、写真と文字の位置を交互に入れ替えるジグザグのレイアウトにしています。

【コンセプトページについて】

コンセプトページの画像

コンセプトページは、内容をしっかりと読んでもらえるよう、写真をメインに見せるのではなく、文章を中心とした構成にしています。 背景を白にすることで文章を読みやすくし、写真と文字を少し重ねて配置することで、写真と文章のまとまりが分かりやすくなるようにしています。

【メニューページについて】

メニューページの画像

料理の印象が大切なため、画面幅をいっぱいに活用し、写真を大きく配置しながらも余白を確保できるレイアウトにしています。

作品一覧ページへ戻る