【翻訳】階層的なグリッドについて考えることが、コンテンツファーストのデザインにどのように役立つのか

コンテンツについて考えないと、こわいことが起こるかもしれませんよ。

UXデザイナーとして、私たちはしばしばコンテンツとデザインの間の微妙な境界線を踏むことを要求されます。そのため、特にデザインの初期段階では、コンテンツが確定していない可能性があるため、コンテンツを避けたデザインをする傾向があります。例えば、トップページにイントロダクションのテキストを入れたいが、チームでまだ議論中である場合、そのコンテンツを入れると議論が脱線する可能性があるので、チームに見せるスケッチにはプレースホルダーのテキストを入れるかもしれません。

A page with a placeholder image and lorem ipsum text.

私たちはしばしばデザインを抽象化し、ドロップリストかラジオボタンかではなく、そもそもそのページが何をすべきなのかというところにチームが集中できるようにします。そうすることで、私たちは何をデザインする必要があるのかを把握し、いくつかのクリエイティブなオプションを検討することができます。しかし、そこで疑問が生じます。コンテンツをいつ追加すればよいのでしょうか？通常、ユーザーテストの前、あるいは必要であればそれ以降に、できるだけ遅い段階までコンテンツを追加することを避ける傾向があります。コンテンツを最後に残しておくと、プロジェクトの後期にいくつかの問題を引き起こすことがあります。私がこの問題に遭遇したのは、プロセスの後半で予想外のデザイン上の拒否反応に遭遇したときでした。

外的要因によってボツになるデザイン

私のチームは、ある連邦政府の組織のリデザインを実施するたった3週間前に、困難に直面しました。現在のデザインソリューションは、組織的（そして法的）な観点からうまく機能しないのです。残念ながら、法律の文言や他の製品との組織的な整合性から、予期せぬデザインボツに遭ってしまったのです。そのような時間のない中で、チームは、元の悪いデザインを少し手直しして使うという、良くないデザイン解決策に傾いてしまいました。幸い、私たちはユーザーテストでいくつかの代替デザインソリューションをテストしました。慌ただしい中、テストデータを整理することで、そのデザインソリューションの実装方法を迅速に把握することができました。しかし、そのことで私はより大きな視点で考えるようになりました。あのような事態を避けるためには、どうすればよかったのだろうか？もし、私たちが生成するコンテンツについて十分に考えていれば、おそらくこのような問題に遭遇することはなかったでしょう。

コンテンツファーストのデザイン

コンテンツファーストのデザインとは、コンテンツを考えることから始める考え方です。通常、コンテンツを考えるところからデザインを始めることはないので、珍しいと感じるかもしれません。例えば、ホームページのデザインは、ある種のデザイン要素のためのセクションをブロック化することから始めるかもしれません。しかし、ユーザーがこのページにたどり着くまでの道のりを考えたことはありますか？社内用アプリケーションをデザインしていた私たちのデザインがボツになった理由のひとつは、この点にありました。ユーザーは通常、フォームコントロール（次へ／前へ／キャンセル）と静的なページを持つ別のアプリケーションから、私たちのページに移動します。私たちのページには、サイドバーナビゲーションがあり、ポップアップやホバーステートが頻繁に使用されていました。このようなページ間の不整合により、私たちのアプリケーションは製品群の中で（悪い意味で）際立っていました。しかし、もっと悪いのは、とあることが可能かどうかを考えていなかったことです。たとえば、「パーソナライズド・ダッシュボード」というアイデアは、ユーザーのログインプロセスがそれほど洗練されていないことに気づくと、うまく機能しなくなります。ユーザーはユニットコードでログインするのですが、そのユニットコードには前日に行った操作が保存されていないのです。そのため、「最新のドキュメント」「よく使うドキュメント」などのタブが機能しないのです。

だからこそ、コンテンツファーストのアプローチが有効なのです。コンテンツが最後になると、プロジェクトは遅くなり、予算は高くなります。既存のコンテンツに合わないデザインをすると、コンテンツを書き直すか、デザインを変更する必要があります。しかし、プロジェクトで多くの異なるデザインの優先順位をこなす中で、コンテンツを念頭に置いておくのは大変なことです。しかし、「コンテンツを考えなさい」というリマインダーを用意するのではなく、1つの具体的な質問を自問自答すればいいのです。

