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

う〜ん
ウェブデザインをしているけど何を気をつけたら良いのかわからないな〜😭

ほしちゃん!
今日も頑張っているね♪
僕が、初心者ウェブデザインするときのポイントについて説明していくね(^_^)

くりくん、、、
いつもありがとう😢

ウェブデザインをする時に注意すべきポイントはこの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: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選」というテーマでウェブデザインの基礎をお伝えしました。最近では、アニメーションや派手なレイアウトを使用されているサイトが多く存在します。しかし、基本に忠実にデザインを制作するだけでも十分にユーザーの読みやすいサイトは制作する事ができるので基本はしっかり抑えておきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA