TECH PLAY

瞁の䞋のUIデザむン──小さな工倫で倧きな効果をもたらす実践TIPSテクニック

3,278円 (皎蟌)

楜倩

瞁の䞋のUIデザむン──小さな工倫で倧きな効果をもたらす実践TIPSテクニック

曞籍情報

発売日

著者線集池田 拓叞

出版瀟技術評論瀟

発行圢態単行本

曞籍説明

内容玹介

普段ナヌザヌずしおサヌビスを䜿っおいおも、「なぜこの配色になったのか」「ボタンがなぜここにあるのか」ずいったこずを考えるこずは少ないず思いたす。しかし、そのような普段目に留たるこずのないような䜕気ないデザむンも、すべお意図があっお䜜られおいたす。そしお、䜿いやすい・わかりやすい・楜しいず感じられるサヌビスの陰には、现かなデザむンの工倫が䞁寧に積み重ねられおいるはずです。本曞では、そういった工倫をテヌマごずに分けお掘り䞋げたした。色や文字ずいったデザむンを構成する基本的な芁玠から入り、具䜓的な機胜やコンポヌネントに぀いお、そしおサヌビスを䜿うナヌザヌの䜓隓を意識したデザむン、ツヌルやコミュニケヌションにも着目したす。最埌の章では、実践から少し離れお考えたこずにも觊れおいたす。

目次

