Loading

2-1 デジタルプロダクトの機能 Ver. 2020.07.21

はじめに

私たちが日常生活で目にする「デジタルプロダクト(=ウェブサイト・アプリ・ソフトウェアなど)」は、私たちに何らかのメッセージを伝えたり、何らかの体験を提供したりするために制作されています。そのため、受け手がメッセージを理解しやすいように、あるいは、利用者がストレスなく目的を達成できるように、様々な表現の工夫がなされています。

機能を読み解けるならば、機能を生み出せる。

本教材では、デジタルプロダクトに組み込まれている様々な「機能」を考察する観点を学びます。

「機能」とは「もののはたらき」のことです。デジタルプロダクトは、様々な部品をはたらかせて、私たちの視線や行為、感情や体験を誘導します。目に見えるひとつひとつの部品が、どのようなはたらきを担っているのでしょうか? 機能を読み解く訓練が、機能を生み出す基盤となるでしょう。

Contents

  1. キークエスチョン
  2. 機能とは?
  3. インタラクションの基本原則をふまえて考えよう
  4. キークエスチョン(再)

------------

学習目標

  • デジタルプロダクトを構成する機能を、「インタラクションの基本原則」を用いて説明できる。
1. キークエスチョン

考えてみよう

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

本編ではデジタルプロダクトに組み込まれたビジュアル表現が担う、様々な機能を分析する観点を学びます。学習の最後に、ここで観察した対象を、もう一度観察してください。

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

2. 機能とは?

さて、機能とは何か? 一緒に考えていきましょう。

----------

----------

「機能」を発見するために

ご察しの通り、上記の画像はフェイクです。おそらく、画像をクリックして困惑したのではないでしょうか。ここで検討したいのは、「あなたがどのように状況を読解し、画像をクリックするに至ったのか」ということです。

機能とは、「もののはたらき」のことです。デジタルプロダクトと人間の関係において、私たちの理解や行動(=動作の決定)に作用するはたらきが、機能だと言えます。先ほどの画像には、読み手が画像をクリックすることを誘導する機能が組み込まれていたのです。

それは、何でしょうか? 少し手を休めて、答えを思い浮かべてから読み進めてください。

----------

Q. なぜクリックしたのでしょうか?

たとえば、「再生ボタン」がクリックを誘導したと考えられますね。

ビジュアル表現の機能を検討するには、「要素をなくしたら?」と想像するアプローチが有効です。目に見える要素を省くことで、要素がいかにはたらいているかを理解することが出来ます。早速、検討してみましょう。

中心の「再生ボタン」を削除してみましょう
行為を促す要因は、「再生ボタン」だけではないようです
ここまで要素を削除すると「画像」として認識されます

私たちの行為は、文化的な経験の蓄積によってパターン化されています。「再生ボタン」や「再生バー」は、私たちの社会では動画が再生できることを示します。

ここでは、「コンテンツを構成する小さな部品が、行動の手がかりになっている」ということを心に留めておいてください。

----------

機能は、属性と関係で分析できる

続いて、これらの部品のはたらきを分析するためのヒントをお伝えします。機能は、大きく「属性」と「関係」という観点で考察することができます。

機能には、ものに備わる色や形といった「属性」と、ものがそれ以外のモノや人と相互作用することで生じる「関係」があります。

もう一度、「再生ボタン」をみてみましょう。属性の異なる2つの部品が関係していますね。それぞれの部品が担っている機能は何でしょうか?

「再生ボタン」の構成要素

さて、「要素をなくしたら?」という観点で検討してみましょう。真ん中の三角形の部品だけが示された場合、色のせいか、あまり目立ちませんね。そこに気がつくと、黒い部品の機能が見えてきます。黒い部品は、薄いグレーの三角形を背景と差別化し、視覚的に強調する機能を持っているのです。

部品のはたらきを検討するには、「要素をなくしたら?」というアプローチに加えて、「要素を置き換えたら?」というアプローチが有効です。それでは、「再生ボタン」の構成要素を置き換えてみましょう。要素を置き換えることで、あなたの感覚がどのように変化するかを意識しながら、次の動画を確認してください。

