More Related Content
What's hot (19)
Viewers also liked (15)
Similar to ノンテ?サ?イナーのための奥别产デザイン讲座 (20)
ノンテ?サ?イナーのための奥别产デザイン讲座
- 5. SKILLHUB 近接:Proximity 5 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone この2つを見てどう思いますか？
- 8. SKILLHUB 近接:Proximity 8 Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone Computers MacBook MacBook Pro MacBook Air Windows8 ChromeBook Macintosh iPad iPhone 「近くにあるということは関係がある」ことを意味する
- 12. SKILLHUB 近接:Proximity 12 吉田 光利 スキルハブ代表 Q1. どこから読み始めますか？ 090-0000-0000 上目黒5丁目 东京都目黒区 真ん中です。 文字が太いからです。
- 14. SKILLHUB 近接:Proximity 14 吉田 光利 スキルハブ代表 Q2. 次はどこを読みますか？ 090-0000-0000 上目黒5丁目 东京都目黒区 左から右に読みます
- 16. SKILLHUB 近接:Proximity 16 吉田 光利 スキルハブ代表 Q3. 右下まで行ったら次に視線はどこに行きますか？ 090-0000-0000 上目黒5丁目 东京都目黒区 隅を見落としていな いかあちこち見てし まいます。
- 19. SKILLHUB 近接:Proximity 19 吉田 光利 スキルハブ代表 Q4. どこから読み始めますか？ 090-0000-0000 上目黒5丁目 东京都目黒区 なんか太字を行った り来たりしてしまい ます。定まりません
- 21. SKILLHUB 近接:Proximity 21 吉田 光利 スキルハブ代表 Q4. いつ読み終わったかわかりますか？ 090-0000-0000 上目黒5丁目 东京都目黒区 わ、わかりません
- 27. 近接：Webサイト事例 27
- 29. 近接：実習 29
- 36. SKILLHUB 整列:Alignment 36 Q. このデザインから何か関連を見つけられますか？ … 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区
- 37. SKILLHUB 整列:Alignment 37 Q. このデザインから何か関連を見つけられますか？ いいえ、バラバラで どこが関連している かはわかりません吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区
- 42. SKILLHUB 整列:Alignment 42 端 えは真ん中 えよりも力強い 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区
- 43. SKILLHUB 整列:Alignment 43 端 えは真ん中 えよりも力強い 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区 吉田 光利 スキルハブ代表 090-0000-0000 上目黒5丁目 东京都目黒区
- 52. 実習：整列 52
- 58. SKILLHUB 整列まとめ 58 「見えない線」が見え るか 完成デザインをジーっと見た時に、しっかりとアラ イン線を認識できるか。 異なった行 えになって いないか 同じ要素の中で異なった行 えになっていないか。 左 え、真ん中 え、右 えが同じ要素の中で混在 していると整列感がなくなる。 異なる要素を整列させ ていないか 異なる情報レベルの要素が整列によって結ばれてい ないか。もし整列させてしまっていれば、ユーザー は「近い情報」として認識してしまう。 例外がきちんと処理され ているか アライン線をはみ出している表現であったり、行 えをわざと変えている場合にそれが理解できるか。 これらの例外は、他の部分で整列原則が守られてい る場合に成立する
- 76. 実習：反復 76
- 78. SKILLHUB 反復まとめ 78 ヘッダーは共通か？ ロゴの位置、ナビゲーションの項目は同じであるか 見出しは共通か？ 大見出し、中見出しなどHTMLで言えばh1, h2などの見た目がページ間 で共通であるか？ 文字について 本文の文字サイズや行間などの設定が共通であるか。引用などにもルー ルが設定されているか。 アイコンで意味の反復を実現でき ているか？ アイコンはユーザーに意味を学習させる要素になります。例えば会話で あれば、吹き出しなどになります。意味のあるアイコンを繰り返してい るかが重要です。 階層ごとのレイアウトは共通か？ レイアウトのパターンはサイトの中でいくつもあっていいのだが、階層 ごとに用意することが好ましい。多くても3以内のレイアウトパターン に収めるべきであろう。 ルック?アンド?フィールが守ら れているか？ 使い勝手が共通になっているか？ユーザーは使い方を学習します。使い 勝手が機能によってバラバラになっていないか？ カラー 色に統一感があるか？きちんとベースカラーを守られているか テイスト 画像やイラストなどビジュアルのテイストは共通か？例えばフラットデ ザインで統一されているかなど。
- 90. SKILLHUB コントラスト:Contrast 90 キャッチフレーズでコンテクス トを理解させる カードの画像で情報を明確化 赤ボタンでCTA コントラストをうまく使い情報をコントロールする
- 93. 実習：反復 93
- 96. SKILLHUB コントラストまとめ 96 見出し文字は大きいか 見出しの文字はびっくりするくらい大きくて大丈夫です。そのほうが目を 引くし拾い読みができるようになります。例外は論文など読ませるコンテ ンツになります。それらは見出しが小さくてもOKです。 異なる要素で分けられているか 同じ要素にコントラストをつけると意味が分離してしまいます。なので、 コントラストをつけるべきものは異なる要素ということになります。 色使いが適当か？ 白抜きや補色などでコントラストをつけることができます。クリックさせ たいボタンなどは、そのような色使いになっているかが重要です。 レイアウトの中でコントラストが あるか？ ページをパッと見た時にすぐに内容が理解できるか。チェックする方法と して遠くから見るとか、薄目で見るなどを試みる。 臆病になっていないか？ 重要なことは「ハッキリとした違い」をつくること。そのためには勇敢に なる必要があります。見出しと本文の文字サイズや線の使い方などでは 「ええーい、これだ、文句あるか！」と覚悟を決めて大胆に行いましょ う。
- 98. まとめ 98