its a layout world

It’s a layout world.

@denari01#kosenconf201

denari01desiner developer

developerPython / JavaScript / Swift

designerlogo / poster / leaflet

v staff101conf4.30 in kansai

It’s a layout world. @denari01

本発表はデザインに関する 発表となっています。

It’s a layout world. @denari01

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

layout world.

It’s a layout world. @denari01

レイアウトの基本

デザイン is

「レイアウト」 + 「アート」

It’s a layout world. @denari01

レイアウトの基本

レイアウト空間や平面に目的物の構成要素を配列すること。 配列。配置。

(名) スル

①

印刷物の紙面の割り付け。②

「スーパー大辞林」 - レイアウト【れいあうと】より引用

It’s a layout world. @denari01

レイアウトの基本

レイアウト一つ一つのコンテンツをどう 配置していくか。 コンテンツの活かし方の部分

アート一つ一つのコンテンツをどう つくりこんでいくのか コンテンツ自体の部分

It’s a layout world. @denari01

レイアウトの基本

たとえ話 : ゲームキャラ

レイアウト ステータスや技のバランス 技を出すタイミング

アート キャラのステータス・技とか

防御力が高いけど攻撃力ゼロだと敵が倒せない…攻撃力が高いけど命中しないと敵が倒せない…

It’s a layout world. @denari01

レイアウトの基本

レイアウト4原則

It’s a layout world. @denari01

レイアウト4原則

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

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

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

It’s a layout world. @denari01

レイアウト4原則

@beta_chelsea 実践 ノンデザイナーズ・ デザインブック

すげえ良い資料

※ご本人に許可を頂いて紹介しております。

It’s a layout world. @denari01

レイアウト4原則

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

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

例えばこれとか

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

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

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

意味の類似度を そのまま距離に 置き換える原則

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

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

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

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

It’s a layout world. @denari01

レイアウト4原則

・反復 ・近接 ・整列 ・コントラスト

① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う

It’s a layout world. @denari01

レイアウト4原則

反復の原則

It’s a layout world. @denari01

反復の原則

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

It’s a layout world. @denari01

反復の原則

パターン①

おなじ画面内の反復

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

このパターンについては 後で説明をします

It’s a layout world. @denari01

反復の原則

パターン②

画面をまたいだ反復

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

It’s a layout world. @denari01

反復の原則

例えばこんな反復も

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

整列 コントラスト

It’s a layout world. @denari01

反復の原則

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

not only 装飾, but also 色 / アニメーション / 音 …

It’s a layout world. @denari01

レイアウト4原則

近接の原則

It’s a layout world. @denari01

近接の原則

意味の類似度をそのまま距離に置き換える法則

💓 👆

It’s a layout world. @denari01

近接の原則

It’s a layout world. @denari01

近接の原則

意味が全然違う

意味がまあ近い

意味が超近い

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

It’s a layout world. @denari01

近接の原則

すげえ細かい世界 しかし、差はある

(実は右のスライドは あまりいい例ではない)

It’s a layout world. @denari01

近接の原則

ユーザー名

利用規約に同意して

性別

趣味

はじめる

It’s a layout world. @denari01

近接の原則

ユーザー名

利用規約に同意して

性別

趣味

はじめる

意味が全然違う

意味がまあ近い

意味が超近い

It’s a layout world. @denari01

近接の原則

コンテンツが似ている程近い 似たコンテンツを近接させる事が大切

しかし本質は「意味上の違いの視覚的表現」

It’s a layout world. @denari01

反復の原則

ちなみに反復

It’s a layout world. @denari01

反復の原則

意味上の同列の 視覚的表現

ユーザー名

利用規約に同意して

性別

趣味

はじめる

It’s a layout world. @denari01

レイアウト4原則

整列の原則

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

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

簡単そう。

It’s a layout world. @denari01

整列の原則

「視覚的表現」 ↓

見た目が重要

It’s a layout world. @denari01

整列の原則

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

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

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

It’s a layout world. @denari01

整列の原則

A.されてた

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

It’s a layout world. @denari01

整列の原則

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

It’s a layout world. @denari01

整列の原則

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

It’s a layout world. @denari01

整列の原則

感覚の話は難しい…

It’s a layout world. @denari01

整列の原則

「円(曲線)」 「重心の偏った文字(P など)」

この２つにまず注意

It’s a layout world. @denari01

レイアウト4原則

コントラストの原則

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

It’s a layout world. @denari01

コントラストの原則

It’s a layout world. @denari01

コントラストの原則

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

It’s a layout world. @denari01

コントラストの原則

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

It’s a layout world. @denari01

コントラストの原則

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

It’s a layout world. @denari01

コントラストの原則

項目名よりは重要度 低いから、そこまで 目立たなくてもいい

(ただ、口頭で 喋ってるのが ここであることが わかりやすい装飾を いれておこう)←後述

It’s a layout world. @denari01

コントラストの原則

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

It’s a layout world. @denari01

コントラストの原則

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

It’s a layout world. @denari01

レイアウト4原則

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

とても重要

It’s a layout world. @denari01

レイアウト4原則

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

