Designing Connected Content

「DESIGNING CONNECTED CONTENT — デジタルプロダクトの長期的な成長を支える構造化コンテンツ」を読みました。

DESIGNING CONNECTED CONTENT — デジタルプロダクトの長期的な成長を支える構造化コンテンツ

本書は、ウェブサイトやアプリケーションなどのデジタルコンテンツについて、基本となるのは「構造化コンテンツ」であり、まず構造を設計し、その構造に基づいてコンテンツを作り、最後にインターフェースとしてパブリッシュしよう、と説くものです。

「構造化コンテンツ」とは、あらゆるインターフェイスに対応するため、特定のインターフェイスとは無関係に計画、開発、連結されたコンテンツ (本書 pp.38 - 39) のことです。構造によって、また構造がインターフェース (ビジュアルなどの表現) から分離されることによって、コンテンツに柔軟性を自由度を与えることができます (本書では COPE : create once, publish everywhere というキーワードがしばしば出てきます)。また、構造はマシンリーダブルでもあるので、AI を介したチャットボットや VUI でのインタラクションを含む、フューチャーフレンドリー (future friendly) なパブリッシングへの柔軟な対応も期待することができます。

本書で解説されている構造化コンテンツの作りかたの要点を私なりのメモとして拾ってみると、以下のような感じになります。

ドメインモデル
  • 主題領域 (ドメイン) について調査する。
    • ドメインの専門家から学ぶ。
      • コンテクスチュアルインクワイアリ― (contextual inquiry : 文脈的質問法)
      • 用語とその定義のリスト
      • カードソート
      • ドメインの概念モデルのスケッチ (視覚的なマッピング)
    • ユーザーから学ぶ。
      • 専門家の用語とユーザーの一般用語の違い (世界観の違い) を理解する。
      • 専門家の話は、主題領域全体の地図を得るのに役立つ。ユーザーの話は、主題領域の中で何が重要か、地図上の興味深い地点 (POI) を示してくれる。
  • 主題領域 (ドメイン) のモデルを作る。
    • ユーザーの関心は、一企業のビジネスが訴求する範囲で完結しない。(なので、より幅広く、ドメインモデルを作る。)
    • ドメインを構成する概念 (オブジェクト) をつなぎ図式化する。
    • オブジェクトとインスタンスの違いに注意する。オブジェクトは再利用可能な概念、インスタンスはその概念の具体例。モデルを構成するのはオブジェクトでありインスタンスは含めない。
    • オブジェクトを示す用語は、ユビキタス (チームメンバー、ドメイン専門家、ユーザーにとって意味を成すもの) であり、プロジェクト関係者全員が正しい用語を守ることにこだわること。
コンテンツモデル
  • ドメインモデルを基に、コンテンツモデルに含めるオブジェクトを決める。
  • コンテンツモデルを構成するオブジェクトに対して、必要な属性を追加することで、コンテンツタイプに変換する。
  • コンテンツタイプ (属性を含むオブジェクト) を用いて、改めてコンテンツモデルを形作る。複数のコンテンツタイプにおいて共通に用いられる属性があったり、あるコンテンツタイプにおける属性が別のコンテンツタイプ (オブジェクト) として存在したり、といったことも含めて関係性を明確にする。
コンテンツリソース
  • コンテンツタイプを基に、コンテンツリソース (ウェブページやアプリのビューなど、最終的にパブリッシュされるものの素となるもの) を構築する。
  • コンテンツ (リソース) の設計においては、有用 (useful) で、使いやすく (usable)、見つけやすく (findable)、主題に焦点が合っていて、特定のターゲットユーザーに向けていて、特色があり、リンクによって関連するコンテンツとつながり合っている、ことを意識する。
  • 1つのコンテンツリソースには、1つのトピックのみを含める。関連するトピックは別リソースにしてリンクでつなぐ。
  • コンテンツリソースの構造は、基となるコンテンツタイプの属性を介して定義される。構造を成す各要素は、チャンク (意味的な塊) としてまとめる。
チャンク
  • コンテンツリソースを構成する各要素 (チャンク) は、他のコンテンツリソースでも再利用できる。大元のソース (属性値) を更新すれば、それが使用されているすべての箇所に変更が反映される。
  • チャンクの作成においては、「再利用可能な最小単位」つまり単独で意味を成す自己完結型の断片を目指す。
  • コンテンツを、ブロブ (構造化されていない、ぼんやりとした大きな塊) ではなくチャンクの組み合わせとして構築することで、自社プロダクト内で再利用可能な、また (ソーシャルメディアなどでの) 共有に適した、コンテンツ資産を作り上げることができる。
