Webサイトを特徴づける10のデザインテクニック

    後藤大地  [2009/04/07]

    Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

    Mark Praschan氏がSmashing Magazineにおいて10 Simple and Impressive Design Techniquesのタイトルのもとシンプルでかつ印象的にするためのデザインテクニックを紹介している。Mark Praschan氏はシンプルなエフェクトとテクニックは今日のデザインにおける構成要素を確立しているとしたうえで、特に選りすぐった10のシンプルでサイトを印象的にするためのデザインテクニックを紹介している。これらテクニックはデザインを改善するとともに描画のパフォーマンスも改善するという。紹介されているテクニックは次のとおり。

    • もっとコントラストを活用する。コントラストの活用はもっとも見落とされがちなテクニックのひとつだが、効果がある。枠の部分に明るい色を1ピクセルのラインで、暗い色をさらに外側に1ピクセルのラインで用意するといった使い方をすることで、「進む」「戻る」「ダウンロード」などユーザに自然に目を向いてほしい部分を強調できるといった効果がある
    • グラデーションを使う。ただしメインの効果として使うのではなく、あくまでもプロジェクト全体の感覚を補うものとして控えめに巧妙に使う
    • 適切な色を使うようにする
    • ヘッドライン、段落、ロゴなどさまざまなシーンでテキストのカーニングを適切なものへ調整する
    • 大文字を小文字を使い分ける
    • 小さい文字にはアンチエリアジングを適用しないなどアンチエリアジングの活用シーンを使い分ける(ただしHTMLのテキストに関しては制御できない)
    • 古くさい感じの画像の活用を検討する。画像操作アプリケーションでいくつかのフィルタを使う程度で作成できる
    • ぼかし効果を活用する
    • 必要に応じてアラインメント(ベースライン)を変更する印象づけテクニックを活用する
    • もっとも重要でもっとも評価されることが少ないデザインテクニック: 不要な部分を削除する

    10 Simple and Impressive Design Techniquesで紹介されているいくつかのテクニック(カーニング、大文字小文字、アンチエリアジング)などは日本語ベースのサイトを制作する場合にはそのままは適用できないし、日本と海外のデザイントレンドには違いも大きく、そのままこのテクニックを適用すれば日本人受けするデザインができるとはいい難い。

    しかしコントラストの活用による自然なフォーカスの実現や、色の選定の話はデザインを練る上で参考になる点が多い。10 Simple and Impressive Design Techniquesではさまざまなサイトのスナップショットを掲載してデザインテクニックが紹介されている。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン