初心者がWebデザインするときに必ず気をつけるべきこと
こんにちは、ゆうきです。
今回は、初心者がWebデザインする時の注意すべきことについて解説していきます。
これは、今日から実践できることなので是非最後までご覧ください。
本文のフォントサイズは14px～18px
フォントサイズの指定はとても大切です。なぜかというと、フォントサイズの指定によってユーザーの見やすさは大きく異なるからです。
少しでも読みやすく、ユーザーに優しいサイトにするためにもフォントサイズの指定方法はしっかりと理解しましょう。
なぜ、14px～18pxに指定するのが良いのか
Googleが推奨しているフォントサイズは16pxです。そこからサイトのコンセプトによってプラスマイナス2pxをおススメします。
もちろんGoogleで推奨されている16pxにしておけば間違いないのですが、多くのサイトで指定されている16pxよりも小さくしたり、大きくしたりすることでユーザーへの印象を操作することができます。
具体的には、14pxにすることで通常よりもフォントサイズが小さく余白の多いサイトにすることができます。
これにより、高級感やおしゃれさをユーザーに感じてもらうことができます。
反対に、フォントサイズを18pxに指定すると年齢層の高いユーザーがターゲットのサイトでは読みやすいサイトになります。
近年、スマホを持つ年齢層が高くなっているので世代によって変えることも重要となります。
サイトのコンセプトやターゲット層に合わせてフォントサイズを調整してあげることでユーザーに優しいサイトにできるのでしっかりと考えてデザインするようにしましょう！
ヘッダーの高さは70～100pxに指定しよう
なぜ、ヘッダーの高さは70～100pxがいいのかというと、多くのサイトで使用されているからです。
多くのサイトで使用されているデザインを採用すると、ユーザーの違和感を排除することができ、結果的にサイトから離れてしまう離脱率を下げることができます。
そのため、違和感のない70～100pxをおすすめします。
本文の文字色を#000にするのは避ける
本文の文字色は#000（真っ黒）にするのは避けましょう。
というのは、#000を使用するとユーザーの目が疲れやすく離脱率を上げてしまうからです。
目が疲れやすくなってしまう理由としては、背景が#FFF（真っ白）であった場合にコントラストが強すぎてしまうことが考えられます。
なので、背景が#fffの場合はコントラストを#000よりも弱めるために#333を使用しましょう！
このような細かな点まで配慮してあげることでユーザーの目が疲れにくい優しいサイトが制作できます。
line-height: 1.5～2に指定しよう
そもそもline-heightは行間のことを意味します。
行間をできる限りユーザーの見やすいものにすることでユーザーに優しいサイトを制作することができます。
line-height: 1.5～2が良い理由は、多くのサイトで使用されていることや多くのサイトで推奨されていることが挙げられます。
行間もしっかりと調整してユーザーの見やすいサイト制作を心がけましょう！
まとめ
どうでしたか？
今回の記事の要点をまとめると、
・本文のフォントサイズは14～18pxで指定する
・ヘッダーの高さを70～100pxに指定する
・本文の文字色は#000にしないで#333にするのがおすすめ
・line-height: 1.5～2で指定する
です。
この要点を早く自分のものにするためには、
Step1 この記事の内容を理解する
Step2 コーディングする際に実践してみる
Step3 実践したものを見てさらに調整していく
是非このStep通りに実践してみてください。
現在、プログラミング初心者の方限定でたった2週間でWebデザイナーになりたい方を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
