Recommended
More Related Content
Similar to UIデザインの基本
Similar to UIデザインの基本 (9)
UIデザインの基本
- 1. UIデザインの基本
- 8. ３.良いUIとは何か 良いUI＝ユーザーの目的達成を促し、認知的な負担が少ないデザイン 例）スマートフォンの化粧品購入サイト ✖ 「購入する」というユーザーの目的達成を阻害 ✖ 情報の優先度が不明確なため、全ての情報を順番を 見る必要あり → ユーザーの認知的負荷が多大 〇 「購入する」というユーザーの目的達成を助長 〇 情報の優先度が明確。瞬間的に各情報の判断が可能 → ユーザーの認知的負担が軽微 LISKUL,UIの基本と、設計方法│UI改善で成果6倍！ https://liskul.com/ui-1777 〇良いUI 老若男女問わず使える！ 断然お得！ 全額保証付き！ うるおい力が当社比３０％UP! 今だけ５０％OFF！ さっと流せる！ 天然成分配合！ 圧倒的なうるおい！ 購入 うるおいたっぷりの〇〇化粧水 購入する 30代の肌荒れには 今だけ５０％OFF 2,980円 商品画像 ✖悪いUI
- 10. ４.UIデザインの基本的な作成方法 デザインの四原則を用いてUIデザインを作成する 例）チラシのデザイン修正の流れ 元デザイン RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016 ①近接 関連情報を近づける 関連する情報を近づけ、 非関連情報を遠ざけた ②整列 垂直/水平方向に揃える 中央揃えを右揃えにする ことで強い透明な線を作った ③反復 同じ構造を意図的に 繰り返す 点線という構造を繰り返した ④強弱 要素を大きく差別化 ・点線を太くして細いテキスト との差別化をした ・背景と文字の色を対照的に することで差別化した
- 11. ４.デザインの四原則 ①近接 近接：関連情報を近づけ、非関連情報は遠ざける 効果：情報のグループ化による、ユーザーの認知的負担軽減 近接のポイント ・関連している情報は修正前より近づける ・関連していない情報の間には大きく 余白を設ける 例）近接のポイントを抑えて、ポスターデザインを修正 どこに何が書いて あるのかわからない 一目でどこに何が書いて あるのかが認知可能に RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016
- 12. ４.デザインの四原則 ②整列 整列：テキスト/画像などの要素を、垂直/水平方向に揃える 効果：見た目の整理による、ユーザーの認知的負担軽減 整列のポイント ・近接を行った後に行う ・強い直線を作るイメージで各要素を結ぶ ・デザイン修正後に、強い直線が引けるか確認 右の例）強い直線（点線）を 綺麗に引くことができている 例）整列のポイントを抑えて、ポスターデザインを修正 RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016
- 13. ４.デザインの四原則 ③反復 1/2 反復：同じ構造を意図的に繰り返す 効果① : ユーザーの視覚をそのページに留める 反復のポイント ・整列を行った後に行う 右の例）修正前の時点で既に整列されているので どこに反復を用いるのかを決めやすい ・視線を誘導したい部分を、反復で挟む 右の例）タイトルと一番下のテキストに反復を用いた ため、視線がカード内に留まるように ・反復を行うときは、以下の流れで行う 1.特徴的なものをみつける 2.意図的にそれを繰り返し使う 右の例）1.タイトルのフォントが特徴的 2.それを繰り返し使ってみよう 上から一番下の文まで見た後、 視線がカードの外に逸れてしまう 上から一番下の文まで見た後、 視線が反復を用いた要素 （タイトル）に戻る 例）反復のポイントを押さえて、カードデザインを修正 RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016
- 14. ４.デザインの四原則 ③反復 2/2 反復：同じ構造を意図的に繰り返す 効果②:複数ページのサイトに一貫性を持たせる 反復のポイント ・複数ページにわたるサイトでは、各ページに 同じ構造を必ず入れ込む 右の例）赤い部分の反復が仮に無ければ、 同じ会社のサイトだと判断できない ・複数ページにわたるサイトでは、 色味/ボタンなどのデザインを揃える 右の例）両ページとも色は黒、白、青を主に 用いており、ボタンのデザインも 統一されている 例）Amazonの商品画面/Amazonビデオ 反復 反復 原田秀司, UIデザインの教科書, (株)翔泳社, 2019.
- 15. ４.デザインの四原則 ④強弱 1/2 強弱：要素を大きく差別化すること 効果：情報の優先度が高いものを明確にし、視線を誘導する 強弱のポイント ・近接、整列を行ってから行う 詳細）スライド17へ ・各情報に優先度をつけてから行う 左の例）1.顔写真 2.プロフィール ～ ・強弱を付けられる要素： フォント、サイズ、太さ、色、形、など 左の例）・写真のサイズの差別化 ・テキスト色の差別化 ・プロフィール背景色と その他の背景色との差別化 ・曖昧ではなく、明確に差別化する 詳細）スライド16へ 強調されている情報が一つも ないので、どこに何が書いて あるのかが不明 優先度の高い顔写真/ プロフィール/職業が強調され、 視線が重要情報順に誘導 例）履歴書の一部に強弱を施した場合 RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016
- 16. ４.デザインの四原則 ④強弱 2/2 強弱を付ける際には、曖昧ではなく明確に差別化する 理由：差別化が曖昧だと、優先度の高い情報を強調できないため Q. 最優先情報が４だとしたとき、瞬時に４を見つけて数えられるか？ 悪い例) 色の差別化が曖昧な場合 良い例) 色の差別化が明確な場合 Q. 他の情報より、ある情報を強調したいとき右図/左図のどちらの方が目を引くか？ 悪い例) 形の差別化が曖昧な場合 良い例) 形の差別化が明確な場合 使用色が多すぎる使用色は少ないが、差が曖昧使用色が単色の場合 使用色が少なく、 明確な差がある 参考文献 : 原田秀司, UIデザインの教科書, (株)翔泳社, 2019.
- 17. Appendix. 反復/強弱をつける際に、留意すべき点 反復/強弱の前に、近接/整列を行うこと 理由：制作側がページのどこに反復/強弱をつけるかを決めやすくなるため Q. ページのどの部分に反復/強弱をつけるとよさそうか？ 反復を使う どこに反復/強弱を 作れば効果的か不明 強弱を使って コントラストを付ける 近接/整列を行う前 近接/整列を行った後 RobinWilliams, The Non-Designer’s Design Book fourth edition,(株)マイナビ出版, 2016
- 19. ５.色の基本 ①色を構成する要素 色を構成する3つの要素:色相/彩度/明度 彩度…色の鮮やかさの度合い 低彩度 （視線を集めにくい） 高彩度 (視線を集める） 明度…色の明るさの度合い 明度が低い （黒に近い） 明度が高い （白に近い） 色相…赤、青、緑などの色みのこと 寒色 （視線を集めにくい） 暖色 (視線を集める）
- 20. ５.色の基本 ②２～３つの色の代表的な組み合わせ方 調和のとれた配色：色相もしくはトーン（彩度や明度）を合わせた配色 伝わるデザインの基本 良い資料を作るためのレイアウトのルール,(株)技術評論社, 2014 １.同じ色相でトーンを変える（2～3色） 見かけの色数が増えないのでシンプルな配色 にしたいときに使える組み合わせ。 ２.同じトーンで類似色を組み合わせる トーンを変えずに類似色（色相環で隣合う 色同士）を組み合わせる方法。 1.と同様、色が増えた印象を与えにくいので シンプルかつ鮮やかさを兼ね備えた資料を 作る際に有効。 ３.同じトーンの補色を組み合わせる(2色) トーンを変えずに補色（色相環で反対側の 色同士）を組み合わせる方法。 互いを引き立てる効果があるが、それぞれの 色を使う量には注意が必要。 次のスライドのメイン色/強調色を参照。 ４.同じトーンで色相環を3等分する ように組み合わせる（3色） トライアドともいう。 3.と同じく互いに引き立てる効果があるが、 それぞれの色を使う量には注意が必要。 次のスライドのメイン色/強調色を参照。
- 21. ５.色の基本 ③色の決め方 基本：背景色・文字の基本色・メインの色・強調の色、の4色で配色する 色を更に増やしたいとき：メインの色/強調の色、のトーンをずらす/類似色を用いる 例) 今回のスライドの配色（基本） 例）今回のスライドから色を更に増やしたいとき 背景色(約70%) 通常白が用いられる。 メインの色/強調の色 を引き立てる色。 メインの色(約25%) 全体を通じたイメージカラー タイトル/小見出し などに用いる色 文字の基本色 重要度の低い、 あるいは中低度の 文章/単語に用いる色 強調の色(約5%) 重要度の高い 単語や文章に用いる色 メインカラーの補色を選ぶ 背景色(約70%) メインの色(約12.5%ずつ) 元々の色からトーン（彩度や明度） をずらした色を用いると調和を 維持できる ※元々の色の類似色を用いてもよい 文字の基本色 強調の色(約2.5%ずつ) 元々の色の類似色を用いると 調和を維持できる ※元々の色からトーンをずらした 色を用いてもよい WEBクリエーターズマニュアル 配色の基本。メイン・サブ・アクセントカラーを極める！ http://creators-manual.com/main-sub-accent/
- 23. ６. 注意すべき事項 ①デバイスの違い アプリやサイトを使うデバイスごとに最適なＵＩデザインは異なる デバイスによるUIの違いで最も重要ものはホバーの有無からくる特徴 デバイス 入力手段 ホバーの有無 UIの特徴 PC キーボード、マウス、 トラックパット →細かい操作が可能 有 ・要素が細かくても問題ない ・ホバーやスクロールを有効活用したデザインに タブレット スマートフォン タッチパネル →細かい操作には 神経を使う 無 ・リンク、ボタンにある程度の大きさが必要 ・リンク、ボタンを目視のみで選択の可否を判別 可能なデザインにする必要 原田秀司, UIデザインの教科書, (株)翔泳社, 2019.
- 24. ６. 注意すべき事項 ②ユーザー年齢の違い ユーザーの年齢層ごとに最適なＵＩデザインは異なる 年齢ごとのUIにおける注意事項 年少（約3歳～5歳） 年長（約6歳～12歳） 大人（13歳～49歳） シニア（50歳以上） 文字のサイズ 約14pt（19px） 約12pt（16px） 約10pt（13px） 12pt（16px） ～14pt（19px） 行間 不明 文字サイズの50%～100%前後 150%以上 形 各年齢ごとに最適なUIデザインにする 必要がある （子供は1つの年齢の違いに 敏感なため） 特になし 一目でボタンだとわかる デザインにする 色 コントラスト比 （背景色：対象色） 4.5:１以上 原田秀司, UIデザインの教科書, (株)翔泳社, 2019. 株式会社イード ニールセン博士のAlertbox 子供向けWebサイトデザイン時のユーザビリティ上の課題 https://u-site.jp/alertbox/20100913_childrens-websites 株式会社アーティス 可読性の高いデザイン作成のポイント（後編：行間＆字間＆行長） https://www.asobou.co.jp/blog/web/text-design02