考えてみよう

はじめに、下記の Google Form で質問に回答してください。あなたの回答は匿名で集計されます。回答が終わったら、その他の学習者の回答を確認してみてください。

本編では、インタラクションの基本原則を使った「観察」の方法を学びます。学習の最後に、ここで観察した対象を、もう一度観察してもらいます。

学習の前後でキークエスチョンに取り組むのは、あなた自身が、今のあなたと学習後のあなたを比較できるようにするためです。重要なのは、学習による変化をみずから経験することです。学習によって、あなた自身の語彙や観点に変化があったかどうかを、意識してください。

観察とは何か？

辞書的な「観察」の定義に共通するキーワードを集めてみると、《対象のありのままの状態や変化を、客観的に注意深くみることにより、何かを導き出す》という意味づけが浮かびあがってきます。

みなさんは、日常生活でデジタルプロダクトを注意深く見たことはありますか。「ありのままの状態や変化を、客観的に注意深く見る」とは、どういうことなのでしょうか。

思考の材料として、次の動画（1分22秒）を見てみてください。白と黒のチームがボールをパスする映像が流れます。「白いユニフォームのチームが、ボールをパスする回数」を数えてください。

----------

あなたはこの動画から何を得たでしょうか？

動画では、「白いチームのパスの回数を数える」という「制約」が、私たちの行動を規定していました。視線がボールに集中した結果、ゴリラが登場したことに気がつきませんでしたね。

しかし、このような直接的な「制約」がない場合も、私たちの意識のあり様によって、観察できるものが変化します。私たちの主観が、観察範囲を絞り込むのです。これは、「認知バイアス」と呼ばれており、私たちのとりうる行為を制限する「制約」として考えることができます。観察において客観的であるためには、あなたが無意識につくり出している「制約」を意識する必要があるのです。

ここから、重要な観点を学ぶことができます。対象を《注意深くみる》だけでは、自分の意識の前景（＝パスの回数）を見ているにすぎません。客観的に《ありのままの状態や変化》を捉えるためには、認知バイアスを踏まえて、あなたの意識の後景（＝ゴリラ）に目を開く必要があるのです。

重要なことは、対象だけでなく、人間と対象との関係をまるごと把握すること。そして、あなたの意識を規定している「制約」を意識することです。

----------

観察のアプローチ

受け手として体験し、作り手として分析する

デジタルプロダクトの作り手と受け手は、デジタルプロダクトを介して間接的にコミュニケーションを行っています。あなたが誰かにメールする場合も、メールを介して間接的にコミュニケーションを行っています。

このような、道具を介した間接的なコミュニケーションを考察するさいに「インタラクションの基本原則」が役立ちます。

さて、作り手は、受け手の心理や目的を想定して、デジタルプロダクトに読解の手がかり（＝シグニファイア）を与えます。受け手は、与えられた読解の手がかりを、無意識に把握して利用しています。文化や習慣によって意識せず実行していることがほとんどでしょう。たとえば、ウェブページで青い文字があったらリンクボタンだと認識しますね。そういった、わたしたちの文化や習慣が定めている制約が、読解の手がかりになっているのです。

デジタルプロダクトの観察は、一般的に作り手の立場で実行します。読解の手がかりがどのように受け手にはたらきかけているかに着目し、インタラクションを分析するのです。言い換えると、観察するということは、私たちの知覚や行為を導く仕組みを読み解き、モノと人間とのコミュニケーションを理解する行為だと言えるでしょう。

ですから、観察するということは、それほど日常的な行為ではありません。

時として作り手は、自分の表現が伝わらないことを受け手のせいにします。でも、本当にそうでしょうか。このような作り手は、受け手が表現をじっくり観察してくれるものだと思い込んでいます。しかし悲しいかな、観察は日常的な行為ではありません。作り手が意識すべきは「受け手はわざわざ観察しない」ということなのです。受け手は分析的ではなく、感覚的に行動します。優れた作り手は、受け手として対象を捉える作業も同時に行なっていることでしょう。

受け手として体験し、作り手として分析する。これが、対象を理解するために必要なアプローチです。

-----

観察のプロセス

はじめに、まっさらな心で向き合おう

はじめは対象を分析しようとせず、自分自身の知覚や感情の変化を記憶することが重要です。先ほどの動画を見たときの経験は、皆さんの記憶に刻まれていますか。

たとえば、「わかりやすい」「どういう意味だろう…」「面白い！」「自分だったらこうする…」などなど、あなた自身の心の声を大事にしてください。受け手としての純粋な体験に、しっかりと向き合いましょう。忘れてしまいそうなら、受け取った印象をノートなどに書き出すと良いでしょう。

-----

問いをたてて、分析する

分析するためには、「問いをたてる」必要があります。問いをたてるために、あなたの受け手としての体験が重要な役割を果たします。「ポジティブ」あるいは「ネガティブ」な体験を思い出しながら、もう一度対象を見ることによって「なぜ？」を引き出します。当たり前だと思っていることこそ、分析してみる価値があるでしょう。それでは、具体的なアプローチをみていきましょう。

