しかし、マーケティングにおいてデザインシステムをどのように活用すればよいのでしょうか。
そしてそれは、企業のROIにおいてどのような意味を持つのでしょうか。
マーケターがデザインやコーディングをせずに、戦略やビジョンを伝えて、Webサイトの開発に貢献するにはどうしたらよいのでしょうか？
こうした疑問を下記で解消していきます。
しかし、その前に、デザインシステムとは実際にどのようなものかを説明しましょう。
「デザインシステムとは何か」については、多くの人がそれぞれの言葉で発信を行っているために解釈が混在しています。
この場においては、「デザインシステム」を次のように定義します。
これらの要素には、次のものが含まれます（ただし、以下に限定される訳ではありません）。
・ブランドガイドライン
・トンマナ
・タイポグラフィ
・色
・レイアウト
・繰り返し利用できるコンポーネント
・Webflow実装ガイドライン
・デザイン実装ガイドライン
以上の要素は、製品やウェブサイトを、ターゲットにとって有用なものにするために役立てられます。
またデザインシステムには、次のような役割があります。
・デザイナー、エンジニア、そしてマーケターのための共通言語を提供する
・デザイナー、エンジニア、そしてマーケターが、画像・ボタン・コード・スタイルを、即座に共通利用できるようにする
・製品およびWebサイトの構築においてモジュール方式を促進する
様々な説明をしてきましたが、デザインシステムを大きく理解するには、レゴブロックのように捉えると分かりやすいかもしれません。
デザインシステムは、全体を構築するための一要素となり、さらにそれらがどのように組み合わされているかを、誰から見ても直観的に理解できるようにするものです。
マーケターにアイデアをビジュアル化するプラットフォームを提供すれば、KPIを達成できる可能性が大幅に高まります。なぜなら、Webサイトがマーケティングとリードジェネレーションの目標を達成するのに近づくことができるからです。
マーケターは、顧客のニーズを把握し、そのニーズを満たすブランドストーリーを実現するという大きな役割を担っています。人口統計やペルソナの観点から考えるというその知識は、顧客に愛されるデジタル製品を作り上げる上でとても役に立つのです。また彼らは、ウェブサイトがユーザーの心に響いているか、企業のブランディング目標が達成されているかを指摘できる貴重な人たちなのです。
マーケターは、主にKPIやブランドメッセージ、消費者とのタッチポイントを扱うことが多いですが、だからといってビジュアル的な思考能力がないわけではありません。マーケター（またはその一部）は、UIやUXデザインといった専門知識は乏しいかもしれませんが、優れたデザインシステムを手にすれば、プロのデザイナーのようにウェブサイトをすぐに構築できるようになるでしょう。
デザインシステムをうまく導入すれば、特に大企業のように複数のマーケティングチームの手にプロジェクトが委ねられた場合、ROIは大きく向上します。
ただここで問題なのは、デザインシステムを組織に浸透させるのは簡単ではないということです。さらに、デザインシステムには多額の投資が必要なため、経営者や主要なステークホルダーの中には、新規に導入することをためらう人がいるのも無理はありません。
このような状況を打開するためには、幾つものメリットを伝える必要があります。
デザインシステムを導入することで、社員の業務がいかに楽になるかを示したり、あらゆるレベルで組織に利益をもたらせるということを示す必要があります。
そのためには、全面的な導入のための調査に、社員全員を参加させるのが効果的だと考えられています。豊富な関連データから推測をすることで、驚くような結果も導き出せる可能性があるのです。
うまくいけば、生産性・効率・品質の向上が収益に与える影響が明らかになり、導入に賛同する人々が増えるかもしれません。
ここでは、デザインシステムがマーケティングにどのようなメリットをもたらすかについて、深く掘り下げて考えてみましょう。
マーケターは、ブランドメッセージ、KPI、マーケティング戦略を主に扱っていますが、そのアイデアを視覚的に表すためのツールを提供することでよりこうしたマーケティングアイデアが活用しやすくなります。マーケターは、デザインシステムを活用することで、より詳しくコンバージョンに焦点を当てたWebページを作成することができ、時間を浪費しがちな、デザイナーやエンジニアとの無駄なやり取りを省くことができます。
マーケターが簡単にウェブサイトを作成できるデザインシステムを導入することで、マーケターのメリットだけでなく、デザイナーやエンジニアも繰り返される単純作業ではなく、付加価値の高いカスタマイズや、新しいコンテンツの作成に集中することができるようになるのです。
マーケターがアイデアを視覚的に伝えるプラットフォームを用いることは、単に副次的にデザイナーやエンジニアの有用性を向上させるだけでなく、より良いUXにも繋がります。
事前にデザイナーやエンジニアにも共有されているコンポーネントやアセットを含んだ、一元的なシステムがあれば、マーケターは視覚的な一貫性を損なうことなくWebページやUXを作成でき、その結果、より良い体験を生み出すソリューションが生まれます。
デザインシステムには、マーケター、デザイナー、エンジニアがWebページを作成するために使用する、繰り返し使うことのできる要素やコンポーネントが含まれています。必要なものはすべてデザインシステムの中にあるので、誰もゼロから何かを作る必要はありません。
つまり、もう重複したアセットに作業時間を割く必要はないのです。また、すべてがシステム内に集約されているため、「技術的負債」が発生する可能性も低く、各自が効率的に仕事をこなせるようになります。
デザインシステムの導入や維持には、確かにリソースが必要ですが、一元化することで全体が効率化されれば、そのメリットはマイナス面をはるかに上回ります。
最高のプロダクトを作り上げても競合他社よりも先に提供を開始できなければ、ほぼ打ち負かされることになります。現代においては、先手を打てなければ、チャンスも顧客も市場シェアも失ってしまいます。
要はマーケターは、類似の製品がすでに市場で人気を集めている場合、デザイナーの介入を待っているわけにはいきません。自分で制作できるのであれば、マーケター自身でランディングページを作るに越したことはないのです。
デザインシステムを導入すれば、マーケターはデザイナーを待つことなく、現在の流行に合わせ、他社に先駆けてマーケティングキャンペーンを開始することができます。
マーケティングを強化するデザインシステムを作り上げる方法論はいくつも存在します。
その中で、次に挙げる方法論は、効果があり、持続可能で、クライアントのニーズに合ったものを構築することができる可能性が高いと言えるでしょう。また、マーケターが簡単に使えるデザインシステムを作り上げることも同時に目指しています。
この方法論内でのプロセスは、調査、戦略立案、デザイン、webflow、 webflowワークショップの5つの段階に分かれています。
まず、クライアントのビジネスについて、できる限り詳しく認知することから始めます。
ビジネスのゴールは何か？ターゲットのニーズは？現在の戦略は？などといった視点です。
マーケティングチームへのインタビューに加え、現在のWebサイトを検証し、改善点を洗い出し、ビジネスの成果を損なう可能性のある問題やギャップを特定します。
必要な情報を収集・検討した後、戦略フェーズに入ります。ここでは、何をどのように構築するのかを全員が理解できるように、ビジュアルアセットやドキュメントを作成します。その内容は以下の通りです。
デザインシステムが導入されたプロジェクトは、クライアントのデザインを改善し、次のレベルへ引き上げる絶好の機会となります。しかし、ブランドの一貫性を保ちながらそれを実現するためには、ブランドのビジュアル言語を定義するベースラインを作成する必要があります。
そのために作成するのが、ムードボードです。「1.調査」の段階でクライアントから集めたすべての情報をもとに、クライアントのブランドの個性を正確に表現し、伝えるためのムードボードを作成します。
最高のビジュアルアイデアを生み出すために、クライアントにもブレーンストーミングに参加してもらいます。そして、その中からベストなアイデアを選び出し、わかりやすく分類していきます。
次に、ワイヤーフレームを作成し、クライアントと共有します。ワイヤーフレームとは、基本的にデザインシステムがどのようなものかを示すスケッチのことです。この段階は、クライアントの期待値を設定し、今後の進め方について双方の合意を形成するために重要です。ワイヤーフレームをクライアントに見せ、フィードバックをもらうことで、設計・開発に投資する前に必要なレイアウトや構造の変更を容易にすることができます。
デザインシステムの全体構成が決まったら、Webflowでどのように構築されるかを決めていきます。
クラス名の定義、要素やコンポーネントの整理、テンプレートやサンプルのセットアップを行い、これをもとに実際に制作に繋げていきます。また、徹底したドキュメント化により、すべてがどのように実装されるのか、全員の足並みを揃えます。
いよいよデザインです。ここでは、デザインシステムのトーン＆マナーを定義し、コンポーネントのUIを作成し、各所に最終的な磨きをかけます。Figma等でスタイルガイドを作成し、クライアントのチームと共有することで、効率的に作業が進むようにもできます。
スタイルガイドがあれば、Webflowに移行する前にFigmaでデザインシステムを作成し、ブラッシュアップさせることができます。
この時点で、ウェブサイトを構築する前に、繰り返し利用できるコンポーネントや、将来的に新しいコンポーネントを作成するのも容易にするような環境がFigmaで整えられるのです。
すべてのページとコンポーネントのビジュアルデザインを作成し、予め定義されたインフォグラフィックス、イラスト、アニメーショングラフィックスを加えて、ユーザーに対し、全体を通して優れたUXを提供します。
この時点で、すべての技術的な仕様が明確になり、詳細なデザインも決まり、クライアントからの疑問にも全て回答できている状態となります。これらの条件が満たされると、エンジニアチームはWebflowの実装を開始することができます。
Webflowはデザインシステムの構築に最適なツールで、最近リリースされた”シンボルのコンテンツオーバーライド”により、マーケティングチームがブランドのビジュアルアイデンティティやコアバリューに対して妥協せずに、より速く構築できるデザインシステムを作り上げることができるようになりました。
以前は、ページ間でシンボルを再利用することはできましたが、まったく同じであるコンテンツである必要がありました。現在は、シンボルを追加し、各コンテンツノード（テキスト、リッチテキスト、画像、リンク）に結合可能なフィールドを作成し、各インスタンスにコンテンツのオーバーライドを追加することができます。
つまり、見出し、画像、テキストブロックを持つカードコンポーネントを作成し、異なるテキストやメディアを持つページを跨いで、このカードコンポーネントを再利用することができるのです。
この優れた改良のおかげで、Webflowを使ってデザインされたすべてのコンポーネントを再利用可能なシンボルに実装することができるようになりました。これにより、マーケターの作業はとても楽になりました。Webサイトの制作やコンテンツの更新に必要なのは、作成した再利用可能なシンボルをキャンバスにドラッグ＆ドロップして、コンテンツを編集することだけです。
作成するシンボルには、次に挙げる2つの重要な特徴があります。
私たちは、さまざまなユースケースに対応するシンボルを作成します。こうすることで、デザインシステムは必要な要素のみに絞られ、チーム全員での閲覧が容易になります。
デザインシステムの主なメリットのひとつは、制作チーム内の全員が、同じ要素やコンポーネントを用いて構築できることです。フォント、色、ボタン、アイコンの使用を標準化することで、社内のチームは共通言語を持つことができ、意思決定やプロセスにおける推測やあいまいさを排除することができます。もちろん、生産性や効率、仕事の満足度も向上します。
しかし、デザインの知識がない人が白紙のページを前にすると、途端に行き詰まることがあります。そこで、最もよく使われる構成要素やレイアウトを検討し、テンプレートページも作成します。これらのテンプレートがデザインシステムにアップされると、マーケターはシンプルなランディングページをより早く、より簡単に作成できるようになります。
シンボルをあらかじめ定義しておくことで、そのパフォーマンスを最適化し、洗練させる余地が生まれます。またその定義は、SEOのベストプラクティスに適合するような方法で行っています。
私たちは、お客様が検索エンジンで上位に表示されるようなウェブページを簡単に構築できるようにしたいと考えています。
強固なデザインシステムはROIを高めることができますが、それだけではマーケティングチームを好転させることはできません。適切なトレーニングやガイダンスなしに、単にデザインシステムを渡しても、マーケターが実行できるわけではありません。
具体的には、それぞれにカスタマイズしたデザインシステムの使い方を学ぶだけでなく、デザイン哲学を再確認し、それに沿ってプロセスを調整できるようにします。
マーケターに真の力を与えるには、彼らにものを作らせることです。ホワイトボードに絵を描いてばかりではいけません。なぜなら、彼らのニーズに合わせたデザインシステムを提供し、その利点を最大限に引き出すためのトレーニングをすれば、マーケターは偉大なことを成し遂げられる可能性を秘めています。そして、それはあなた自身のブランドを高め、ROIの目標を達成することに繋がるのです。
当社では、こうしたデザインシステム構築に最適な次世代ノーコードツールWebflowに関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営