2013年札幌学院大学ヒューマンインターフェース論第3回講義スライド

1. ヒューマンインターフェース論
Vol.3
そが としおき
曽我 聡起
北海道文教大学 外国語学部・国際言語学科
13年4月29日月曜日

2. インターフェースと製品
ユーザーは、「自分にとって必要なことが実現されるの
であれば、製品の中身は気に留めない」
顧客の立場から見る限り、「インタフェースが製品その
ものである。」（ジェフ・ラスキン）
13年4月29日月曜日

3. iOSデバイスのインターフェース
iOSデバイス：
iPhone
iPod touch
iPad
Apple TV
13年4月29日月曜日

4. iOSデバイスのインターフェース
13年4月29日月曜日

5. iOSデバイスのインターフェース
13年4月29日月曜日

6. iOSデバイスのインターフェース
“iOSアプリがAndroidよりクールな理由”
Wired Japanese Edition：http://wired.jp/2012/05/02/
easier-design-apps-ios/
「洗練された魅力的なデザインのアプリを開発するに
は、AndroidよりiOSのほうが簡単なことは、両方を開発
したことがある者にとっては常識になっている。」
13年4月29日月曜日

7. iOSデバイスのインターフェース
“iOSアプリがAndroidよりクールな理由”
「Androidでは、開発者向けツールとドキュメントがそれ
ほどしっかりしていない。Apple社は、SDKを洗練させ、
明確に規定されたヒューマン・インターフェースのガイ
ドラインを構築するなど、20年をかけてその開発者サポ
ートを完成させてきた。」（Wired Japanese Edition）
13年4月29日月曜日

8. iOSデバイスのインターフェース
iOSヒューマンインターフェース（HI）ガイドライン
Apple社
http://developer.apple.com/jp/devcenter/ios/library/japanese.html
上記より “iOS ヒューマンインターフェイス ガイドライ
ン”(PDF)をダウンロードしておくこと。
日本語表記が日本語版
講義で使う．
13年4月29日月曜日

9. iOSヒューマンインターフェー
ス（HI）ガイドライン
ユーザが高く評価するiOSアプリケーションは、対象のデバイス向けに特別に
設計されているように感じられるアプリケーションです。
たとえば、デバイスの画面にきちんと収まり、自分が知っているジェスチ
ャに応答すれば、アプリケーションはそのユーザが求める体験の多くを提
供していることになります。また、ユーザは直接操作や一貫性などのヒュー
マンインターフェイスの設計原則については認識していないかもしれません
が、原則に従っている場合とそうでない場合を見分けることができます。
アプリケーションの設計を始めるにあたり、高く評価されるユーザ体験を提供
できるように、iOSベースデバイスの独自性を理解し、HIの設計原則を取り入
れる方法を学んでください。
13年4月29日月曜日

10. 優れたアプリケーション設計
のための明確な定義
アプリケーションの構想を始めるときは、提供する機能
とその対象者を正確に定めることが重要です。
その後、アプリケーションが動作するデバイスとアプリ
ケーションが実行するタスクに対して、アプリケーショ
ンの外観と操作感を合わせる必要があります。
13年4月29日月曜日

11. 優れたユーザ体験につながる
ディティールへの配慮
アプリケーションのどの側面を設計するときも、タスクの実行
方法から、アプリケーションの起動と終了の方法やボタンの使
いかたに至るまで、ユーザ体験(User Experience;UE)を真っ先に
念頭に置くことが重要です。
一般的な事柄と固有の事柄の両方について、アプリケーション
の外観や動作に影響するガイドラインを確認してください。
13年4月29日月曜日

12. プラットフォームの特徴
iOSベースのデバイスには、デバイス上で実行するアプリ
ケーションのユーザ体験に影響する、いくつかの共通し
た特徴があります。非常に成功したアプリケーション
は、これらの特徴が活かされており、アプリケーション
を実行するデバイスと一体化されたユーザ体験を提供し
ます。
13年4月29日月曜日

