ワイヤーフレームに直接コンテンツを作成。意図的で魅力的な体験を実現する | アドビ UX 道場 #UXDojo

どのような目的でつくられたデジタル製品やサービスであったとしても、その利用者が求めるものといえば、情報の収集、学習や調査、何らかのタスクの実行、あるいはただ楽しむなど、何れもデジタルコンテンツを通じて行われる行為です。

そして、Pinterest のような画像のみを提供する一部の体験を除けば、多くの場合人々が最も接することになるのは、文章として書かれたコンテンツです。

コンテンツが重要であるということは、デジタル空間の構築に関してよく理解されている真実のひとつです。コンテンツは王であり、女王であり、すべての重要なものに比せられます。実のところ、主としてデジタル空間における体験の違いを生み出しているのは、言葉によるコミュニケーションのあり方です。それ次第で、気楽な楽しい体験か、PC 本体を窓から投げ捨てるに十分なほどイライラさせられる体験かの違いが生まれます。

だとすれば、ほとんどのチームが、言葉はまったく重要ではないと思っているかのような方法でデジタルコンテンツを制作しているのは信じがたいことです。そのために、体験が本来の半分以下の出来栄え、つまり、サイトやアプリがつくられた目的の半分も達成できなくなっているとしたらどうでしょうか。

残念な、そして典型的なデジタルコンテンツへのアプローチ

インターフェイスのためのデジタルコンテンツを記述する際、ほとんどのチームが 2 つの誤った方法のどちらかを採用しています。

1. デザイン後、あるいは開発後の画面を言葉で埋める

この場合、文字用のスペースは lorem ipsum の類の言葉で埋められています。というのは、その画面が何を実際に伝えるのか、何を助けようとしているのかがまだ決定されていないか、時には考えられてさえいないからです。こうしたプレースホルダの言葉は、コンテンツの専門家の助けを借りずに決められ、顧客が行う必要のあるほとんどのインタラクションが考慮されず、そしてしばしば、言葉を使う目的ではなく、言葉で画面がどのように見えるかを基準に決められています。

2. コンテンツ担当が Word 文書としてデジタルコンテンツを書く

こうした文書は、コピーデッキやコンテンツテンプレートとも呼ばれます。一般的に、この文書は、コンテンツが表示されるコンテキストから完全に切り離された環境で書かれます。制作者や開発者は、「プロモサマリートップ」や「グレーボックスのタイトル」といった言葉による説明からレイアウトを解読しなければなりません。

これら 2 つのアプローチには共通点があります。それは、ビジュアルデザインとレイアウトが決定されるまでは、体験をサポートする一端であるはずのデジタルコンテンツを統合する余地がないことです。さらに悪いことに、体験をサポートするべき言葉が、実際の体験と完全に切り離されて書かれていることが実に多いのです。

心地悪いフィット

ワイヤーフレームが完成し、さらに、本格的なビジュアルデザインが出来上がるまでには、多くのことが起きています。様々な意思決定が行われて、多くの項目が確定していることでしょう。もし、デジタルコンテンツの表現、言葉遣い、メッセージングについての検討をこの段階まで待つと、コンテンツ制作者にできることといえば、間違った場所に正しい言葉を押し込むことくらいです。このアプローチでは、有益で、魅力的で、実用的な体験を生み出す可能性がとても低くなります。

これが、サイト、アプリ、その他の体験が、しばしば期待するレベルの反響やオンラインビジネスに結びつかない主要な理由になっています。この問題を解決すれば、期待通りの結果を得られる、そしておそらくはそれ以上の体験を生み出せるようになるはずです。

文脈の中でデジタルコンテンツを書く

もしプロジェクトをワイヤーフレーム作成から始めるなら、実際の言葉をワイヤーフレームに書き込むべきです。プロトタイプを開発する時は、プロトタイプに実際の言葉が表示されるようにすべきです。つまり、インターフェイスをつくり始めるのと同時に、文章のコンテンツもつくり始めるのです。これにより、コンテンツはデザインと同じタイミングで、場合によってはデザインより前に存在することになります。

この手順であれば、画面が何を伝え、何を支援し、何を理解させる必要があるかを「正確に」把握できます。これにより、デジタルコンテンツを、真に体験全体をサポートするよう配置することが可能になります。つまり、すべてが連動するデザインへの道が開かれるのです。そして最高のデジタル体験を追及できます。

ワイヤーフレームと昔ながらのコンテンツ制作

ここで、あまり効果的でない従来のアプローチを確認し、何が問題なのかを見てみましょう。

コンテンツを考慮せず画面を定義

次のような画面をよく目にしていませんか。これは、従来型の典型的なアプローチにおいて、コンテンツ担当に提供されるレイアウトの例を示したものです。

上図のワイヤーフレームのレイアウトは、ページが伝えることになる実際のコンテンツや、その情報を伝える最適の方法といった事柄がまったく考慮されていません。その代わり、コンテンツ担当に言葉を詰め込むよう要求するための場所が複数の箇所に割り当てられています。しかも、必要な文字数はかなり多いようです。

実際の言葉が合わない

