老舗イメージを出し、製品へのこだわりが伝わるサイト
ロゴ:力強い印象を与える。ロゴに創業年を書くことで一目で老舗店ということがわかる

◾️大まかなレイアウト、余白の撮り方
・余白の多さ
・一番視点が集まる設計
・視点を誘導させる工夫
・(グリッド的に)揃っているところ、外しているところ

■レイアウト
2カラム(PC版) スクロールすると左メニュー欄幅が小さくなる
※モバイル版は上部にメニュー、スクロールすると消える。

■視点が集まる設計ポイント
トップに作業様子の写真を表示することで、職人技やこだわりが感じられる

■余白
各項目が100vh程の大きさで設定されているため、十分に余白がとられている。
タイトルとリード文の余白も多めにとられているので見やすく、老舗の雰囲気をだしている

■配色
染料の鮮やかさを際立てさせる、モノトーンベースの配色。
また、モノトーンにすることで、伝統的なイメージがでる
アクセントカラーとして赤を用いている。
(写真も赤が際立つ写真が使われている)

◾️フォント:遊明朝
 見出し:28pt  メイン:14pt

◾️あしらい
・あしらいを使用しているか
・文字情報でのあしらいはあるか
・意図は?

■あしらい
・各メニューにふるった番号
→文字サイズは小さいながらも目立つデザイン。
 番号をふるうことで、新しい項目に移動した・この先も項目がいくつかあることがユーザーに意識させる
・READ MOREに下線
→他の要素との差別化
・各項目の区切れ:偶数項目の背景が画像
・布の模様を背景におく(PC版のみ)

外せないポイント
変えてもいいポイント

コメントを残す