階層的なグリッドレイアウトでページをデザインするにはどうしたらいいか？

階層型グリッドとコンテンツ

A layout of a hierarchical grid. Light pink squares of different shapes and sizes are shown across the page with dark pink acting as the border. The words Hierarchical grid are at the top.

階層型グリッドはすべてのデザインに適しているわけではありませんし、あなたのデザインで使いたいとは思わないかもしれません。しかし、このレイアウトでデザインをスケッチすることは、コンテンツが最後のステップまで残されていないことを確認するための素晴らしい方法なのです。階層型グリッドは、デザイン要素の重要度順や、特定のデザインページの中心的なメッセージにどのように優先順位をつけるかを検討させるものです。

その結果、コンテンツ・ファーストの5つのステップとうまく整合しています。

まず、さまざまな視聴者層とそのトップ・ニーズを明らかにする。
これらのニーズに優先順位をつけ、相対的な重要性を示すために、それぞれのニーズに番号を割り当てる。同じ番号のものは2つとしてない。
ページをデザインする前に、そのページが伝えるべきことを特定する簡潔なメッセージ（1〜2文）を書きます。
このページが満たすべきニーズを選択する。そして、そのニーズとメッセージを照らし合わせて、ニーズとメッセージが一致していることを確認しする。
メッセージとニーズをさらにサポートするページをデザインする。

私たちは普段のデザインの過程で、これらのステップのいくつかに触れるかもしれませんが、他のステップを忘れているかもしれません。特に、ステップ3と4は、普段作っていても、つい忘れてしまう本質的なものです。例えば、あるページ「商品ページ」の目的は、特定の個別商品（「商品C」）ページをクリックしてもらうことである、というハイレベルなワークフローを早い段階で作成することがあります。このページに対する短いメッセージを書くとしたら、"このページの目的は、ユーザーを当社の注目製品の一つである製品Cに誘導することです。"となるかもしれません。しかし、デザインしているときには、このようなことは考えもつかないかもしれません。例えば、モックアップではデザイン要素を順番に並べていますが、これは「製品A」が先にあり、「製品C」はこのページの焦点ではないという意味です。このような場合、階層型グリッドレイアウトが役に立ちます。どの要素が最優先されるかを考えることで、このページがどのようなメッセージを伝えているのか、ユーザーに何をしてほしいのかに合致しているのか、という問いかけにもつながります。

また、このレイアウトは、優先したいコンテンツの種類に応じた条件を考えざるを得ないというメリットもあります。例えば、「評価の高い製品」を優先的に表示したい場合、一人のユーザーによる推薦ではないことを示すために、5つ星評価の集計を表示する必要があるかもしれません。あるいは、製品が信頼できるというメッセージであれば、ロゴ（「Better Business Bureau」）や賞（「2019 Product of the Year」）をどのように表示するかを考える必要があるかもしれません。階層的なグリッドデザインを廃止するとしても、このフォーマットでどのようにデザインするかをスケッチすることで、コンテンツが最後まで残らないようにすることができます。また、現在のコンテンツが自分のデザインに合っているかどうかを考えるきっかけにもなるかもしれません。

デザインとは、複数のステップからなる道である

デザインとは、1つのページだけで完結することはほとんどなく、ウェブサイトを横断する道筋を観客に案内することなのです。コンテンツと、そこから汲み取ってほしいメッセージを考えることで、問題なく前進してもらうことができます。コンテンツを後回しにするのは簡単ですが、ユーザーは視覚的に示されたコンテンツの道筋をたどる可能性が高いのです。ですから、たとえ現在デザインが細部を抽象化していたとしても、コンテンツを意識することが肝心です。手っ取り早く行うには、階層型グリッドについて考えてみましょう。データを整理することで、どのように別のデザインソリューションを素早く作ることができたか、知りたいと思いませんか？私の新刊『Data-informed UX Design』では、この他にもUXデザインプロセスを改善するための多くのデータの微調整について説明しています。