さて、「再生ボタン」を成立させるためには「頂点が右にある三角形」がもっとも重要だということがはっきりしましたね。要素の大きさについては、適切な範囲をこえると違和感が生まれ、度を越すと背景の柄と区別がつかなくなりました。

一方で、「再生ボタン」だと知覚できる範囲を把握し、機能の核となる属性を押さえておけば、デザインをカスタマイズできます。試しに、YouTube と Vimeo の動画プレイヤーのデザインを比較してみてください。三角形の下にある部品の色が異なっていますね。ブランドのテーマカラーが使われています。このとき色は、ブランドのアイデンティティを示す「機能」を担っています。

----------

このように、「要素をなくしたら?」「要素を置き換えたら?」というアプローチで、デジタルプロダクトの構成要素が、いかに人間の知覚や認識に作用するかを検討できます。次項では、心理学的な5つの概念を学び、機能を分析する観点を増やしましょう。

3. インタラクションの基本原則をふまえて考えよう

インタラクションの基本原則とは?

インタラクションとは、人間と人工物との「相互作用(=対話的なやりとり)」のことです。広義には、人工物と人工物との相互作用も含みます。

インタラクションは、みなさんがデジタルプロダクトを利用する際に「どういう行動が可能か」「どの部分をどう操作すれば良いのか」を読み解く作業に関わっています。

人間と人工物との相互作用(=対話的なやりとり)

----------

5つの「インタラクションの基本原則」

ここで扱う「インタラクションの基本原則」は、認知科学者のD.A.ノーマンが『誰のためのデザイン? 増補・改訂版 −認知科学者のデザイン原論』で紹介しているものです。人間と人工物とのインタラクションは、次の5つの心理学的概念で検討することができます。各概念について、本教材を観察しながら考えていきましょう。

  1. アフォーダンス
  2. シグニファイア
  3. 対応づけ
  4. フィードバック
  5. 制約

----------

1. アフォーダンス

アフォーダンスとは、「人の能力とモノがつくりだす関係」であり、「人がとりうる行為の可能性」を示す言葉です。

アフォーダンス:人の能力とモノがつくり出す関係

この教材とあなたとの関係について、少し考えてみましょう。デジタルコンテンツを表示するために、あなたは何らかのデバイスを使っているはずです。

ここでは、タッチパネル式のタブレット端末で考えてみましょう。あなたの身体能力とタブレット端末との関係をイメージしてください。どのような行為の可能性があるでしょうか。一般的には、画面を「見る」ことができ、デバイスが鳴らす音を「聴く」ことができ、画面上のすべての部分を指先で「触る」ことができるでしょう。

アフォーダンスが「人間の能力とモノがつくりだす関係」であることに注目してください。すべての人が同じ色をみているとは限りません。子供からお年寄りまで、身体能力には個体差がありますね。たとえば、椅子のアフォーダンスを考えてみましょう。大人にとっては手軽に持ち運べる椅子でも、赤ちゃんにとっては、せいぜいつかまり立ちの道具です。能力によって、椅子との関係が変化しますね。

アフォーダンスは「どのような能力を持った人がどのようにモノを使うのか」あるいは「モノがどのように使われるのか」という可能性を考察するのに役立ちます。

----------

2. シグニファイア

シグニファイアとは、「行為の手がかり」のことです。アフォーダンスは、モノに対して人がとりうる行為の可能性を示す概念でしたね。でも、可能性が沢山ありすぎると何をしたらよいのかわからず迷ってしまいます。ここでシグニファイアの出番です。何ができるかを示す標識を立て、人がとりうる行為を限定するのです。

シグニファイア:人がとりうる行為を記号作用で限定する

本教材をタブレット端末でみている場合を考えてみましょう。アフォーダンスの観点では画面全体が操作可能です。そこに「再生ボタン」などのシグニファイアが加わることで、タッチ操作が必要な範囲が制限されているのがわかるでしょう。

