Visual Design

ビジュアルデザイン

ビジュアルデザイン(Visual Design)とは、レイアウトされた情報群に、目的に対して最適化された形や色、タイポグラフィ、動きなどの視覚要素を与え、静的にデジタルプロダクト(ウェブサイトやアプリ)を再現するデザインプロセスです。

なぜビジュアルデザインなのか

ビジュアルデザインの重要性は、建築を比喩的に考えてみることで直感できます。もし、注文住宅を建てる際、建築家が見た目(ビジュアル)を施工(エンジニアリング)の前に定義せず、「見た目は実際に建てながら決めましょう」と言ってきたらどうでしょうか。想像するだけで恐ろしいのではないでしょうか。ビジュアルのデザインをエンジニアリングと分離する重要性を理解している建築家は、ミニチュアのモデルを作ったり、コンピューター上での3DグラフィックやVRなどとして試行錯誤をし、住宅の見た目について事前に共有してくれます。

ビジュアルデザインの重要性を理解するためには、UXデザインの階層構造を理解することが出発点となります。次の図は、ジェシー・ジェームス・ギャレット(Jesse James Garrett)のウェブにおけるUXのモデル(The Elements of User Experience)を、アプリなどのウェブ以外のデジタルプロダクトを対象にしたUXデザインのプロセスにも適応するように、Cantas独自の解釈により広義かつシンプルに改変したものです。

UXデザインの5段階モデル
UXデザインの5段階モデル

本モデルにおいて、ビジュアルデザインは水色の最表層に位置づけられています。つまり、ビジュアルデザインはUXデザインの最後の工程となるわけですが、プロジェクト全体の視点から俯瞰すれば、UXデザインの次にはデジタルエンジニアリング(実装)に移っていくことになります。もし、ビジュアルデザインを省略すれば、エンジニアリングでビジュアルの試行錯誤をすることになりますが、エンジニアリングにおける修正コストはビジュアルデザインのそれより高いため、UXの質と生産性のトレードオフに陥ってしまいます。したがって、エンジニアリングより修正コストの低いビジュアルデザインというプロセスで見た目(ビジュアル)について多くの試行錯誤を重ね、エンジニアリングの役割をUXデザインの再現のみと集中させることで、UXと生産性のトレードオフから脱することができます。数日間のような短期的視点では非効率な方法が、数ヶ月のような長期的視点では効率的になるのです。

ビジュアルデザインのプロセス

Cantasのビジュアルデザインのプロセスを一般化すれば次のようになります。

  1. 目的/ 要件/ 情報アーキテクチャ/ レイアウトデザインの確認
  2. ビジュアルデザイン
  3. ビジュアルデザインの決定

まず最初にすべきことは、上述の5段階モデルでビジュアルデザインの下層にあたる目的、要件、情報アーキテクチャレイアウトデザインを確認することです。ビジュアルがこれらと整合性を欠いてしまっては、優れたUXを実現するビジュアル はデザインできないからです。

以上の確認が終わったら、SketchやFramerなどのデザインツール上で、ワイヤーフレームに形や色、タイポグラフィなどのビジュアルを試行錯誤しながら与えていきます。最近ではデザインツールの進化によって、動きや音などを再現することもできるようになってきており、必要に応じてそれら情報も加えることでより豊かなビジュアルデザインが可能となってきています。

最後に、ビジュアルデザインをクライアントと確認して決定します。合わせてUXライティングも決定すればUXデザインは完了です。その後は、UXデザインを実際のウェブやアプリの環境で再現するデジタルエンジニアリングに移ります。

Solution

カスタマージャーニーマッピング

UXの改善に必須であるカスタマージャーニーを適切なフレームワークで可視化することで、ブランドの運営に関わるメンバー間のコミュニケーション誤差を減らし、消費者視点をもたらし、UXを改善する戦略をデザインします。

See more

情報アーキテクチャ

ウェブサイトやアプリの情報を見つけやすく、理解しやすく、使いやすいように、情報をユーザー視点で適切に構造化し、UXの質を高め、ブランドエクイティの向上に貢献するデジタルプロダクトの骨格をデザインします。

See more

レイアウトデザイン

ウェブサイトやアプリの情報を見つけやすく、理解しやすく、使いやすいように、レイアウトを目的に対して最適化し、UXの質を高め、ブランドエクイティの向上に貢献するデジタルプロダクトの部品の配置をデザインします。

See more

ビジュアルデザイン

レイアウトされた情報群に形や色、テクスチャ、タイポグラフィ、動きなどを与え、ユーザビリティを高めると同時に、正のブランドエクイティの蓄積につながる知覚を引き起こすようなビジュアルをデザインします。

See more

ライティング

ブランディング、ユーザビリティ、SEOの3つの観点で目的に対して最適化されたバランスとなる言葉の組み合わせを言語表現の理論を応用しながら創造し、正のブランドエクイティの蓄積に貢献する情報を生み出します。

See more

Process

リサーチから企画、戦略、デザイン、実装、伝達までトータル支援。

Strategy Design

Product Design

  • Design Research

    エスノグラフィーやデスクリサーチから顧客のニーズやブランド連想を総合的に把握し、ブランドデザインの基礎をつくります

    See more

  • Brand Design

    中長期的に利益を最大化するブランドコンセプトを再定義または整理し、戦略やロゴ、タグラインなどをデザインします

    See more

  • UX Design

    ブランドコンセプトを実現するための顧客体験(UX)を積み重ねる、カスタマージャーニーやウェブサイトをデザインします

    See more

  • Digital Engineering

    UXデザインを、適切なモダンテクノロジーによって論理的かつ美的なウェブサイトに具現化し、ブランドコンセプトを伝えます

    See more

  • Digital Marketing

    コンテンツマーケティングやデジタル広告により集客したり、ウェブサイトを定量・定性の両観点から分析し、改善をデザインします

    See more

Cantasさんに依頼して本当に良かったです。というより、Cantasさんに頼んでいなかったら、ヤバかったなと感じています。ずっと、どうすれば集客できるか試行錯誤してきましたが、Cantasさんのおかげで、集客するために必要なことがわかりました。実際にお客様からのご予約も相次いでいて、こんなにも成果が出るのかと驚いています。本当にありがとうございます。

Jun Miyazaki, Vice President, Cuorehome

6x

How can we help you?

私たちはその場しのぎを嫌い、目的に対して本質的な問題を見極め、持続的成長につながるようにそれを解決します。2019年にCantasがトータル支援したクライアントの平均集客増加率はおよそ6倍*という結果になりました 🙌

現在、多数のご依頼を頂いており、これからご依頼頂いた場合のプロジェクト開始時期が2月後半以降となる見込みです。誠に申し訳ありませんが、ご理解どうぞよろしくお願いいたします。

* クライアントそれぞれのコンバージョン変化率の平均近似値として算出