| 製作期間 | 3日間（トップページのみ） |
| 使用したツール | Photoshop（ロゴ作成・写真加工）／WordPress |
| 依頼内容 | 自主制作 |
- 制作目的
- カフェのリニューアルホームページ ※数年前に実際に営業していたカフェのホームページを、「もし今リニューアルするとしたら？」の視点で制作してみたものになります。
- ターゲット
- 20代～40代女性
- 普段カフェの利用をよくしている
- 友人とのお茶会のほか、一人でも過ごせる落ち着いた場所を探している
- トンマナ
- 明るい店内でゆっくり過ごしていただけるようなイメージ
- カフェの雰囲気がわかる
- はちみつカラーを使う
情報設計について
情報を簡潔にまとめている
各セクション簡潔にまとめることで、情報が読みやすくしています。「ABOUT」や「MENU」など、必要な情報をシンプルに配置しており、スクロールするだけで全体像がわかるシングルページのデザインになっています。無駄がなく、読み手に過度な情報負担をかけない設計です。各情報が視覚的に整理されているため、訪問者は必要な情報を簡単に見つけられます。
アクセシビリティに配慮したデザイン
読みやすさが考慮しフォントサイズも調整しました。色のコントラストもしっかり確保することで、視認性を上げています。また、シンプルなデザインなので、視覚的に障害のある人にもやさしいデザインになっています。ボタンやリンクが目立つデザインで、訪問者が迷わず操作できます。
メニューの視覚的強調
メニューは六角形のハニカムデザインが目を引くデザインにしています。料理の美味しさが視覚的に伝わるように写真の配置を工夫しました。写真が均一なスタイルで配置されており、統一感と高級感を演出しています。六角形のデザインにより、はちみつのテーマを一貫して表現しています。このセクションがサイト全体で最も印象的になるように、訪問者に「試してみたい」という気持ちを持ってもらえるようにデザインしました。
デザインについて
ブランドイメージと結びつくナチュラルな色合い
はちみつのイメージと調和させるために、全体的に柔らかいイエローとホワイトを使用しました。色合いが自然で落ち着いた印象を与え、カフェのリラックスした雰囲気を伝えています。木材や緑を使ったインテリア写真も、ナチュラルなイメージを補強しています。配色が統一することでサイト全体に統一感をつくっており、この色合いが「はちみつカフェ」のブランドとしての温かみや親しみやすさを表現しています。
視覚的にリズムを持たせたレイアウト
レイアウトに視覚的なリズムを与えるために、六角形やハニカム構造をアクセントに使用しました。セクションごとにレイアウトが異なるため、スクロールする楽しさをつくっています。「SEAT」や「MENU」など、セクションごとのデザインが異なり飽きがこないように設計しています。全体にわたってバランスよく白スペースをとり、視覚的に心地よい構成にしています。また、画像とテキストの配置が工夫され、各セクションが立体的に見える効果を生んでいます。
視覚的な引き立て
はちみつのテーマに沿って、全体は柔らかく温かみのあるデザインで統一しています。メイン画像でのはちみつのビジュアルがブランドを強く印象付けています。トップのはちみつの画像は、視覚的に非常に魅力的なものを選び、訪問者の興味を引きたたせるように工夫しました。蜂のキャラクターやイラストを入れることで、楽しさと親しみを追加しています。色合いとレイアウトが統一され、全体に清潔感と暖かさを感じます。
