Webサイトや広告、資料など、顧客が目にするあらゆるものにデザインは欠かせません。マーケティングにおいて重要なのは、見た目の美しさではなく、顧客の利便性を高めるためのデザインです。
この記事では、「装飾デザイン」と「機能デザイン」という2つの視点から、マーケターが意識すべきデザインディレクションの基本を紹介します。
関連記事：マーケターとは？仕事内容・なり方・未経験からの転職成功法とキャリアプランを現役マーケターが徹底解説
人事・経営層のキーパーソンへのリーチが課題ですか？
BtoBリード獲得・マーケティングならProFutureにお任せ！
目次
装飾デザイン、機能デザインとは？
Webデザインには大きく2種類あります。機能デザインと装飾デザインです。
機能デザインは、具体的には情報設計や情報整理を指します。製品・サービスのペルソナやカスタマージャーニー、Webサイトのワイヤーフレームなどが含まれます。機能デザインの目的は、顧客に情報を分かりやすく伝えるために、伝えたい情報を適切に整理することです。これにより、ユーザビリティの向上や顧客体験の最適化が図られます。
関連記事：ワイヤーフレームって何？Web制作で欠かせないツールをご紹介！
一方で、装飾デザインは色やレイアウト、フォントなどの視覚的な要素を指します。文字を大きくしたり奇抜な色でグラデーションをするなど、情報整理とは異なるアプローチを取ります。装飾デザインは、ブランドイメージの構築や製品の魅力を視覚的に伝える役割を果たします。
しかし、意図的に目立たせることは、「印象づける」「覚えてもらう」といった目的を達成するには有効です。そのため、装飾デザインは顧客の利便性を向上する役割を果たすうえで、機能デザインの一部として捉えることができます。効果的な機能デザインと装飾デザインの組み合わせにより、ユーザーにとって魅力的で使いやすいWebサイトが実現します。
機能デザインと似た言葉では「UI（ユーザーインターフェイス）」があります。UIは、ユーザーが接する、目に触れる、デスクトップやスマートフォンに表示されるサイトトップのデザイン、フォントなど、視覚的な情報すべてを指します。
関連記事：ユーザーが使いやすいサイト（UI／ユーザビリティ）とSEOの関係とは
Googleが2014年に発表した「マテリアルデザイン」のように、配色やボタンのデザインなど一定のルールに沿ってデザインを行い、顧客の利便性を上げていくことが機能デザインやUIでは求められています。このアプローチは、ユーザーにとって一貫性のある直感的なインターフェースを提供し、操作性の向上につながります。
機能デザインと装飾デザインの両方を適切に活用することで、ユーザーにとって魅力的で使いやすく、かつ目的を達成しやすいWebサイトを作ることができます。これらのデザイン要素を効果的に組み合わせることが、成功するWebデザインの鍵となります。
関連記事：Google推奨のマテリアルデザインとは
マーケターに求められるデザインディレクション
Webサイトやバナー広告のデザインを実際に行うのはデザイナーです。インハウスで作成する場合や直接外部のデザイナーと作成を進める場合、ターゲットに伝えたい情報をまとめ整理し、デザイナーと共有して制作してもらうディレクション業務が必要となります。この過程で、マーケターには機能デザインの観点から情報設計を行う能力が求められます。
制作会社と進める場合にはディレクション業務は直接的に必要ありませんが、制作会社のディレクターとコミュニケーションをとるうえではある程度の情報整理や共有が必要です。この際、機能デザインの考え方を理解し、ユーザビリティを重視した提案ができることが重要です。
「機能デザイン」「装飾デザイン」の2つのデザインのうち、マーケターやディレクターは「機能デザイン」を、デザイナーは「装飾デザイン」をそれぞれ担当することが多いでしょう。相互補完的に互いの担当領域に対しレビューや意見を言うことはありますが、主な役割は大きく変わりません。
デザイナーに情報設計もまるっと任せてしまうと、イメージしていた完成物とは遠いものが出来上がってきてしまい、非常に危険です。マーケターは依頼するデザイナーやディレクターに対し、どこまで情報整理をすべきか適切に判断しディレクションを行います。この際、ユーザーの行動フローや情報の優先順位を考慮した機能デザインの視点が不可欠です。
効果的な機能デザインを実現するためには、ターゲットユーザーのニーズや行動パターンを深く理解し、それに基づいた情報構造を設計することが重要です。マーケターは、ユーザー調査やデータ分析の結果を活用し、最適な情報設計を提案できる能力が求められます。
デザインディレクションのポイントと流れ
デザインディレクションは、制作物の完成までの全工程を管理し、責任を負う重要な役割です。機能デザインの観点から、制作物のデザインの方向性を決定し、ディレクターやデザイナーに適切な指示を出すとともに、進捗管理を行います。高品質な機能デザインを実現するには、ディレクターやデザイナーとの密接なコミュニケーションが不可欠です。特に、案件の初期共有や初稿レビューの際には、丁寧かつ明確なコミュニケーションを心がけましょう。
機能デザインを重視したデザインディレクションの大まかな流れは以下の通りです。まず、制作物の目的やターゲットのペルソナ、全体のコンセプトを明確にし、関係者と共有します。次に、掲載するコンテンツとその優先順位を決定します。これは機能デザインの核心部分であり、ユーザーの利便性を最大化するために慎重に検討する必要があります。その後、トーンやカラーパレットなど、全体の印象を決定します。最後に、これらの情報をデザイナーに伝え、デザインの作成を依頼します。
機能デザインの観点から、初稿が上がってきた際には、情報の整理や優先順位が適切に反映されているか、ユーザビリティが考慮されているかなどを重点的にチェックします。必要に応じて修正を行い、最終的な完成へと導きます。このプロセス全体を通じて、常に機能デザインの原則を念頭に置き、ユーザーにとって使いやすく、目的に沿った効果的なデザインを追求することが重要です。
①制作物の目的、ペルソナ、コンセプトを共有
Webサイトやバナー広告など制作物の目的や達成したいこと、ターゲットのペルソナ、そして、制作物全体のコンセプトをあらかじめ決めて、ディレクターやデザイナーに共有します。機能デザインの観点から、制作物がどのような役割を果たすべきかを明確にすることが重要です。
例えば、Webサイトの場合、ユーザーの行動を促す機能デザイン要素を検討し、それらをディレクターやデザイナーと共有します。また、機能デザインと装飾デザインのバランスを考慮し、ユーザビリティを損なわない範囲で視覚的な魅力も追求します。この段階で、制作物の機能デザインに関する具体的なイメージを共有することで、後工程でのミスコミュニケーションを防ぐことができます。
②掲載する内容やその優先順位を決める
制作物に掲載するコンテンツを決めていきます。具体的に何を載せるのかを決め、載せるものが複数ある場合にはどれを目立たせるのか、優先順位も決めていきます。ディレクターがいない場合には、自分たちで決めていく必要があります。
機能デザインの観点から、ユーザーにとって最も重要な情報が最初に目に入るよう配置を工夫することが大切です。例えば、Webサイトのトップページであれば、企業の強みや主要サービスを上部に配置し、その下に詳細情報や問い合わせフォームを配置するなどの工夫が考えられます。
また、機能デザインを意識することで、ユーザーの導線設計も同時に行うことができます。例えば、商品紹介ページから購入ページへのスムーズな遷移を促すボタンの配置なども、機能デザインの一環として検討しましょう。
このように、機能デザインを意識した内容の優先順位付けは、ユーザビリティの向上につながり、結果としてコンバージョン率の改善にも寄与します。
③トンマナや配色など全体の印象を決める
制作物の全体の色やトーンを決めていきます。Webサイトであれば、企業や製品・サービスのイメージカラーにあわせて設定していきます。機能デザインの観点から、ユーザビリティを考慮した配色やレイアウトを検討することが重要です。例えば、コントラストを適切に設定し、テキストの可読性を確保することや、ユーザーの目線の動きを考慮したレイアウトを採用することなどが挙げられます。
また、機能デザインの一環として、ユーザーの操作性を向上させるためのUIデザインも考慮しましょう。ボタンの配置や大きさ、フォームの使いやすさなども、全体の印象に大きく影響します。ディレクターがいない場合には、機能デザインの原則を踏まえつつ、ある程度決めておくと良いでしょう。
最終的には、装飾デザインと機能デザインのバランスを取りながら、ユーザーにとって使いやすく、かつ魅力的な印象を与えるデザインを目指します。
関連記事：トンマナの意味とは！ルールをしっかり決めて品質を上げよう
④デザイナーへデザインを依頼、修正を経て完成
①～③で決めた内容をデザイナーへ共有しデザインを依頼します。機能デザインの観点から、情報の優先順位や構造を明確に伝えることが重要です。
デザイナーから初稿デザインが上がってきたら、確認・レビューを行い、修正を経て完成させていきます。この過程では、機能デザインと装飾デザインのバランスを慎重に検討します。例えば、ユーザビリティを損なわない範囲で視覚的な魅力を高めるなど、両者の調和を図ります。
また、機能デザインの要素として、ナビゲーションの使いやすさやコンテンツの読みやすさなども確認しましょう。最終的に、ユーザーにとって使いやすく、且つ目的に合致したデザインになっているか、機能デザインの観点から総合的に評価することが大切です。
デザインディレクションの注意点
デザインのクオリティを高めるためにも、デザインディレクションにおいて注意しなければならない点が4つあります。これらの点に留意することで、機能デザインと装飾デザインの両面から効果的なWebデザインを実現できます。
①余裕を持ったスケジュール
機能デザインの質を高めるためには、余裕を持ったスケジュールが不可欠です。機能デザインにおいて、ある程度の余裕を持たせたスケジュールを組むことで、クオリティを担保することができます。
ギリギリのスケジュールで進めてしまうと、予期せぬトラブルが発生した際に柔軟な対応ができず、納期よりも遅れるリスクが高まってしまいます。特に、機能デザインは情報設計や情報整理を含むため、十分な時間をかけて検討する必要があります。
また、装飾デザインとの調整も必要となるため、余裕を持ったスケジュールは非常に重要です。機能デザインの精度を上げるためにも、十分な時間を確保し、じっくりと取り組むことが大切です。これにより、ユーザビリティの高い、効果的な機能デザインを実現することができます。
②明確で具体的な依頼や指示
デザイナーには明確で具体的な指示や依頼をするようしましょう。曖昧な指示のために、強弱をつけるポイントや修正方法が分からず、デザイナーが困ってしまいます。
機能デザインの観点から、目立たせたい箇所の優先順位や修正箇所の変更内容を明確にし、具体的に指示や依頼をします。特に機能デザインに関わる部分では、ユーザビリティを考慮した指示が重要です。
例えば、ボタンの配置やサイズ、色などの機能デザイン要素について、具体的な数値や参考例を示すことで、デザイナーとの認識のずれを防ぐことができます。
また、機能デザインと装飾デザインのバランスを考慮し、ユーザーにとって使いやすく、かつ視覚的にも魅力的なデザインを実現するための指示を心がけましょう。
③デザインの意図や修正の背景の共有
具体的な指示や依頼だけではなく、そのデザインの意図や修正の背景も共有するとデザイナーは動きやすくなります。機能デザインの観点から、なぜその修正が必要なのか、どのような機能を実現したいのかを説明することが重要です。
また制作物のターゲットや目的を言語化し共通認識を持っておくと、それぞれの指示や依頼に対し理解ができ、よりクオリティの高いデザインができます。機能デザインと装飾デザインの両面から、デザイナーとの対話を通じて、ユーザビリティの向上や視認性の改善といった具体的な目標を共有することで、より効果的な機能デザインの実現につながります。
さらに、修正の背景にある機能デザインの考え方を共有することで、デザイナーの創造性を引き出し、より洗練された機能デザインの提案を促すことができるでしょう。
④細部までの入念な確認
デザイナーから初稿のデザインが上がってきた際には細部まで入念に確認をしましょう。機能デザインの観点から、デザインの雰囲気は依頼通りか、誤字脱字がないか、掲載内容に抜け漏れがないか、細かく確認しレビューします。特に機能デザインに関わる要素、例えばボタンの配置や情報の階層構造などが適切かどうかを重点的にチェックします。
また、装飾デザインの側面からも、色使いやフォントの選択が全体の印象と合致しているかを確認します。出し戻しを最小限にするためにも、初稿レビューは入念に確認します。
この段階で機能デザインと装飾デザインのバランスが取れているか、ユーザビリティを損なっていないかなどを総合的に判断することが重要です。細部への注意は、最終的な製品の質を大きく左右するため、機能デザインの要素を中心に、装飾的な側面も含めて慎重にレビューを行いましょう。
まとめ
- Webデザインには機能デザインと装飾デザインがある。機能デザインは顧客に情報を分かりやすく伝えるために、伝えたい情報を適切に整理することを指し、装飾デザインは色やレイアウト、フォントなどの装飾を指す
- 「機能デザイン」「装飾デザイン」の2つのデザインのうち、マーケターやディレクターは「機能デザイン」を、デザイナーは「装飾デザイン」をそれぞれ担当する
- イメージしている以上に良いデザインを作るには、ディレクターやデザイナーとのコミュニケーションが非常に重要
- デザインのクオリティを高めるためにも、余裕を持ったスケジュール、明確で具体的な依頼や指示、デザインの意図や修正の背景の共有、細部までの入念な確認に注意する
- 機能デザインは、ユーザビリティを向上させ、ウェブサイトの使いやすさを確保する重要な要素である
- 機能デザインを適切に行うことで、ユーザーエクスペリエンス（UX）の向上につながり、顧客満足度を高めることができる
- 機能デザインは、情報アーキテクチャやワイヤーフレームの作成など、ウェブサイトの骨格を形成する過程で重要な役割を果たす
- 機能デザインとは、単なる見た目の美しさだけでなく、ユーザーの行動や目的達成を支援する設計思想であることを理解することが重要である
