概要

職業訓練校課題として、実在する「Cafe Azito」の公式サイトリニューアルを想定し、制作を行いました。（トップページのみ）

課題

現行サイトは店舗の雰囲気と調和している一方、レイアウトが単調で各コンテンツの区別がつきにくく、情報を把握しづらい点が課題でした。また、情報を無理にシングルページへ集約していることで導線が分かりにくく、グローバルナビゲーションの項目と内容が一致していない印象もありました。カフェ・サロン・レンタルなど複数のサービスを展開している施設であるため、情報量が多くなりやすく、世界観を保ちながら魅力を整理して伝える設計が求められていました。

目的

情報の分かりにくさを解消し、施設全体の魅力と世界観を整理して伝えることで、訪れる前から「ここで過ごす時間」をイメージできる分かりやすいサイトを目指しました。

ターゲット

海を望むロケーションや空間の心地よさを重視し、日常から少し離れた特別感のある時間を過ごしたい30〜50代の男女。
デートや友人との食事など特別なひとときを求めて訪れる層に加え、撮影やイベントなどスタジオレンタルを目的に利用する20〜30代の女性やカップルも想定。

情報設計

多様なサービスを展開する施設であることから、スクロールするごとに雑誌をめくるように楽しめる構成を意識しました。ファーストビューで施設の世界観を印象づけ、その後に各サービスを体験の流れに沿って紹介することで、直感的に内容を理解できる設計としています。写真を軸に空間の心地よさや非日常感を伝え、スクロールによって体験が連続していくような流れをつくることで、全体像を自然に把握できる構成としました。

デザイン

白を基調とした配色と大きな余白を活かし、開放感と静けさを感じられるトーンにまとめました。装飾は最小限に抑え、写真と文字の配置によって空気感が伝わるバランスを意識しています。写真素材は彩度が高かったため、彩度を抑えつつ黒の透明レイヤーを重ねることで、全体の雰囲気が統一されるよう調整しました。CAFE MENUでは料理の魅力をダイレクトに伝えながら整理して見せるため、写真の切り抜きを採用。余白と組み合わせることで、洗練された印象や統一感のある世界観、上質さを演出しています。

使用フォント

しっぽり明朝 / Trajan Sans Pro
本文には「しっぽり明朝」を使用し、やわらかさと上品さを持たせながら、落ち着いて読み進められる可読性を重視しました。見出しには「Trajan Sans Pro」を採用し、クラシックで洗練された印象を加えることで、情報の区切りを明確にしつつ全体の世界観を引き締めています。

配色

#FFFFFF

#0F1419

#D9E8EF

#F8F8F8

ホワイトをベースに、海や空を連想させる淡いブルーやベージュを取り入れています。彩度を抑えることで写真との調和を保ち、落ち着いた印象になるよう調整しました。

使用ツール

Figma / Photoshop

制作期間

企画・WF：約7時間
デザイン：約15時間