初心者がWebデザインするときに必ず気をつけるべきこと7選

本文のフォントサイズは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:1;よりもline-height:1.5;の方が見やすいかと思います。行間もしっかりと調整してユーザーの見やすいサイト制作を心がけましょう！

まとめ

line-heightとは行間を意味する

line-height: 1.5〜2で指定する

letter-spacing: .05em〜0.1emに指定しよう

　letter-spacing: .05em〜0.1emに指定することがおすすめです！

そもそもletter-spacingとは？

　letter-spacingとは、文字間のことを意味します。文章の読みやすさを左右するものなのでしっかりと指定をしましょう！

なぜ、letter-spacing: .05em〜0.1emが良いのか

　letter-spacingの指定も、line-heightと同様感覚的なことになってしまうので実際にお見せします。

　実際に見てみると、letter-spacing:0.06emとletter-spacing:0.3emを比較してみると後者の方では文字間が広すぎる印象を受けるかと思います。一概にこれが良いとはいえませんが、デザインに慣れるまでは、letter-spacing: .05em〜0.1emで調整することをおすすめします。

まとめ

letter-spacingとは、文字間のことを意味する

letter-spacing: .05em〜0.1emで指定する

コンテンツ幅1000px前後に指定しよう

　コンテンツの幅は1000前後で指定しましょう！コンテンツ幅を気にせずデザインしてしまうと、PCの画面サイズによっては見づらいサイトになってしまうので注意してデザインしよう！

コンテンツ幅とは？

　コンテンツ幅とは、Webサイトのコンテンツの幅のことを意味します。

　コンテンツ幅という言葉はウェブ制作の中でよく使用する言葉なので、しっかり覚えておくようにしましょう！

なぜコンテンツ幅1000px前後が良いのか　

　なぜ、コンテンツ幅が1000px前後が良いかというと、多くのユーザーが一番見やすいコンテンツ幅であるからです。何となく決めてしまうのではなくしっかりと意識してデザインを制作するようにしましょう！

まとめ

コンテンツ幅は1000前後に指定する

セクション間の余白150px〜200pxに指定しよう

　セクション間の余白は150〜200pxに指定しましょう！デザインのテイストにもよりますが、余白の見せ方、指定の仕方はサイトの雰囲気に大きく関わるの注意してデザインするようにしましょう！

セクション間の余白とは？

　セクション間の余白とは、Webサイトのセクション余白のことを意味します。

　セクション間の余白という言葉もウェブ制作をしていると聞く機会のある言葉なので、しっかり覚えておくようにしましょう！

なぜ、セクション間の余白150px〜200pxが良いのか

　なぜ、セクション間の余白150px〜200pxが良いかというと、使用されていることが多いからです。最近では、極端に広かったり狭かったりと様々な大きさの余白が使用されていますが、最初は基本を抑えるためにも150px〜200pxで指定してみましょう！

まとめ

セクション間の余白150px〜200pxに指定する

まとめ

　今回は、「初心者がWebデザインするときに必ず気をつけるべきこと7選」というテーマでウェブデザインの基礎をお伝えしました。最近では、アニメーションや派手なレイアウトを使用されているサイトが多く存在します。しかし、基本に忠実にデザインを制作するだけでも十分にユーザーの読みやすいサイトは制作する事ができるので基本はしっかり抑えておきましょう！