老舗イメージを出し、製品へのこだわりが伝わるサイト
ロゴ:力強い印象を与える。ロゴに創業年を書くことで一目で老舗店ということがわかる
◾️大まかなレイアウト、余白の撮り方
・余白の多さ
・一番視点が集まる設計
・視点を誘導させる工夫
・(グリッド的に)揃っているところ、外しているところ
■レイアウト
2カラム(PC版) スクロールすると左メニュー欄幅が小さくなる
※モバイル版は上部にメニュー、スクロールすると消える。
■視点が集まる設計ポイント
トップに作業様子の写真を表示することで、職人技やこだわりが感じられる
■余白
各項目が100vh程の大きさで設定されているため、十分に余白がとられている。
タイトルとリード文の余白も多めにとられているので見やすく、老舗の雰囲気をだしている
■配色
染料の鮮やかさを際立てさせる、モノトーンベースの配色。
また、モノトーンにすることで、伝統的なイメージがでる
アクセントカラーとして赤を用いている。
(写真も赤が際立つ写真が使われている)
◾️フォント:遊明朝
見出し:28pt メイン:14pt
◾️あしらい
・あしらいを使用しているか
・文字情報でのあしらいはあるか
・意図は?
■あしらい
・各メニューにふるった番号
→文字サイズは小さいながらも目立つデザイン。
番号をふるうことで、新しい項目に移動した・この先も項目がいくつかあることがユーザーに意識させる
・READ MOREに下線
→他の要素との差別化
・各項目の区切れ:偶数項目の背景が画像
・布の模様を背景におく(PC版のみ)
外せないポイント
変えてもいいポイント
コメントを残す