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

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


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

layout world.


レイアウトの基本

デザイン is

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



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

(名) スル

①

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

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



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

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



たとえ話 : ゲームキャラ

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

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

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



レイアウト4原則



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



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

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



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

すげえ良い資料

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



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




例えばこれとか




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




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




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




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




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



反復の原則


反復の原則

パターン①

おなじ画面内の反復


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


反復の原則

パターン②

画面をまたいだ反復



反復の原則

例えばこんな反復も

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

整列コントラスト


反復の原則


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



近接の原則


近接の原則

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

💓 👆


近接の原則


近接の原則

意味が全然違う

意味がまあ近い

意味が超近い



近接の原則

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

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


近接の原則

ユーザー名

利用規約に同意して

性別

趣味

はじめる


近接の原則

ユーザー名


性別

趣味

はじめる

意味が全然違う

意味がまあ近い

意味が超近い


近接の原則

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

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


反復の原則

ちなみに反復


反復の原則

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

ユーザー名


性別

趣味

はじめる



整列の原則

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


整列の原則


整列の原則

簡単そう。


整列の原則

「視覚的表現」 ↓

見た目が重要


整列の原則

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


整列の原則


整列の原則


整列の原則

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


整列の原則

A.されてた


整列の原則


整列の原則

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


整列の原則

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


整列の原則

感覚の話は難しい…


整列の原則

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

この２つにまず注意



コントラストの原則



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



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



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



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

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



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



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



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

とても重要



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



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



そう



layout world.



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


原則の例外


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

原則の例外


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

原則の例外


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

原則の例外


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

原則の例外


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

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

原則の例外


原則の例外

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


だからこそ、これ再掲


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


ふう。一旦区切り


皆さん一役買って！！


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


経験則とスタンダード

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



え、よくある手法??



そっすよ。



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


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

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



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




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

この次元に近い



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

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



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

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

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


視線の流れ

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


視線の流れ


layout world.


視線の流れ

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

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


視線の流れ

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


視線の流れ

単純に上に配置


視線の流れ

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

もちろん横書きでの話


ユースケースを考える

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



折り目線



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



例えば、こう折った時



あれ、つっかえてる??



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



たとえばこのプレゼン



複数トラック発表



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

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

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



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

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

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

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

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

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



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

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

実施していくべき


コントラストの付け方





いや、むっずい。



サイズの差をつける



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



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

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



色に差をつける



簡単そう。



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

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

its a layout world

Design