asmz.beer UIデザインを考える全ての人たちに捧げる Apple Human Interface Guidelinesのススメ 2019/10/21 Sendai Frontend Meetup #2 Akira Shimizu / asmz

asmz.beer 誰なのか？ ● Akira Shimizu / asmz (@_asmz) ● https://asmz.beer/ ● 株式会社ビデオマーケット 仙台オフィス ● iOS / Android エンジニア ● 個人開発：IT勉強会検索アプリ ○ https://eventech.asmz.beer/

asmz.beer 本日の内容 ● ターゲット ○ Apple Human Interface Guidelinesを読んだことがない人 ○ UIデザインに関わるエンジニア、デザイナー、ディレクター ● 目標 ○ 案外Webデザインに通ずるところがあるな、と思ってもらえる ○ 思わず全部読んじゃう ○ 実際にサービスに取り入れちゃう

asmz.beer アジェンダ 1. Apple Human Interface Guidelinesとは 2. なぜiOS開発以外でもHIG？ 3. HIG概要 4. まとめ

asmz.beer 1. Apple Human Interface Guidelinesとは

asmz.beer Apple Human Interface Guidelinesとは ● Apple社各種デバイス向けのUIデザインの設計思想、 デザイン原則、設計・実装指針をまとめたもの https://developer.apple.com/design/human-interface-guidelines/

asmz.beer Apple Human Interface Guidelinesとは ● 主要デザインテーマ、デザイン原則 ● アプリのアーキテクチャ ○ ナビゲーション、モーダル、Loading、etc ... ● ビジュアルデザイン ○ レイアウト、アニメーション、ダークモード、 etc ... ● 基本ユーザインタフェース ○ Bars、Views、Controls デザインに対する 大局的な指針 大局的な指針や原則を 踏まえた、 実装ガイドライン 単にUI部品の紹介や利用方法を集めた リファレンスドキュメントではない

asmz.beer 2. なぜiOSエンジニア以外もHIG？

asmz.beer なぜiOSエンジニア以外もHIG？ ● 長らく「人間とコンピュータとの対話はどうあるべきか」と いう課題に向き合ってきたApple社のインタフェース設 計知見が詰まっている 初版は1978年 Apple II 向けHIG 時代に合わせて 更新されてきた

asmz.beer なぜiOSエンジニア以外もHIG？ ● General design principles ○ Metaphors from the real world ○ Direct manipulation ○ See-and-point (instead of remember-and-type) ○ Consistency ○ WYSIWYG (what you see is what you get) ○ User control ○ Feedback and dialog ○ Forgiveness ○ Perceived stability ○ Aesthetic integrity ● Design Principles (iOS) ○ Aesthetic integrity ○ Consistency ○ Direct manipulation ○ Feedback ○ Metaphors ○ User control Human Interface Guidelines: The Apple Desktop Interface (1986) iOS Human Interface Guidelines (2017) 時代やデバイスが変わっても、普遍的な部分は 変わらず現在まで受け継がれている WebのUIデザインにおいても 適用できるはず

asmz.beer HIGを読み解くPOINT ● 大事なのはHIGから「なぜこのようなUI設計になっている のか」を読み取ること ● Webとアプリで同じUIデザインである必要はないが、Web デザインでもHIGのエッセンスは取り込める

asmz.beer 3. HIG概要

asmz.beer 3. HIG概要 Design Principles（デザイン原則）

asmz.beer Design Principles（デザイン原則） 01 Aesthetic Integrity （美的整合性） 02 Consistency （一貫性） 03 Direct Manipulation （直接的な操作感） 04 Feedback （フィードバック） 05 Metaphors （メタファーの利用） 06 User Control （ユーザによる制御）

asmz.beer 01 Aesthetic Integrity（美的整合性） ● アプリの外観や動作は、そのアプリの目的や機能と整 合性が取れたものにする アニメーションやイン タラクションを利用 楽しませ、引き込ませ るようなデザイン 気を散らさない 控えめな装飾 標準UI部品を用いる など、動作を予測しや すいデザイン 没入型アプリ ・ゲーム ・エンタメ 実用型アプリ ・ビジネス ・データ管理 ・医療系

asmz.beer 02 Consistency（一貫性） ● 標準コンポーネントなどの利用でシステム全体としての 一貫性を保つことで、機能の理解を助ける

asmz.beer 03 Direct Manipulation（直接的な操作感） ● 画面上のコンテンツをタップやジェスチャーなどで直接 操作させることにより、操作の理解を促す

asmz.beer 04 Feedback（フィードバック） ● アクションに対して知覚可能な反応を返すことで、ユー ザへ正しく結果や情報を認識させる 視覚だけじゃなく ● Haptics （触覚） ○ ブルッと震えるやつ ● サウンド（聴覚）

asmz.beer 05 Metaphors（メタファーの利用） ● 現実の体験に近いオブジェクトやアクションを用いること で、ユーザの学習ハードルを下げる

asmz.beer 06 User Control（ユーザによる制御） ● あくまでアプリはユーザの意思決定の下で制御されるも のであり、アプリで操作・制御を強制しない 破壊的なアクションは明確に伝達し、意思決定を補助

asmz.beer 4. まとめ

asmz.beer まとめ ● Apple Human Interface Guidelinesとは ○ 「人間とコンピュータがどう対話すべきであるのか」という、インタ フェース設計全般における普遍的な考え方を定義したもの ○ 長らく受け継がれてきたデザイン原則に基づき、具体的にどのよ うにインタフェース設計すべきかを導いてくれるガイドライン

asmz.beer まとめ ● WWDC 2017 Essential Design Principlesより The goal isn't to make a beautiful app, or a well-organized app, or a simple app or a focused app. Those things are all really important, but they're not the real goal. （インタフェース設計の）目標は美しいアプリ、整然としたアプリ、シンプルなアプリ、フォーカスしたアプリを 作ることではありません。これらは全て非常に重要ですが、本当の目標ではありません。 The real goal is about serving the human beings or positively affecting the lives of the people who use the apps that you make. 本当の目標は人間に奉仕すること、また、そのアプリを利用する人々の生活にプラスの影響を与えること です。 テクニカルな部分だけでなく、より人間的なレベルで ターゲットを理解し、インタフェース設計することが重要

asmz.beer 参考 ● Apple Human Interface Guidelines ○ https://developer.apple.com/design/human-interface-guidelines/ ● WWDC 2017 Essential Design Principles ○ https://developer.apple.com/videos/play/wwdc2017/802/ ● PEAKS はじめてのUIデザイン（書籍） ○ https://peaks.cc/books/ui_design ● Macintosh から iPhone へ受け継がれるデザイン原則 ○ https://goodpatch.com/blog/hig-design-principles/ ● iOS ヒューマンインタフェースガイドラインの原則 ○ https://qiita.com/usagimaru/items/9b55daa4d88b0bb98f38 ● たまたま見つけた昔の HIGのミラーサイトらしきもの ○ http://mirror.informatimago.com/next/developer.apple.com/documentation/macos 8/HumanInterfaceToolbox/HumanInterfaceGuide/humaninterfaceguide.html

asmz.beer Enjoy, Designing and Engineering! 2019/10/21 Sendai Frontend Meetup #2 Akira Shimizu / asmz

asmz.beer [PR] 公式動画配信サービス MIRAIL（ミレール） https://mirail.video/ 映画・ドラマ・アニメなどの映像作品を保有する「コンテンツホルダー」が、直接動 画を販売・配信することができる動画配信プラットフォーム