Its a layout world

It’s a layout world.
@denari01
#kosenconf201

developerPython / JavaScript / Swift

designerlogo / poster / leaflet

It’s a layout world. @denari01
本発表はデザインに関する
発表となっています。

相手に自分の思うことを伝える
一つのやりかた
layout world.

レイアウトの基本
デザイン
is
「レイアウト」 + 「アート」

レイアウト
空間や平面に目的物の構成要素を配列すること。
配列。配置。
(名) スル
①
印刷物の紙面の割り付け。②
「スーパー大辞林」 - レイアウト【れいあうと】より引用

レイアウト
一つ一つのコンテンツをどう
配置していくか。
コンテンツの活かし方の部分
アート
一つ一つのコンテンツをどう
つくりこんでいくのか
コンテンツ自体の部分

たとえ話 : ゲームキャラ
レイアウト
ステータスや技のバランス
技を出すタイミング
アートキャラのステータス・技とか
防御力が高いけど攻撃力ゼロだと敵が倒せない…
攻撃力が高いけど命中しないと敵が倒せない…

レイアウト4原則

ノンデザイナーズ・
デザインブックより引用

・反復
・近接
・整列
・コントラスト
ノンデザイナーズ・デザインブックより引用

@beta_chelsea
実践
ノンデザイナーズ・
デザインブック
すげえ良い資料
※ご本人に許可を頂いて紹介しております。

意味を踏まえて使うことが大事

・反復
・近接
・整列
例えばこれとか

・反復
・近接
・整列
似たようなものを
繰り返して理解を
促す原則

・反復
・近接
・整列
意味の類似度を
そのまま距離に
置き換える原則

・反復
・近接
・整列
コンテンツに
整理された印象を
演出していく原則

・反復
・近接
・整列
コンテンツの
重要度順に目立つ
ようにする原則

・反復
・近接
・整列
① まずは4原則を覚える
② 意味を考えて
③ 意味を理解する
④ 意味を理解して使う

反復の原則

反復の原則
似たようなものを繰り返して理解を促す原則

反復の原則
パターン①
おなじ画面内の反復
促す原則
このパターンについては
後で説明をします

反復の原則
パターン②
画面をまたいだ反復
促す原則

反復の原則
例えばこんな反復も
促す原則
反復近接
整列コントラスト

反復の原則
似たようなものを繰り返して理解を促す原則
not only 装飾,
but also 色 / アニメーション / 音 …

近接の原則

近接の原則
意味の類似度をそのまま距離に置き換える法則
💓 👆

近接の原則

近接の原則
意味が全然違う
意味がまあ近い
意味が超近い
促す原則

近接の原則
すげえ細かい世界
しかし、差はある
(実は右のスライドは
あまりいい例ではない)

近接の原則
ユーザー名
利用規約に同意して
性別
趣味
はじめる

近接の原則
ユーザー名
性別
趣味
はじめる
意味が全然違う
意味がまあ近い
意味が超近い

近接の原則
コンテンツが似ている程近い
似たコンテンツを近接させる事が大切
しかし本質は「意味上の違いの視覚的表現」

反復の原則
ちなみに反復

反復の原則
意味上の同列の
視覚的表現
ユーザー名
性別
趣味
はじめる

整列の原則

コンテンツに整理された印象を演出していく原則
整列の原則

整列の原則

簡単そう。
整列の原則

「視覚的表現」
↓
見た目が重要
整列の原則

次のスライドの図形を見てください!!
整列の原則

整列の原則
さっきの図形、左端整列されてた??

整列の原則
A.されてた

整列の原則
後者のパターンこそ、レイアウトにおける「整列」

整列の原則
大事なのは見た目であって、事実ではない
例えば、左端が揃ってると思ったら揃ってないとか

整列の原則
感覚の話は難しい…

整列の原則
「円(曲線)」
「重心の偏った文字(P など)」
この２つにまず注意

コントラストの原則

コンテンツの重要度順に目立つようにする原則

とりあえずタイトル
重要だよね。
今話してる内容を
書いてるとこだし

ここの部分は
わかってないと
何書いてるか
わかんないから
重要度たかいなあ

この辺の項目名は
僕は話したいことの
主軸だから重要

項目名よりは重要度
低いから、そこまで
目立たなくてもいい
(ただ、口頭で
喋ってるのが
ここであることが
わかりやすい装飾を
いれておこう)←後述

