今回はこのようなお悩みを解決します！
おしゃれで美しいWebサイトを作るには、どんなコツがあるのか気になりますよね？
本記事では、初心者でもまずはこれだけ守れば簡単に美しいWebデザインになるコツを厳選して4つご紹介します。
・美しいWebデザインを制作するコツ
Web/UIデザイナー兼フロントエンドエンジニアのかがみ（@cony_tas）です！
デザイナー歴は約10年。
ゲーム会社でアプリのUIデザインやバナーデザイン、Webサイト制作をやっています。
CONTENTS［ hide ］
Webデザインのコツを厳選して4つご紹介！
今回ご紹介するコツを覚えていただければ、より見やすく美しいWebデザインを制作できるようになります。
順番にご紹介していきますね。
ドロップシャドウは薄めにする
ドロップシャドウは薄めにしましょう。
昔のサイトではドロップシャドウを強めにかけるWebサイトがよくありましたが、今時のデザインの傾向からすると少々ダサく見えてしまいます。
もしドロップシャドウをかける場合は、うっすらわかる程度にかけたほうがいいです。
テキストにかける場合もうっすらかけるだけで文字の視認性が上がりますので、場合によってはおすすめです。
カラーは使いすぎないようにする
カラーは最高でも3色までにしましょう。
NG例のように、カラフルなサイトはチープな印象を与えてしまいます。
僕がよくやるのはサイトのロゴやサービスイメージからメインカラーを決定し、類似色や補色などからサブカラーとアクセントカラーを選んでいます。
個人的な感覚としては、以下の比率でカラーを使うと良いバランスになるかなと思います。
- メインカラー：8
- サブカラー：1.5
- アクセントカラー：0.5
余白をとる
余白をとって情報を整理しましょう。
テキスト周りはしっかり余白をとると情報が見やすくなります。
余白をとらないと情報が詰まって見えてしまい、洗練されたデザインにはなりませんので注意してください。
またCSSのline-heightで行間をあけることも見やすくなるコツです。
余白については下記の記事で紹介している参考書もおすすめです。
文字が見にくい場合は背景を工夫する
文字が見にくい場合は背景を工夫しましょう。
背景に写真を使う場合、そのまま上に文字を載せると暗い写真でもない限り見にくくなってしまいます。
そこで背景の上に半透明の黒レイヤーを重ねて背景を暗めにすると文字が見やすくなりますね。
また文字にドロップシャドウをかけるのもおすすめです。
最後に：Webデザインのコツを厳選して4つご紹介！
今回は簡単におしゃれで美しいWebデザインを制作するコツを4つご紹介しました。
他にもいろいろなテクニックはあると思いますが、最低限今回ご紹介した方法を実践してもらえれば、簡単におしゃれで美しいサイトを制作できますよ♪
以上になります。また次の記事でお会いしましょう。
他にもWebデザイン関連で以下のようなおすすめ記事がありますので、よかったら参考にしてみてください。