受け手として体験し、問いをたてる

ここでは、デジタルプロダクトを観察し、印象や理解の成り立ちを読み解くプロセスを紹介します。はじめに、ウェブ形式のデジタルプロダクト「2019 Graphic Design Trend 」を閲覧してください。みなさんは、どのような印象を受けましたか？

たとえば、「表現に一貫性がある」という印象が出てきそうですね。すると、「なぜ一貫性が感じられるのだろう」という問いが生まれます。

では、問いに答えるためにデジタルプロダクトを観察し、一貫性を生み出す要因を探っていきましょう。観察には、「インタラクションの基本原則」の「制約」の観点が役立ちます。用語については、『2-1 デジタルプロダクトの機能』を参照してください。

----------

制約が一貫性を生み出す

デジタルプロダクトには、物理的・文化的・意味的・論理的な制約が与えられています。表現に一貫性を生み出す役割を把握するために、「物理的な制約」と「論理的な制約」に焦点を当てて観察します。さて、どのような制約が読み取れるでしょうか。

-----

物理的な制約：メディア形式

この「2019 Graphic Design Trend」は、「Adobe Spark Page」という、ビジュアルストーリーを組み立てる表現に特化したソフトウェアで制作されたウェブページです。

はじめに、情報にアクセスする際の２大パターンを確認しておきましょう。情報を受け取る流れが一本道の単線アクセスと、情報を複数の道から取捨選択して受け取るランダムアクセスがあります。

単線アクセスの場合は、たとえるなら、伏線を回収しながら真相に到るような道筋が設計されているといえます。つまり、「情報が与えられる順序に理由がある」のです。順番が大きく入れ替わったり、どこかの情報が欠けてしまうと、受け手の理解に支障をきたす可能性があります。対して、ランダムアクセスの場合は、「情報を自由に選択して受け取る」ことを前提に設計されています。

アクセスのパターンは、「メディア形式」によって大枠が決まります。整理すると下図のようになります。ぜひ、メディア形式とアクセス形式の対応を確認しながら、あなたが普段どのように情報を受け取っているのか振り返ってみてください。

ウェブサイトの場合、情報を受け取る流れが単線的であれば「単線アクセス」に、情報を受け取る流れが複線的であれば「ランダムアクセス」と考えられます。

ここで「2019 Graphic Design Trend」に話を戻しましょう。コンテンツの導入から終わりまで、情報へのアクセスは一本道です。つまり、講義などの形式と同じ「単線アクセス」ですね。情報の順序はあらかじめ作り手によって定められています。

しかしながら、ウェブページと講義を比較すると、同じ「単線アクセス」でも本質的に異なる点があります。講義では、教員が時間をコントロールしますね。わたしたちは、どんなに念じても、教員の説明時間を早くしたり遅くしたりすることはできません。他方、ウェブページの場合は、受け手が時間をコントロールできますよね。情報をゆっくり読むのも、素早く読むのも、あるいは、リンクをクリックするもしないも、受け手の自由となります。

つまり、ウェブページの「単線アクセス」は、読書などと同様に、受け手が主体的に閲覧速度をコントロールできる形式だと言えます。

さて、ちょっと質問です。下記の北海道大学オープンコースウェアは、単線アクセスでしょうか。それとも、ランダムアクセスでしょうか。

ご察しの通り、「ランダムアクセス」の事例ですね。新聞やニュースサイト、地下鉄の路線図と同様に、受け手が情報を選んでアクセスできます。掲載されている情報同士の関連性や順序づけが変化しても、コンテンツの理解に大きな影響はありませんね。

このように、「メディア形式がもたらす物理的な制約が、私たちの情報取得の流れを制約している」ということを意識して観察することが重要です。

合理的な「観察」の戦略は、はじめに全体を捉えてから部分へと進むことです。もうひとつ、大局的な物理的制約をみておきましょう。

-----

物理的な制約：閲覧デバイス

ウェブページは、複数のデバイスで閲覧できます。パソコンと携帯では画面サイズが異なるので、コンテンツの見え方が変わります。

パソコンのブラウザでウェブサイトを閲覧している場合、ブラウザの横幅を狭めたり、Chrome のデベロッパーツールを活用すると、デバイス別の「見え方」を観察できます。次の動画は、デベロッパーツールを使用している様子です。

ウェブページをデバイス別に表示すると、文字や画像の大きさ、構図が少しづつ変化しているのがわかるでしょう。このウェブサイトの場合、デバイスが変化しても、私たちが受けとる印象は変わりませんね。なぜでしょうか。

フォント、色、画像などのシグニファイア、そして論理的な制約や対応づけが、関係しています。それでは、シグニファイアや対応づけに関わる「制約」を観察し、一貫性を生み出す仕組みを探っていきましょう。

-----

シグニファイア