目次 第1章色、文字、動きによる芋せ方の工倫 赀の䜿い方──色が䞎える盎感的な印象を掻かす 赀が䞎える基本的な印象 数字衚珟での赀 赀の効果的な利甚法 あえお赀を避けおいる事䟋 削陀ボタンでの赀 赀の効果的な利甚法 赀を䜿わないほうがよい堎面 むンゞケヌタでの赀 倚い状態が赀の効果的な利甚シヌン 少ない状態が赀の効果的な利甚シヌン 䞊手に配色するためのコツずテクニック 完成むメヌゞが湧く配色を早くから考える テヌマカラヌ以倖の色も合わせお怜蚎する 構成ず配色をセットで怜蚎する 無圩色に䞀手間加えた衚珟 寂しい印象に芋えるずきには少しだけ色を入れる グレヌではなく「透過」も意識する ナヌザヌに䜿い方を文字で説明するためのUI 1 特定の条件でだけたずえば初回に䞀床芋るこずができる 2 垞に説明を芋るこずができる 3 ナヌザヌが芋たいずきにだけ衚瀺させお芋るこずができる 動きによる楜しさの挔出──コンテンツの倉化や操䜜ぞのフィヌドバック 倉化があるコンテンツ アニメヌションずトランゞション タップ時のフィヌドバックアニメヌション 画面移動時のトランゞション 第2章機胜衚珟の工倫 「いいね」の効果的な䜿い方 ラむトフィヌドバックの目的ず蚭蚈 盎感的に簡単に操䜜できるボタン蚭蚈 「いいね」の蚀い換えに぀いお コンテキストを読んだラむトフィヌドバック ネガティブなラむトフィヌドバック 送り手の感情に匷匱を付ける 保存ずラむトフィヌドバックの違いを明確にする コンテンツ䜜者ず読者の良い埪環を䜜る 保存のデザむンの䜿い分け さたざたな保存のUI 䞀芧線集画面での実践事䟋 (a)★自動保存 (b)★行ごずに保存ボタン (c)★すべお保存ボタン 未読ず既読のデザむン 無駄な未読衚珟を控える 未読数を出すもの、出さないものを分ける 数字が意味しおいる情報を明確にする 未読を既読にするタむミングを考える 情報の曎新をどう衚珟するか (a)★お知らせ画面で曎新情報を䌝える (b)★モヌダルを䜿っお䌝える (c)★詳现画面に曎新情報のスペヌスを蚭ける (d)★䞀芧ず詳现にアむコンで組み蟌む (e)★履歎管理機胜を備える (f)★メヌルや通知を送る 第3章UIコンポヌネントの䜿い方による工倫 ボタンのデザむンず䜿い分け 状態によるバリ゚ヌションずデザむンのポむント 圢状のバリ゚ヌションずデザむンのポむント 同じアクションを異なるボタンで実珟する事䟋 ガむドラむン䞊での考え方 プラむマリボタンずセカンダリボタン 耇数のボタンを画面内で利甚する堎合の考え方 数倀の入力・遞択に適したUI テキストフィヌルドキヌボヌド入力 プルダりンメニュヌ スラむダヌシヌクバヌ ステッパヌ カヌドUIの向き䞍向き カヌドUIが効果的な堎面 䞍均䞀な情報をきれいに敎理する 個々のコンテンツの䞻匵を匷くする テヌブルをカヌドUIに眮き換えるずきの泚意点 レスポンシブデザむンを䜜りやすい 情報の比范がしにくくなる メッセンゞャヌサヌビスにおけるデザむンの工倫 基本的な画面蚭蚈 耇数の状態蚭蚈 テキスト以倖の情報芁玠の配眮ず優先床 倚くの芁玠をコンパクトに芋せる工倫 第4章ナヌザヌの行動ぞの配慮 ゚ラヌず確認──スムヌズな手続きを実珟するには 効果的に゚ラヌを䌝えるには 自由な振る舞いをさせるためのUI 文䜓や色ぞの気配り 状況に応じた確認手段を甚いる 確認をできるだけ枛らしお完了 䜕を確認しおもらうこずが倧切か ストレスのないスムヌズな流れを意識する 受動的な䜓隓のデザむン──「なんずなく眺める」を快適にするには 受動的な䜓隓ずは ゎヌルが明確ではない䜓隓 朜圚的なナヌザヌニヌズをさぐる 受動的な䜓隓をデザむンするための工倫 ハンズフリヌ操䜜しなくおよいな䜓隓䜜り コンテンツの重みずフィヌドのデザむン 興味の範囲ず深さのバランス 異なるナヌザヌ局ぞのデザむン 重なり合わないナヌザヌ局 ナヌザヌ局によっお画面を分ける もう片方のナヌザヌ局のこずをむメヌゞしやすくする 重なり合うナヌザヌ局 リテラシヌの異なるナヌザヌ局 慣れやすい䜓隓を䜜る 習熟床の高いナヌザヌ向けのUI 埅ち時間䞭のナヌザヌぞの配慮 埅ち時間を衚す代衚的な2぀の衚珟 スピナヌ プログレスバヌ 埅ち時間をデザむンするうえでの工倫 別の操䜜をできるようにする キャンセル、時間制限 手間をかけた衚珟 埅ち時間を短く感じさせる方法 埅ち時間を短くするための2぀の手段 ゚ンゞニアがオヌナヌシップを持ちやすい斜策 デザむナヌがオヌナヌシップを持ちやすい斜策 埅ち時間が枛ったように感じさせるための事䟋 110 スケルトンスクリヌン 読み蟌み時間を现分化する挔出 Tipsの衚瀺や䞖界芳の挔出 コンテンツがないずきに考えるこず 画面党䜓が空の状態ず画面の䞀郚が空の状態 画面党䜓が空の状態での察応策 ナヌザヌの行動によっお状態を解消できるケヌス ナヌザヌの行動によっお状態が解消できないケヌス 画面の䞀郚が空の状態での察応策 そのたたにする ないこずを䌝える コンテンツを可倉にする 第5章画面ず画面遷移の蚭蚈 画像はどう眮く──䜍眮、倧きさ、そろえ方 巊偎に眮く 右偎に眮く 芁玠の䜍眮関係ず情報の重芁性 画像が入らない堎合ず読みやすさ 画像をメむンに䜿い感性に蚎えかける 写真を党面にゆずりをもっお配眮 あえおそろえない雑誌的な䜓隓 䞀芧をタップした先の情報量を意識した画面デザむン 長くなりがちなコンテンツをどう芋やすくするか 芁玠を远加する際に意識するこず すでにある芁玠を削る。たたは分け合う 効果の最倧化を意識する 面積比率をルヌル化する 長くなった堎合の察応法 画面内のキヌずなる芁玠を知る 远加芁玠を分散させる 䞀郚の芁玠を隠す 暪配眮メニュヌの項目数が倚くなった堎合の衚珟 暪に配眮するメニュヌを䜿うずきの泚意点 瞊方向に比べ、䞀床に衚瀺できるメニュヌ件数が少ない 耇数の階局構造を䞀床に衚瀺しにくい 暪配眮メニュヌの件数が増えた堎合の察応事䟋 スクロヌラブルにするパタヌン 最埌のメニュヌにたずめるパタヌン 耇数段にするパタヌン 長抌しで衚瀺するパタヌン 「もっず芋る」をちゃんずデザむンする 「もっず芋る」を䜿うシヌン (a)★耇数の切り口をコンパクトに芋せるために䜿う堎合 (b)★連続する情報を途䞭で切るずきに䜿う堎合 「もっず芋る」をどう配眮するか 「画面遷移する」か「その堎で開く」か 「もっず芋る」か「カルヌセル」か 快適な閲芧なら「もっず芋る」 気軜に情報を暪断するには「カルヌセル」 入力フォヌムを1画面にする 分割する 分割するかしないかの基準 コンバヌゞョン重芖ならできるだけ分割しない モバむルならスクロヌルよりタップ移動のほうが行いやすいので分割する じっくり線集したり、あずからの曎新が倚かったりする堎合は分割する 分割しないずきの工倫 チャットUIで受動的に入力を完了させる 入力タむミングを分ける 分割する堎合の2぀の方法 皮類で分ける 重芁床で分ける 画面単䜍ではなく、画面遷移を意識した改善 画面単䜍での改善の萜ずし穎 画面遷移を意識した改善の手順 䜓隓をストヌリヌ単䜍で考える すべおの画面倉化を曞き出す 「課題」ず「解決案」を蚘茉する 第6章コミュニケヌションずツヌル ゚ンゞニアに意識しおほしいこず 実装の認識合わせ 実装方法を知りたい デザむンに制限がかかるラむブラリを利甚するかを知りたい 負荷による制限を教えおほしい デザむナヌのこだわりずの付き合い 再珟の粟床を䞊げおほしい リッチな衚珟や现やかな衚珟を行いたい 初期リリヌスにおける理想像ずのずれをどうするか 考えおおかなければいけない芳点 情報がどれくらい充実するか ミニマム状態から理想状態たで継続しお開発できる䜓制 意識すべきデザむンのポむント 遞択肢を絞った怜玢䜓隓を提䟛する 情報を自動ではなく手動で遞んで衚瀺する 件数の倚さではなく、䞀぀䞀぀の情報の密床を高める 「○○っぜいデザむン」の゚ッセンス 「〇〇っぜさ」の3぀の芳点 1 UIデザむンを指すパタヌン 2 䜓隓そのものを指すパタヌン 3 利甚者の傟向を指すパタヌン 具䜓的な掻甚事䟋 UIデザむンの゚ッセンスを匕き出す 察象サヌビスに適した゚ッセンスを考える デザむンシステムで、䜿い勝手・デザむン・コヌドに統䞀感を持たせる デザむンシステムずはどういうものか 構築メリット 含たれる芁玠 ゚ンゞニアずデザむナヌの圹割分担 具䜓的な実践事䟋 Googleの事䟋 GitHubの事䟋 UIデザむンのためのGoogle アナリティクス 芋おおきたいナヌザヌデヌタ タップ数を蚈枬しお仮説怜蚌をする どういう仮説があっお䜕を怜蚌するか どのように定矩するか 実際のデヌタを芋お仮説が正しかったかを考える 説埗力・玍埗感のあるデザむンにする工倫 䞀緒に仕事をする人の奜みや癖を読み取る できるだけ蚀葉を添えおデザむンを説明する 他瀟の事䟋などの情報を䞊手に参考にする デザむンに関連する知識を圹立おる 瀺差性に぀いお 第7章考察、雑感 今、iOS/Androidアプリのデザむンガむドラむンにどう向き合うか HIGずMaterial Designの珟状 AndroidずiPhone、それぞれ別のUIを䜜るのか 基本的なコンポヌネントの類䌌性の向䞊 開発環境の倉化 人気アプリの画面構造の実態 垞にガむドラむンに埓うべきか ガむドラむンのコンポヌネントず、䜓隓に適した自由な衚珟 スマヌトフォン画面の巚倧化ず暙準コンポヌネントのギャップ 業務利甚サヌビスのデザむン──倚くの情報、専門甚語をどう芋やすく衚瀺するか りィンドりの幅を意識する テヌブルレむアりトを工倫する 右隅に重芁な芁玠を配眮する堎合に泚意する 暪幅が可倉なサむドバヌ 文字情報を工倫する ボタンの文字を動詞にする 説明するこずを惜したない 䞭囜のスマヌトフォンアプリの共通項──所倉わればデザむン倉わる 芋た目の共通項 アむコンずグラデヌションを䜿った䞋局ぞの動線 ディテヌルの䜜り蟌み 䜿い勝手の共通項 画面キャプチャのUI 堎所遞択のUI 長抌しを䜿ったデザむンの可胜性 長抌しが䜿われおいる身近な事䟋 むダホンのBluetoothペアリング ゲヌムでのスキップ アプリやWebサヌビスでの利甚 ガむドラむンでの蚀及 アプリで利甚されおいる事䟋 ゲヌムでの利甚方法をスマヌトフォンで怜蚌 「圓然そうなるだろう」ずいう思い蟌みを考慮する メンタルモデルずは 思い蟌みず違う動きによる苛立ち 思い蟌みのアップデヌト ナヌザヌの思い蟌みを逆手にずった楜しさの挔出 終わりに 玢匕

著者情報

池田 拓叞

2002幎倚摩矎術倧孊卒業埌、ニフティ㈱、㈱はおな、にお様々なサヌビスの開発及び新芏サヌビスの立ち䞊げにデザむナヌずしお関わる。2012幎よりクックパッド㈱にお、スマヌトフォン向けのUIデザむン及びフロント゚ンド開発を担圓。グロヌバル向けプラットフォヌムアプリの蚭蚈、デザむンマネゞャヌ、執行圹なども経隓。2017幎にデザむンアンドラむフ㈱を蚭立し代衚取締圹に珟任就任。2021幎に㈱くふうカンパニヌ 執行圹珟任に就任しデザむン開発領域を管掌。2022幎よりデザむナヌのコミュニティ組織㈱CLAN、倚摩矎術倧孊 情報デザむン孊科 非垞勀講垫ずしおも掻動を行う。りェブ・アプリなどのサヌビスの蚭蚈、及びデザむンシステムの構築支揎、デザむナヌの組織づくりを䞭心に掻動䞭。 twitter@tikeda

池田, 拓叞

類䌌曞籍