見出し画像

スクロールした際のナビゲーションの変化もおもしろい。そんなもしゃ模写。#1day1design-41

細かいところの気配りが細かい。

スクロールした際にナビゲーション部分が変化する、ってよくある動きなんですが。実際に変化した際の細かいデザイン、挙動だったりって、細かすぎて目につかない分、トレースでサイトを探している際に最近はよくサイトを見る癖がついており、今回目に止まったのがこちら。

そもそもトップページのデザインの素晴らしさはそうなんですが、下層、フッター周りのデザインも良く、marginなどなど…ちょっと学ばせていただけたらと思い、今日もトレース。

そんな、41日目。

今回作成したデザイン。

画像1

ベースにさせていただいたデザイン様。

デザインルールについて。

画像2

デザインについて。

・今回は新たにフッター部分のデザインをトレース。トップのではなく、下層ページのものになりますが。

・ロゴ、ハンバーガーメニューが追従していく際に。ページ中の要素にかぶらないように配慮されている点が良き。特にコンバージョンに繋がるボタンだったり、魅せたい要素にも邪魔をしない抑えめなナビゲーションも好感。シンプルに要素をはぶいてるからこそ、ハンバーガーメニューがメニュー!ってよくわかるのも学び。

・ウィンドウサイズに合わせて「どの部分が可変」か。最近デザインをする際に特に考えてしまう部分。ユーザーにとってはウィンドウサイズなんてコロコロ変えるものじゃないので、目につかないかと思いますが。ウェブサイトを閲覧する際のユーザーってどんなウィンドウサイズでみているかまったくわからないので。そのサイズに合わせて崩れないものを提供したい所。ここも学びポイント。

終わりに。

トレースする際に手持ちにないフォントで構築されているサイトをやる!ていうときに、「はーこのフォント欲しい・・」て毎度のことながら思うんですが、今日はその「Helvetica Now」だったので、おぉ…と感嘆の一言。

実際にこういうサイトを作成する際に、ウェブフォントをどこまで扱うか、とか細かく仕様書を決めている段階で。ウェブサイトの運営にフォント料金まで払ってくれるクライアントさんになかなか出会わないので、ちょっとうらやましいところ。いや、デザインで納得させて…ていう自分の落ち度もあるんですが。むー。

それにしても、ウェブデザインが見れば見るほど紙よりも、ぐっとぐっと表現の幅が広がっていて、ついて行くのに本当に必死です…

明日もがんばろう、わたし。

この記事が気に入ったらサポートをしてみませんか?