デザイン

この架空のサイトデザインをする上で行ったデザイン戦略を記します。

ブランディング

企業のブランド戦略を固めます。

企業名・キャッチコピーについて

企業名

フランスパン専門店  FBF（FRANCE BEKERY FACTORY）

企業名の由来

ロゴについて

識別記号

• フランスパンと麦（看板メニューと原材料の組み合わせ）

• フランスパンと麦のマークを思い出す（識別記号の認識）
• 「おだやかでなごやかな気分」を想像する（知覚価値の認識）
• 「おだやかでなごやかな気分」で「伝統的な硬いパン」を食べたい（識別記号から知覚価値を想起）

マーケティング

差別化戦略（コンセプト）

• 「各店舗の地域で取れた名物」を使用したフランスパン→地域の味をフランスパンを通して旅行客にも楽しんでもらいたい
• フランスパンのラインナップをこれまでにないほど豊富に（※開店時は予算が少ないので→定番のフランスパンを優先する）→毎日の朝食に選ばれるように、朝ご飯の代わりに食べてみたくなるパン
• フランスパン専門店の少ない地域（北海道や沖縄など都心と離れた場所）に出店→都心とは離れた地域にあるフランスパンのニーズ
• 日本を愛好するフランス人オーナーのおいしいフランスパン→フランス人の作るフランスパンを食べたいニーズ
• ソフトフランスパンを販売→柔らかめで食べやすく
• 相場相応または安価で提供→品質を保ちつつ、気軽に試食してもらえるように

KPI 戦略

ビジュアル（UI / UX）

主な使用ユーザである「スマホ使用ユーザ」を想定し、「スマホに最適化されたデザイン」を設定

PCよりSPを優先させるため、「カンプはSPから作成」と定めました。

TOPページビジュアルはこちら

こちらから「フランスパン専門店」のコーディングデータ（デザインデータ含む）のGITへアクセスできます

※読み込みに時間がかかります

※スライドして、SP版（スマホ版）のカンプを中心にご覧下さい

以下の項目からはビジュアルをご覧になりながらお読みいただけますと幸いです。　

イメージスケール（カラースキーム）

「鈍色」に近い色合いを使用

「古風な」の配色を使用しました

代表イメージ「自然な」を使用

「ゆとりのある」と「ゆったりした」を使用しました

レイアウト

デザインの原則を守る

• 近接→関連する要素は近づけ、関連しない要素は離れた場所に置く
• 整列→コンテンツ幅を定め、要素を中央揃えに※一部左揃えあり
• 反復→要素間の間隔を一定にし、規則性を持たせたマージンに
• アクセント→全体のデザインの統一感を持たせつつ、「ボタンなどの注目を集めて欲しい要素」を目立たせて行動を促す

心理学の原則を守る（書籍：「インターフェースデザインの心理学（旧）・（続）」より）

• 「人は左右対称を好む」→左右対称にすると決め、左右対照が崩れすぎないようにデザイン
• 「十分なコントラスト」→前景色（文字色）を見やすくする背景色に
• 「一般的には短い行の方が好まれる」→短く端的に（１行の文字量を増やしすぎず、減らしすぎずを心がける）
• 「言葉よりも視覚的記憶の方が思い出せる」→写真を適切に挟む（効果的な画像が１枚もないページを無くす）
• 「感情が視線より効果的」→笑顔の写真を使う

コーディング

FLOCSSを用いて設計・レスポンシブ対応しました。

私の設計したFLOCSSの手法はPRECSSの手法も参考にしました。

詳しくはこちらの記事で全て解説しております

また、コーディングデータをGitHubに上げております。

こちらから「フランスパン専門店」のコーディングデータ（デザインデータ含む）のGitHubへアクセスできます

※コーディングデータは現在320px〜600pxまでのTOPページのみになっております