Loading

2-2 デジタルプロダクトの観察 Ver. 2020.09.16

はじめに

本教材「2-2 デジタルプロダクトの観察」では、インタラクションの基本原則を使った「観察」の方法を学びます。

ビジュアル表現から受ける印象や、コンテンツのわかりやすさは、どのように生まれるのでしょうか。「インタラクションの基本原則」を活用して、デジタルプロダクトと私たちの相互作用を読み解き、観察眼を磨きましょう。

読み解けるなら、生み出せる。

すべてのデジタルプロダクトは、誰かが、何らかの目的を実現するためにデザインしたものです。デザインとは、情報を適切に届けるための「制約」をつくる作業の積み重ねだと言っても過言ではありません。

「観察」の目標は、意図してデザインされた「制約」を、客観的に読み解くことです。作り手は、どのような観点で情報を整理し、受け手に届ける配慮をしているのでしょうか。「制約」を読み解く訓練が、あなたの観察眼を磨き、自ら生み出すための基礎となるでしょう。

Contents

  1. キークエスチョン
  2. 観察とは?
  3. 印象や理解の成り立ちを探ろう
  4. キークエスチョン(再)

----------

学習目標

  • インタラクションの基本原則を用いて制作者が意図した「制約」を発見し、具体例を挙げて説明できる。
1. キークエスチョン

考えてみよう

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

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

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

2. 観察とは?

観察とは何か?

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

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

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

----------

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

動画では、白いチームのパスの回数を数えるという「制約」が、私たちの行動を規定していました。しかし、このような直接的な「制約」がない場合も、私たちの意識のあり様によって、観察できるものが変化します。私たちの主観が、観察範囲を絞り込むのです。これは、「認知バイアス」と呼ばれています。観察において客観的であるには、この事実に気がつく必要があります。

ここから、重要な観点を学ぶことができます。《注意深く見ること》により「部分」の仕組みを読み取ることができます。しかしながら、それだけでは自分の意識の前景(=パスの回数)を見ているにすぎません。《ありのままの状態や変化》、すなわち「全体」を《客観的》に捉えるためには、認知バイアスを踏まえて、あなたの意識の後景(=ゴリラ)に目を開く必要があるのです。

重要なことは、部分を注意深く見るだけでなく、全体を把握すること。そして、あなたの意識を規定している「制約」に気がつくことです。

----------

観察のアプローチ

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

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

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

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

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

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

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

-----

観察のプロセス

観察のプロセス

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

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

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

-----

問いをたてて、分析する

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

3. 印象や理解の成り立ちを探ろう

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

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

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

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

----------

制約が一貫性を生み出す

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

-----

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

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

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

概念図:「単線アクセス」と「ランダムアクセス」

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

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

メディア形式とアクセス形式(参考:Adobe近藤祐爾先生の講義資料)

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

ウェブサイトにおける「単線アクセス」と「ランダムアクセス」

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

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

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

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

北海道大学オープンコースウェア

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

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

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

-----

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

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

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

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

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

-----

シグニファイア

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

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

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

-----

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

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

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

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

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

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

-----

論理的な制約:対応づけ

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

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

モジュールの部品構成

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

同じ構造を持ったモジュールを反復している

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

ウェブページの構造図

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

  • タイトル:2019年のビジュアルトレンドを紹介することを示す
  • モジュール1:キーワード「Creative Democracy」紹介(概要+具体例)
  • モジュール2:キーワード「Natural Instincts」紹介(概要+具体例)
  • モジュール3:キーワード「Disruptive Expression」紹介(概要+具体例)
  • モジュール3:キーワード「Brand Stand」紹介(概要+具体例)
  • クレジット:制作者のクレジットを示す
構造図に部品をプロットした全体像

----------

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

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

----------

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

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

4. キークエスチョン(再)

もう一度、考えてみよう

それでは、学習のまとめとして、皆さんが最初に観察した対象を、あらためて分析してみましょう。はじめのアウトプットと比較して、語彙や観点が変化しているでしょうか。他の学習者の回答からも、多くの学びを得られるでしょう。

おわりに

あなたの意識や行動を規定している「制約」を発見することが、観察の重要なプロセスでしたね。

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

ぜひ、ここで学んだ観察のアプローチを、あなたの研究にも活かしてください。

次回は「評価」について学びます

続く教材『2-3 デジタルプロダクトの評価』では、デジタルプロダクトの目的にあわせて、対象を「評価」する方法について学びます。

「評価」とは、「ものの価値を定めること」です。価値を定める尺度は相対的なものであり、目的によって変化します。ここでは、デジタルプロダクトの目的を読み解いたうえで、表現の機能的な価値を評価する方法を学びます。

◾️ 参考文献(もっと学びたい方へ)

本教材は、「デザイン・ルールを発見するための思考プロセス」をいかに伝えるかを目指して設計されました。そのため、「デザイン・ルールの包括的な紹介」という形式をとっていません。デザインの基本ルールを知りたい場合、ネット検索でたくさんの教材が見つけられるでしょう。たとえば、上記の『伝わるデザイン』には、相手に伝達内容が自然と「伝わる」資料作成に必要なデザイン・ルールがまとめられています。本教材で学ぶ「読解する力」とデザイン・ルールの知識を組み合わせて、より良いコミュニケーションの方法を模索していただけたら嬉しい限りです。

また、インタラクションの基本原則や、認知科学とデザインの組み合わせに興味を持った方は、『誰のためのデザイン? 増補・改訂版 −認知科学者のデザイン原論』を手に取ってみると良いでしょう。

Created By
北海道大学 オープンエデュケーションセンター
Appreciate