デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。

デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。
デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。

先月ギャラリーサイトのまとめ記事を書きましたが、最近ほんとに増えましたよね。人が作ったサイトを見るのは楽しくて、ついつい毎日新しいものを探しています。人が作った素晴らしいサイトを見ては、自分との差を感じてしまいがちですが、落ち込んでもしょうがないので参考になるポイントを意識して見つけるように心がけています。というわけで、今回は「デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。」というテーマで書いてみたいと思います。

1.余白の取り方

余白の使い方次第で見やすさも格段に変わってくるぐらい大事な余白の取り方。ですが、自分で上達しようと思ってもなかなか難しいです。なので、見やすいサイトを見かけた時にはどういう余白の取り方をしているのか参考にしています。余白の取り方よく分からない!という方は、大まかにグループ分けしてその間は○○px空ける、など簡単なルールを決めるとまとまりが出ますよ。

2.文字の大きさと行間

文字が大きいと子供っぽく見えたり、行間が空きすぎると読みづらさにつながったりします。ただどういう大きさや行間にするかは、そのサイトの目的によって変わってくるのでどういうサイトがどのような文字サイズや行間になっているのか、ということを気をつけて見たりしています。目が疲れずに読めるなーと思った時は、文字サイズや行間に注目してみるとヒントがあるかもしれません。

3.使っている色の数と配置

配色は注目されやすいテーマですが、それだけ配色って苦手!と思う人も多いと思います。サイト上で使われる色は、単純なそのサイトのテーマカラー(企業カラー等)のほかにも、色の使い方によって与える印象も変わってくるためとても重要な要素です。色々なサイトを見ていると、特定の色を強調するために使う色を限りなく少なくしたり、楽しいイメージを伝えるために明度の高い色を多く使ったりと、細かい工夫がされていることに気付きます。

4.文章の書き方

文字の大きさや行間も大事ですが、文章そのものにも注目してみるのも良いと思います。読みやすい文章は、句読点が調度良い場所にあり、リズム良く読むことができます。一文の長さが長すぎないように工夫したり、漢字とひらがなの使い分け、横文字(カタカナ文字)が多すぎないようにするなど、工夫できることは沢山あります。読みやすい文章だとサイトの印象も良くなりますよね。

5.メニューの配置

メニューは基本的に目につくヘッダーの目立つ位置に配置されることが多いですが、目につくからこそ力を入れているサイトも多いです。「Webサイトで見るメニューのレイアウト・デザインいろいろ」でも紹介しましたが、メニューだけでもレイアウトや種類は沢山あります。バランス、文字の大きさ、色、配置などメニューには様々な要素が凝縮されているので、日ごろメニューだけでも注目してみるのも良いと思います。

6.ファビコンのデザイン

ファビコンはサイズが小さいので、その中で表現できるデザインにはサイトデザインと比べると制限が多いです。シンプルで見やすいものを使ったサイトが多いですが、サイトの構成にこだわりを感じるところは、ファビコンもとても見やすく作られている場合が多いです。基本的には企業ロゴを単純に縮小したもの以外にも、丸や四角、ハートといった簡単な図形や、1文字(多くても2文字)で表現されているものが多いようです。

7.レイアウトを真似てみる

見る以上に、実際に手を動かしてみるとさらにスキルアップできます!ちょっと気になる、と思ったサイトを見つけたら、ロゴの位置やメニューの配置、どこにバナーがあって、どこにテキストがあるか、などワイヤーフレームを作ってみるのも良いです。普段自分がやらないようなレイアウトの引き出しが増えるので、役に立つと思います。実際にバナーやロゴなども真似して作ってみると、グラフィックソフトの操作も上達しそうです。

8.写真の選別&使用度合い

人の写真は訴求効果があったり、写真があるだけで雰囲気ががらっと良くなることはあります。でも実際にどういう写真だったら合うんだろう…?と迷う人も多いと思います。そういう時は同じジャンルのサイトを参考にして、どういう写真を使っているのか、ひとつのページにどれぐらい画像を使っているか、ということに注目してみると参考になると思います。分からないことはまず人が作ったものをお手本にするのは、スキルアップの近道にもなりますね。

9.何クリックで必要な情報が見られるか

3クリックルールという言葉があるように、少ないクリック数で必要な情報を見ることができるサイトは、サイトの構成や導線がしっかりしているということになります。トップページに特に必要な情報にたどりつけるようにリンクやバナーがあったり、フッターにサイトマップが配置されていたり、無駄なページが増えないように全体の情報をうまくグループ分けしたりと、工夫されているポイントをたくさん見かけます。

10.ファーストビューで目に入ってくるもの

最初に見た時に、ぱっと目に飛び込んでくるもの。あるサイトはそれがロゴだったり、またバナーだったり、キャッチコピーだったりします。もっとも注目してもらいたい部分に自然と目がいくデザインは、見る人に伝えたい情報を正しく伝えるというメリットがあります。じゃあロゴが目立つサイトは、何に工夫しているんだろう?といった部分に着目すると、それは色だったり配置だったり、余白だったり、という部分に気付くことができると思います。

おわりに

というわけで日ごろサイトを見ている時に注目していることで思いつく限り書いてみました。こうしてみると、良いデザインには沢山の要素がつまっていることが分かりますね。自分の苦手な部分を改善しつつ、得意な部分はより良いものが作れるように、日ごろ何気なく見ているサイトに注目してみるのもオススメです。それではー!!

関連記事を読む

デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]