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

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

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

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

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

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

 

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

 

幅、高さの注意点

 

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

 

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

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

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

 

ナビの高さは50pxから100pxが主流

 

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

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

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

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

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

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

 

コンテンツ幅は900pxから1180pxが主流

 

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

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

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

 

セクション間の余白は100px前後が主流

 

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

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

 

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

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

 

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

 

 

フォントの注意点

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

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

以下テキストサイズの主流です。

見出し:25〜60px
本文:14〜16px
補足的なテキスト:10px〜14px

基本的には14px以上でテキストを作って行くのがいいと思います!

一部だけ14px以下を使う部分がありまして、このような補足的なテキストの場合は小さく表示させることが多いです。

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

 

 

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

 

タイトル

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

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

 

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

基本は

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

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

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

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

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

 

フォントまとめ
  • 一般文字サイズ14px20px
  • タイトル26px〜50px
  • フォントファミリーは一般的なものを

画像の注意点

画像の注意点です。

黄金比、白銀比でトリミングすると綺麗

画像のサイズですが、黄金比、白銀比といったように、馴染みがあり、この比率にするだけで整って見えるものはそのようにしたほうがいいと思います。

このあたりが黄金比で作ったものです。

私がいつも使っているのは黄金比計算 – 高精度計算サイト – Keisan –

で、こちらに一辺の数値を入力するともう一辺の数値を計算してくれます。これでトリミングをしています。

 

レタッチをして明るさを統一する

1つの写真というより、サイト全体を見つつ、簡単でもいいので色味などを全ての写真で統一しておきましょう。

photoshopなどを使うといいと思います。

私の場合はfigmaを使っています。サクッと手軽にできるのが気に入っています。

無料画像作成ツールなら断然figmaをオススメしたい

2019.03.19

 

 

カラーの注意点

最後にカラー編です。

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

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

 

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

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

 

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

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

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

 

余白を揃える

 

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

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

 

縦ラインを揃える

 

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

 

 

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

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

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

2018.09.08

効率のいいwebデザインの勉強なら

webデザインの勉強として、効果的なのは模写です。すでにあるサイトを観察して同じように作ることを繰り返すとデザインのセオリーがわかってくるかと思います。また、このデザインの目的、意図、デザインによる効果なども自分なりに考えて見るのも力がつきます。

私はソフトはXDを使っていますが、模写をしたいけどまずソフトの使い方から効率よく知りたいという場合、こちらのnoteでチュートリアルを出していますので、ぜひご利用ください!

このようなデザインができるようになるチュートリアルで、動画で便利な機能や効率化の方法まで一緒に解説しています。XDが初めてのかたでもできるチュートリアルなのでぜひご利用ください!