Cool
製作者 : Niccolò Miranda
第一印象 : Cool / Artistic
ターゲット: 男性 20~30代
目的 : フットウェアー
【Font】
Font : Whyte Inktrap,sans-serif
Navigation : #FFF
Color : #d5d0ca
Accent Color : #d32d08
Accent Color : #903900
【Background Color】
・Top : #151515
・Navigation : #151515
・About : #FFF
・採用情報 : #4c3d32
【サイト構成】
・Header
・Hamburger menu
・Top
・About
・Service
→industrialization
→industrialization
・News
→reduce-co2-emissions-to-protect-nature
→moving-from-thought-to-action-at-a-reduce-cost
・Contact
【デザインポイント】
▶︎Top
シンプル、押したくなるボタンを中心としたデザイン。
▶︎About
・スライドした時にシューズのイラストと見出し文が動く。
シューズのイラストは動きの後に色が変わり、重要なシューズの部品に目 が付くような仕組みに。
・背景がノートのようなデザインになっている為、馴染みのあるデザインで読み進めやすい。
▶︎Hamburger menu
あえてハンバーガーのメニューボタンの線がズレており、
メニューを開くと閉じるボタンの×に変形する動きがスマート。
▶︎Footer
完全に区切りのあるフッターではない為、自然と読み進められるような配置設定。
採用情報/ 会社の理念 / インスタグラム情報 / ニュースレター 購読の案内 / 住所 /
【実装のポイント】
・Hamburger menuボタン
・文章の配置、写真の配置が視線を誘導するような流れで配置
・ボタンになっている写真はカーソルを当てると動き、ボタンの役割を持っている事が分かりやすい。
・ボタンの背景色が黒で背景とメリハリがあり分かりやすい
・小さいフォントサイズを採用しているが、文字の強弱があり見やすい。
また、文字が小さくても社名や見出しは色が着いている為自然と目がいく。
この記事が気に入ったらサポートをしてみませんか?