Webデザインのプロのテクニックを非常に簡潔に分かりやすくまとめた -Web Design in 4 minutes

Webページやブログ、プロダクトページ、ポートフォリオなど、ちょっとした工夫でプロがつくったかのようにかっこよく、魅力的に見せるテクニックを4分で学べるコンテンツを紹介します。

Web Design in 4 minutes

各ページのリンクをクリックしていくと、テキストだけのページが少しずつ魅力的になっていきます。
解説は英語なので、日本語で少し補足しました。

コンテンツ

デザインの目的は、コンテンツを見せることです。
企業のサイトでも個人のブログでもそれは同様で、あとから思いつきで追加するものではありません。まずは、コンテンツをしっかり用意しましょう。

センタリング

テキストが長い行で、ブラウザいっぱいに表示されていると読みにくいです。日本語だと一行に全角32文字、多くても38文字くらいが読みやすいです。テキストのブロックを中央にセンタリングすることで、より魅力的に見えます。

フォントの指定

フォントは読みやすいフォントを指定します。

空白スペース

Webページが読みにくく感じる時の問題点は、通常空白スペースが原因です。文字の行間、要素と要素の間など、空白スペースを充分にとることで魅力がアップします。

カラーとコントラスト

ホワイトの背景に、ブラックの文字は目に優しくない組み合わせです。文字を少しグレーにすることで、読むことがより快適になります。

見出しや重要な言葉には、サイズやカラーなどでコントラストをつけると更に読みやすくなります。

バランス

引用、注意書き、脚注、コードなど、本文ではない文字もそれぞれスタイルを変更するとより分かりやすくなります。

プライマリーカラー

見た目のアクセントとして、プライマリーカラーを用意します。これはあなたのブランドのカラーがベストです。文字やボタンを強調したり、リンクに使ってもよいでしょう。

セカンダリカラー

セカンダリカラーはアクセントカラーを補完する色で、背景や線や文字などに使用することができます。

Webフォント

最近は日本語でもWebフォントを利用しているサイトが増えてきました。無料や低価格で利用できるサービスがあります。

画像

グラフィックやアイコンは、コンテンツの内容をさらに魅力的に見せる強力な武器です。よい画像があったら、積極的に使用していきましょう。

完成

テキストだけだったページが、今風のWebページになりました！

デザインをしっかり学びたい人は、下記の本がかなりオススメです。
7/31までKindleセール対象のかなりの激安で、書籍版の半額以下、さらに20%ポイント還元！

デザインの教室 Kindle版

著:

佐藤 好彦

出版社:

MdNコーポレーション

書籍版にはCD-ROMが付属しており、Kindle版ではダウンロードで入手できます。