hidesign @ ウィキ
http://w.atwiki.jp/hidesign/
hidesign @ ウィキ
ja
2009-07-05T13:06:37+09:00
1246766797
-
トップページ
https://w.atwiki.jp/hidesign/pages/1.html
**hidesign@ウィキへようこそ
-このウィキは管理人が2009年度春学期の「インタフェース設計論」最終レポート『デザイン課題』用に作成したものです。
-「インタフェース設計論」は慶応義塾大学湘南藤沢キャンパスで開講されている授業です。
-インタラクティブなページの実現を目標としています。誰でもページの作成・編集ができます。
#googlemaps(){
<iframe width="410" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=keio+Japan+university+fujisawa&sll=37.0625,-95.677068&sspn=30.875284,56.337891&ie=UTF8&ll=35.428785,139.444656&spn=0.11695,0.22007&z=12&iwloc=A&cid=7046992403710020462&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=keio+Japan+university+fujisawa&sll=37.0625,-95.677068&sspn=30.875284,56.337891&ie=UTF8&ll=35.428785,139.444656&spn=0.11695,0.22007&z=12&iwloc=A&cid=7046992403710020462" style="color:#0000FF;text-align:left">View Larger Map</a></small>
}
2009-07-05T13:06:37+09:00
1246766797
-
右メニュー
https://w.atwiki.jp/hidesign/pages/3.html
**更新履歴
#recent(10)
----
**ニュース
#news(インターフェース)
&link_editmenu2(text=ここを編集)
2009-07-05T11:26:43+09:00
1246760803
-
メニュー
https://w.atwiki.jp/hidesign/pages/2.html
**メニュー
-[[トップページ>http://www13.atwiki.jp/hidesign/pages/1.html]]
-[[「インタフェース設計論 レポート課題 #1」>http://www13.atwiki.jp/hidesign/pages/12.html]]
-[[「インタフェース設計論 レポート課題 #2」>http://www13.atwiki.jp/hidesign/pages/13.html]]
-[[「モノ創り~プロトタイプ作成に向けて~」>http://www13.atwiki.jp/hidesign/pages/14.html]]
----
**はじめに
-[[@wiki基本操作>http://atwiki.jp/guide/category2.html]]
-[[オススメ機能>http://atwiki.jp/guide/category22.html]]
-[[@wikiの設定/管理>http://atwiki.jp/guide/category6.html]]
----
**分からないこと
-[[@wiki 利用ガイド>http://atwiki.jp/guide/]]
-[[よくある質問>http://atwiki.jp/guide/category1.html]]
-[[問合せフォーム>http://atwiki.jp/helpdesk]]
----
**その他機能
-[[@wikiプラグイン>http://atwiki.jp/guide/category17.html]]
-[[@wiki便利ツール>http://atwiki.jp/guide/category32.html]]
-[[@wiki構文>http://atwiki.jp/guide/category16.html]]
-[[プラグイン一覧>http://www1.atwiki.jp/guide/pages/264.html]]
&link_editmenu(text=ここを編集)
2009-07-05T11:23:05+09:00
1246760585
-
「インタフェース設計論 レポート課題 #2」
https://w.atwiki.jp/hidesign/pages/13.html
*課題図書:『エモーショナル・デザイン』
D.A. Norman 著, 岡本明・安村通晃・伊賀聡一郎・上野晶子共訳
#amazon(4788509210,text,image)
**要約
&bold(){概要}
『エモーショナル・デザイン』は、人間の認知と情動を科学的に理解することが製品のデザインにどのような影響を与えるのか、という著者の研究成果を書いたものである。
&bold(){デザインの三つの側面}
デザインには「本能レベル」、「行動レベル」、「内省レベル」という認知と情動システムの三つの側面がある。これまでモノのデザインでは本能レベルについてはあまり考慮されていなかった。しかし、真に受け入れられるモノをデザインするにはこの三つの側面すべてに対応しなければならない。
&bold(){人間の脳の三つのレベル}
人間の脳機能には本能レベル、行動レベル、内省レベルという三つのレベルがある。本能レベルは自動的で生来的な層であり、行動レベルは日常の行動を制御する脳の機能を含む部分であり、内省レベルは脳の熟慮する部分である。各レベルは人間の機能全体で異なる役割を演じている。そして、各レベルにはそれぞれ別のデザインスタイルが必要となる。
&bold(){三つのデザインスタイル}
人間の脳機能における三つのレベルを満たすためには、それに対応する本能的デザイン、行動的デザイン、内省的デザインという三つのデザインスタイルが必要となる。本能レベルを満たすためには、人間の本能に訴えかけるデザインにしなければならない。また、行動レベルを満たすためには、製品を使った時に喜びや効用が感じられるデザインにしなければならない。そして、内省レベルを満たすためには、製品のデザインが個人的に満足できるもの、自己イメージできるもの、思い出を呼び起こすものでなければならない。
&bold(){認知と情動}
本能レベル、行動レベル、内省レベルという三つの非常に異なった次元はどのようなデザインにも織り合わされている。これら三つのすべてなしにデザインすることはできない。しかしさらに重要なことは、これら三つの要素が情動と認知の両方に織り合わされているということである。情動は認知と切り離せない。認知は人を取り囲む世界を解釈し、理解する。一方、情動はそれについての迅速な判断ができるようにする。情動は認知において不可欠なものである。人間の行動や考えはすべて情動によって色づけられているのである。
&bold(){情動について}
人間は情動のおかげで、知性を行動に変えることができる。人間はポジティブな情動とネガティブな情動を持っている。そして、ポジティブな情動は私たちの人生をより良い方向に導き、ネガティブな情動は私たちを危険から遠ざけてくれる。しかし、機械は情動を持っていないので、知性を行動に変えることができない。そして、機械は情動を持たない限り人間とうまくやっていくことはできない。
&bold(){情動を持つ機械}
もっとも、技術は急速に発達するので、近い将来、機械も情動を持つようになるだろう。しかし、知的で情動を持つ機械は様々な困難を引き起こすことが予想される。そこで、私たちはこうした問題を今から考えておくことによって、問題が発生した時に素早く対処できるようにしておく必要がある。
&bold(){インタラクションについて}
私たちは人間やモノあるいは機械に対して特別な情動的感覚を持つ。そして、それから喜びが得られたとき、それが人生の一部となったとき、それとのインタラクションの仕方が社会や世界における自分の場所を決めるのに役立ったとき、私たちはそれを好きになる。デザインはこの方程式の一部なのである。私たちは人間、モノ、機械とのインタラクションによって、それらに対する満足を深め、さらに愛着を持つようになる。
&bold(){整合性のあるフレームワーク}
従来、デザインの問題は多種多様なレベルで語られていた。しかし、一見矛盾するようなテーマも本能、行動、内省の三つのレベルに基づいて考えることで一つの整合性のあるフレームワークにまとめることができる。そして、このフレームワークによって、デザインのプロセスと、製品の情動的なインパクトについて理解することが可能になるのである。
**感想
&bold(){デザインの美しさと使いやすさ}
私は本書を読んで、モノをデザインする場合には、人間の本能に訴えかけるデザイン、使いやすいデザイン、そして、コミュニケーションを誘発するデザイン、それぞれ重要であり、どれかが他よりも重要であるというわけではないのだということを感じた。そして、デザインの美しさと使いやすさが両立可能だということを改めて実感した。
&bold(){身の回りのモノたち}
実際、身の回りを見ても、デザインの美しさと使いやすさが両立しているモノは多い。たとえば、私がいつも利用しているThunderbirdやFirefoxのアイコンは美しく、使いやすい。またブランド物の衣服はキレイで着心地が良い。さらに高級車はカッコよく、乗り心地が良い。この様に美しくて使いやすいモノが、私たちの社会には数多く存在している。
&bold(){デザインが使いやすさに与える影響}
また、私は本書を読み進める中で、世の中にはデザインが美しいからこそ、使いやすいと思われているモノが存在するのだと感じた。冷静になって考えれば決して使いやすいとは言えない製品が、デザインが美しいために、人々から使いやすいと感じられることがある。
&bold(){iPhone}
私はこの典型的な例がApple社のiPhoneだと考える。iPhoneは利用者に他社の電話機とは全く異なるボタン入力の方法を求めている。他社の電話機はユーザーにボタンをプッシュすることを求めている。それに対して、iPhoneはユーザーに対して液晶画面上のボタンをタッチしたり、スライドさせたりすることを求めている。こうしたボタン入力の方法は、既存の電話機に慣れた利用者にとっては使いやすいと言えない。
&bold(){使いにくいはずのモノが使いやすく感じる時}
しかし、iPhoneは他社の電話機に比べて美しいデザインを持っている。さらに、iPhoneの利用者はボタン入力をする度に画面が美しく変化する様子を見ることができる。ユーザーは電話機を楽しみながら利用することができる。その結果、彼らは本来、使いにくいはずの電話機を使いやすいと感じるようになるのである。
&bold(){情動によって色づけられた世界}
人間は情動によって自分たちを取り巻く世界に素早く反応することができる。一方で、認知によって世界を解釈し、理解している。私たちは情動によって色づけられた世界を認知しているのである。
&bold(){情動的印象に基づく認知}
人間はあらゆるモノに対して情動的に反応していると感じる。私たちはモノに対して第一印象を持つ。そして、この情動的印象に基づいてモノの特性を認知している。
私たちはモノを一度見ただけで、好きか嫌いかという情動を持つことができる。
&bold(){ポジティブな情動とネガティブな情動}
また、本能的に良いと感じたモノでも、使い勝手が悪いと感じた時には、そのモノに対してネガティブな情動を持つ。一方で、本能的に何の情動も起きないようなモノでも、使いやすいモノであれば、それに対してポジティブな情動を持つようになる。
&bold(){愛着を感じるモノ}
さらに、本能的に何の情動も起きず、使い勝手が良いといえないモノに対しても、それに愛着を持つことができれば、そのモノに対してポジティブな情動を持つようになる。
&bold(){情動と認知}
このように、私たちはあらゆるレベルでモノに対して情動的な反応を示す。そして、この情動に基づいてモノを認知している。また、この認知によってモノに対する情動的な態度が変化することもある。
&bold(){デザインの役割}
そして、人間のこうした情動的態度を変化させる上でデザインの役割が極めて重要なのだと私は考える。
人間の情動はモノに対して素早く反応することができる。モノの好き嫌いについての態度を即座に決定することができる。しかし、この情動はモノの本質を見落としてしまうことがある。
&bold(){私の考える「エモーショナル・デザイン」}
私は本書を読んで、「エモーショナル・デザイン」とは、偏見に満ちている人間の情動的態度を見極め、その態度に修正を迫ることを通じて、人間にモノの本質を認知させるように導くための手段なのだと感じた。つまり、「エモーショナル・デザイン」とは私たちを進むべき方向に正確に導いてくれるデザインである。私たちが見えていない世界を見せてくれるもの、それが「エモーショナル・デザイン」であると私は考える。
2009-07-05T04:56:55+09:00
1246737415
-
モノ創り~プロトタイプ作成に向けて~
https://w.atwiki.jp/hidesign/pages/14.html
*モノ創り~プロトタイプ作成に向けて~
プロトタイプを創ることによって、そのモノの問題点やその解決法が明らかになります。使いやすいモノを創るためには、プロトタイプを繰り返し作成することが必要です。プロトタイプ作成に向けての練習として工作キットを購入して作成してみました。
**コロボット
モータ1個と歯車だけで歩行するロボットです。転んでも自分で起き上がることができます。
#amazon(4056047456,image,text)
#video(http://www.youtube.com/watch?v=oOq_J0a1-1M)
**スターリングエンジン
温度差による空気の膨張・収縮によってエネルギーを発生させることができるスターリングエンジンの工作キットです。
#amazon(4056041873,image,text)
#video(http://www.youtube.com/watch?v=oyv1Yk5-TI8)
**真空管ラジオ
真空管を使ったラジオの工作キットです。イヤホンを使ってラジオ放送を聞くことができます。
#amazon(4056054657,image,text)
#video(http://www.youtube.com/watch?v=mB49DbNK4Jo)
2009-07-05T02:33:32+09:00
1246728812
-
「インタフェース設計論 レポート課題 #1」
https://w.atwiki.jp/hidesign/pages/12.html
*課題1:使いにくい!バス総合案内システム
**パス総合案内システム
私は藤沢駅バス総合案内システムを、使いにくい、分かりにくいものとして取り上げる。このシステムはユーザが情報を入力することで、藤沢駅発のバス路線を検索することが可能なものである。(写真1,2参照)
|&ref(http://farm4.static.flickr.com/3644/3678628904_0219dfd28a_m.jpg)|&ref(http://farm4.static.flickr.com/3597/3678628932_91b87fab04_m.jpg)|
|[[(写真1:バス総合案内システム)>http://www.flickr.com/photos/39994320@N02/3678628904/]]|[[(写真2:同左)>http://www.flickr.com/photos/39994320@N02/3678628932/]]|
ユーザは下記の手順に従うことによってバス路線を検索できる。
1.ユーザが目的のバス停を索引から見つける
2.ユーザが索引中の索引番号をシステムに入力する
3.ユーザが乗車を希望する時間をシステムに入力する
4.システムがユーザの入力を処理し、その内容を画面上に出力する
5.ユーザが希望する場合は、出力内容をプリントアウトできる
**意外と利用されているシステム
私はこのシステムの存在を以前から知っていた。しかし、見るからに使いにくそうなので、利用したことがなかった。ところが、利用状況を調べてみると、私が見たところこのシステムの利用者は少なくなかった。
また、ウェブ検索の結果、同様のシステムが神奈川県内だけでも川崎駅、相模原駅、青葉台駅に存在することが判明した。特に、川崎駅のシステムでは、多い時には1日500人以上の人々がこのシステムを利用していることも分かった。(参考にしたHPのURL参照)
**使いにくいシステム
しかしながら、このシステムは使いにくそうに見える。また、実際に操作してみても、使いにくいシステムだと私は感じた。そこで、以下では、なぜ私がこれを使いにくいと感じたのかについて説明する。
**使いにくい理由
&bold(){印字が不鮮明なボタンを押すことへの不安}
まず、使いにくいことの原因は、ディスプレイやボタンの汚さにあると感じた。
汚れたディスプレイは見辛く、一部印字が剥がれたボタンを押すことは、誤操作に対する不安を感じた。(写真3,4 参照)
|&ref(http://farm4.static.flickr.com/3584/3677814925_d1b02ac8e2_m.jpg)|&ref(http://farm3.static.flickr.com/2473/3677814895_8e88e87beb_m.jpg)|
|[[(写真3:汚れたディスプレイ)>http://www.flickr.com/photos/39994320@N02/3677814925/]]|[[(写真4:不鮮明なボタン)>http://www.flickr.com/photos/39994320@N02/3677814895/]]|
&bold(){分かりづらい操作方法}
次に、このシステムでは多様な情報が分散して存在するために、使いにくくなっていると感じた。
ユーザがシステムから目的の検索結果(写真5)を得るためには、操作方法(写真6)を確認し、バス路線図(写真7)から目的地のバス停名を探し、索引番号対応表(写真8,9)から索引番号を見つけて、ボタン(写真4)を使って、画面(写真10)に索引番号を入力した上で、バスへの乗車時間を入力しなければならない。
こうした情報を得るために必要とされるユーザ側の情報探索・入力コストの高さがシステムを使いにくいものにしていると感じた。
|&ref(http://farm3.static.flickr.com/2538/3677815025_703ec53b70_m.jpg)|&ref(http://farm3.static.flickr.com/2514/3677814951_56d9f812ea_m.jpg)|
|[[(写真5:検索結果)>http://www.flickr.com/photos/39994320@N02/3677815025/]]|[[(写真6:操作方法)>http://www.flickr.com/photos/39994320@N02/3677814951/]]|
|&ref(http://farm4.static.flickr.com/3586/3677814791_0e9db3f423_m.jpg)|&ref(http://farm3.static.flickr.com/2546/3677814833_47d4d7d54e_m.jpg)|
|[[(写真7:バス路線図)>http://www.flickr.com/photos/39994320@N02/3677814791/]]|[[(写真8:索引番号表)>http://www.flickr.com/photos/39994320@N02/3677814833/]]|
|&ref(http://farm4.static.flickr.com/3656/3678629082_4ef5b57586_m.jpg)|&ref(http://farm3.static.flickr.com/2457/3678629244_1fb7145d05_m.jpg)|
|[[(写真9:索引番号詳細)>http://www.flickr.com/photos/39994320@N02/3678629082/]]|[[(写真10:索引番号入力画面)>http://www.flickr.com/photos/39994320@N02/3678629244/]]|
&bold(){文字に依存した操作方法説明}
また、このシステムでは、ユーザが文字以外の方法で操作方法を学習することができないので、分かりにくくなっていると感じた。特に、このシステムでは、画面が不鮮明なので前の人の方法を真似て操作することが難しい。また、ソフトウェアのインストール手順のように、写真入りのチュートリアルで操作方法を学習できるわけでもない。
&bold(){人々を不安にさせるシステム}
もっとも、正しい手順で操作していれば、画面状態の遷移によって、自分の操作方法が正しいということはわかる。
しかし、誤った操作をした場合には、システム側から何のレスポンスもないため、不安になってしまう。
そして、こうした不安要因がシステムを分かりにくいものにしていると感じた。
**このシステムが利用されている理由
今回私の取り上げたシステムは非常に使いにくいものだった。
しかし、この使いにくいシステムも一度使い方が分かってしまえば、簡単に使いこなせるということがわかった。
観察の結果、利用者のシステム利用時間が比較的短かったことから考えて、このシステムは使い慣れた人達によって、繰り返し使われているのだろうと私は考えた。
**使いやすいシステムとは
そして、このシステムは、キレイにした上で、情報をディスプレイ上にまとめて表示できるようにし、写真などを用いた操作手順をユーザ側に提供すれば、より多くの人達に使ってもらえる分かりやすいものになるだろうと考えた。
----
※参考にしたHPのURL
かがつう株式会社HP
http://www.kagainc.co.jp/showings_d.html
*新・マーフィーの法則(インタフェース編)
1.改善の必要性の高いものほど、見捨てられてしまう。
2.関連性の高い項目ほど、離れて存在している。
3.重要な機能ほど、ひっそりと存在している。
2009-07-02T11:02:32+09:00
1246500152
-
プラグイン/ニュース
https://w.atwiki.jp/hidesign/pages/4.html
* ニュース
@wikiのwikiモードでは
#news(興味のある単語)
と入力することで、あるキーワードに関連するニュース一覧を表示することができます
詳しくはこちらをご覧ください。
=>http://atwiki.jp/guide/17_174_ja.html
-----
たとえば、#news(wiki)と入力すると以下のように表示されます。
#news(wiki)
2009-06-30T23:49:16+09:00
1246373356
-
まとめサイト作成支援ツール
https://w.atwiki.jp/hidesign/pages/5.html
* まとめサイト作成支援ツールについて
@wikiには[[まとめサイト作成を支援するツール>>http://atwiki.jp/matome/]]があります。
また、
#matome_list
と入力することで、注目の掲示板が一覧表示されます。
利用例)#matome_listと入力すると下記のように表示されます
#matome_list
2009-06-30T23:49:16+09:00
1246373356
-
プラグイン/編集履歴
https://w.atwiki.jp/hidesign/pages/6.html
* 更新履歴
@wikiのwikiモードでは
#recent(数字)
と入力することで、wikiのページ更新履歴を表示することができます。
詳しくはこちらをご覧ください。
=>http://atwiki.jp/guide/17_117_ja.html
-----
たとえば、#recent(20)と入力すると以下のように表示されます。
#recent(20)
2009-06-30T23:49:16+09:00
1246373356
-
プラグイン/アーカイブ
https://w.atwiki.jp/hidesign/pages/7.html
* アーカイブ
@wikiのwikiモードでは
#archive_log()
と入力することで、特定のウェブページを保存しておくことができます。
詳しくはこちらをご覧ください。
=>http://atwiki.jp/guide/25_171_ja.html
-----
たとえば、#archive_log()と入力すると以下のように表示されます。
保存したいURLとサイト名を入力して"アーカイブログ"をクリックしてみよう
#archive_log()
2009-06-30T23:49:16+09:00
1246373356