Webデザイナーの”直感”をホンモノにする、デザイン要素への着眼点とは？

Webデザインを紐解いていくと、各デザイン要素を組み合わせたり、裏切ったりの連続であることがわかります。

ユーザビリティ向上のために必要になるのは、原則にのっとった堅実な判断とデザイナーの直感のバランスがとれたデザインです。今回は、デザイナーの直感力を下支えするデザイン要素の原則について、考えていきたいと思います。

すべてデザインに共通する5つの大原則

前提として、デザイナーの誰もが納得するであろうデザインの基本原則ついて確認しましょう。

1. 統一性：一貫した視覚的な調和を保ち、統一性を守ります。
2. 多様性：変化を持たせて興味を引きます。統一性による単調さを減少させることができます。
3. 階層：主題と補足情報など、情報の強弱のことを意味しています。きちんと階層が整理されたデザインは難しく考える必要がなくなり伝わりやすくなります。
4. リズム・パターン：色や線、形などを反復させることで、リズムを生み出せます。安定感や動きを表現するデザイン原則です。
5. 強調：サイズや色、形を変えることで意図して意識を集中させることが出来ます。次章では、3つ目と5つ目のデザイン原則に関係する『コントラスト』について、もう少し詳しく説明します

これらの原則を遵守した上で、各デザイン要素とどのように向き合うべきなのかを解説していきます。

デザイン要素の意義を問うて、「デザイナーの直感」を裏付ける

コントラスト

コントラストは、ページの視覚的な階層に影響を与え、見やすさや理解しやすさをデザインできます。
ユーザーに要素の重要度を伝えるので、重要度が明確になり、一目で使い方を理解してもらえるのです。

また、意図して特定の要素にユーザーの意識を誘導することもできます。色やサイズ、形や向きなど、どのような要素でも『コントラスト』をつけることは可能です。

Architecture Company Website

色とコントラストのデザインでは、どのようなカラースキームを使用するかを選ばなければなりません。
その際、考慮すべき点が5つあります。

明確さ

ユーザが画面から必要な情報をはっきりと見て区別できる必要があります。カラースキームと組み合わせることで、機能的にレイアウトされたデザイン要素をさらに効果的なものにします。
これは、ユーザーを正確にナビゲートします。

明確なコントラストかどうかを判断するには、デザイン全体にぼかしをかけて、全体が明確に確認できない状態でも重要な要素がわかりやすくデザインされているかを確認するのがおすすめです。

読みやすさ

読みやすいテキストは、アプリやWebサイトにおいて、特に重要です。
テキストが読みにくいと、重要な情報を見逃してしまい、離脱にも繋がります。

Menu Interactions

アクセシビリティ

誰もが同じように使用できることを意味しています。
本来、使用するかしないかを選ぶのはユーザーであり、物理的な理由や身体的な理由により使用できないのはユーザーにとって優しくありません。
カラースキームは、どのような場合でも同じように機能することを考えて選びましょう。

レスポンシブデザイン

使用するデバイス毎の柔軟なレイアウトに変化することを意味します。
高精細ディスプレイやモバイルでの表示の違いは、ユーザビリティへ影響を与えることになります。

環境

ユーザーがどのような環境で使用するのかを考慮し、適切な配色と背景色を選ぶ必要があります。
自然光の下ではタブレットやスマートフォンのスクリーンは反射を起こしますし、暗い環境で見る暗い背景は可読性が悪いです。色の組み合わせやコントラスト、色合いについて考慮する必要があります。

Cinema App

カラー

色には視覚に訴える力があります。
それは、励まし、警告、訴え、恐怖、強調、説得などのメッセージを伝えられます。
それは非常に直感的なメッセージです。色の使い方をマスターすることはデザイナーにとって強みになります。

Calendar App

色は効果的なデザインを行うための重要な要素であり、いくつかのニーズを同時に満たす要素にもなり得ます。
色を有効に使うことで以下のような効果が得られます。

• ブランドの知名度の向上
• 読みやすさの向上
• ユーザーの行動を促す
• 美しく魅せる
• ナビゲーションを洗練させる
• 直感的なインタラクションの強化
• デザインの調和を維持し明確に表現する

