Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Its a layout world

1,675 views

Published on

118ページあって、55枚しか発表しなかった、完全にやらかした100カンファのスライド

Published in: Design
  • Be the first to comment

Its a layout world

  1. 1. It’s a layout world. @denari01 #kosenconf201
  2. 2. denari01 desiner developer
  3. 3. developerPython / JavaScript / Swift
  4. 4. designerlogo / poster / leaflet
  5. 5. v staff101conf 4.30 in kansai
  6. 6. It’s a layout world. @denari01 本発表はデザインに関する 発表となっています。
  7. 7. It’s a layout world. @denari01 相手に自分の思うことを伝える 一つのやりかた layout world.
  8. 8. It’s a layout world. @denari01 レイアウトの基本 デザイン is 「レイアウト」 + 「アート」
  9. 9. It’s a layout world. @denari01 レイアウトの基本 レイアウト 空間や平面に目的物の構成要素を配列すること。 配列。配置。 (名) スル ① 印刷物の紙面の割り付け。② 「スーパー大辞林」 - レイアウト【れいあうと】より引用
  10. 10. It’s a layout world. @denari01 レイアウトの基本 レイアウト 一つ一つのコンテンツをどう 配置していくか。 コンテンツの活かし方の部分 アート 一つ一つのコンテンツをどう つくりこんでいくのか コンテンツ自体の部分
  11. 11. It’s a layout world. @denari01 レイアウトの基本 たとえ話 : ゲームキャラ レイアウト ステータスや技のバランス 技を出すタイミング アート キャラのステータス・技とか 防御力が高いけど攻撃力ゼロだと敵が倒せない… 攻撃力が高いけど命中しないと敵が倒せない…
  12. 12. It’s a layout world. @denari01 レイアウトの基本 レイアウト4原則
  13. 13. It’s a layout world. @denari01 レイアウト4原則 ノンデザイナーズ・ デザインブックより引用
  14. 14. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ノンデザイナーズ・デザインブックより引用
  15. 15. It’s a layout world. @denari01 レイアウト4原則 @beta_chelsea 実践 ノンデザイナーズ・ デザインブック すげえ良い資料 ※ご本人に許可を頂いて紹介しております。
  16. 16. It’s a layout world. @denari01 レイアウト4原則 意味を踏まえて使うことが大事
  17. 17. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 例えばこれとか
  18. 18. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 似たようなものを 繰り返して理解を 促す原則
  19. 19. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 意味の類似度を そのまま距離に 置き換える原則
  20. 20. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト コンテンツに 整理された印象を 演出していく原則
  21. 21. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト コンテンツの 重要度順に目立つ ようにする原則
  22. 22. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う
  23. 23. It’s a layout world. @denari01 レイアウト4原則 反復の原則
  24. 24. It’s a layout world. @denari01 反復の原則 似たようなものを繰り返して理解を促す原則
  25. 25. It’s a layout world. @denari01 反復の原則 パターン① おなじ画面内の反復 似たようなものを 繰り返して理解を 促す原則 このパターンについては 後で説明をします
  26. 26. It’s a layout world. @denari01 反復の原則 パターン② 画面をまたいだ反復 似たようなものを 繰り返して理解を 促す原則
  27. 27. It’s a layout world. @denari01 反復の原則 例えばこんな反復も 似たようなものを 繰り返して理解を 促す原則 反復 近接 整列 コントラスト
  28. 28. It’s a layout world. @denari01 反復の原則 似たようなものを繰り返して理解を促す原則 not only 装飾, but also 色 / アニメーション / 音 …
  29. 29. It’s a layout world. @denari01 レイアウト4原則 近接の原則
  30. 30. It’s a layout world. @denari01 近接の原則 意味の類似度をそのまま距離に置き換える法則 💓 👆
  31. 31. It’s a layout world. @denari01 近接の原則
  32. 32. It’s a layout world. @denari01 近接の原則 意味が全然違う 意味がまあ近い 意味が超近い 似たようなものを 繰り返して理解を 促す原則
  33. 33. It’s a layout world. @denari01 近接の原則 すげえ細かい世界 しかし、差はある (実は右のスライドは あまりいい例ではない)
  34. 34. It’s a layout world. @denari01 近接の原則 ユーザー名 利用規約に同意して 性別 趣味 はじめる
  35. 35. It’s a layout world. @denari01 近接の原則 ユーザー名 利用規約に同意して 性別 趣味 はじめる 意味が全然違う 意味がまあ近い 意味が超近い
  36. 36. It’s a layout world. @denari01 近接の原則 コンテンツが似ている程近い 似たコンテンツを近接させる事が大切 しかし本質は「意味上の違いの視覚的表現」
  37. 37. It’s a layout world. @denari01 反復の原則 ちなみに反復
  38. 38. It’s a layout world. @denari01 反復の原則 意味上の同列の 視覚的表現 ユーザー名 利用規約に同意して 性別 趣味 はじめる
  39. 39. It’s a layout world. @denari01 レイアウト4原則 整列の原則
  40. 40. コンテンツに整理された印象を演出していく原則 It’s a layout world. @denari01 整列の原則
  41. 41. It’s a layout world. @denari01 整列の原則
  42. 42. 簡単そう。 It’s a layout world. @denari01 整列の原則
  43. 43. 「視覚的表現」 ↓ 見た目が重要 It’s a layout world. @denari01 整列の原則
  44. 44. 次のスライドの図形を見てください!! It’s a layout world. @denari01 整列の原則
  45. 45. It’s a layout world. @denari01 整列の原則
  46. 46. It’s a layout world. @denari01 整列の原則 さっきの図形、左端整列されてた??
  47. 47. It’s a layout world. @denari01 整列の原則 A.されてた
  48. 48. It’s a layout world. @denari01 整列の原則
  49. 49. It’s a layout world. @denari01 整列の原則
  50. 50. It’s a layout world. @denari01 整列の原則
  51. 51. It’s a layout world. @denari01 整列の原則
  52. 52. It’s a layout world. @denari01 整列の原則 後者のパターンこそ、レイアウトにおける「整列」
  53. 53. It’s a layout world. @denari01 整列の原則 大事なのは見た目であって、事実ではない 例えば、左端が揃ってると思ったら揃ってないとか
  54. 54. It’s a layout world. @denari01 整列の原則 感覚の話は難しい…
  55. 55. It’s a layout world. @denari01 整列の原則 「円(曲線)」 「重心の偏った文字(P など)」 この2つにまず注意
  56. 56. It’s a layout world. @denari01 レイアウト4原則 コントラストの原則
  57. 57. コンテンツの重要度順に目立つようにする原則 It’s a layout world. @denari01 コントラストの原則
  58. 58. It’s a layout world. @denari01 コントラストの原則 とりあえずタイトル 重要だよね。 今話してる内容を 書いてるとこだし
  59. 59. It’s a layout world. @denari01 コントラストの原則 ここの部分は わかってないと 何書いてるか わかんないから 重要度たかいなあ
  60. 60. It’s a layout world. @denari01 コントラストの原則 この辺の項目名は 僕は話したいことの 主軸だから重要
  61. 61. It’s a layout world. @denari01 コントラストの原則 項目名よりは重要度 低いから、そこまで 目立たなくてもいい (ただ、口頭で 喋ってるのが ここであることが わかりやすい装飾を いれておこう)←後述
  62. 62. It’s a layout world. @denari01 コントラストの原則 ここも結局 他よりは重要度が 低いからいいかな
  63. 63. It’s a layout world. @denari01 コントラストの原則 どう伝えたいかを形にするために いろんな考えを張り巡らせる部分
  64. 64. It’s a layout world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ノンデザイナーズ・デザインブックより引用 とても重要
  65. 65. It’s a layout world. @denari01 レイアウト4原則 ところでこれって「原則」なんですよ
  66. 66. It’s a layout world. @denari01 レイアウト4原則 明石高専の例 「1∼3年生のアルバイトは原則禁止」
  67. 67. It’s a layout world. @denari01 レイアウト4原則 そう
  68. 68. It’s a layout world. @denari01 相手に自分の思うことを伝える 一つのやりかた layout world.
  69. 69. It’s a layout world. @denari01 レイアウト4原則 つまりは、自分の伝えたいことがある場合に この原則に例外が発生することも
  70. 70. It’s a layout world. @denari01 原則の例外
  71. 71. It’s a layout world. @denari01 原則の例外
  72. 72. It’s a layout world. @denari01 まずこの塊で 見えない四角形を つくって ひとかたまりにした 原則の例外
  73. 73. It’s a layout world. @denari01 次に、タイトルの 部分はあえて インデントをつけた 原則の例外
  74. 74. It’s a layout world. @denari01 最後に近接の話で 意味上の塊を演出 原則の例外
  75. 75. It’s a layout world. @denari01 青2つは意味が近い そして全体が 親子関係にある 原則の例外
  76. 76. It’s a layout world. @denari01 ちなみになぜコレを したかというと、 縦幅が下の箱の方が かなり大きくて、 普通に整列すると 親子関係がはっきり しないと判断した 原則の例外
  77. 77. It’s a layout world. @denari01 原則の例外 原則は守るためにありますが 必要に応じて守らない事も一つ大事な要素
  78. 78. It’s a layout world. @denari01 だからこそ、これ再掲 ・反復 ・近接 ・整列 ・コントラスト ① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う
  79. 79. It’s a layout world. @denari01 ふう。一旦区切り
  80. 80. It’s a layout world. @denari01 皆さん一役買って!!
  81. 81. It’s a layout world. @denari01 ここからは細々した話ばっかりです (思いついた時間つぶしコンテンツ)
  82. 82. It’s a layout world. @denari01 経験則とスタンダード ところでこのスライド 上にタイトルがあって 中にコンテンツが こういう風に ならんでいて……
  83. 83. It’s a layout world. @denari01 経験則とスタンダード え、よくある手法??
  84. 84. It’s a layout world. @denari01 経験則とスタンダード そっすよ。
  85. 85. It’s a layout world. @denari01 経験則とスタンダード コレはパクリ宣言では …うーん、多分、 ないと思います。
  86. 86. It’s a layout world. @denari01 世の中にあるものと 似てる こんなスライド、 世の中にいっぱい あるよね?? 経験則とスタンダード
  87. 87. It’s a layout world. @denari01 パクリじゃなくって 「デファクト  スタンダード」 言っちゃえば、常識 経験則とスタンダード
  88. 88. It’s a layout world. @denari01 経験則とスタンダード ペットボトルの蓋が逆回転で開くの許せる?? 文字が右から左に流れてて読める?? この次元に近い
  89. 89. It’s a layout world. @denari01 経験則とスタンダード レイアウト デファクトスタンダードの世界 アート パクリは許されざるタブー
  90. 90. It’s a layout world. @denari01 経験則とスタンダード ※ パクリかパクリじゃないかの厳密な話はしかるべき 法律を参照してね。 人間の経験にしたがって しかるべきレイアウト、しかるべきインタフェースを 提供すると、いろいろ捗る
  91. 91. It’s a layout world. @denari01 視線の流れ 何かを言葉で伝えるときに、順序を間違えると 伝わりづらいですよね
  92. 92. It’s a layout world. @denari01 視線の流れ 相手に自分の思うことを伝える 一つのやりかた layout world.
  93. 93. It’s a layout world. @denari01 視線の流れ 横書き、画面が横長 ↓ 視線は良くZ字に動く (経験から 身についた話) もし時間があれば Twitterのこの画面を もうめっちゃ褒めたい
  94. 94. It’s a layout world. @denari01 視線の流れ 僕はこの画面で、 下の二文(具体例) よりも 上の二例を先に 読ませたかった
  95. 95. It’s a layout world. @denari01 視線の流れ 単純に上に配置
  96. 96. It’s a layout world. @denari01 視線の流れ ぶっちゃけ、右上から左下に視線がうつるのって 当たり前なので必ず考えよう もちろん横書きでの話
  97. 97. It’s a layout world. @denari01 ユースケースを考える どうぞお手元のリーフレットを 御覧ください
  98. 98. It’s a layout world. @denari01 ユースケースを考える 折り目線
  99. 99. It’s a layout world. @denari01 ユースケースを考える あれ!!?!? ぴったり1/3にならない!!!!!!
  100. 100. It’s a layout world. @denari01 ユースケースを考える 例えば、こう折った時
  101. 101. It’s a layout world. @denari01 ユースケースを考える 例えば、こう折った時
  102. 102. It’s a layout world. @denari01 ユースケースを考える 例えば、こう折った時
  103. 103. It’s a layout world. @denari01 ユースケースを考える 例えば、こう折った時
  104. 104. It’s a layout world. @denari01 ユースケースを考える あれ、つっかえてる??
  105. 105. It’s a layout world. @denari01 ユースケースを考える 実行委員内では「?」という感じで 理解してもらえず、もしかしたら 自己満足の世界だったかも…
  106. 106. It’s a layout world. @denari01 ユースケースを考える たとえばこのプレゼン
  107. 107. It’s a layout world. @denari01 ユースケースを考える 複数トラック発表
  108. 108. It’s a layout world. @denari01 ユースケースを考える ・あ、多分僕の発表は日本人が聞くな ・もしかしたら途中から入室する人もいるか ・僕の予想では、僕より若い子が来そうだなあ
  109. 109. It’s a layout world. @denari01 ユースケースを考える ・あ、多分僕の発表は日本人が聞くな ・もしかしたら途中から入室する人もいるか ・僕の予想では、僕より若い子が来そうだなあ →じゃあスライドのコンテンツは日本語で。 →スライド下部に題目書いとこう。 →若い子の好きそうな感じにしてみよう
  110. 110. It’s a layout world. @denari01 ユースケースを考える 実際にどうやって使うかを想像して こうだと使いづらいっていうのは 潰していくべき こうだとやりやすいなあを 実施していくべき
  111. 111. It’s a layout world. @denari01 コントラストの付け方 コンテンツの重要度順に目立つようにする原則
  112. 112. It’s a layout world. @denari01 コントラストの付け方 コンテンツの重要度順に目立つようにする原則 いや、むっずい。
  113. 113. It’s a layout world. @denari01 コントラストの付け方 サイズの 差をつける
  114. 114. It’s a layout world. @denari01 コントラストの付け方 フォントの太さの差をつける
  115. 115. It’s a layout world. @denari01 コントラストの付け方 フォントの周りの部分に差をつける フォントの周りの部分に差をつける • • • • • • • • • •
  116. 116. It’s a layout world. @denari01 コントラストの付け方 色に 差をつける
  117. 117. It’s a layout world. @denari01 コントラストの付け方 簡単そう。
  118. 118. It’s a layout world. @denari01 コントラストの付け方 あまり肩肘はらずに こういうところからやっていく 絵とかは、もちろんかけるなら活かす でも無理はしちゃいけないなあ

×