動きも踏まえてデザインするということ。そんなもしゃ模写。#1day1design-35

静止画だけじゃ伝わらない不思議なもの。

長いこと、自分はウェブデザイナーになる前は出版社で雑誌のデザインを長く携わっていたこともあり。昨今のウェブデザインは”動きありき”のデザインが大事になってきた中で。

デザインをアウトプットする際に、静止画、だけじゃどうしてもエンジニアさんにもディレクターにも、最終的なアウトプットが見えにくく…実際に構築が出来上がった際も「あれ？これでよかったっけ？」なんて思うこともしばしばあるんじゃないかなぁと。

その中で、今回トレースさせていただいたサイト。静止画だとわかりにくいんですが、アクセスしていただけるとページ読み込みの際の動き、スクロールした際のワクワクさせる仕組み。実際にサイトをデザインする際にとても参考になったので、今日のもしゃ模写。

そんな、３５日目。

今回作成したデザイン。

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

コールセンターのインバウンド業務・アウトバウンド業務ならCRTM

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

デザインを作ってみて。

・ページのローディング、スクロールした際にパララックスでの背景固定からの動きが洗練されていて面白い。

・写真のレタッチがシャープに、それでいてページ切替の動きも相まって、このサイト独特の表情が出来上がっている。

・ロゴのorangeが映える形で、他に色を多用しておらず。基本的に白に黒。伝えたい所、アクセントになる部分との色の使い分けがとても上手。扱っているフォントがPoppinsのウェイトが太いこともあり、しっかりした信頼感も伝わる印象。

終わりに。

トレースする際によく気になるのが各要素のmarginのルール。自分は色々あって８の倍数で全て考えてはいるんですが。実際にそう整えているのはエンジニアさんの構築の際も、全体のデザインバランスもうまいこときれいに整うので。

その上で、「じゃあ他のサイトはどういうルールでmargin周り調整しているんだろう？」そう気になりまくった上でのトレースなのでやってみるとこれがこれでおもしろい。

今回のはリクルートサイトなんですが、やっぱり求人で会社に来て欲しい人材に「じゃあどういう印象を与えるか？」で選ばれたフォント、メッセージのフォント、アクセントに使っているフォント…などなど。

トレースするページ以外でもぜひぜひ勉強になるので見ていただけると幸い。

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