コンテンツの管理
  • 「ページ」ベースではなく「エンティティ」ベースの CMS で、コンテンツリソースを定義し、対応するコンテンツタイプ、属性を指定してテンプレートに表示させることで、画面構成を生成する。
  • ビジュアルデザインは別レイヤーで扱う (デザインとコンテンツの分離)。これにより、コンテンツの表示方法や配信方法の自由度が高くなる。
  • ヘッドレス CMS で (ビジュアルデザインのレイヤーを完全に分離した形で) コンテンツを一元的にまとめて、各種プラットフォームに個別のリソースとしてパブリッシュする、というやりかたも。
  • CMS においてコンテンツタイプの属性は、フィールドとしてコンテンツ制作者に提示され、フィールごとにデータタイプ (ブーリアン型、日時、ファイル、画像、リンク URL、箇条書き、数値、テキスト、など) が定義され、それに基づいて値が入力される。
  • タクソノミー (情報を秩序だったカテゴリーに分類すること) によってコンテンツを整理し、仕分け、関連付ける。タクソノミーで用いるターム (用語) は、主題領域 (ドメイン) の中でコンテンツがどう位置づけられるかを基にする。
  • タクソノミーはファセットとしても利用でき、見つけやすさ (findability) と発見しやすさ (discoverability) の向上につながる。
  • コンテンツ制作者向けのガイドとして、コンテンツリソースごとにコンテンツ仕様書をまとめる。Microsoft Word など関係者に馴染みのある形で、コンテンツの構造と、構造の各要素にどんな内容が入るのかを概観できるようにする。
インターフェース設計
  • 形式は機能に従う (Form follow function)。インターフェースが、コンテンツを損なったり邪魔したりしてはいけない。
  • 同じタイプのコンテンツリソースに共通するテンプレートを用意する。テンプレート設計においては、内容豊富なコンテンツリソースもあれば、内容が少ないコンテンツリソースもあることを考慮し、どちらにも対応できるようにする。
  • ドメインモデル、コンテンツモデル、コンテンツ、表現、ナビゲーション、というペースレイヤリングを意識する。このうち、比較的変化が激しいレイヤー (表現やナビゲーション) がインターフェース設計に相当する。
  • インターフェース設計は、プロダクトのデバイス戦略に基づく。構造化コンテンツを準備することで、あらゆる形態でのパブリッシングに対応でき、また、コンテンツと表現が分離していることで、VUI など新しいインタラクションにも対応しやすくなる。
  • デジタルコンテンツは、「リソース」「インデックス」の2つに大別される (「OOUI 本」でいうところの、「シングル」「コレクション」に相当)。
  • ウェブコンテンツの場合、HTML のセマンティクスを適切に適用する形でテンプレートを作る。スタイルシートを当てる前のこの段階からユーザーテストを始めるのもよい。
  • インデックス (コレクション) はテンプレートによって機械的に作成するだけでなく、手作業によるキュレーションを加えてクリエイティブにまとめることもできる。
  • ナビゲーション設計は、多くの場合、タクソノミー階層がベースとなる。
  • ナビゲーション設計おいては、「グローバルナビゲーション」か「コンテクスチュアル (文脈的な) ナビゲーション」かを意識する。
  • グローバルナビゲーションは、ドメインモデル (コンテンツモデル) のオブジェクトをベースにするとよい。
  • URL はサイト構造を反映したロジカルなものにする。また、一度決めた URL は変えないことが重要。
  • 構造化コンテンツが表現と切り離されていることで、インターフェース表現の選択肢 (自由度) が広がる。地味なインデックスのリストを、マップやインタラクティブなタイムラインなどの形に変えて表現することもできる。提供するコンテンツやその表現方法は、常にユーザーのコンテキストを念頭に置いて決める。

以上、いろいろ書きましたが、インターフェースデザインによってコンテンツを表現する前に、まずはコンテンツの構造化を、主題領域 (ドメイン) への理解とユーザーのメンタルモデルを踏まえたうえで、丁寧に組み立てゆくというマインドセットが一貫して通底しています。

個人的には、先に「OOUI 本 (オブジェクト指向UIデザイン — 使いやすいソフトウェアの原理)」を読んだとき、下記のように、これはインターフェースデザインというよりは情報設計 (IA) の話だという印象を持ちましたが :

本書はその方向性を深掘りしてくれた本という感じがして、読み進めていくのがとても楽しかったです。

もうひとつ、本書の最終章には、TUG (The Understanding Group) のダン・クライン (Dan Klyn) 氏が提唱する IA の3つの構成要素「オントロジー」「タクソノミー」「コレオグラフィ」について触れている箇所があります。以前、TUG の記事「Understanding Information Architecture」を読んだり、TUG の YouTube チャンネルの動画「Ontology Topology Choreography」を観たとき、正直、自分の中でうまく消化できなかったのですが、本書と照らし合わせて、以下のように基礎から表層に向けてのレイヤーとして捉えればよいのかな、と考えるようになり、少し飲み込めたような気がします。

オブジェクト指向的な考えかたが血肉になっていない私にとって本書は、「情報を設計する」とはどういうことかを、体系的に捉え直すいい機会になりました。デジタルコンテンツの設計や運用に関わる多くの人にとって、新鮮な学びにあふれた本だと思います。