たとえば、スクロールバー、ボタン、テキストのURLリンクなどが、シグニファイアとして機能しています。また、パソコン画面であれば、マウスの現在位置を示すマウスカーソルも、重要なシグニファイアです。

----------

3. 対応づけ

対応づけは、「二つの集合のなかの要素同士の対応関係」です。

対応づけられた2つの集合のなかの要素

画面のスクロールを例に考えてみましょう。あなたが「指先を上下に動かす」と、「画面が左右に動く」という状況を想像してみてください。

いかがでしょうか。訳がわからなくなりますね。スクロールは、上下の縦方向の運動として認識するのが自然です。ですから、「指先を上下に動かす」ことで、「画面が上下に動く」ように対応づけられています。このように、人間の身体的な経験と、画面内の経験を結びつけることによって、自然な対応づけが生まれているのです。

別の例を考えてみましょう。はじめに、この教材が、すべて同じサイズの文字で書かれていると想像してください。段落の間に余白もなければ、色分けもありません。いかがでしょうか。

あらためて教材を眺めてみてください。章が始まる場面は画面全体を画像で区切っています。段落においても、見出しと本文の文字サイズを変えています。適宜「----------」を挟んで一息入れる間を作ってもいますね。こうすることで、コンテンツを構成する意味や機能のまとまりを、視覚的にグルーピングし、対応づけているのです。

----------

4. フィードバック

フィードバックとは、「行為の結果を伝えること」です。たとえば、マウスを移動させれば、カーソルも動きます。あなたの行動に対してシステムが反応すること、これがフィードバックです。見落とされがちですが、音も重要なフィードバックですね。

では、本教材に組み込まれたフィードバックの具体例を探してみましょう。あなたの行為がきっかけとなり、シグニファイアが変化する経験を探ってみてください。たとえば、テキストをコピーしようとしたとき、何が起こるでしょうか。

フィードバックの具体例:選択範囲

もし、選択範囲に色がつかなかったら、困りますね。

今度は、教材の外に視点を広げてみましょう。あなたが Google Form に回答を送信したあと、自動返信メールが届かなかったら不安になりませんか。ネットでのイベント申し込みや、ショッピングも同様ですね。自動返信メールも、行為の結果を伝えるフィードバックの一例です。

----------

5. 制約

制約とは、「私たちのとりうる行為を制限すること」です。制約は、4つのカテゴリーで分類されています。

  • 物理的な制約
  • 文化的な制約
  • 意味的な制約
  • 論理的な制約

-----

物理的な制約:鍵と鍵穴の関係をイメージしてください。両者の形状が合致しなければ鍵を開けることはできません。このように、「物理的な相互作用で行為を制限すること」が「物理的な制約」です。

では、本教材で考えてみましょう。PC・タブレット・スマートフォンなどの、デジタルプロダクトを表示するデバイスに着目してください。デバイスの大きさが、表示領域を物理的に制限していることがわかるでしょう。

デバイスによる表示領域の違い(※作図にフリー素材を活用)

また、デスクトップPCの場合は、マウスやキーボードを使って操作します。他方、タッチパネル式の携帯端末の場合は、スワイプやフリック入力など、すべて指先で操作することになります。デバイスの形状によって、デジタルプロダクトの操作方法に「物理的な制約」が生じるのです。

-----

文化的な制約:特定の文化において「広く受け入れられている慣習やルール」が「文化的な制約」です。「再生ボタン」を、動画が再生できることのシグニファイアだと認識するのは、私たちの文化の慣習でしたね。

文化的な制約は、無意識に習慣化されているのでなかなか気がつきにくいものです。自分の常識と反対のことを考えてみると良いでしょう。横書きの文章は、左から書き出します。では、右から書き出すとどうでしょう。違和感があります。これが「文化的な制約」ですね。他方、日本では、右から横書きする時代があったようです。「文化的な制約」は時代とともに変化します。面白いですね。

-----

意味的な制約:「文脈や状況が対象の意味づけを制限する」ことが「意味的な制約」です。たとえば、下図の「三角形」のはたらきに注目してください。状況によって同じ部品が違った意味を持つことを考察できるでしょう。

