Layout Design

レイアウトデザイン

レイアウトデザイン(layout design)とは、各ページにおける情報の配置、すなわちレイアウトを決定する、言わばページの骨格をつくるデザインプロセスです。レイアウトデザインの結果である具体的な成果物はワイヤーフレーム(wireframe)と呼ばれます。

ワイヤーフレームの種類

レイアウトデザインの核心は目的に対する最適なレイアウトの決定ですが、その際の表現の具体度にはグラデーションがあり、人によって「ワイヤーフレーム」という単語から思い浮かべるイメージが異なりコミュニケーションコストが無駄にかかるということが発生します。そのため、Cantasではワイヤーフレームを次の3種類に分類し、目的やメンバーのリテラシーに応じて柔軟に組み合わせることで、最適な情報の配置構造を達成します。

テキストワイヤーフレーム

Google Docsなどの標準的なドキュメントアプリケーションの見出しや箇条書きなどを用いてテキスト(文字)のみで表現する、3種類の中で最も抽象度が高い(具体度が低い)ワイヤーフレームです。ドキュメントアプリケーションの特性上、水平方向への情報の配列は煩雑なため、基本的に、ページにおけるメインコンテンツなどの縦方向の配列のみをプロトタイピングする際に用います。例えば、弊社のトップページのテキストワイヤーフレームは次のように表現できます。

  • トップセクション

    • ロゴ
    • メニューアイコン
    • メインコピー
  • サービスセクション

    • デザインリサーチ
    • ブランドデザイン
    • UXデザイン
    • デジタルエンジニアリング
    • デジタルマーケティング
    • 詳細ボタン
  • (中略)
  • ブログセクション

    • 記事1
    • 記事2
    • 記事X
    • 詳細ボタン
  • (中略)
  • フッター

テキストワイヤーフレームの長所は、テキストをタイピングするだけなので、プロトタイピングにおける修正コストが最も低く抑えられる点です。一方で、テキストから具体的な文章やビジュアルをイメージする必要があるため、ウェブやアプリに慣れ親しんだメンバー間でのみ用いることのできるアプローチです。

ペーパーワイヤーフレーム

紙に手書きでレイアウトを表現する、3種類の中では中間の抽象度のワイヤーフレームです。

ペーパーワイヤーフレーム
ペーパーワイヤーフレーム The image from https://medium.com/@dwipriyatmoko/tahapan-dalam-ui-ux-design-part-2-58dfbfcaf3c5

ペーパーワイヤーフレームの長所の1つは、後述のデジタルワイヤーフレームに比べて低い修正コストでプロトタイピングを進められる点です。もう1つの長所は、手書きが(PC操作に比べて)創造性を高める可能性があり1、既存のデジタルプロダクトのフレームに縛られずにより自由なレイアウトを試行錯誤できるため、結果として、ユーザーにより優しいUXの質の高いレイアウトや、ブランドエクイティの向上に貢献するユニークなレイアウトをデザインできる蓋然性が高まる点があります。

デジタルワイヤーフレーム

Sketchなどのデジタルデザインツールでレイアウトを表現する、3種類の中で最も具体度の高いワイヤーフレームです。

デジタルワイヤーフレーム
デジタルワイヤーフレーム The image from https://www.justinmind.com/blog/website-wireframe-design-guide/

3種類のワイヤーフレームの中では最も修正コストが大きいですが、それでもUXデザインにおける次のプロセスであるビジュアルデザインに比べれば修正コストは低いため、ビジュアルデザインの前にデジタルワイヤーフレームでプロトタイピングしておくことで生産性高くUXを高められます。また、デジタルワイヤーフレームは実際のデジタルプロダクトのUIに近い表現をとるので、ウェブサイトやアプリにそこまで慣れていないメンバーと共有する必要のある際にも、認識のズレをなくして進める優れた手段となります。さらに、デザインツールでは複数ページ間の遷移を再現する機能があるため、UXに対する影響の大きいナビゲーションのデザインをするのにも適したワイヤーフレームです。

なぜレイアウトデザインなのか

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

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

本モデルにおいて、レイアウトデザインは紫色の上から2番目の層(紫色)に位置づけられています。レイアウトデザイン層の上にはまだ層があり、その最表層(水色)にはビジュアルデザインがあります。つまり、レイアウトデザインが不適切であれば、それを土台としてデザインされるビジュアル(e.g., 色、形、タイポグラフィ、モーション)も論理的に不適切となり、その結果としてUXの質が下がるということです。

また、生産性の観点からもレイアウトデザインは重要です。なぜならデジタルに限らずあらゆるデザインプロセスにおいて、最初から最終成果物の具体レベルで試行錯誤するよりも、抽象段階で試行錯誤を進めてから具体の実装へ進めるが生産性が高くなる一般的なメカニズムがあるためです。

デザイン思考でもリーンスタートアップでも、実装の前にプロトタイピングという試行錯誤のプロセスがあるのもこのためです。このメカニズムが成立するのは、具体度と修正コストが正比例の関係にあるためです。つまり、上述の5段階モデルでは抽象度の高い下の階層ほど修正コストは小さく、具体度の高い上の階層ほど修正コストは大きくなります。

したがって、例えばウェブサイトのデザインにおいて「情報アーキテクチャ→ビジュアルデザイン」のプロセスは、「情報アーキテクチャ→レイアウトデザイン→ビジュアルデザイン」に比べ試行錯誤における修正コストが大きくなるため、UXの質を優先すれば生産性は下がり、生産性を優先すれば試行錯誤を減らす必要があるため、UXの質が下がりやすくなります。もし「情報アーキテクチャ→実装」というプロセスを採用すれば、先のトレードオフがより大きくなることは言うまでもなく、悪質なプロセスとすら言えます。数日間のような短期的視点では非効率な方法が、数ヶ月のような長期的視点では効率的になるのです。

レイアウトデザインのプロセス

Cantasのレイアウトデザインのプロセスを一般化すれば次のようになります。

  1. 目的/ 要件/ 情報アーキテクチャの確認
  2. テキストワイヤーフレーミング/ ペーパーワイヤーフレーミング
  3. デジタルワイヤーフレーミング
  4. レイアウトデザインの決定

まず最初にすべきことは、上述の5段階モデルでレイアウトデザインの下層にあたる目的、要件、情報アーキテクチャを確認することです。レイアウトがこれらからブレてしまっては、優れた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月後半以降となる見込みです。誠に申し訳ありませんが、ご理解どうぞよろしくお願いいたします。

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