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

2. iPhoneアプリケーションのル
ック＆フィール（p.21-22）
コンピュータの操作画面の見た目や操作感のこと。
ウィンドウのデザインやアイコンの配置、操作方法とそれに
対する画面や音による反応などが全体として与える印象。
ルック＆フィールはOSやウィンドウシステムによって基本的
に統一されており、同一のウィンドウシステム上で動くアプ
リケーションソフトであれば、どのソフトを使ってもほとん
ど同じ感覚で操作することができる。
（「IT用語辞典 e-Words」より）
13年6月9日日曜日

3. iPhoneアプリケーションのル
ック＆フィール（p.21-22）
#header h1 a:
タイトルバーの文字列にドロップシャドーを付ける。
タイトルバーの背景にグラデーションを付ける。
#header ul li:first-child, last-child（先頭項目と最後の項目）
それぞれ、左上、右上と左下、右下の角を丸くする。
13年6月9日日曜日

4. iPhoneアプリケーションのル
ック＆フィール（p.21-22）
ドロップシャドーとグラデ
ーション。
角を丸くする。
13年6月9日日曜日

5. ヒューマンインターフェイス
ガイドライン
ドロップシャドーとグラデ
ーション。
角を丸くする。
13年6月9日日曜日

6. ヒューマンインターフェイス
ガイドライン
ドロップシャドーとグラデ
ーション。
角を丸くする。
何故？
13年6月9日日曜日

7. “角丸矩形ボタン”とは？
“角丸矩形ボタン”
「iOS ヒューマン インターフェ
イス ガイドライン」で “角丸矩
形ボタン”を検索してみる。
13年6月9日日曜日

8. “角丸矩形ボタン”とは？
iOS UI要素の使用方法のガイドライン 117
バー
コンテンツビュー
Alert、Action Sheet。およびモーダルビュー
コントロール
…角丸矩形のボタン…
システムに用意されているボタンおよびアイコン
13年6月9日日曜日

9. “角丸矩形ボタン”とは？
角丸矩形のボタン 162
角丸矩形ボタンは、アプリケーション固有のアクショ
ンを実行します。
13年6月9日日曜日

10. “角丸矩形ボタン”とは？
角丸矩形のボタン 162
外観および動作
角丸矩形ボタンは、角の丸みが、グループ化された
TableViewと同じです。デフォルトでは、ボタンの背景
は白色です。
13年6月9日日曜日

11. “角丸矩形ボタン”とは？
角丸矩形のボタン 162
ガイドライン
角丸矩形ボタンは、アクションを開始するために使用します。角丸矩形ボタンにタイトル
を付ける場合は、次のやり方に従います。
タイトル形式の大文字化を使用する（つまり、タイトル形式の大文字化とは、4文字
以下の冠詞、等位接続詞、および前置詞を除くすべての単語を大文字で始める）。
長すぎるタイトルは作成しない。長すぎるタイトルは切り詰められるため、ユーザ
に分かりにくくなります。
角丸矩形ボタンには、表示するタイトルまたは画像を指定することができます。ユーザが
タップした時のボタンのハイライト表示や、ボタンのハイライト時におけるタイトルの表
示方法を指定することもできます。
13年6月9日日曜日

12. “角丸矩形ボタン”とは？
Appleは「iOS ヒューマン インターフェイス ガイドライ
ン」から、 “コントロール”の一つ “角丸矩形ボタン”につい
て以下の定義を行っていることが判った。
機能： 角丸矩形ボタンは、アプリケーション固有のアク
ションを実行する。
外観および動作：
ガイドライン：
13年6月9日日曜日

13. “コントロール”とは？
iOS UI要素の使用方法のガイドライン 135
バー
コンテンツビュー
アラート、アクションシート，およびモーダルビュー
コントロール 187
…角丸矩形のボタン…
システムに用意されているボタンおよびアイコン
13年6月9日日曜日

14. “コントロール”とは？
iOS UI要素の使用方法のガイドライン 135
コントロール 187
コントロールとは、ユーザーが情報を得るために見たり，
アクションを実行するために操作したりするUI要素です。
iOSは，アプリケーション内で使用できる、数多くのコント
ロールを提供します。
アクティビティインジケータ、日付ピッカー、…、角丸矩形
のボタン、…
13年6月9日日曜日

15. “コントロール”とは？
Appleは「iOS ヒューマン インターフェイス ガイドライ
ン」から、 “iOS UI要素の使用方法”の一つ “コントロー
ル”について定義を行っていることが判った。
13年6月9日日曜日

16. “iOS UI要素の使用方法”とは？
iOS UI要素の使用方法のガイドライン 135
iOSでは、UIKitフレームワークがアプリケーションで使用できる幅広いUI
要素を提供しています。
アプリケーションのユーザインターフェイスを設計できる際には、ユーザ
は、
標準的なビューとコントロールの動作が組み込みのアプリケーションでの動
作と同じであることを期待している点を必ず覚えてください。
アプリケーションでこれらの要素を適切に使用する限り、これは利点にな
ります。
13年6月9日日曜日

17. “iOS UI要素の使用方法”とは？
iOS UI要素の使用方法のガイドライン 135
バー
コンテンツビュー
アラート、アクションシート，およびモーダルビュー
コントロール
システムに用意されているボタンおよびアイコン
13年6月9日日曜日

18. “iOS UI要素の使用方法”とは？
これらは「ヒューマンインターフェイスの原則」に基づく。
「ヒューマンインターフェイスの原則」とは？
13年6月9日日曜日

19. “ヒューマンインターフェイス
の原則”とは？
ヒューマンインターフェイスの原則 19
優れたユーザインターフェイスは、デバイスの機能ではなく、
ユーザがどのように考え、どのように作業するかに基づいた、ヒューマンインタ
ーフェイスの設計原則に従っています。
UIが
魅力的でなかったり、
複雑であったり、
論理的でなかったりすると、たとえ優れたアプリケーションでも使うのが
面倒に思えてしまいますが、
13年6月9日日曜日

20. “ヒューマンインターフェイス
の原則”とは？
ヒューマンインターフェイスの原則 19
UIが
美しく、直感的かつ魅力的であると、
アプリケーションの機能性が上がり、ユーザの愛着
心も高まります。
13年6月9日日曜日

21. “ヒューマンインターフェイス
の原則”とは？
ヒューマンインターフェイスの原則 19
外観の整合性
一貫性
直接操作
フィードバック
メタファ
ユーザによる制御
13年6月9日日曜日

22. リスト項目のデザイン（ p.23
図2-7）を工夫した理由
iOS UI要素の使用方法のガイドライン 117
ユーザは、なじみのあるビューとコントロールの動
作が組み込みのアプリケーションでの動作と同じで
あることを期待している
13年6月9日日曜日

23. リスト項目のデザイン（ p.23
図2-7）を工夫した理由
ドロップシャドーとグラデ
ーション。
角を丸くする。
13年6月9日日曜日

24. リスト項目のデザイン（ p.23
図2-7）を工夫した理由
ドロップシャドーとグラデ
ーション。
角を丸くする。
13年6月9日日曜日

25. リスト項目のデザイン（ p.23
図2-7）を工夫した理由
ドロップシャドーとグラデ
ーション。
角を丸くする。
13年6月9日日曜日

26. リスト項目のデザイン（ p.23
図2-7）を工夫した理由
ドロップシャドーとグラデ
ーション。
角を丸くする。
ユーザは、なじみのあるビューとコ
ントロールの動作が組み込みのアプ
リケーションでの動作と同じである
ことを期待している
13年6月9日日曜日