OG cafe
架空のカフェ「OG cafe」のwebサイトを制作しました。落ち着いた大人がゆっくりと過ごせる“静かな時間”をテーマに、写真・色味・余白を丁寧に設計し、ブランドの世界観を最大限に引き出すことを重視しました。また、jQuery を用いたアニメーションを取り入れ、視覚的な心地よさと操作性を両立させています。
- ターゲット
- 30～50代の”静かな時間”と”高品質な珈琲”にこだわる方
- 課題
- お店の雰囲気やこだわり、”静けさ”や”上質さ”といったブランド価値がWeb上で十分に伝わっていない。
- 目的
- お店の雰囲気やこだわり、”静けさ”や”上質さ”といったブランド価値を直感的に理解できるWebサイトにする。
- 制作期間
-
企画・情報設計約2日デザイン約2日コーディング約5日
- 使用ツール
-
開発環境VS Code / Git言語HTML / CSS / jQueryデザインFigma / Photoshop / Illustrator
- こだわりポイント-その１
- ブランドの印象を決めるロゴが存在せず、サイト全体の世界観がユーザーに伝わりにくい状態でした。特に、落ち着いた大人向けのカフェとしての“静けさ”や“丁寧さ”を視覚的に表現できていませんでした。 OG cafe の頭文字「O」をアレンジし、上から見たコーヒーカップに見立てたロゴを制作。さらに、ファーストビューの1枚目の写真と連動し、左下にカップの持ち手が来るように配置することで、写真とロゴが一体となってブランドの世界観を伝える構成にしました。ロゴを軸に色味や余白も統一し、ブランドの印象を強く残せるデザインに仕上げています。
- こだわりポイント-その２
- 写真中心のデザインは美しい一方で、静的なままだとブランドの魅力が十分に伝わらず、ユーザーの印象に残りにくいという問題がありました jQuery を用いて、フェードインやスクロールに合わせたアニメーションを実装。動きすぎない“控えめな演出”にすることで、世界観を壊さずに視覚的な心地よさをプラスしました。ブランドの持つ“静かな時間”を、動きでも表現しています。
- こだわりポイント-その３
- 写真を多用するデザインは、読み込み速度が遅くなり、ユーザー体験を損なう可能性がありました。 すべての写真を WebP 形式に変換し、サイズを最適化。デザイン性を保ちながら、軽快に閲覧できるパフォーマンスを実現しています。
- こだわりポイント-その４
- お店の説明、こだわり、商品カテゴリ、オンラインショップなどの情報がバラバラに配置されていると、ユーザーが「このカフェはどんな店なのか」「どんな商品があるのか」を直感的に理解しづらい問題がありました。特に、初めて訪れるユーザーにとっては、ブランドの魅力が十分に伝わらないリスクがありました。 OG cafe の世界観を自然に理解できるよう、「ブランド説明 → こだわり → 商品カテゴリ → オンラインショップ」というストーリー性のある構造に設計しました。ブランドの背景を知り、こだわりに共感し、商品ラインナップを確認し、最後に購入へ進むという流れを意識することで、ユーザーが迷わず情報を追える導線を実現しています。
other
その他の制作物です。
back to works
get in touch / contact me / get in touch / contact me /
get in touch / contact me / get in touch / contact me /
