デザインの考え方 – 押さえるべきポイントは？

「Webデザイナーになりたい！」と思っている方は多いと思います。

しかしWebサイトのデザインを進めるためには、Webデザインに対する考え方や基本原則などをおさえておく必要があります。

今回はデザインに対する考え方について、デザインに取り掛かる前の注意点とデザイン作業時の４つの基本原則、数年前から着目されている「デザイン思考」について解説します。

デザインに対する考え方

Webデザイナーとして働くためには、Webデザインに対する考え方を身につけることが大切です。

このWebデザインに対する考え方とは、レイアウトや文字色、装飾、余白などの具体的作業を進めるにあたって欠かせないものとなっています。

ここではデザインに対する考え方について、デザイン前の注意点と、デザイン時に踏まえるべき４つの基本原則について解説します。

デザインに取り掛かる前の注意点

業務上でWebデザインを行う場合、そのWebサイトで「誰に何を伝えるのか」を把握し、その上で実際の作業を進めていくことが大切です。

また、Webサイトには定番のスタイルや流行のスタイルなどもあるので、様々なサイトをチェックしておくことも欠かせません。

ここではWebデザインに取り掛かる前の注意点について、解説します。

Webサイトを作成する目的をおさえる

Webデザインの仕事を任された時は、ディレクターからWebサイト作成の目的やクライアントの要望などの情報を聞き、デザインの方向性をどうするか、メインカラーをどうするかなどを決定します。

同業他社のWebサイトのリサーチ

続いて同業他社のWebサイトをリサーチします。

リサーチをすることで現在のWebデザインの流行や定番スタイルを把握し、他社サイトで使われているより効果的な写真の使い方や表現方法などを参考にできます。

ワイヤーフレームはあくまで参考程度にする

ディレクターから渡されたワイヤーフレームは、あくまでデザインの参考に留めておきましょう。

ワイヤーフレームはあくまでレイアウト設定の目安ですので、必要であればデザイナーがより良いレイアウトをデザインすることが奨励されています。

デザインの４つの基本原則

デザインには紙、Web媒体を問わず4つの基本原則があり、これらを踏まえることで「伝えたい情報をより分かりやすく相手に伝えられるデザイン」が可能です。

デザインの基本原則は意識することですぐに実践可能ですので、しっかりと学んで、実務に役立てていきましょう。

コントラスト

「コントラスト」とは、デザインに視覚的な面白さを足し、複数の要素同士に区別を付けるために効果的な方法です。

コントラストを意識してデザインをすることで、例えば以下のようなサイトを作ることが可能です。

• 淡白ではない、面白そうに見えるサイト
• 読みやすいコンテンツを含めたサイト

また、コントラストで情報にメリハリをつけることで、より視覚的な認知がしやすくなり、人を惹き付けるデザインが作成できます。

近接

「近接」は関連項目をまとめてグループ化することであり、項目の内容が関連していることを視覚的に表現できます。

例えば料亭サイトでメニューを紹介する場合は、メニュータイトルや具体的な説明を近接させ、情報同士の関連性を印象づけます。

要素同士をグループ化することは、ページ上に単一の要素を配置しすぎないというメリットもあります。

また、関連情報のグループ化後はグループごとに余白を設け、ページの内容を見やすくしましょう。

関連性の強いグループはなるべく距離を近づけ、関連性の低いグループは距離を遠くするなど、情報同士の関連性を見た目でも表現していきます。

反復

「反復」とはデザイン上の特徴（色、フォント、要素の配置）を繰り返すことであり、ページ全体の視覚的な面白さを演出すると共に一貫性を持たせることもできます。

具体的な方法は以下の通りです。

• 見出しを特徴的なスタイルにする
• リスト表示に記号や色を使う
• 文字やアイコン、ボタンスタイルを揃える

何度も使用する要素に特徴を持たせられれば、内容が面白そうに見え、ユーザーにページを読んでもらえる可能性が高まります。

整列

「整列」とはページ全体の要素を意識的に整えた上で配列することを言い、ページ上の要素を視覚的に捉えやすくする効果があります。

具体的には以下の方法で表現します。

• 整列方法を中央揃え、左揃え、右揃え、均等揃えのどれかひとつに絞る
• フォーマルさ、安心感のあるレイアウトにしたい時は中央揃えを使用する

デザイナーの考え方、「デザイン思考」とは

数年前から「デザイン思考」という考え方が注目を浴びるようになりました。

デザイン思考とは、デザインしたサービスや製品を使用するユーザーを理解し、その上でユーザーがサービスや製品を使用する段階においてどんな情報が必要かを踏まえて設計をすることです。

この考え方はデザイナーだけではなく様々なビジネスにも導入され、ユーザーを理解し、その問題を解決するために応用されています。

デザイン思考の５つの段階

デザイン思考とは、具体的に以下の5つのプロセスを言います。

共感

ユーザーの行動を理解してニーズを汲み、ユーザーが実現したいことや解決したい課題を把握します。

ヒアリング時はユーザーの立場に立って考え、ユーザーの回答意図を類推します。

定義

ユーザーのニーズに対して制作者が仮説を立て、ユーザーからヒアリングした内容の奥にある「本当に実現したいこと」を深掘りします。

例えば「利便性を重視し、多数の人が訪れやすいサイト」を求めるユーザーの場合、その奥にあるニーズは「マーケティングによる収益」かも知れません。

ユーザーが本当に実現したいことを考えることで、よりニーズに即したデザインが実現可能です。

概念化

ユーザーが実現したいことに対し、それを実現するための具体的なアイディアを出します。

例えば「マーケティングによる収益」というニーズを満たす場合は、

• 成約が出やすいレイアウトを考える
• お問い合わせフォームへの導線を考える

などです。

試作

アイディアを出した後はデザインの試作品を実際に作ってみます。

実際に試作品を作ることで発見できる問題点やアイディアもあるので、それらを踏まえた上で少しずつ完成形へと近づけていきます。

テスト

形になったデザインがユーザーのニーズを満たしているかを確認します。

ユーザーに実際に見てもらうことで、デザインをさらにブラッシュアップし、デザイナーとユーザーの双方が納得いくデザインができれば完成です。

まとめ

Webデザイナーとして働くためには、デザインに対する考え方を踏まえ、実務に対応できるだけのスキルを身に着ける必要があります。

Webデザイナーになりたい方は、まずデザインの考え方を知ることから始めてみてはいかがでしょうか。