色がもたらす効果に注意を向けたい場合におすすめな方法があります。
まずは白黒の画面でデザインを行い、完成した段階で色を付けていく方法です。
これにより、機能として必要か必要がないのかといった色の組み合わせを見直せます。また、無駄な色を減らすことで色盲のユーザーにとっても認識しやすいデザインを提供できます。

Quoter App

色には心理的に働きかける効果もあります。
色を使って、ユーザーの気分に干渉することが出来ます。それによりデザインの訴求力は向上します。

デザインとは見栄えの良いものを作ることではなく、ユーザーの問題を解決するための行為です。
使用する色はインターフェイスが使いやすく、明確になる色を選択します。これは、ユーザビリティやユーティリティを向上させます。また、色による調和も生み出します。

The Gourmet Website

コンテンツ

Webデザインにおいて、コンテンツはデザインの印象を大きく変えます。
視覚的な操作を可能にしたり、ユーザビリティに影響を与えることもあります。

コンテンツの種類はさまざまなものがあります。

写真

デザインの雰囲気を作り出します。メッセージを乗せた写真やデモ、アイテムの写真、ブログのアイキャッチなどが該当します。

Big City Guide

オリジナルイラスト

書き下ろされたイラストでは、情報の提供とオリジナル性の確保できます。
それは、他のデザインに差を付けるシンボルとなります。

ヒーローイメージ

Webデザインでよく使用される大きなイメージを意味しています。
表示されると瞬時に、コンテンツの魅力を視覚的に訴えかけます。

Dance Academy Landing Page

アイコン

アイコンは意味のある情報をユーザーへ伝える働きがあります。直感的で明確なナビゲーションを提供するのに役立ちます。

マスコット

ほとんどの場合ブランドのアイデンティティを意味しています。
Webサイトやブランドの象徴としてプロモーションに役立つものです。ブランドの認知を簡単にします。

視覚的なアイデンティティ

ロゴのようなブランディングへ視覚的に干渉するものを意味しています。
ブランド名やスローガン、オリジナルの文字などが該当します。

Jewellery Ecommerce App

コピー

コピーは重要な機能のひとつです。

言葉の力は偉大で、驚くほど機能的に働きます。
Webサイトでは限られたスペースで、コピーをどのように使うか考えなければなりません。

Ice Website

コピーについては、デザインの知識だけでは不十分です。
コピーライティングのように他の知識も必要になるため、コピーライターに頼むのも有効です。コピーはデザインと同じで、不要なものを減らし、有効に働くような言葉を選びます。

Webサイトで使われるコピーは、以下のような機能を持っています。

• 通知
• 通信
• 相互作用
• ナビゲーションの強化
• 感情に訴える
• 感情を巻き込む
• トーンとボイスの作成

コピーは視覚的なデザイン要素のひとつです。
有益なコンテンツと視覚的な訴求により、コピーの効果は大きく変わります。

コピーを効果的なものにするには、タイプとフォント、背景、レイアウトなどのデザインに依存します。
コピーが優れていても可読性の低いデザインが最適でない場合、コピーも効果的に働きません。

Museu

コピーが役立つのは、このようなときです。

• イントロスクリーン、チュートリアル、ツールチップ
• 指示および通知
• 行動を促したいとき
• カタログやメニュー
• ランディングページ
• 商品説明のテンプレート

Architecture Blog

ビデオ

会社や製品の紹介にビデオはよく使用されます。ビデオの種類もさまざまです。
製品の機能や詳細を提供し、効果やメリットを説明し、信頼や実績を説明することもあります。
特定の行動を促し、ユーザーを誘導するためにも使えます。

ユーザーに行動を起こさせるのに役立ち、ブランドの認知度も高めます。
ビデオは、音と視覚を利用して人に訴えかける有効な手段です。
ストーリーを伝えるために使用することが多く、クオリティーの高いビデオは強く記憶に残ります。

日々の生活の中であらゆる情報に触れるため、ユーザーはひとつひとつの情報に意識を向けることが難しいです。
このような状況でビデオは、非常に有効なコミュニケーションを可能にします。

Binned Promo Video Storyboard

まとめ

デザイナーが考慮すべき問題はいくつもあります。決められた解決法がありません。

感覚派で直感を重視するデザイナーも、デザインを始める前のユーザとマーケットの調査や、徹底したユーザテストでデザインの質を変えてみてください。