配置される位置によって異なる意味を持つ三角形

いかがでしょうか。「再生ボタン」に使われる三角形は、「進む/戻る」を示すこともあります。あるいは、メニューボックスがあることを「指示」するために利用されることもあります。このほかにも、挙げることができそうですね。

私たちはなぜ、違いを認識できるのでしょうか。それは、私たちが毎日の暮らしの中で、デジタルプロダクトを操作する方法を少しづつ学習してきたからです。経験を積み重ねて、三角形が置かれている文脈と三角形に与えられる意味を「対応づけ」できるようになったのです。「意味的な制約」は私たちとデジタルプロダクトの間で築き上げられてきた慣習に依存しています。したがって、「文化的な制約」と同様に、変化することがあります。

-----

論理的な制約:「前提となる知識がなくても推論を可能にすること」と考えると良いでしょう。

例として、100ピースのパズルを完成させる過程を考えてみましょう。100ピースを必ず使うため、ピースが余ることはありません。もし、ピースが余るなら、何か問題があるとわかります。この対応づけが「論理的な制約」です。「論理的な制約」は、自然な「対応づけ」を生み出し、私たちの推論を助けます。

もうひとつ考えてみましょう。本教材では、冒頭で4つのコンテンツがあることを示しました。にも関わらず、3つ目のコンテンツで教材が突然終わったなら、何か問題があると推論できます。「論理的な制約」が崩れていることになるからです。このように、「論理的な制約」は、何らかのエラーや対応づけの不自然さを検討する際に役立ちます。

----------

ここまで、人とモノとのインタラクションを考察する5つの概念をみてきました。インタラクションの基本原則は、デジタルプロダクトの機能を読み解くだけでなく、あなたと世界との関係を読み解く道具にもなりえます。新しい概念を理解するということは、世界を切りとる視点を増やすことを意味します。ここでとりあげた概念は、あなたの視野を広げるきっかけになるでしょう。

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

もう一度、考えてみよう

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

おわりに

デジタルプロダクトとのインタラクションで生じる機能を検討し、デザインに組み込まれた部品のはたらきを探っていく作業は、いかがでしたでしょうか。

インタラクションの基本原則は、デジタルプロダクトの使い勝手のみならず、生活用品の使い勝手、学会ポスターやプレゼン資料のわかりやすさなど、人とモノとの関係を考察するために活用できます。

ぜひ、ここで学んだ基本原則をふまえて、世の中を見直してみてください。ウェブサイトやアプリの画面はもちろん、地下鉄のサイン計画、博物館などの展示動線、電車の中吊り広告などからも、発見が得られるでしょう。

次回は「観察」について学びます

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

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

◾️ コラム:スマホ映像と身体

本コラムでは、みなさんが学んだ「インタラクションの基本原則」に着目して生み出された映像コンテンツ『ご協力願えますか』を紹介します。視聴者がちょっとした協力をすることで完成する映像コンテンツは、どれもスマートフォン上の映像と身体の関係に着目したものです。企画・制作はCANOPUS。クリエイティブディレクターの佐藤雅彦氏は、NHK教育『ピタゴラスイッチ』の監修でも有名です。

さて、ここまで学習してきたみなさんは、「インタラクションの基本原則」を用いて『ご協力願えますか』について語ることができるでしょう。

本教材の「対応づけ」の解説では、マウスのスクロールを例に、身体感覚とデジタル空間の操作を対応づけるという話題がありました。この動画も同様に身体感覚とデジタル空間を対応づけていますが、発想にひねりがありますね。ほかにもいくつかの原則が応用されています。興味が湧いたら、ぜひ映像コンテンツのインタラクションを分析してみてください。

覚えておいていただきたいのは、制作者が「インタラクションの基本原則」の観点を持っているからこそ、このような発想に至ることができるということです。ここではスマホ映像と身体の関係が探究されていました。みなさんも、自分の身体とデジタルプロダクトとの関係性を意識することで、面白い表現の種を発見できるかもしれませんね。

----------

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

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

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

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