Webデザインのコツを厳選して4つご紹介!【 おしゃれで美しい 】

美しいWebデザインのコツを厳選して4つご紹介! Webデザイン
悩めるウサギさん
おしゃれで美しいWebデザインを作るコツを知りたいの…

今回はこのようなお悩みを解決します!

おしゃれで美しいWebサイトを作るには、どんなコツがあるのか気になりますよね?

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

 この記事で分かること

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

 この記事を書いたひと

Web/UIデザイナー兼フロントエンドエンジニアのかがみ@cony_tas)です!
デザイナー歴は約10年。
ゲーム会社でアプリのUIデザインやバナーデザイン、Webサイト制作をやっています。

Webデザインのコツを厳選して4つご紹介!

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

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

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

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

昔のサイトではドロップシャドウを強めにかけるWebサイトがよくありましたが、今時のデザインの傾向からすると少々ダサく見えてしまいます。

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

テキストにかける場合もうっすらかけるだけで文字の視認性が上がりますので、場合によってはおすすめです。

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

カラーの使い方NG例OK例

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

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

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

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

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

余白をとる

余白のとり方NG例OK例

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

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

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

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

余白については下記の記事で紹介している参考書もおすすめです。

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

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

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

文字の見せ方NG例OK例

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

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

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

最後に:Webデザインのコツを厳選して4つご紹介!

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

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

以上になります。また次の記事でお会いしましょう。

他にもWebデザイン関連で以下のようなおすすめ記事がありますので、よかったら参考にしてみてください。

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

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

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

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

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

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