13. ジェスチャ 動作
タップ
コントロールまたは項目を押す、または選択する(マウスのシングルクリック
に相当)。
ドラッグ
スクロールまたはパンする(片方の端からもう片方の端への移動)。 要素をド
ラッグする。
フリック(はじく) すばやくスクロールまたはパンする。
スワイプ
1本の指で、テーブルビューの行に「Delete」ボタンを表示し、分割 ビュー
の非表示になっていたビューを表示し(iPadのみ)、あるい は通知センターを
(画面の上端から)表示する。2本の指で、iPad上のアプリケーションを切り替
える。
ダブルタップ
コンテンツブロックまたは画像を拡大してセンタリングする。縮小する(すで
に拡大されている場合)。
ピンチ ピンチオープンして拡大する。ピンチクローズして縮小する。
タッチアンドホールド
編集または選択可能なテキストで、カーソル位置で拡大されたビュー を表示
する。
シェイク アクションを取り消す、またはやり直す。
13年4月29日月曜日

14. もはや “クリック”は無い．
（必ず覚えること）
13年4月29日月曜日

15. 基本用語
以下も図版入りで分りやすい．
http://iphoneac.com/beginner3.html
13年4月29日月曜日

16. iOSアプリケーション(p.1~)
ネイティブアプリケーション
“Objective-C”などの言語を使用。
Appleが提供するライブラリを使用し、iOSが持つ様々
な機能を活かしたアプリケーション。
プログラミング言語を習熟するのに時間がかかる。
Macが必須（ただし、開発キットは無料）。
13年4月29日月曜日

17. iOSアプリケーション(p.1~)
13年4月29日月曜日

18. 携帯画面に最
適化した表示
同一URLの同じWebページ
13年4月29日月曜日

19. 今、企業として--モバイル向け
サイトを考え直すべき時、来る
CNET Japan
http://japan.cnet.com/
13年4月29日月曜日

20. 今、企業として--モバイル向け
サイトを考え直すべき時、来る
13年4月29日月曜日

21. 今、企業として--モバイル向け
サイトを考え直すべき時、来る
「つまり、あまりにも多くのウェブサイトが、Adobe
Flashやマウスオーバーアニメーションを使用していた
り、マウスを使っているユーザーのみを対象として設計
したJavaScript機能などを用いているため、モバイル端末
を使ってアクセスしているユーザーにとっては使い勝手
の悪いものとなっているということだ。」
13年4月29日月曜日

22. 今、企業として--モバイル向け
サイトを考え直すべき時、来る
「これこそが、ウェブ全体で見た場合、モバイル向けサ
イトに対するユーザーの満足度が低く留まっている原因
であり、ユーザーがモバイルエクスペリエンスに最適化
されたネイティブアプリケーションのダウンロードに走
る理由でもある。」
13年4月29日月曜日

23. プラットフォームの特徴
ディスプレイはサイズに関係なく最も重要。
タップ可能なUI要素の快適な最小サイズは、44×44ポイント。
アプリケーションアートワークのクオリティが明確に表れる。
ユーザの焦点はコンテンツにある。
デバイスの向きを変えられる。
“iOSヒューマンインターフェースガイドライン”（Apple）より
13年4月29日月曜日

24. Webプログラミングの概要（p.
3~）
Web:
HTML（コンテンツ）
CSS（デザイン）
JavaScript（プログラミング）
内容はテキストファイルなので特別なプログラムが不要
（テキストエディタ（“メモ帳”など））。
13年4月29日月曜日

25. HTML（p.3）
要素（タグ）で表記。
開始タグと終了タグでペアになることが多い。
要素は直接入力。（大文字、小文字は関係ない）
h1~h6要素：タイトル
p要素：パラグラフ（段落）
改行を含む。段落の境界を識別できる。
拡張子 “.html”で保存する。
13年4月29日月曜日

26. HTML（p.3）
<h1>こんにちは！</h1>
<p>私のページを見に来てくれてありがとう。</p>
<p>楽しんでもらえるといいな。</p>
13年4月29日月曜日

27. HTML（p.3）
<h1>こんにちは！</h1>
<p>私のページを見に来てくれてありがとう。</p>
<p>楽しんでもらえるといいな。</p>
13年4月29日月曜日

28. HTML（p.3）
HTMLの編集作業
テキストエディタで要素を記述。
拡張子 “.html”で保存。
Webブラウザで表示を確認。
修正はテキストエディタで開き、修正後は上書き保存。
ブラウザで再読込みして修正を確認。
13年4月29日月曜日