Submit Search
Upload
Its a layout world
•
5 likes
•
1,953 views
Hidenari Tsukamoto
Follow
118ページあって、55枚しか発表しなかった、完全にやらかした100カンファのスライド
Read less
Read more
Design
Report
Share
Report
Share
1 of 118
Download now
Download to read offline
Recommended
ぶっちゃけ世の中見た目で全て(割と)決まるから。笑
ぶっちゃけ世の中見た目で全て(割と)決まるから。笑
Hidenari Tsukamoto
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
Kumiko Hiramoto
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
デザインに正解はないけれど
デザインに正解はないけれど
ken pos
20120810 Oval japan2012
20120810 Oval japan2012
Tomoshige Nakamura
【副音声】ざびたん デザインコメンタリー
【副音声】ざびたん デザインコメンタリー
風太 @laughsketch
TobitanKobe
TobitanKobe
TobitanKobe
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Yu Morita
Recommended
ぶっちゃけ世の中見た目で全て(割と)決まるから。笑
ぶっちゃけ世の中見た目で全て(割と)決まるから。笑
Hidenari Tsukamoto
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
Kumiko Hiramoto
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
デザインに正解はないけれど
デザインに正解はないけれど
ken pos
20120810 Oval japan2012
20120810 Oval japan2012
Tomoshige Nakamura
【副音声】ざびたん デザインコメンタリー
【副音声】ざびたん デザインコメンタリー
風太 @laughsketch
TobitanKobe
TobitanKobe
TobitanKobe
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Webプロデューサー育成中級講座 =デキるWEB担当者はRFPが違う!「制作発注」工程を極める=
Yu Morita
Argmax Operations in NLP
Argmax Operations in NLP
Hitoshi Nishikawa
Tips of Design
Tips of Design
Toshiaki Sasaki
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
schoowebcampus
SPYSEE新検索機能の裏側
SPYSEE新検索機能の裏側
Naoki Orii
Yasuhiko Tokunaga DevRel_meetup_201703
Yasuhiko Tokunaga DevRel_meetup_201703
Stripe
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
アイデアワークショップ for SmartTech Award 2013
アイデアワークショップ for SmartTech Award 2013
Rikie Ishii
20171107 cwt kotomi_tanaka
20171107 cwt kotomi_tanaka
Kotomi Tanaka
Diploma x KYOTO 2012 自己紹介
Diploma x KYOTO 2012 自己紹介
Takashi Iba
まじめに!できる!LT
まじめに!できる!LT
Akabane Hiroyuki
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
Takashi Kitamura
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
Naoya Maekawa
明日から使えるデザインの4原則
明日から使えるデザインの4原則
Shuhei Kaneko
03 2 断片的情報の構造化_KJ法の実践
03 2 断片的情報の構造化_KJ法の実践
nishio
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
Takashi Imagire
More Related Content
Similar to Its a layout world
Argmax Operations in NLP
Argmax Operations in NLP
Hitoshi Nishikawa
Tips of Design
Tips of Design
Toshiaki Sasaki
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
schoowebcampus
SPYSEE新検索機能の裏側
SPYSEE新検索機能の裏側
Naoki Orii
Yasuhiko Tokunaga DevRel_meetup_201703
Yasuhiko Tokunaga DevRel_meetup_201703
Stripe
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
アイデアワークショップ for SmartTech Award 2013
アイデアワークショップ for SmartTech Award 2013
Rikie Ishii
20171107 cwt kotomi_tanaka
20171107 cwt kotomi_tanaka
Kotomi Tanaka
Diploma x KYOTO 2012 自己紹介
Diploma x KYOTO 2012 自己紹介
Takashi Iba
まじめに!できる!LT
まじめに!できる!LT
Akabane Hiroyuki
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
Takashi Kitamura
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
Naoya Maekawa
明日から使えるデザインの4原則
明日から使えるデザインの4原則
Shuhei Kaneko
03 2 断片的情報の構造化_KJ法の実践
03 2 断片的情報の構造化_KJ法の実践
nishio
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
Takashi Imagire
Similar to Its a layout world
(15)
Argmax Operations in NLP
Argmax Operations in NLP
Tips of Design
Tips of Design
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)
SPYSEE新検索機能の裏側
SPYSEE新検索機能の裏側
Yasuhiko Tokunaga DevRel_meetup_201703
Yasuhiko Tokunaga DevRel_meetup_201703
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
アイデアワークショップ for SmartTech Award 2013
アイデアワークショップ for SmartTech Award 2013
20171107 cwt kotomi_tanaka
20171107 cwt kotomi_tanaka
Diploma x KYOTO 2012 自己紹介
Diploma x KYOTO 2012 自己紹介
まじめに!できる!LT
まじめに!できる!LT
WP-D Fes03 Osaka Kitamura Tah
WP-D Fes03 Osaka Kitamura Tah
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
Jasa近畿セミナー「未来を描く4つの魔法」 20121024 maekawa
明日から使えるデザインの4原則
明日から使えるデザインの4原則
03 2 断片的情報の構造化_KJ法の実践
03 2 断片的情報の構造化_KJ法の実践
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
課題探検迷子に捧ぐゲーム流価値の創造術 (公開版)
Its a layout world
1.
It’s a layout
world. @denari01 #kosenconf201
2.
denari01 desiner developer
3.
developerPython / JavaScript
/ Swift
4.
designerlogo / poster
/ leaflet
5.
v staff101conf 4.30 in kansai
6.
It’s a layout
world. @denari01 本発表はデザインに関する 発表となっています。
7.
It’s a layout
world. @denari01 相手に自分の思うことを伝える 一つのやりかた layout world.
8.
It’s a layout
world. @denari01 レイアウトの基本 デザイン is 「レイアウト」 + 「アート」
9.
It’s a layout
world. @denari01 レイアウトの基本 レイアウト 空間や平面に目的物の構成要素を配列すること。 配列。配置。 (名) スル ① 印刷物の紙面の割り付け。② 「スーパー大辞林」 - レイアウト【れいあうと】より引用
10.
It’s a layout
world. @denari01 レイアウトの基本 レイアウト 一つ一つのコンテンツをどう 配置していくか。 コンテンツの活かし方の部分 アート 一つ一つのコンテンツをどう つくりこんでいくのか コンテンツ自体の部分
11.
It’s a layout
world. @denari01 レイアウトの基本 たとえ話 : ゲームキャラ レイアウト ステータスや技のバランス 技を出すタイミング アート キャラのステータス・技とか 防御力が高いけど攻撃力ゼロだと敵が倒せない… 攻撃力が高いけど命中しないと敵が倒せない…
12.
It’s a layout
world. @denari01 レイアウトの基本 レイアウト4原則
13.
It’s a layout
world. @denari01 レイアウト4原則 ノンデザイナーズ・ デザインブックより引用
14.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ノンデザイナーズ・デザインブックより引用
15.
It’s a layout
world. @denari01 レイアウト4原則 @beta_chelsea 実践 ノンデザイナーズ・ デザインブック すげえ良い資料 ※ご本人に許可を頂いて紹介しております。
16.
It’s a layout
world. @denari01 レイアウト4原則 意味を踏まえて使うことが大事
17.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 例えばこれとか
18.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 似たようなものを 繰り返して理解を 促す原則
19.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト 意味の類似度を そのまま距離に 置き換える原則
20.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト コンテンツに 整理された印象を 演出していく原則
21.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト コンテンツの 重要度順に目立つ ようにする原則
22.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う
23.
It’s a layout
world. @denari01 レイアウト4原則 反復の原則
24.
It’s a layout
world. @denari01 反復の原則 似たようなものを繰り返して理解を促す原則
25.
It’s a layout
world. @denari01 反復の原則 パターン① おなじ画面内の反復 似たようなものを 繰り返して理解を 促す原則 このパターンについては 後で説明をします
26.
It’s a layout
world. @denari01 反復の原則 パターン② 画面をまたいだ反復 似たようなものを 繰り返して理解を 促す原則
27.
It’s a layout
world. @denari01 反復の原則 例えばこんな反復も 似たようなものを 繰り返して理解を 促す原則 反復 近接 整列 コントラスト
28.
It’s a layout
world. @denari01 反復の原則 似たようなものを繰り返して理解を促す原則 not only 装飾, but also 色 / アニメーション / 音 …
29.
It’s a layout
world. @denari01 レイアウト4原則 近接の原則
30.
It’s a layout
world. @denari01 近接の原則 意味の類似度をそのまま距離に置き換える法則 💓 👆
31.
It’s a layout
world. @denari01 近接の原則
32.
It’s a layout
world. @denari01 近接の原則 意味が全然違う 意味がまあ近い 意味が超近い 似たようなものを 繰り返して理解を 促す原則
33.
It’s a layout
world. @denari01 近接の原則 すげえ細かい世界 しかし、差はある (実は右のスライドは あまりいい例ではない)
34.
It’s a layout
world. @denari01 近接の原則 ユーザー名 利用規約に同意して 性別 趣味 はじめる
35.
It’s a layout
world. @denari01 近接の原則 ユーザー名 利用規約に同意して 性別 趣味 はじめる 意味が全然違う 意味がまあ近い 意味が超近い
36.
It’s a layout
world. @denari01 近接の原則 コンテンツが似ている程近い 似たコンテンツを近接させる事が大切 しかし本質は「意味上の違いの視覚的表現」
37.
It’s a layout
world. @denari01 反復の原則 ちなみに反復
38.
It’s a layout
world. @denari01 反復の原則 意味上の同列の 視覚的表現 ユーザー名 利用規約に同意して 性別 趣味 はじめる
39.
It’s a layout
world. @denari01 レイアウト4原則 整列の原則
40.
コンテンツに整理された印象を演出していく原則 It’s a layout
world. @denari01 整列の原則
41.
It’s a layout
world. @denari01 整列の原則
42.
簡単そう。 It’s a layout
world. @denari01 整列の原則
43.
「視覚的表現」 ↓ 見た目が重要 It’s a layout
world. @denari01 整列の原則
44.
次のスライドの図形を見てください!! It’s a layout
world. @denari01 整列の原則
45.
It’s a layout
world. @denari01 整列の原則
46.
It’s a layout
world. @denari01 整列の原則 さっきの図形、左端整列されてた??
47.
It’s a layout
world. @denari01 整列の原則 A.されてた
48.
It’s a layout
world. @denari01 整列の原則
49.
It’s a layout
world. @denari01 整列の原則
50.
It’s a layout
world. @denari01 整列の原則
51.
It’s a layout
world. @denari01 整列の原則
52.
It’s a layout
world. @denari01 整列の原則 後者のパターンこそ、レイアウトにおける「整列」
53.
It’s a layout
world. @denari01 整列の原則 大事なのは見た目であって、事実ではない 例えば、左端が揃ってると思ったら揃ってないとか
54.
It’s a layout
world. @denari01 整列の原則 感覚の話は難しい…
55.
It’s a layout
world. @denari01 整列の原則 「円(曲線)」 「重心の偏った文字(P など)」 この2つにまず注意
56.
It’s a layout
world. @denari01 レイアウト4原則 コントラストの原則
57.
コンテンツの重要度順に目立つようにする原則 It’s a layout
world. @denari01 コントラストの原則
58.
It’s a layout
world. @denari01 コントラストの原則 とりあえずタイトル 重要だよね。 今話してる内容を 書いてるとこだし
59.
It’s a layout
world. @denari01 コントラストの原則 ここの部分は わかってないと 何書いてるか わかんないから 重要度たかいなあ
60.
It’s a layout
world. @denari01 コントラストの原則 この辺の項目名は 僕は話したいことの 主軸だから重要
61.
It’s a layout
world. @denari01 コントラストの原則 項目名よりは重要度 低いから、そこまで 目立たなくてもいい (ただ、口頭で 喋ってるのが ここであることが わかりやすい装飾を いれておこう)←後述
62.
It’s a layout
world. @denari01 コントラストの原則 ここも結局 他よりは重要度が 低いからいいかな
63.
It’s a layout
world. @denari01 コントラストの原則 どう伝えたいかを形にするために いろんな考えを張り巡らせる部分
64.
It’s a layout
world. @denari01 レイアウト4原則 ・反復 ・近接 ・整列 ・コントラスト ノンデザイナーズ・デザインブックより引用 とても重要
65.
It’s a layout
world. @denari01 レイアウト4原則 ところでこれって「原則」なんですよ
66.
It’s a layout
world. @denari01 レイアウト4原則 明石高専の例 「1∼3年生のアルバイトは原則禁止」
67.
It’s a layout
world. @denari01 レイアウト4原則 そう
68.
It’s a layout
world. @denari01 相手に自分の思うことを伝える 一つのやりかた layout world.
69.
It’s a layout
world. @denari01 レイアウト4原則 つまりは、自分の伝えたいことがある場合に この原則に例外が発生することも
70.
It’s a layout
world. @denari01 原則の例外
71.
It’s a layout
world. @denari01 原則の例外
72.
It’s a layout
world. @denari01 まずこの塊で 見えない四角形を つくって ひとかたまりにした 原則の例外
73.
It’s a layout
world. @denari01 次に、タイトルの 部分はあえて インデントをつけた 原則の例外
74.
It’s a layout
world. @denari01 最後に近接の話で 意味上の塊を演出 原則の例外
75.
It’s a layout
world. @denari01 青2つは意味が近い そして全体が 親子関係にある 原則の例外
76.
It’s a layout
world. @denari01 ちなみになぜコレを したかというと、 縦幅が下の箱の方が かなり大きくて、 普通に整列すると 親子関係がはっきり しないと判断した 原則の例外
77.
It’s a layout
world. @denari01 原則の例外 原則は守るためにありますが 必要に応じて守らない事も一つ大事な要素
78.
It’s a layout
world. @denari01 だからこそ、これ再掲 ・反復 ・近接 ・整列 ・コントラスト ① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う
79.
It’s a layout
world. @denari01 ふう。一旦区切り
80.
It’s a layout
world. @denari01 皆さん一役買って!!
81.
It’s a layout
world. @denari01 ここからは細々した話ばっかりです (思いついた時間つぶしコンテンツ)
82.
It’s a layout
world. @denari01 経験則とスタンダード ところでこのスライド 上にタイトルがあって 中にコンテンツが こういう風に ならんでいて……
83.
It’s a layout
world. @denari01 経験則とスタンダード え、よくある手法??
84.
It’s a layout
world. @denari01 経験則とスタンダード そっすよ。
85.
It’s a layout
world. @denari01 経験則とスタンダード コレはパクリ宣言では …うーん、多分、 ないと思います。
86.
It’s a layout
world. @denari01 世の中にあるものと 似てる こんなスライド、 世の中にいっぱい あるよね?? 経験則とスタンダード
87.
It’s a layout
world. @denari01 パクリじゃなくって 「デファクト スタンダード」 言っちゃえば、常識 経験則とスタンダード
88.
It’s a layout
world. @denari01 経験則とスタンダード ペットボトルの蓋が逆回転で開くの許せる?? 文字が右から左に流れてて読める?? この次元に近い
89.
It’s a layout
world. @denari01 経験則とスタンダード レイアウト デファクトスタンダードの世界 アート パクリは許されざるタブー
90.
It’s a layout
world. @denari01 経験則とスタンダード ※ パクリかパクリじゃないかの厳密な話はしかるべき 法律を参照してね。 人間の経験にしたがって しかるべきレイアウト、しかるべきインタフェースを 提供すると、いろいろ捗る
91.
It’s a layout
world. @denari01 視線の流れ 何かを言葉で伝えるときに、順序を間違えると 伝わりづらいですよね
92.
It’s a layout
world. @denari01 視線の流れ 相手に自分の思うことを伝える 一つのやりかた layout world.
93.
It’s a layout
world. @denari01 視線の流れ 横書き、画面が横長 ↓ 視線は良くZ字に動く (経験から 身についた話) もし時間があれば Twitterのこの画面を もうめっちゃ褒めたい
94.
It’s a layout
world. @denari01 視線の流れ 僕はこの画面で、 下の二文(具体例) よりも 上の二例を先に 読ませたかった
95.
It’s a layout
world. @denari01 視線の流れ 単純に上に配置
96.
It’s a layout
world. @denari01 視線の流れ ぶっちゃけ、右上から左下に視線がうつるのって 当たり前なので必ず考えよう もちろん横書きでの話
97.
It’s a layout
world. @denari01 ユースケースを考える どうぞお手元のリーフレットを 御覧ください
98.
It’s a layout
world. @denari01 ユースケースを考える 折り目線
99.
It’s a layout
world. @denari01 ユースケースを考える あれ!!?!? ぴったり1/3にならない!!!!!!
100.
It’s a layout
world. @denari01 ユースケースを考える 例えば、こう折った時
101.
It’s a layout
world. @denari01 ユースケースを考える 例えば、こう折った時
102.
It’s a layout
world. @denari01 ユースケースを考える 例えば、こう折った時
103.
It’s a layout
world. @denari01 ユースケースを考える 例えば、こう折った時
104.
It’s a layout
world. @denari01 ユースケースを考える あれ、つっかえてる??
105.
It’s a layout
world. @denari01 ユースケースを考える 実行委員内では「?」という感じで 理解してもらえず、もしかしたら 自己満足の世界だったかも…
106.
It’s a layout
world. @denari01 ユースケースを考える たとえばこのプレゼン
107.
It’s a layout
world. @denari01 ユースケースを考える 複数トラック発表
108.
It’s a layout
world. @denari01 ユースケースを考える ・あ、多分僕の発表は日本人が聞くな ・もしかしたら途中から入室する人もいるか ・僕の予想では、僕より若い子が来そうだなあ
109.
It’s a layout
world. @denari01 ユースケースを考える ・あ、多分僕の発表は日本人が聞くな ・もしかしたら途中から入室する人もいるか ・僕の予想では、僕より若い子が来そうだなあ →じゃあスライドのコンテンツは日本語で。 →スライド下部に題目書いとこう。 →若い子の好きそうな感じにしてみよう
110.
It’s a layout
world. @denari01 ユースケースを考える 実際にどうやって使うかを想像して こうだと使いづらいっていうのは 潰していくべき こうだとやりやすいなあを 実施していくべき
111.
It’s a layout
world. @denari01 コントラストの付け方 コンテンツの重要度順に目立つようにする原則
112.
It’s a layout
world. @denari01 コントラストの付け方 コンテンツの重要度順に目立つようにする原則 いや、むっずい。
113.
It’s a layout
world. @denari01 コントラストの付け方 サイズの 差をつける
114.
It’s a layout
world. @denari01 コントラストの付け方 フォントの太さの差をつける
115.
It’s a layout
world. @denari01 コントラストの付け方 フォントの周りの部分に差をつける フォントの周りの部分に差をつける • • • • • • • • • •
116.
It’s a layout
world. @denari01 コントラストの付け方 色に 差をつける
117.
It’s a layout
world. @denari01 コントラストの付け方 簡単そう。
118.
It’s a layout
world. @denari01 コントラストの付け方 あまり肩肘はらずに こういうところからやっていく 絵とかは、もちろんかけるなら活かす でも無理はしちゃいけないなあ
Download now