It’s a layout world. @denari01

レイアウト4原則

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

It’s a layout world. @denari01

レイアウト4原則

そう

It’s a layout world. @denari01

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

layout world.

It’s a layout world. @denari01

レイアウト4原則

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

It’s a layout world. @denari01

原則の例外

It’s a layout world. @denari01

原則の例外

It’s a layout world. @denari01

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

原則の例外

It’s a layout world. @denari01

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

原則の例外

It’s a layout world. @denari01

最後に近接の話で 意味上の塊を演出

原則の例外

It’s a layout world. @denari01

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

原則の例外

It’s a layout world. @denari01

ちなみになぜコレを したかというと、

縦幅が下の箱の方が かなり大きくて、 普通に整列すると 親子関係がはっきり しないと判断した

原則の例外

It’s a layout world. @denari01

原則の例外

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

It’s a layout world. @denari01

だからこそ、これ再掲

・反復 ・近接 ・整列 ・コントラスト

① まずは4原則を覚える ② 意味を考えて ③ 意味を理解する ④ 意味を理解して使う

It’s a layout world. @denari01

ふう。一旦区切り

It’s a layout world. @denari01

皆さん一役買って！！

It’s a layout world. @denari01

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

It’s a layout world. @denari01

経験則とスタンダード

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

It’s a layout world. @denari01

経験則とスタンダード

え、よくある手法??

It’s a layout world. @denari01

経験則とスタンダード

そっすよ。

It’s a layout world. @denari01

経験則とスタンダード

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

It’s a layout world. @denari01

世の中にあるものと 似てる

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

経験則とスタンダード

It’s a layout world. @denari01

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

経験則とスタンダード

It’s a layout world. @denari01

経験則とスタンダード

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

この次元に近い

It’s a layout world. @denari01

経験則とスタンダード

レイアウト デファクトスタンダードの世界

アート パクリは許されざるタブー

It’s a layout world. @denari01

経験則とスタンダード

※ パクリかパクリじゃないかの厳密な話はしかるべき法律を参照してね。

人間の経験にしたがって しかるべきレイアウト、しかるべきインタフェースを

提供すると、いろいろ捗る

It’s a layout world. @denari01

視線の流れ

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

It’s a layout world. @denari01

視線の流れ

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

layout world.

It’s a layout world. @denari01

視線の流れ

横書き、画面が横長 ↓ 視線は良くZ字に動く (経験から 身についた話)

もし時間があれば Twitterのこの画面を もうめっちゃ褒めたい

It’s a layout world. @denari01

視線の流れ

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

It’s a layout world. @denari01

視線の流れ

単純に上に配置

It’s a layout world. @denari01

視線の流れ

ぶっちゃけ、右上から左下に視線がうつるのって 当たり前なので必ず考えよう

もちろん横書きでの話

It’s a layout world. @denari01

ユースケースを考える

どうぞお手元のリーフレットを 御覧ください

It’s a layout world. @denari01

ユースケースを考える

折り目線

It’s a layout world. @denari01

ユースケースを考える

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

It’s a layout world. @denari01

ユースケースを考える

例えば、こう折った時

It’s a layout world. @denari01

ユースケースを考える

例えば、こう折った時

It’s a layout world. @denari01

ユースケースを考える

例えば、こう折った時

It’s a layout world. @denari01

ユースケースを考える

例えば、こう折った時

It’s a layout world. @denari01

ユースケースを考える

あれ、つっかえてる??

It’s a layout world. @denari01

ユースケースを考える

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

It’s a layout world. @denari01

ユースケースを考える

たとえばこのプレゼン

It’s a layout world. @denari01

ユースケースを考える

複数トラック発表

It’s a layout world. @denari01

ユースケースを考える

・あ、多分僕の発表は日本人が聞くな

・もしかしたら途中から入室する人もいるか

・僕の予想では、僕より若い子が来そうだなあ

It’s a layout world. @denari01

ユースケースを考える

・あ、多分僕の発表は日本人が聞くな

・もしかしたら途中から入室する人もいるか

・僕の予想では、僕より若い子が来そうだなあ

→じゃあスライドのコンテンツは日本語で。

→スライド下部に題目書いとこう。

→若い子の好きそうな感じにしてみよう

It’s a layout world. @denari01

ユースケースを考える

実際にどうやって使うかを想像して こうだと使いづらいっていうのは

潰していくべき こうだとやりやすいなあを

実施していくべき

It’s a layout world. @denari01

コントラストの付け方

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

It’s a layout world. @denari01

コントラストの付け方

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

いや、むっずい。

It’s a layout world. @denari01

コントラストの付け方

サイズの差をつける

It’s a layout world. @denari01

コントラストの付け方

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

It’s a layout world. @denari01

コントラストの付け方

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

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

It’s a layout world. @denari01

コントラストの付け方

色に 差をつける

It’s a layout world. @denari01

コントラストの付け方

簡単そう。

It’s a layout world. @denari01

コントラストの付け方

あまり肩肘はらずに こういうところからやっていく

絵とかは、もちろんかけるなら活かす でも無理はしちゃいけないなあ