フリーランスwebデザイナー / デザイン
カフェカフェflora & brew
【担当範囲】 構成/デザイン / コーディング / WordPress構築 【コンセプト】 居心地の良さを画面越しに伝えるデザイン。フォレストグリーン × アイボリーの配色で、訪れる前から「行きたい」と思わせる温かみと上質感を演出しました。 【制作時間】 デザイン:約15時間 コーディング:約12時間 合計:約27時間 【使用ツール】 Figma HTML / CSS / JavaScript WordPress 【こだわりポイント】 ① 配色と世界観の統一 フォレストグリーン × アイボリー × ウォームベージュで、カフェの空間そのものを画面上に再現。写真の色調とカラーパレットを揃えることで、ブランドの一体感を高めました。 ② 余白設計によるゆとり セクション間の余白を広めに取り、見る人がゆっくりと情報を受け取れるリズムを意識しました。情報を詰め込まず引き算のデザインを心がけています。 ③ メニューのタブUI Lunch / Dinner / Drinkをタブ切り替えで表示することで、スクロール量を減らしつつ視認性を確保。スマホでの操作感も重視した設計です。 ④ ファーストビューの没入感 カフェ内観の写真を大きく使い訪問者が直感的に、ここに行きたいと感じられるビジュアルを最優先にレイアウトしました。 ⑤ コーダーが実装しやすいFigmaデータの納品 オートレイアウト・コンポーネント化・Variables設定を徹底し、コーダーがそのままコーディングに入れる構造でFigmaデータを整備しました。