Webデザインをする時のおさえたいポイントと注意点をまとめてみた

こんにちは!ちづみ(@098ra0209)です!私は今カンボジアにいながらこの記事を書いています。ノマドワーカーです。

今回はウェブデザインをする時のチェックすべき点と注意点を備忘録としてまとめてみましたので、よかったら活用してください( ^ω^ )

ちづみ
私が使っているのは主にAdobeXDですが、どのツールでも生かせると思います!

今回はコチラのデザインを作ったので、ポイントを紹介して行きますよ!

私の場合、読みやすさ、わかりやすさを一番に重視して作っています。あんまり飛び抜けたデザインよりか、どちらかというと既視感のあるデザインを作っています。

 

ちづみ
今回はPCのデザインをする時に絞ってお届けするね!では上からじゃんじゃん行ってみよ〜!

 

幅、高さの注意点

 

おすすめアートボードの幅は1080pxから1480px

 

私の思うウェブデザインはアートボードを1080pxから1480pxにすることです。(アートボードとは、デザインを作る時のキャンバスの幅です。)デフォルト設定では1980pxのものが多いのですが、1980pxだと正直幅が大きすぎて、文字の表示なども小さくなりますので、ちょっとバランスがわかりづらいんですよ、、、。

実際ノートパソコンの大きさだと1280px前後ですので、そのくらいで作った方が実際の大きさが断然わかりやすいですよ!

今回のデザインの場合は1480pxにしています。

ちづみ
個人的には1480pxが一番しっくり来ていて作りやすいです。

 

ナビの高さは70pxから100pxに

 

で作っています!↑ここの幅のことで、このデザインの場合は75pxですね。

文字の大きさや、ロゴの大きさを考えたら、70pxから100pxくらいがちょうど良い高さかなと思います。

ヘッダー高さは1000px以下に

他のサイトを比べても、1000px以下に収めているところが多いです。

ファーストビューと言われていますが、例えばパッとページを開いた時に、スクロールなしで大体の雰囲気や情報がわかるのが理想です。そうなるとあまり長すぎるのはNGなので、1000px以下におさめるようにしています。

ちづみ
このデザインの場合はヘッダー画像は700pxにしているよ!

 

コンテンツ幅は980pxから1170pxに

 

↑ここの幅です。このデザインの場合は1020pxにしています。

コンテンツの幅をあんまり広くとってしまうと、目線の移動が大変になってくるので、ちょっとシュッとさせた、980pxから1170pxくらいが見やすいです!

ちづみ
コンテンツをしっかり見てもらうためにも幅は大事だね〜〜

 

2カラムのコンテンツを作るときは

ブログやコーポレートサイトによくあるやつですが、

 

こういう、メイン(1)とサブ(2)の2つのカラムがある場合は

1を70%、2を30%にしています。

 

幅、高さまとめ
  • アードボードは1080pxから1440px
  • ナビの高さは70pxから100px
  • ヘッダー高さは1000px以下に
  • コンテンツ幅は980pxから1170px
  • 2カラムのコンテンツの場合はメイン70%、サブ30%

 

 

フォントの注意点

 

私の気をつけているフォント編です。

文字サイズは基本14px以下にしない

 

14px以下は小さくて見づらいからです。せっかくいい内容でも読む前の段階で見づらくてストレスなのはもったいないですからね、、

これも基本14pxから20pxで作るのがいいですね!

 

でも一部だけ14px以下を使う部分がありまして、

こういうフッター下の部分は12pxとかで作るときが多いです。あまり読まなくても問題なさそうな部分はそうしています。ここ以外には14px以下は使わないですね。

 

 

セクションタイトルは32pxから50px

 

タイトル

これ実際に32pxにしてみました。セクションのタイトルに使うようなやつですね。

使うフォントの種類にも若干大きさは変わってきますので、目で見て調節しながら作りましょう。

 

フォントファミリーはベタな奴を

基本は

  • sans-serif(ゴシック)
  • メイリオ
  • ヒラギノ

この辺を使うようにしています。

見本デザインは游ゴシックです。

可愛いのがいい、とか、かっこいいのがいいと選んでしまうと、プラウザによってはないフォントもありますし、読み込みでページ速度が遅くなることもあります。

基本はこの辺を使うようにして、かっこいいフォント等はタイトル部分だけとかにしておいた方がいいと思います。

 

フォントまとめ
  • 文字サイズ14px20px
  • 文字サイズは14px以下は基本使わない!
  • タイトル32px〜50px
  • フォントファミリーは一般的なものを

カラーの注意点

最後にカラー編です。

 

文字の色は#000を使わない!

 

#000は何かというと、真っ黒黒の状態です。

 

この色ですね。#000は自然界にほぼない色なので、馴染みにくい上に色がきついのでちょっと目が疲れるんですよね。なので使わないようにしています。

基本は#333あたりを使うようにしています。若干のグレーが入っている色です。そのほうが馴染みますし、目にも優しいです。

 

メインカラーなどはテキトーに作らない!

テキトーに作ってしまうと色が浮きやすいのでしっかり参考サイトから色を作りようにしましょう!

参考サイトはコチラ
カラーまとめ
  • #000は使わず文字なら#333を
  • カラーは適当に作らず参考サイトなどから作る

 

余白を揃える

 

例えばセクションタイトルの上は100px空けるなど、余白を統一していきます。

そうすることによって整ったデザインになりますし、余白(margin)が統一されていた方がコーダーも作りやすいんですよね。

 

縦ラインを揃える

 

これはコンテンツ幅と似ているのですが、縦ラインをしっかり揃えて作ることによって全体的に整ったデザインになります。

 

 

私の作っているウェブデザインのポイントはこんな感じですね!参考になれば!!m(_ _)m

ちなみにWebデザインの勉強法はこちらにまとめていますのでぜひ!!

ホームページのデザインを独学するには?私の勉強法を紹介【模写から始めよう】

2018.09.08