Fika note
余白と静けさを軸にしたブランドサイトデザイン
北欧カフェをテーマにしたサイトです。
カフェの設定から企画し、北欧の白夜をコンセプトに取り入れました。
温かみと落ち着きのあるカフェの雰囲気を視覚的に感じられるブランドサイトを目指して制作しました。
想定ターゲット：
静かな夜の時間帯に人の温もりを感じて安心して過ごせる場所を求める20～30代女性
■制作期間
約1ヵ月（企画～デザイン～実装）
■担当範囲
コンセプト設計 / UIデザイン / コーディング
■使用ツール
Illustrator / Photoshop / Figma / VS Code / Chat GPT（画像生成）
■使用素材
ビジュアルの統一感を重視するため、サイト内で使用した画像はAI画像生成およびフリー素材サイトを活用しています。
コンセプトに合わせてトーンや質感を調整しながら選定しました。
■使用スキル
HTML / CSS / JavaScript
■JavaScript実装内容
・世界観演出としてのヒーローイメージ扉開閉アニメーション
PC View
Mobile View
表示イメージ
夜の静けさの中に明かりが浮かぶ世界観をPC・SPそれぞれで再現
■デザイン意図
閲覧時のストレスを抑えながら、自然に世界観へ入り込める体験を意識して設計しました。
ヒーローエリアでは扉が開く演出を取り入れ、カフェへ入っていく感覚を視覚的に表現しています。
また、トップページのセクションのつなぎにグラデーションを用いることで、白夜をイメージした時間の流れを演出し、直感的に理解しやすい情報配置を心がけました。
■構造設計のポイント
トップページは縦方向にストーリー性を持たせ、世界観を体験しながら自然に情報理解へ進める構成としました。
営業時間などのユーザーにとって重要情報であるshop infoへ、どのタイミングでもアクセスできる導線設計としました。
■こだわった点
サイト全体が静かで整った印象になるよう、装飾を最小限に抑え、色や余白のバランスを重視しました。
丸のモチーフで柔らかさを表現しながらも、過度な演出は避け、店内の落ち着いた空気感が伝わるデザインを意識しています。
各セクションの余白や視線の流れは細かく調整し、心地よく閲覧できる画面設計にこだわりました。
このサイトで解決した課題
夜の来店への心理的不安を解消し、安心して訪問できるブランド体験を設計しました。
夜営業のカフェに対して抱く可能性がある不安や利用イメージの曖昧さを課題と捉え、空間の雰囲気や過ごし方を具体的に想起できる情報設計を行いました。
また、ニュースやコラムなど運用を想定したコンテンツを配置することで、店の活動や人の存在が感じられる構成とし、安心感とブランドへの信頼形成につながる体験設計を意識しています。