この記事を読むのに必要な時間は約 4 分です。

サイトと初対面のユーザーが「見てみようかな」と思ってくれる大事なファーストビュー

ファーストビューとは、Webサイトを表示したときにスクロールせずに最初に見えるところ。
メラビアンの法則では3秒〜5秒。

メニューやキャッチコピーをテキスト入力。テキストの間隔や、フォントの大きさを、ココ↓で調整しまくる。
こんなシンプルなデザインなのに、一番手こずりました!(1時間は軽くかかりました)

色の大事さ

全体的に『美しい』と思わせるのは色
Photoshopでカラーをつける時、メインカラー・アクセントカラー、フォントの色を変えながら作業していきます。

そんな時は長方形をあえて作っておき、カラーをつけておきます。ココでスポイトで色を付けることができます。スポイトしたい色を、いちいち探しに行かなくて便利。

コレでもわかるように、使用する色の数はほんの少し
アクセントカラーで、ユーザーの注意を引くことができます。

自分でデザインする時は、この色を少なくしてまとまりを見せるのが、実は一番難しい!

些細な演出

この微妙な影。「ここをクリックしたら何かが起こるよ〜」ってサインですね笑。
この白い長方形のレイヤーに対して、ドロップシャドウをしています。レイヤーの右端をクリックするとレイヤースタイルが現れます。

で、このレイヤースタイルの「カラーオーバーレイ」やら、「ドロップシャドウ」の角度を変えたり、色々と試していきました。

フラットデザインが素敵だなと思っていても、些細な演出はやっぱり効果的!

最後の仕上げはレイヤーの整理

やってみてください、レイヤーの数と順番がぐちゃぐちゃになりますから!笑

もし、コレがクライアントからの修正が入ったとして。修正する時にレイヤーがアッチャコッチャ行ってたら、作業時間のロスになります。

ぜひ、時間のあるうちにレイヤーの整理はしておいてくださいね。

模写での気づき

こんなシンプルなWebサイトなのに、かかった時間はトータルで7時間
(全体的なスクショを教えてもらうまでの余計な時間を含まず)

私の技術不足もありますが、なんといってもデザインされた方の意図が流れ込んでくるということ!結果、微調整に魂を込めました!
そして、Webサイトって「誰のもの?」やっぱりユーザーじゃん!って再認識。

さらに!
自分の時間の使い方!
コレぐらいの時間でできるだろう、ではなくて「この時間内でするには、どうしたらいいのか」をもっと真面目に考えようと思いました。

次にやってみたいこと

自分の好きなサイトって、偏ってませんか?
そこをあえて外してみようかなと。

ゴッテゴテのデザインのWebサイトに挑戦したいな〜と思ってます!(ゴッテゴテがかなり難しいらしいので、もうワンクッションおいてからにしようかな…)

岡田さん曰く
3つ、模写したらデザイン力、高まる』!

 

The following two tabs change content below.
YON

YON

Wizco・WEB制作コース第一期生。 45歳主婦・4人の子供をもち「もっと時間がほしい」といつも願ってる。 目指すは友達のエステサロンのWEBサイト制作! 趣味はパステルアートと習字。
YON

最新記事 by YON (全て見る)