もし実際に必要なコンテンツが、事前に想定されていた分量よりずっと少ない場合、どうなるのでしょうか。通常、コンテンツ担当は、実際に書くべきことが無かったとしても残りのスペースを埋めようとします。そして、大抵の場合に、要点は薄まり、画面にノイズを加えることになります。ただ、そうしないと以下の図のような見た目になるため、隙間を埋める行為はある程度理にかなっています。

さて、上の状態はあまりよろしくなさそうです。ここで何がおきるるでしょうか？一般的に、コンテンツ担当は、レイアウトの都合に合わせて残された空白に余計な言葉や不要な情報を詰め込むよう要求されます。

さらに、重要な CTA、あるいは与えられたレイアウト内に収まらない追加ポイントなど、考慮されていないコンテンツのニーズがある場合は、状況がより悪化します。そして、それは珍しいことではありません。

これは素晴らしい体験を生み出すアプローチとは呼べません。

文脈の中でコンテンツが意図やメッセージを伝える

もしも、最初からコンテンツがレイアウトまたは初期デザインの一部になっていたらどうでしょう？もし、コンテンツ担当や、必要なコンテンツを知っている誰かが、最初から画面定義に関わっていたら？

それは状況を一変させることでしょう。

上のワイヤーフレームは、画面を見る人にもたらされる体験を考える作業の一部としてコンテンツを制作した結果です。このコンテンツ制作は、デザインでもデザインの準備でもなく、レイアウトの確定ですらありません。その代わり、従来のコンテンツ制作プロセスでは見落とされている重要なタスクの実行、すなわち、文脈の中でどのようなコンテンツが画面に表示される必要があるのかという議論を行います。議題には、コンテンツの順番、階層、インタラクション、おおよその長さなども含まれます。このアプローチは、画面の目的とメッセージが何になるのかという推測を排除します。一番最初の段階から、インターフェイスの文脈における意図と戦略をコンテンツとして定めるからです。

もしチームが文脈に沿ったコンテンツの作成から始め、それをデザインの方向性に反映させたなら、ユーザーのニーズをより的確に捉え、その結果として、より魅力的でよりビジネスに貢献する体験の構築に必ず貢献するでしょう。

チームがコンテクストに沿ったコンテンツを作成できるようにする

デジタルコンテンツを「コンテキストの中で制作する」アプローチの採用自体は、複雑なことではありません。ですが、ワイヤーフレーム定義の最初のステップから、手順を変更する必要があります。ワイヤーフレームやプロトタイプ内でのデジタルコンテンツ制作に前向きになり、効果の低い従来のコンテンツ制作方法に戻るのを防ぐために、以下の 3 つの新しいプラクティスを導入してみましょう。

1. コンテンツ制作者にソフトウェアライセンスを与える

コンテンツ制作をインターフェイス定義と並行して行うには、コンテンツ制作者がチームの他のメンバーと一緒に作業する必要があります。もしコンテンツ制作者がワイヤーフレームを描いたりプロトタイプを制作するソフトウェアを利用できなければ、自動的に、コンテンツとそれ以外のデジタル体験の間に障壁が出来上がります。

2. 仮テキスト、lorem ipsum を禁止する

とても真面目に書きますが、これから作成するすべてのワイヤーフレームとプロトタイプにおいて、実際の言葉だけを使うようにしましょう。どのインターフェイスにも、画面定義から制作までのプロセス全体を通じて「lorem ipsum は使わない」を新しいルールにします。もし、チームが lorem ipsum の必要性を感じるタイミングがあったなら、それはコンテンツへの考慮が不足しているサインです。コンテンツ担当を呼んで、その場で直接、実際のコンテンツを作成しましょう。

3. まずコンテンツから始める

すぐにデザインに取りかかるのは魅力的かもしれませんが、それでは成功する体験を遠ざけてきた従来の方法に戻ってしまいます。すべての画面とインタラクションをコンテンツから始め、必要な情報やアクション、順序や優先度、そして実際に使われるかもしれない言葉を、コンテクストの中で示します。その結果は最終的なレイアウトやデザインにはまったく役立たないかもしれませんが、コンテクストの中でコンテンツを定義することにより、チーム全体としてのコラボレーションの質が向上し、作成するデジタル体験のレベルが一段引き上げられます。

実際に試してみよう

次に新しいプロジェクトを始めるときは、デジタルコンテンツをインターフェイスに当てはめるアプローチを見直してみましょう。ワイヤーフレームやプロトタイプと同時に、あるいはレイアウトやデザインの定義を始めるよりも前に、コンテンツの定義を始めてみてください。コンテンツ制作者にはワイヤーフレームやプロトタイプ制作のソフトウェアを提供し、必要なコミュニケーションを行える環境を設定することを忘れずに。

そして最後の一言として、コンテンツ制作者は必ずしもビジュアルデザインに近い人間ではないということを付け足しておきます。ただしそのことは問題ではありません。文脈の中でつくる最初のコンテンツは、美しさは気にせず、構造的で体験の骨格となるものが望ましいからです。その骨格からスタートすれば、これまでのデジタル体験では得られなかったような形で人を惹きつけ、喜ばせ、支援する、美しい全体像を見出せるはずです。

この記事は Create digital content directly in wireframes and prototypes for more intentional, engaging experiences（著者:Bailey Lewis）の抄訳です