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版ではダウンロードで入手できます。

top of page

©2017 coliss