おしゃれで美しいと思えるWebデザインのコツを4つご紹介【 初心者必見 】

おしゃれで美しいWebデザインを作るコツを4つご紹介 Webデザイナー
ウサギさん
おしゃれで美しいWebデザインを作るコツを知りたいの……
モチ
シンプルだけど美しいデザインって何が違うのかな?

今回はこんなお悩みにお答えします。

おしゃれで美しいWebサイトって、ダメなデザインと比べてどこが違うのか気になるところですよね。
僕もWebデザイナー駆け出しの頃は毎日いろんなサイトを見て研究していました。

そこで本記事では、これだけ守れば簡単に美しいWebデザインになるコツを4つご紹介します。

 記事でわかること

  • ・美しいWebデザインを制作するコツ

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

おしゃれで美しいと思えるWebデザインのコツを4つご紹介

今回ご紹介するコツを覚えるだけでこれまでより見やすく美しいWebデザインになるはずです。
順番にご紹介していきますね。

ドロップシャドウは薄めにする

ドロップシャドウNG例OK例

ドロップシャドウは薄めにしましょう。

昔のサイトではドロップシャドウを強めにかけるサイトがよくありましたが、いまはちょっとダサく見えてしまいますね。

もしドロップシャドウをかける場合は、うっすらわかる程度にかけたほうがいいです。

テキストにかける場合もうっすらかけるだけで文字が読みやすくなることもあるので、場合によってはおすすめです。

カラーは使いすぎないようにする

カラーの使い方NG例OK例

カラーは最高でも3色までにしましょう。

NG例のように、カラフルなサイトはチープな印象を与えてしまいます。

僕がよくやるのはサイトのロゴやサービスイメージからメインカラーを決定し、類似色や補色などからサブカラーとアクセントカラーを選んでいます。

個人的な感覚としては、以下の比率でカラーを使うと良いバランスになるかなと思います。

  • メインカラー:8
  • サブカラー:1.5
  • アクセントカラー:0.5

余白をとる

余白のとり方NG例OK例

余白をとって情報を整理しましょう。

テキスト周りはしっかり余白をとると情報が見やすくなります。

余白をとらないと情報が詰まって見えてしまい、洗練されたデザインにはなりませんので注意してください。

またCSSのline-heightで行間をあけることも見やすくなるコツです。

余白デザインの勉強におすすめの参考書!

余白の参考書でおすすめは『 けっきょく、よはく。』

2020年4月16日

文字が見にくい場合は背景を工夫する

文字の見せ方NG例OK例

文字が見にくい場合は背景を工夫しましょう

背景に写真を使う場合、そのまま上に文字を載せると暗い写真でもない限り見にくくなってしまいます。

そこで背景の上に半透明の黒レイヤーを重ねて背景を暗めにすると文字が見やすくなりますね。
また文字にドロップシャドウをかけるのもおすすめです。

最後に:おしゃれで美しいと思えるWebデザインのコツを4つご紹介

今回は簡単におしゃれで美しいWebデザインを制作するコツを4つご紹介しました。

他にもいろいろなテクニックはあると思いますが、最低限今回ご紹介した方法を実践してもらえれば、簡単におしゃれで美しいサイトを作ることができると思います。

それでは、今回はこの辺で!

他にも以下のような記事がありますので、よかったら参考にしてみてください。

Webデザイナーに転職したい30代のあなたに方法を教えます【未経験OK】

2020年2月14日

デザインの情報満載のWebサイト5選!【新人デザイナー必見】

2020年2月19日

日常生活の中でデザインの勉強をする方法3選

2020年3月1日

ゲーム会社でデザイナーを目指す方法3STEP

ゲーム会社でデザイナーを目指す方法3STEP【 裏技アリ 】

2020年3月19日
ウサギさん
いつもCony-Tasに遊びにきてくれて、ありがとう♪