フォントの種類やサイズに着目して、ウェブページの文章を分類してみましょう。フォントの種類は、全て同じようです。また、「タイトル」「見出し」「本文」「ボタン」といった要素が見つかるでしょう。

ところで、なぜこれらを区別することができたのでしょうか？ ひとつは、文字サイズに強弱があり、情報の重要性や優先順位が示されているからです。もうひとつは、配置される位置と文章量です。タイトルや見出しは、本文の前に置かれ、本文の内容を要約したキーワードになるのが一般的です。リンクボタンにも、「もっとみる」や「Learn more」など、特有の文体がありますね。

ウェブページは、雑誌のように静止しているものを眺めるのではなく、スクロールによって動的なインタラクションが発生するメディアです。文字の読みやすさが、スクロールという動作の影響を受けるのです。ところで、このウェブページでは、素早くスクロールすると、見出しが目に入ってきにくいと感じませんか。観察においては、あなた自身の体験や感覚に敏感になることが重要です。たとえば、見出しのサイズを大きくすべきですね。

-----

色の観点から、ウェブページを観察してみましょう。全体を眺めて、無彩色の部品と、有彩色の部品を分類してみてください。ざっくりとした観察でも、下記のように分類できたのではないでしょうか。

• 無彩色：文字、リンクボタン
• 有彩色：写真

分類を終えたら、みなさんが頻繁に利用するウェブサイトとの違いを考えてみると良いでしょう。このウェブサイトでは、一般的なウェブサイトでは色がついているところに、色がありません。

気がついたでしょうか。一般的なウェブページでは、リンクボタンに色がついていますね。本文と差別化して、わかりやすくするためです。しかし、このウェブページでは本文と同じ無彩色です。マウスカーソルを「Learn more」に合わせても変わらず無彩色のままですね。シグニファイアを、認識できる極限までシンプルにしています。なぜだと考えられるでしょうか。

ひとつの解釈は、このウェブページの主役が「写真」だからでしょう。写真以外の文字やボタンはあえて無彩色で統一し、写真をより鮮やかに見せることを選んだと推測できますね。

さて、重要なのは、こうしたフォントや色彩のルールが、ウェブページ全体に適用されているということです。これが、一貫性を生み出している「制約」のひとつです。もし、部分部分でフォントや色彩のルールが違う場合、それぞれが異なること自体に意味が生じます。微妙な差異であっても、ルールを逸脱するものには何か意味があると解釈してしまうでしょう。意図がなければ、受け手が解釈する時間を節約し、一貫したルールを適用させるのが自然です。

-----

論理的な制約：対応づけ

対応づけは、異なる集合同士の対応関係でしたね。ここでは、どのような対応づけが読み取れるでしょうか。ウェブページの内容は、ビジュアルトレンドをキーワード別に紹介することです。キーワードごとに、同じ規則で文字や写真を見せているのが読み取れたでしょうか。

キーワードを紹介する部品のまとまりを「モジュール」と呼びましょう。モジュールの構成は、次のようになっています。

このモジュールを、キーワードごとに繰り返しているのが読み取れたでしょうか。ウェブページの構成に規則があり、全体に一貫性をもたらしています。規則の反復は、私たちの推論を助けます。また、モジュールを反復させることによって、スクロールの体験に一貫したリズムが生まれていることにも注目してください。

ウェブページを構成するモジュールを読み解くと、全体の構造を把握することができます。このウェブページは、「タイトル」と「クレジット」で４つのモジュールをサンドイッチした構造になっていることがわかるでしょう。

それぞれの構成要素に、「何を伝えるか」という役割があり、「どのように伝えるか」という機能があります。構造図を描き出すことは、部品同士の関連性を理解するのに役立ちます。

• タイトル：2019年のビジュアルトレンドを紹介することを示す
• モジュール１：キーワード「Creative Democracy」紹介（概要＋具体例）
• モジュール２：キーワード「Natural Instincts」紹介（概要＋具体例）
• モジュール３：キーワード「Disruptive Expression」紹介（概要＋具体例）
• モジュール３：キーワード「Brand Stand」紹介（概要＋具体例）
• クレジット：制作者のクレジットを示す

----------

発見した制約を整理しよう

デジタルプロダクトの観察で重要なのは、全体に一貫性を持たせる制約を発見することです。観察で得られたのは、「写真以外は無彩色で統一」、「タイトル、見出し、本文のフォントサイズを定義している」、「モジュールの見せ方を統一している」などでしたね。学習の先取りになりますが、これらのルールはデジタルコンテンツの「目的」を達成するために定められたものです。作り手は、このような観点に基づき、表現に一貫した「制約」を与えています。

----------

デジタルプロダクトが生み出す体験には、さまざまな制約がはたらいています。制約は、パターンや法則、構造として捉えることができます。

デジタルプロダクトを観察するということは、デジタルプロダクトを構成する複数の部品を意味や機能のまとまりに分類・分析する作業であり、部品を組み合わせる際のパターンや法則、構造を発見していく作業だと言えるでしょう。