https://zen23.shop/cafe

プロジェクト概要

htmlテンプレートを改変による制作。Topページ、concept、menu、access。

熊本市中央区桜町にある、架空のブックカフェ「Cafe Noir」のWebサイトを制作しました。「仕事帰りの休息」「週末の読書」をテーマに、大人が静かに自分を取り戻せる上質な空間であることを表現することを目指しました。

使用技術・ツール

  • 言語: HTML, CSS, JavaScript
  • ライブラリ: Slick (スライドショー), inview.js (スクロールアニメーション), Font Awesome (アイコン)
  • デザイン: Adobe Photoshop, Adobe Illustrator

制作のポイント

  • コンセプト重視のUIデザイン: 「Noir（黒）」という名前から連想されるシックで落ち着いた雰囲気を、深みのあるブラウン（#634e3a）を中心に配色しました。読書という静的な体験を邪魔しないよう、ミニマルなレイアウトを意識しています。
  • UXを向上させるアニメーション: inview.js を活用し、ユーザーのスクロールに合わせてコンテンツがふわっと現れる実装を行いました。これにより、ページを訪れた際の「体験の心地よさ」を重視しています。
  • レスポンシブ対応: PC・スマートフォン双方での閲覧を想定し、flexboxやgridレイアウトを用いてマルチデバイス対応を行いました。特にメニューや画像ギャラリーは、画面幅に応じて最適な表示になるよう調整しています。
  • SNS連携: 集客を意識し、SNSへの動線を中段に設置しました。ユーザーがサイトに訪れた際に、そのまま店内の様子を感じてもらえるよう導線を確保しています。