ProFutureマーケティングソリューション|MarkeTRUNK

ProFutureマーケティングソリューションMarkeTRUNKはリードジェネレーションを中心としたソリューションです。HRプロや経営プロを中心としたマーケティング、人事データを活用したDSP、SEOに強いコンテンツマーケティングなどのマーケティングソリューションと情報を提供しています。

装飾デザイン、機能デザインとは?マーケターに求められるWebデザインディレクション

2022.3.2
読了まで約 4

Webサイトやバナー広告、ホワイトペーパーや製品・サービス紹介資料など、顧客が接するものにデザインはつきものです。デザインというと目を引くような華美な装飾がイメージされやすいですが、マーケティングに求められるデザインは顧客の利便性を高めることが目的です。

前者を「装飾デザイン」、後者を「機能デザイン」と呼びます。今回は「装飾デザイン」「機能デザイン」を通して、マーケターが求められるデザインディレクションについて押さえておきたいポイントを紹介します。

装飾デザイン、機能デザインとは?

Webデザインには大きく2種類あります。機能デザインと装飾デザインです。

機能デザインは具体的には情報設計、情報整理を指します。製品・サービスのペルソナやカスタマージャーニー、Webサイトのワイヤーフレームなどが含まれます。顧客に情報を分かりやすく伝えるために、伝えたい情報を適切に整理することが機能デザインです。

関連記事:ワイヤーフレームって何?Web制作で欠かせないツールをご紹介!

一方で、装飾デザインは色やレイアウト、フォントなどの装飾を指します。文字を大きくしたり奇抜な色でグラデーションをするなど、情報整理とは真逆のことを行います。

しかし、意図的に目立たせることは、「印象づける」「覚えてもらう」といった目的を達成するには有効です。装飾デザインは顧客の利便性を向上する役割を果たすうえで、機能デザインの一部として見ることができます。

機能デザインと似た言葉では「UI(ユーザーインターフェイス)」があります。ユーザーが接する、目に触れる、デスクトップやスマートフォンに表示されるサイトトップのデザイン、 フォントなど、視覚的な情報すべてがUIです。

関連記事:ユーザーが使いやすいサイト(UI/ユーザビリティ)とSEOの関係とは

Googleが2014年に発表した「マテリアルデザイン」のように、配色やボタンのデザインなど一定のルールに沿ってデザインを行い、顧客の利便性を上げていくことが機能デザインやUIでは求められています。

関連記事:Google推奨のマテリアルデザインとは

マーケターに求められるデザインディレクション

Webサイトやバナー広告のデザインを実際に行うのはデザイナーです。インハウスで作成する場合や直接外部のデザイナーと作成を進める場合、ターゲットに伝えたい情報をまとめ整理し、デザイナーと共有して制作してもらうディレクション業務が必要となります。

制作会社と進める場合にはディレクション業務は直接的に必要ありませんが、制作会社のディレクターとコミュニケーションをとるうえではある程度の情報整理や共有が必要です。

「機能デザイン」「装飾デザイン」の2つのデザインのうち、マーケターやディレクターは「機能デザイン」を、デザイナーは「装飾デザイン」をそれぞれ担当することが多いでしょう。相互補完的に互いの担当領域に対しレビューや意見を言うことはありますが、主な役割は大きく変わりません。

デザイナーに情報設計もまるっと任せてしまうと、イメージしていた完成物とは遠いものが出来上がってきてしまい、非常に危険です。マーケターは依頼するデザイナーやディレクターに対し、どこまで情報整理をすべきか適切に判断しディレクションを行います。

関連記事:WEBサイト制作のプロセスと制作会社の選び方

デザインディレクションのポイントと流れ

デザインディレクションにおいては制作物が完成するまでのすべての工程に対し、管理・責任を負わなければいけません。制作物のデザインの方向性を決め、ディレクターやデザイナーに指示し同時に進捗管理を行います。

イメージしている以上に良いデザインを作るには、ディレクターやデザイナーとのコミュニケーションが非常に重要です。特に最初の案件共有や、初稿レビューのタイミングでは十分に注意を払って丁寧なコミュニケーションを心がけましょう。

デザインディレクションの大まかな流れは以下の通りです。

①制作物の目的、ペルソナ、コンセプトを共有

Webサイトやバナー広告など制作物の目的や達成したいこと、ターゲットのペルソナ、そして、制作物全体のコンセプトをあらかじめ決めて、ディレクターやデザイナーに共有します。

②掲載する内容やその優先順位を決める

制作物に掲載するコンテンツを決めていきます。具体的に何を載せるのかを決め、載せるものが複数ある場合にはどれを目立たせるのか、優先順位も決めていきます。ここはディレクターがいない場合には、自分たちで決めていく必要があります。

③トンマナや配色など全体の印象を決める

制作物の全体の色やトーンを決めていきます。Webサイトであれば、企業や製品・サービスのイメージカラーにあわせて設定していきます。ここもディレクターがいない場合にはある程度決めておくと良いでしょう。

