基礎的なWEBデザインの考え方 簡単なポイントに注意すればそれなりに見える

良いデザインは何かというのは難しいですが、結局のところ見やすいか、読みやすいかということに尽きると思います。アフィリエイトやブログにおいては文章が重要なのは間違いありませんが、やはり違和感のあるデザインというのは、それだけで違和感を与えるきっかけになってしまうので、デザインを軽視することはできません。

ということで、今回は基本的なウェブデザインの考え方について解説していきます。

デザインの勉強は良い見本を真似すること

時代によってWEBデザインも様々な流行りがあります。近年ではフラットデザインと呼ばれるシンプルなスタイルが推奨されていました。ただ、結局のところ見やすくて違和感を感じさせないデザインであればなんでも良い訳です。

さて、そんなWEBデザインの勉強ですが、良い見本を真似して感覚を身に着けるのが最短であり最善な方法と考えます。

世の中にはWEBサイトはごまんと溢れています。その中で自分自身が一番見やすい、読みやすい、真似したいと思ったデザインを自分のサイトに反映するという作業が最適だと思うわけです。

そこで個人的にお勧めしたいのが新聞社や大手メディアのウェブサイトです。こういったサイトはそれこそ専門的なデザイナーがバランスを考慮して、フォントの種類からサイズ、ボタンの配色、行間、写真の大きさ、各要素のレイアウトまで調整されたものになっているわけです。なんならA/Bテストを繰り返し、最適と判断したものが現在の形である可能性が高い訳です。

僕自身、Amazonのボタンの配色を流用したり、フォントを新聞社のサイトと同じものを利用したりするなど、他のサイトを見て参考にすることは多々あります。それは恥ずかしいことではないですし、むしろ良い物は積極的に取り入れることでサイトのデザインがより洗練されたものになっていくわけです。

余白と配置のバランスを意識する

では具体的なポイントを挙げていきますが、最初に意識したいのは余白と配置のバランスです。どんなデザインであれ、これらのバランスが崩れていては見づらくて仕方ありません。具体的には以下のような感じになります。

特に気にしないといけないのは
①幅をしっかり揃える
②左右の余白もバランスを見て調整
③段落ごとに適切な余白を入れる
といったことです。このバランスが取れるだけでも見やすいデザインになります。

こちらが実際の当サイトの記事です。ちょっと文章を修正したい箇所もありますが、比較的バランスが取れたデザインになっているかと思います。これが要素ごとに幅の異なっているものだと、それだけで見づらいデザインとなってしまいます。

配色はできるだけ少なく

配色は一番悩むところでしょう。そのサイトの印象を大きく変化させますし、購買意欲、要するに広告のクリック率(CTR)にも影響を及ぼすことは広く知られています。

明度や彩度、暖色や寒色、各色における印象の与え方、色相環を用いた類似色や反対色・・・など、配色に関しての知識を細かく挙げていくとキリがありませんが、こちらも見やすいかどうかを意識していけばいいだけで、注意すべきポイントはそこまで多くはありません。

色数は3色程度に抑えること

多くの色が混在するとバランスを取るのが難しく、デザインとして成立させるにはそれこそセンスが問われます。ですが3色程度で抑えようと意識さえすれば、簡単にバランスを取ることができます。

当サイトの場合でも、背景のグレー、記事背景の白、見出しなどの青緑の3色を基本としています。色数が少ないほど写真などを載せた時にそれが際立ちますし、下線や赤文字、強調などにも目が行きやすくなります。

配色の参考になるサイト

配色の参考にできるようなサイトはいくつもありますが、こちらでは代表的で使いやすいサイトを紹介します。好きな色を選べばそれと合う色を自動的に見つけてくれるようなサービスなので、誰でもバランスの取れた組み合わせを見つけることが可能です。

Adobe Color
https://color.adobe.com/ja/create/color-wheel

Scheme Color
https://www.schemecolor.com/

ColorDrop
https://colordrop.io/

Colorhunt
https://colorhunt.co/

文字色について

文字は黒(#000)でもいいのですが、多くのサイトでは多少グレー寄りの色(#333など)が使用される傾向にあります。これにより文字がわずかに見やすくなるという特徴がありますが、このように文字色１つを取っても細かい配慮が良いデザインを作り上げるわけです。いきなり全てが上手くいくことは稀ですが、気になった部分は徐々に改善していくといいでしょう。

フォントサイズは14pxもしくは16pxを基本に

フォントサイズ、要するに文字のサイズは悩ましい問題の１つです。フォントサイズを12pxなど小さくすれば、同じスペースに多くの情報を詰め込めるため好まれがちです。ですが、ユーザビリティの観点からすれば小さすぎて読みづらいでしょう。これはスマホやPCでの表示でも差があります。

そして多くのサイトでは現在、14～16px程度を中心に構成されているケースがほとんどです。もちろんサイトのデザインなどによっては18pxを使うようなケースもあります。ただ、レスポンシブデザインが基本となっている現在、そこはPCやスマホから実際に確認してみて調整するべきでしょう。

というのも、paddingやmarginなどの余白の取り方、各要素の配置、色などによっても見やすさが変わるため、一概にどのサイズが最適とは言いづらいためです。

まとめ

今回は特に基礎的なWEBデザイン上の注意点を挙げていきました。WEBデザインは正直難しいですし、完全な正解なんていうものはありません。もしそれがあるとするならば、どのサイトもデザインが変更されることなんてないわけですが、有名な大手サイトでさえ何度もデザインが変更されています。

ただ、僕が実際に色んなサイトを見たとき、見づらいと感じるサイトの多くは、余白の取り方がおかしく幅が揃っていなかったり、色を使いすぎていたり、文字がサイズがおかしいというケースがほとんどですので、これらのポイントにさえ気を付ければそれなりに整ったデザインに修正するこは可能です。

冒頭でも述べましたが、良いデザインを学ぶには自分がいいと思ったサイトのデザインを取り入れるのが最善です。積極的に参考にして自分のサイトに取り入れて、見やすいサイトデザインを意識しましょう。