【AIIT】人間中心デザイン 講義ノート#2「デザイン操作論」
はじめに
#1のノートがまとめきれていませんが、2014年の8月22日〜23日にかけてAIITで行われた人間中心デザインの私的メモを以下にまとめます。
講義の前半はがっつりとした座学で、理解するにはデザインの歴史や意味論、記号論に関する前提知識が問われる部分も多いため、未だにあやふやな部分も多いですが、非常に濃密な講義でした。
デザイン操作論(Control of Design)
概要
デザイン操作論ではその名が示す通り、いかにしてデザインというものをコントロールするか、想い通りにデザインを行うにはどうすれば良いかという方法を、過去から現在に至るまで、デザインというものがどのように遷移してきたのか、また、デザインの歴史において重要なパラダイムとなった、クラウス・クリッペンドルフの「意味論的転回」という考え方を交えつつ、「形を」どのように「エレガント」にするのかというコントロール手段を探って行く。
デザインとは何かに関する結論 → Design is making sense of things.
デザインをコントロール出来るようになるには、そもそも、まずデザインとはなにかという事を理解しなくてはならない。
初っぱなから結論を言ってしまうと、デザインとは「物の意味を与えること」である。
これはつまりデザインとは“意味を造り出すプロセスそのもの”を指しており、デザインによって生み出された製品は、すべからくそれを利用する人々、ユーザーにとって理解出来るものでなければならない。
「合理的な視点」でのデザインにおけるかたちの操作
デザインとは何かという事を一応定義した上で、まず「合理的な視点」でデザインにおける「かたち」というものを操作する方法を考えてみる。
合理的な視点でのデザインにおけるかたちの操作は以下のようにまとめる事が出来る。
①リフレーミング(再構築)
- 変形 : 既存のものを変形する
- 代替 : 代わりとなるメタファー(比喩、レトリックなど)を利用する
- 類似 : 与えられた状況の類似を探す
- 視点 : 色々な論理的視点、特に様々な分野から獲得される視点を用いる
②組み合わせ論
- 単純化:機能を実現するために不可欠な構成を明らかにする
- 最適化:機能を実現するための「最適な」構成を決定する
- パターン:対象、部品、仕様、機能の組み合わせ可能な構成を判定する
③合理的な視点でのデザイン操作の事例
- 家庭用ミシン
-- 変形:アームを後方にし手前を広くする
-- 視点:メンテナンスが難しい -> 底部を開ける事で内部の手入れを容易にする
- 運動競技場所のグラウンドキーパー
-- 単純化:構成要素の整理(運転者、エンジン、駆動輪など)
-- パターン:組み合わせの車輪数、構造などを列挙する
「審美的な視点」でのデザインにおける形の操作(モダンデザインへの道のり)
合理的な視点でのデザイン操作を踏まえた上で、今度は「審美的な視点」でのデザイン操作について考えて見る。
この辺りを真剣に学ぶには、19世紀ヨーロッパでのW・モリスによるアーツ・アンド・クラフツ運動など産業革命以降のデザインの遷移を踏まえておく必要があるが、ものすごく端折って言うと、審美的な視点での形の操作は、20世紀初頭にドイツで創設されたバウハウスに端を発する。
バウハウスではデザインの「discipline」つまり、原理原則を解明しようとしていた。
「審美的な視点」での形の操作の基本ルール
審美的な視点での形の操作の基本は上記の2つである。ゲシュタルト心理学については後で触れるとして、バウハウスでは特に「シュパヌング(緊張、電圧)」という概念が重要であると考えられていたようだ。
※ このシュパヌングという概念は全く理解出来ていないのだが、講義を聞いていて思ったのは日本刀のような、無駄なものを一切を削ぎ落とした美しさ、機能性と審美性が緊張感を伴いながら一体となって胸に迫る様というかそのような人間の知覚を概念として昇華したものがシュパヌングではないかと思った。(全く違う可能性も高い。)
※また、バウハウスの精神を受け継いだウルム造形大学ではデザインのパラダイムに関する説明として、さながらコーヒーに垂らしたミルクの様に、デザインはシュパヌングに始まり、それが徐々にコモデティ化していくと教えていたらしい。これは近年で言えば立体的なスキュアモーフィックデザインからより平面的なフラットデザインへの遷移などで何となく経験的に理解できた。
審美的な形式の探索
- リファレンス(資料)を活用したよりエレガントな形の探索
- 解決策の可能性を拡げる新しい「造形言語」の探索(説明が難しい!)
意味を与えるための操作
-
記号論的視点:ICON(イコン)、INDEX、SYMBOL
-
レトリックの活用:プロダクト・セマンティクス、知覚されたアフォーダンス、シグニファイアといった概念
-
デザインテイストの利用:イメージボード、デザイン言語の活用
モダンデザイン運動
なぜモダンデザインの成り立ちを知る必要があるのか
注意:このあたりは私なりにかなり意訳してまとめたものです。講義ではこのような説明はしていません。
これまで合理的な視点と審美的な視点という2つの視点からデザイン操作の方法を論じて来たが、ここに来てなぜ殊更に「モダンデザイン」というトピックを取り上げる必要があるのかというと、産業革命の成果である「標準化」「規格化」された合理的な製品による、大量生産・大量消費といった「物的」な側面と、それに合わせて誰もが利用しやすく、ユーザーが欲しいと思う審美的な「質的」側面の両面を満たした製品をが望まれ、時代背景から「誰もが美しいと感じる」製品が求められた結果、モダンデザインの思想へと繋がったからに他ならない。
モダンデザインの始まりには諸説あるようで、一般的には19世紀後半のW・モリスによるアーツ・アンド・クラフツ運動が始まりとされるようだが、講義ではこの件に関してあまり触れる事は無かった。
19世紀後半のドイツでは輸出が伸び悩んでいた事もあり、経済界等の支援を得て「標準化」が叫ばれ始めていた。そして20世紀になり、1907年にドイツのミュンヘンで産業家や建築家による団体「ドイツ工作連盟」が組織され、「標準化」「規格化」に基づく大量生産によるものづくりが提唱された。
バウハウスの誕生
バウハウスだけで何冊も本が書けるため、ここでは本当に初歩の部分にしか触れないが、上記のドイツ工作連盟の流れを汲み、1919年にドイツのワイマールで工芸、写真、デザイン等を含んだ美術全般と建築に関する総合的な教育機関としてバウハウスが設立された。このバウハウスによってモダンデザインの基礎が形作られることとなる。
以下は講義資料からの抜粋。
バウハウスの計画は、日常生活の形態的、美的革命をとおして、産業革命の成果(物の量)を、質的側面で完成させた。
デザインは自らに社会的目標と政治的目標を課してきました。環境の機能的解放をとおして、デザインは社会関係により大きな透明性をもたらし、物の所有者に関して全ての人達に民主化と平等化を促進させようと望みました。
ジャン・ボードリヤー特別講演(ICSID '73 KYOTO)
モダンデザイン以後の歴史:デザイン機能の変移
※上図は講義資料より抜粋
インダストリアルデザイン栄光の時代(〜1950年代半ば迄)
デザインに対する時代の要請:
人間工学(エルゴノミクス、ヒューマンファクター)に基づいた、「物的機能の要請」
この時代では機械という形も実態もある物理的な仕組みを、いかに効率よく、 合理的に展開するかという形作りが求められた。
作り勝手や使い勝手といった要望を直ちに工業製品や生産計画に反映する事が出来た時代でもある。
形と機能の合一性という、コード(指針)を審美的・質的な規範としたモダンデザインの形態言語がものの世界に実現されていった。
反面、機械という形も実態もある機能の論理に沿ったデザインの形態形成が可能な最後のステージでもあった。
モダンデザイン解体の時代(1960年代以降)
デザインに対する時代の要請:
周辺にあるモノとの相互関係、使用環境等との関連性の配慮など「環境機能の要請」
技術革新による電子化への移行と、工業化社会がもたらしたミドルクラスの勃興による高度消費社会の影響により、市場を中心とした商品の開発、デザインテイストの多様化、加速度的な製品のモデルチェンジの常態化につながる。
モダンデザインの枠組みを超えた、新しい形態形成原理は誕生せず、無自覚なデザイン生産がものの氾濫と環境破壊を招く。
受難の時代(1970年代以降)
デザインに対する時代の要請:
記号性や象徴性を重要視したターゲットの心をくすぐる「コミュニケーション機能の要請」
オイルショック以降、低成長社会のデザインのテーマは以下のように変化した。
- 真の豊かさとは何か
- 量より質
- 「もの」より「こと」
- 人と心の問題の解決
これらのデザインに求められる社会的な変化によって、商品の脱機能化が進み、一過性のガジェット類が市場に溢れ、複合化によって新鮮さを演出したり、リバイバルスタイルが出現するようになった。
この時代ではものの消費を維持するために市場中心的なデザイン操作、記号の消費促進が行われた。
形の喪失(特に1980年代以降)
電子部品は機械のようにそれらしい形や実体が現れないために、形と機能の合一性という形態原理を適用出来ない。
この電子という新たなテクノロジーの出現によって、形は機能と形態との形態的有縁性を失い、電子を包む外皮、あるいは表層として必然的な自立を果たした。
これにより、モダンデザイン(形と機能の合一性)は解体され、今日に至まで、モダンデザインの枠組みを超えた、新しい形態形成原理、もしくはコード(指針)の創出が求められている。
形の終焉と再生(1980年代以降)
デザインに対する時代の要請:
形の意味の問題を問うための「インテグレーション機能の要請」
情報社会の急速な進展により、一層と形態を失ったものの形を分かりやすく意味付ける(semantics)ことが重要となる。
「ものと使用者の関係」、「ものの社会的な意味」といった事をデザインという手段で可視化することが求められる。
そのために、ものの原初的な三大機能として、「物的機能」「環境機能」「コミュニケーション機能」を新しい世界認識の中でものの形態言語として改めて包括的にとらえ直そうという試みが行われている。
迷うUIのサンプル
すげー細かい事ですが良いサンプルを見つけたので戒めのためにメモ。
問題
以下のように「ユーザID(メールアドレス)」と書かれていた場合、果たしてユーザーは何を入力するのが正解でしょうか?
答え
このサンプルの場合、「メールアドレス」が正解です。(うーん...)
考察
ユーザIDに関する説明(英数字のみなど)が無いため、また「※携帯メールアドレス不可」という文字が目に付くため、この場合は括弧にくくられているメールアドレスを入力するのが正解なんだろうという推測が出来ると思います。
ただし、推測は出来るものの、本当に正しいかどうかは入力フォームのバリデーションが働くまで分かりません。
また、あくまでも推測の域を出ませんが、システムの仕様上、ユーザIDとメールアドレスが一意の利用者を表すキーとして混在していたり(開発者が発狂しそうな仕様ですが。)、システム上の何らかの制約や問題によりこの様な表記になっているのかもしれません。
あるいはシステムの設計者としてはこのサービスのユーザーに「ユーザID=メールアドレス」として認識して欲しいという気持ちがあるのかもしれません。
この思考は個人的に良く分かります。
しかし、このような思考は設計者にとって都合の良いユーザー(ゴムのユーザー)を思い描いているだけで、現実のユーザーとは大きな乖離があります。
今回の事例については、単純に「メールアドレス」とだけ表示しておいてくれれば、ユーザーが迷う確率が低下するのでは無いかと思います。
私自身、相手に対して丁寧に説明しているつもりであっても、情報が冗長過ぎて、ノイズとしてしか伝わっていないという経験が多々あるため、適切な情報を適切なタイミングで表示するという、極めて当たり前の事を再認識させられました。
【AIIT】人間中心デザイン 講義ノート#1「人間中心デザイン入門」
概要
これは産業技術大学院大学(AIIT)で絶賛開講中の履修証明プログラム「人間中心デザイン」の私的まとめです。※多分に主観が含まれてます。
2014年8月9日(土)より講義が始まっており、初回からアクセル全開の内容だったので記憶が鮮明な内に早いとこまとめておこうと思っていたのですが、先送りに次ぐ先送りにより、早くも2回目の講義が迫ってしまったため、急ピッチでまとめる事に。
人間中心デザイン入門
人間中心設計とは
「人間中心」の勘所:なぜ使えない、使われない製品やシステムが生まれるのか?
使えないシステムの例としてアメリカの国境警備に関するビデオを見る。国境警備では広大な国土に監視の眼を行き届かせるシステムが必要で、密入国者などの不審な事象を検知した場合、スタッフが即座に現場に急行できるような警備システムが求められており、既製品の組み合わせで済むと考えられていたが、結果的にまったく使えないシステムが出来上がってしまったという話。
なぜ使えないシステムが生まれてしまったのか:考えられる理由
- 使う人の声を聞かなかった
- 現場をみなかった
- テストや試すプロセスがなかったのでは?
- 納期や予算の問題
- 既存のシステムを当てはめようとしたのが間違いではないか
- 要件が大きすぎた(国境全てをカバーしようとした)
- (このシステムの要件で言えば)非日常の状態であるという事を把握していなかったのではないか
- 機器の使用環境や国境警備という業務について現状の状態や利用状況が把握出来ていなかったのでは?
- 要するに調査不足
どうすればこの問題を回避出来たと考えられるか
- プロジェクト初期の段階で実現不可能な約束をしなければ良かったのではないか
- まず徹底的に調査を行いその上でどのようなシステムが最適なのか考えるべきだった
- 既存のシステムを当てはめるのではなく目的に沿って考案すべき
- 設計者・開発者が現場を見に行くべきだったのでは?
- 時間と場所をユーザーと共有して問題を探るべきだった
ユーザービリティについて
ユーザビリティとは利用品質(Quality of use)のこと。
以下、括弧ばかりですけど、「ある利用状況で(ここ重要)、ある製品やサービスを使用する利用者にとって(ここも重要)の使いやすさ(不満やストレスがなく、快適に使う事が出来るかという使い勝手)の事」を指す。多分。
※詳しい事はISO9241-11で定まってるらしいので良い子はちゃんと確認しておこう。
参考:
以下続きます...
(2回目、3回目の講義後の更新になります)
はてなブックマークのナビゲーション増加が止まらない
※1ヶ月くらい前に書こうと思ってずっと放置してました。
前々から気になってましたが、はてなブックマークのPC版トップページのナビゲーションの増加が止まりません。一列に並ばせるメニュー数としては明らかに多すぎる気がするのですが、インターネット界のEXILEを標榜するはてなにおかれましては、ここもまた通過点に過ぎないのでしょう。
いい機会ですので、ここではてなブックマークのリニューアルから現在に至までのナビゲーションの遷移をまとめてみました。
リニューアル直後のナビゲーション(2013年01月09日 頃)
賛否両論というかどちらかというと否定的な意見の多かったはてなブックマークリニューアル直後のナビゲーションです。今では画像リンクになっていますが最初期はテキストリンクで左寄せになっていました。当初からこのナビゲーション部分は変動する事が予見されていたらしく、後々簡単に変更出来るように柔軟性の高い仕様にしていたと考えられます。
ナビゲーションの画像リンク化(2013年01月20日 頃)
いきなりテキストリンク形式を廃して画像リンクに変わります。hover後の画像が上からフレームインするといういい感じのエフェクトも付いてました。まだまだナビゲーションの幅には余裕があります。
ヘッドラインの追加(2013年05月22日 頃)
旧デザインに近いリスト形式でホットエントリーの一覧を表示するヘッドラインが追加されました。まだナビゲーションには余裕がありますが、これくらいが丁度いいのではないでしょうか。
おすすめの追加(2014年03月04日 頃)
1年近い沈黙をやぶって「おすすめ」メニューが追加されます。またスペースの都合からトップメニューが削除されました。そろそろデザイナーの悲鳴が聞こえてきそうです。
画像と動画への変更(2014年03月31日 頃)
動画メニューが拡張されて「動画と画像」になりました。ついでにヘッドラインと総合の位置が見直され、ヘッドラインが一番左端に来ました。もうこれくらいで十分だと思います。
ランキングの追加(2014年04月03日 頃)
ここでまさかの「ランキング」メニューの追加です。ブックマーク数は削除され注目キーワードがタグっぽい感じで表示されるようになりました。破綻は近い。
ガールズの追加(2014年05月08日 頃)
そうです。忘れてはいけません。はてなブックマークはモヒカン以外にも女子も利用するのです。@cosmeベストコスメ大賞が毎年ホットエントリー入りするなど、はてブには女子力の高いユーザーが数多く存在するのです。彼女たちがそれ以外で活動している様を普段見る事はあまりありませんが女に秘密はつきものです。リニューアルから1年以上経つというのに未だにガールズが無いなんて常軌を逸していました。一列に14個もメニューが並んでいるって?それが何だってんです。居酒屋のメニューを見た事が無いのですか?
画像と動画の分離(2014年05月15日 頃)
あーっとそうでした。この広い世の中、動画にしか興味が無い人間も、画像にしか興味が無い人間も沢山いるのです。動画と画像ではどちらか一方にしか興味が無い人にとっては半分がノイズとなってしまいます。多様なニーズに訴求するはてなブックマークとしてはこんなことで離脱されるのはあまりにもおしい。パンが無いなら手持ちのパンを二つにして分け与えれば良いのです。これこそがインターネットの良心です。しかしもうこれが限界でしょう。デザイナーは憤死寸前です。
一般の追加そして現在へ(2014年06月12日 頃)
私が間違っていました。限界という言葉はそれを越えるために存在するのです。そういえば無理というのは嘘つきの言葉であると偉い人が言っていました。はてなブックマークには「一般」が足りなかったのです。モヒカンとガールズだけでは世界は回りません。9割は一般なのです。ここに気づいたはてなは偉い!
このようにはてなブックマークは多くのニーズに応えられるよう、日々進歩を続けているんですね。とても勉強になりました。
ちょっといいなと思ったUIメモ3
アプリ版「Yahoo!乗換案内」の現在時刻の大まかな現在地表示のナビゲーションが良い。あくまでも目安だけど、初めて利用する路線などで正しい方向に進めているか確認する場合に十分効果的。
ちょっといいなと思ったUIメモ2
見出しにページ内リンクが割り振られており、クリックするとロケーションバーが「http://jquery.com/download/#jquery-1-x」といった感じに遷移するため、ページ内リンクのURLを簡単に取得する事が出来るようになっている。
ちょっとした工夫だが、ページの該当部分を簡単にシェアする事が出来る。
ちょっといいなと思ったUIメモ1
[View as single page]をクリックするとページングで分割されている各ページ内容が1ページ内に表示される。
ページング自体、UIとしては微妙な感じですが、自動読み込み型だとユーザーの意図に反してコンテンツが勝手に読み込まれる場合があるため、ユーザーに選択権を与えるという意味ではありかなと思いました。
参考:Times Higher Education - Education news and university jobs