ここも結局
他よりは重要度が
低いからいいかな

どう伝えたいかを形にするために
いろんな考えを張り巡らせる部分

・反復
・近接
・整列
ノンデザイナーズ・デザインブックより引用
とても重要

ところでこれって「原則」なんですよ

明石高専の例
「1∼3年生のアルバイトは原則禁止」

そう

つまりは、自分の伝えたいことがある場合に
この原則に例外が発生することも

原則の例外

まずこの塊で
見えない四角形を
つくって
ひとかたまりにした
原則の例外

次に、タイトルの
部分はあえて
インデントをつけた
原則の例外

最後に近接の話で
意味上の塊を演出
原則の例外

青２つは意味が近い
そして全体が
親子関係にある
原則の例外

ちなみになぜコレを
したかというと、
縦幅が下の箱の方が
かなり大きくて、
普通に整列すると
親子関係がはっきり
しないと判断した
原則の例外

原則の例外
原則は守るためにありますが
必要に応じて守らない事も一つ大事な要素

だからこそ、これ再掲
・反復
・近接
・整列
① まずは4原則を覚える
② 意味を考えて
③ 意味を理解する
④ 意味を理解して使う

ふう。一旦区切り

皆さん一役買って！！

ここからは細々した話ばっかりです
(思いついた時間つぶしコンテンツ)

経験則とスタンダード
ところでこのスライド
上にタイトルがあって
中にコンテンツが
こういう風に
ならんでいて……

え、よくある手法??

そっすよ。

コレはパクリ宣言では
…うーん、多分、
ないと思います。

世の中にあるものと
似てる
こんなスライド、
世の中にいっぱい
あるよね??

パクリじゃなくって
「デファクト
スタンダード」
言っちゃえば、常識

ペットボトルの蓋が逆回転で開くの許せる??
文字が右から左に流れてて読める??
この次元に近い

レイアウトデファクトスタンダードの世界
アートパクリは許されざるタブー

※ パクリかパクリじゃないかの厳密な話はしかるべき
法律を参照してね。
人間の経験にしたがって
しかるべきレイアウト、しかるべきインタフェースを
提供すると、いろいろ捗る

視線の流れ
何かを言葉で伝えるときに、順序を間違えると
伝わりづらいですよね

視線の流れ
相手に自分の思うことを伝える
一つのやりかた
layout world.

視線の流れ
横書き、画面が横長
↓
視線は良くZ字に動く
(経験から
身についた話)
もし時間があれば
Twitterのこの画面を
もうめっちゃ褒めたい

視線の流れ
僕はこの画面で、
下の二文(具体例)
よりも
上の二例を先に
読ませたかった

視線の流れ
単純に上に配置

視線の流れ
ぶっちゃけ、右上から左下に視線がうつるのって
当たり前なので必ず考えよう
もちろん横書きでの話

ユースケースを考える
どうぞお手元のリーフレットを
御覧ください

折り目線

あれ!!?!? ぴったり1/3にならない!!!!!!

例えば、こう折った時

あれ、つっかえてる??

実行委員内では「?」という感じで
理解してもらえず、もしかしたら
自己満足の世界だったかも…

たとえばこのプレゼン

複数トラック発表

・あ、多分僕の発表は日本人が聞くな
・もしかしたら途中から入室する人もいるか
・僕の予想では、僕より若い子が来そうだなあ

・あ、多分僕の発表は日本人が聞くな
・もしかしたら途中から入室する人もいるか
・僕の予想では、僕より若い子が来そうだなあ
→じゃあスライドのコンテンツは日本語で。
→スライド下部に題目書いとこう。
→若い子の好きそうな感じにしてみよう

実際にどうやって使うかを想像して
こうだと使いづらいっていうのは
潰していくべき
こうだとやりやすいなあを
実施していくべき

コントラストの付け方

いや、むっずい。

サイズの
差をつける

フォントの太さの差をつける

フォントの周りの部分に差をつける
フォントの周りの部分に差をつける
• • • • • • • • • •

色に差をつける

簡単そう。

あまり肩肘はらずに
こういうところからやっていく
絵とかは、もちろんかけるなら活かす
でも無理はしちゃいけないなあ

Its a layout world

Recommended

Recommended

More Related Content

Similar to Its a layout world

Similar to Its a layout world (15)

Its a layout world