ブログBLOG

Tips

2019.10.30

author:カヨコWEBデザイナー

脱素人感!WEBデザイン改善のコツ

脱素人感!WEBデザイン改善のコツ

自分のデザインしたWEBページがどこか決まらない…。
頭の中ではイメージできているのに思うように表現できない…。
どこを直せばかっこいいデザインになるのかわからない…。
そんなことはありませんか?

今回はWEBデザインをするにあたり最低限これを意識すれば
素人感が抜けて綺麗に見えるコツを自分なりに挙げてみました。
WEBデザインにお悩みの方へ参考になれば幸いです。

余白をうまく使う

余白をうまく使う

余白が少なく、窮屈なレイアウトになっていませんか?
しっかりと余白を取ることで文字やコンテンツをより引き立たせることができ、
見た目もスッキリとした印象になります。

色の使い方を考える

色の使い方を考える

デザインのテイストにもよりますが、
ボタンや見出しに原色や過度なグラデーションを使うのはできるだけ避けましょう。
また、色をたくさん使いすぎるとどこを強調したいのかユーザーに伝わりにくくなります。
使用する色は3~4色ほどに抑えましょう。

正しいフォント選び

正しいフォント選び

サイトの雰囲気に合ったフォントを選ぶようにしましょう。
また見出しや本文のフォントサイズも適切なものにしましょう。
一般的なWEBサイトのフォントサイズの目安として筆者は以下サイズをよく使います。

PC版

見出しフォントサイズ:18~24px
本文フォントサイズ:16px~18px
行間:1.3~1.8em

スマホ版

見出しフォントサイズ:16~20px
フォントサイズ:14px~16px
行間:1.2~1.6em

綺麗な画像を使う

綺麗な画像を使う

せっかく綺麗なレイアウトのサイトでも画像がぼやけていると残念ですよね。
画像はできるだけ高画質なものを使用するのをお勧めします。
ただ、高画質な画像やサイズの大きな画像をを多く使用すると、
ページ自体の表示が遅くなってしまいます。
ページ表示が遅いとユーザーのページの離脱に繋がるので画像の最適化を忘れずに行いましょう。
有名な画像圧縮ツールをいくつかご紹介します。用途にあわせて参考にしてみてください。

様々な人の目を通す

様々な人の目を通す

ずっと同じ画面を見ていると何が良いのか…本当にこのデザインでいいのか…とだんだんと煮詰まってくる時があります。
そんな時は、別の人からの意見をもらうようにしてみましょう。
デザイナーに見てもらうと的確な調整箇所が見えてきますし、
デザイナーでない人に見てもらうと、よりユーザーに近い目線になるので、
また違った角度からの意見をもらえる事があります。

素敵なデザインをたくさん見る

素敵なデザインをたくさん見る

少し検索しただけでも美しいWEBデザインは多く見つかります。
自分の良いと思ったデザインは積極的にインプットしていきましょう。

妥協せず良いデザインを

今回挙げたポイントはデザインを良くするうえのポイントのほんの一部にすぎません。
項目一つ一つをもう少し掘り下げていきたいところですが、
それはまた別の機会にできればと思います。

1pxのラインを入れたり、少しだけ透過させたり…細かなこだわりひとつで
見た目の印象は劇的に変わります。
常に妥協せず良いデザインができるよう日々精進したいと思います!

RECENT POSTS