関連記事:トンマナの意味とは!ルールをしっかり決めて品質を上げよう

④デザイナーへデザインを依頼、修正を経て完成

①~③で決めた内容をデザイナーへ共有しデザインを依頼します。デザイナーから初稿デザインが上がってきたら、確認・レビューを行い、修正を経て完成させていきます。

デザインディレクションの注意点

デザインのクオリティを高めるためにも、デザインディレクションにおいて注意しなければならない点が4つあります。

①余裕を持ったスケジュール

ある程度、余裕を持たせたスケジュールがクオリティを担保するうえで必要となります。ギリギリのスケジュールで進めてしまうと、トラブルが起きてしまった際にスムーズに対応ができず、納期よりも遅れるリスクが出てきてしまいます。

②明確で具体的な依頼や指示

デザイナーには明確で具体的な指示や依頼をするようしましょう。曖昧な指示のために、強弱をつけるポイントや修正方法が分からず、デザイナーが困ってしまいます。目立たせたい箇所の優先順位や修正箇所の変更内容を明確にし、具体的に指示や依頼をします。

③デザインの意図や修正の背景の共有

具体的な指示や依頼だけではなく、そのデザインの意図や修正の背景も共有するとデザイナーは動きやすくなります。また制作物のターゲットや目的を言語化し共通認識を持っておくと、それぞれの指示や依頼に対し理解ができ、よりクオリティの高いデザインができます。

④細部までの入念な確認

デザイナーから初稿のデザインが上がってきた際には細部まで入念に確認をしましょう。デザインの雰囲気は依頼通りか、誤字脱字がないか、掲載内容に抜け漏れがないか、細かく確認しレビューします。出し戻しを最小限にするためにも、初稿レビューは入念に確認します。

まとめ

・Webデザインには機能デザインと装飾デザインがある。機能デザインは顧客に情報を分かりやすく伝えるために、伝えたい情報を適切に整理することを指し、装飾デザインは色やレイアウト、フォントなどの装飾を指す
・「機能デザイン」「装飾デザイン」の2つのデザインのうち、マーケターやディレクターは「機能デザイン」を、デザイナーは「装飾デザイン」をそれぞれ担当する
・イメージしている以上に良いデザインを作るには、ディレクターやデザイナーとのコミュニケーションが非常に重要
・デザインのクオリティを高めるためにも、余裕を持ったスケジュール、明確で具体的な依頼や指示、デザインの意図や修正の背景の共有、細部までの入念な確認に注意する

監修者

古宮 大志(こみや だいし)

ProFuture株式会社 取締役 マーケティングソリューション部 部長

大手インターネット関連サービス/大手鉄鋼メーカーの営業・マーケティング職を経て、ProFuture株式会社にジョイン。これまでの経験で蓄積したノウハウを活かし、クライアントのオウンドメディアの構築・運用支援やマーケティング戦略、新規事業の立案や戦略を担当。Webマーケティングはもちろん、SEOやデジタル技術の知見など、あらゆる分野に精通し、日々情報のアップデートに邁進している。

※プロフィールに記載された所属、肩書き等の情報は、取材・執筆・公開時点のものです

執筆者

『MarkeTRUNK』編集部(マーケトランクへんしゅうぶ)

マーケターが知りたい情報や、今、読むべき記事を発信。Webマーケティングの基礎知識から、知っておきたいトレンドニュース、実践に役立つSEO最新事例など詳しく紹介します。 さらに人事・採用分野で注目を集める「採用マーケティング」に関する情報もお届けします。 独自の視点で、読んだ後から使えるマーケティング全般の情報を発信します。

メルマガ会員登録で最新マーケティング情報やトレンド情報、
セミナーイベント情報をチェック!

メールマガジンのサンプルはこちら

リード獲得などBtoBマーケティングにお困りではありませんか?
マーケティング施策に関するお問い合わせはこちら

アクセスランキング

  • 2024.8.20

    キャッシュとは?初心者でも分かる仕組みやキャッシュクリア(削除)の方法

  • 2024.7.12

    メールアドレスの作成方法を解説!初心者でも作れる無料サービスも紹介

  • 2024.9.3

    Pinterest(ピンタレスト)とは?初心者の方でもわかる活用法を解説

  • WEBマーケティングカテゴリの
    おすすめ記事

    マーケティングカテゴリの
    おすすめ記事

    SEOカテゴリの
    おすすめ記事

    おすすめ記事

    PAGE TOP
    閉じる
    2024.10.16

    マーケティング担当者必見!資料無料ダウンロード

    図解でわかる!Webマーケティングの仕事内容

    こんな方にオススメ!
    ・社内に詳しい人材がいないため何をしたらよいか分からない…
    ・Webマーケティングのどこから手を付けていいかわからない…

    マーケティングお役⽴ち資料資料ダウンロード