この記事の監修者
デザインを作ってみたい！！でも何を気をつけたらいいかわからない。。。
こんなお悩みありませんか？
この記事ではWebデザイン初心者の方でも知っておきたいポイントを7つあげました！
知りたい！
簡単な内容から知っておきたいな…
【先に結論】
ウェブデザインをする時に注意すべきポイントはこの７個だよ！
- 本文のフォントサイズは14px〜18px
- ヘッダーの高さは70~100pxくらい
- 本文の文字色→#000は避ける
- line-height: 1.5〜2
- letter-spacing: .05em〜0.1em
- コンテンツ幅1000px前後
- セクション間の余白150px〜200px
本文のフォントサイズは14px〜18px
本文のフォントサイズは、14px〜18pxに指定しましょう！
フォントサイズの指定は何気なくしがちですが、基本を抑えることで効率的にウェブデザインを学ぶ事ができますのでしっかり読んでくださいね♪
フォントサイズの指定はとても大切
フォントサイズの指定はとても大切です。
なぜかというと、フォントサイズの指定によってユーザーの見やすさは大きく異なるからです。少しでも読みやすく、ユーザーに優しいサイトにするためもフォントサイズの指定方法はしっかりと理解しましょう。
なぜ、14px~18pxに指定するのが良いのか
グーグルが推奨しているフォントサイズは16pxです。そこからサイトのコンセプトによってプラスマイナス2pxをおすすめしています。
もちろんグーグルで推奨されている16pxにしておけば間違いないのですが、多くのサイトで指定されている16pxよりも小さくしたり、大きくしたりすることでユーザーへの印象を操作することができます。
具体的には、14pxにすることで通常よりもフォントサイズが小さく余白の多いサイトにすることができます。これにより、高級感やおしゃれさをユーザーに感じてもらうことができます。
反対に、フォントサイズを18pxに指定すると年齢層の高いユーザーがターゲットのサイトでは読みやすいサイトになります。近年、スマホを持つ年齢層が高くなっているので世代によって変えることも重要となります。
サイトのコンセプトやターゲット層に合わせてフォントサイズを調整してあげることでユーザーに優しいサイトにできるのでしっかりと考えてデザインするようにしましょう！
- 本文のフォントサイズは14px~18pxで指定する
- 14pxは若い世代に対して高級感やおしゃれな印象を与える時に使用する
- 18pxは年齢層の高い世代に対しての優しさ
ヘッダーの高さは70~100pxに指定しよう
ヘッダーの高さは70~100pxに指定しましょう！意識せずに指定すると大きすぎてしまうことがあるのでしっかりと理解しましょう！
なぜ、ヘッダーの高さは70~100pxが良いのか
なぜ、ヘッダーの高さは70~100pxが良いのかというと、多くのサイトで使用されているからです。
多くのサイトで使用されているデザインを採用すると、ユーザーの違和感を排除することができ、結果的にサイトから離れてしまう離脱率を下げることができます。
そのため、違和感のない70~100pxをおすすめしています。
ヘッダーのフォントサイズも注意しよう
ヘッダーのフォントサイズは、サイトの本文で使用しているフォントサイズを使用することをおすすめします。
多くのデザイン初学者の方は、ヘッダーのフォントサイズを本文の1.5倍ほど大きくしてしまいます。しっかりと注意してフォントサイズを指定しましょう！
※最近では、ファーストビューに大きく綺麗な画像を使用しているサイトではヘッダーの背景を透明にしたり、PCサイトでもハンバーガーメニューを使用しているサイトもあります。
- ヘッダーの高さを70~100pxに指定しよう
- ヘッダーのフォントサイズは本文と同じにするのがおすすめ
本文の文字色を#000にするのは避ける
本文の文字色は#000（真っ黒）にするのは避けましょう。
なぜ、本文の文字色を#000するのを避けるのか
#000を使用するとユーザーの目が疲れやすく、離脱率をあげてしまうからです。目が疲れやすくなってしまう理由としては、背景が#FFF(真っ白)であった場合にコントラストが強すぎてしまうことが考えられます。
そのため、ブログやメディアなど文字量の多いサイトでは特に#000は使用しないように注意しましょう。
本文の文字色は何色にするべきなのか
#000が本文で使用してはいけないとなると、文字色を何色にすべきか悩んでしまうかと思います。背景が#fffの場合は、コントラストを#000よりも弱めるために#333を使用しましょう！
このような細かな点まで配慮してあげることでユーザーの目が疲れにくい優しいサイトが制作できます♪
- 本文の文字色は#000にしない
- 本文の文字色は#333がおすすめ！
line-height: 1.5〜2に指定しよう
line-height: 1.5〜2に指定することがおすすめです！
そもそもline-heightとは？
line-heightとは行間のことを意味します。行間をできる限りユーザーの見やすいものにすることでユーザーに優しいサイトを制作することができます。
なぜ、line-height: 1.5〜2が良いのか
line-height: 1.5〜2が良い理由は、多くのサイトで使用されていることや多くのサイトで推奨されていることが挙げられます。とはいえ、実際に見てみるのが早いかと思うので下記で確認してみてください！
行間もしっかりと調整してユーザーの見やすいサイト制作を心がけましょう！
- line-heightとは行間を意味する
- line-height: 1.5〜2で指定する
letter-spacing: 0.05em〜0.1emに指定しよう
letter-spacing: 0.05em〜0.1emに指定することがおすすめです！
そもそもletter-spacingとは？
letter-spacingとは、文字間のことを意味します。文章の読みやすさを左右するものなのでしっかりと指定をしましょう！
なぜ、letter-spacing: .05em〜0.1emが良いのか
実際に見てみると、letter-spacing:0.06emとletter-spacing:0.3emを比較してみると後者の方では文字間が広すぎる印象を受けるかと思います。
一概にこれが良いとはいえませんが、デザインに慣れるまでは、letter-spacing: 0.05em〜0.1emで調整することをおすすめします。
- letter-spacingとは、文字間のことを意味する
- letter-spacing: 0.05em〜0.1emで指定する
コンテンツ幅1000px前後に指定しよう
コンテンツの幅は1000前後で指定しましょう。コンテンツ幅を気にせずデザインしてしまうと、PCの画面サイズによっては見づらいサイトになってしまうので注意してデザインしよう！
コンテンツ幅とは？
コンテンツ幅とは、Webサイトのコンテンツの幅のことを意味します。
コンテンツ幅という言葉はウェブ制作の中でよく使用する言葉なので、しっかり覚えておくようにしましょう！
なぜコンテンツ幅1000px前後が良いのか
なぜ、コンテンツ幅が1000px前後が良いかというと、多くのユーザーが一番見やすいコンテンツ幅であるからです。何となく決めてしまうのではなくしっかりと意識してデザインを制作するようにしましょう！
セクション間の余白150px〜200pxに指定しよう
セクション間の余白は150〜200pxに指定しましょう。デザインのテイストにもよりますが、余白の見せ方、指定の仕方はサイトの雰囲気に大きく関わるの注意してデザインするようにしましょう！
セクション間の余白とは？
セクション間の余白とは、Webサイトのセクション余白のことを意味します。
セクション間の余白という言葉もウェブ制作をしていると聞く機会のある言葉なので、しっかり覚えておくようにしましょう！
なぜ、セクション間の余白150px〜200pxが良いのか
なぜ、セクション間の余白150px〜200pxが良いかというと、使用されていることが多いからです。最近では、極端に広かったり狭かったりと様々な大きさの余白が使用されていますが、最初は基本を抑えるためにも150px〜200pxで指定してみましょう！
まとめ
今回は「初心者がWebデザインするときに必ず気をつけるべきこと7選」というテーマでウェブデザインの基礎をお伝えしました。
もちろんデザインに正解にはありませんので、ここで紹介した内容だけ守っておけばOKという簡単な話ではありません。ただ「どんな内容を意識しておけばいいのか」というポイントは理解できたかと思います！
最近では、アニメーションや派手なレイアウトを使用されているサイトが多く存在します。
しかし、基本に忠実にデザインを制作するだけでも十分にユーザーの読みやすいサイトは制作する事ができるので基本はしっかり抑えておきましょう！
