見出し画像

#西東のデザイン分解【vol.14】　枠

さいとぅ

お久しぶりです，西東です．
2021年もよろしくお願いします．

この note は，Twitter にて発信中の
#西東のデザイン分解 をまとめるシリーズです．

vol.14 は 枠にまつわるデザインの話 です．
枠で囲むと一気に存在感が増します．

今回は，枠にまつわるデザインの

・太枠
・フレーム
・文字の囲み
・ふきだし

をまとめます．


太枠

太枠を置くと全体が引き締まって見えます．これは，面積的には地の写真が多くを占めていますが，その上に重なる太枠を明確に認識するためだと言えます．

枠の太さによって認識の強さが変化し，同時に強度にも影響します．この強度は四角形にある安定感の印象に直結するため，太枠使用時に検討が必要な要素です．

画像1


フレーム

フレームは，囲みによって図が明確化します．また，フレーム自体に装飾性があるため，情報に印象や雰囲気を付加できます．（華やかさ，柔らかさ，ブロック感……などなど）

このとき，地に対するとフレームのサイズや親和性が大きな構成要素となります．

画像2

さらに，フレームをあえてずらして用いる手法もあります．

ずれ には動きや立体感が生まれます．しかし，ずらす幅や角度，形など変化の要素が多いので，それぞれを比較して意図する動きへの演出が必要です．

画像3

また，フレームそのものを文字に置き換える手法もあります．

フレームに文字を用いると，装飾と情報の共存が起こります．囲みによって可読性はやや低下しますが，他方の注目度は上がるため情報が目につきやすいメリットがあります．

フォントやウェイト，配色などで親和性を高められます．

画像7

画像8


文字の囲み

文字の囲みも地と図の対比として用いられます．枠で囲むと一気にパッケージ化されるので地と図が区別しやすいと言えます．

行の変化にも対応可能であり，ビジュアルのシンプルさとその扱いやすさから地への親和性が高くなります．

しかし，複数の囲みが点として存在すると，目が泳いで情報の順位が崩れてしまうため，設計なしの乱用は注意です．

画像4

画像5


ふきだし

ふきだしはフレームと類似しますが，最大の特徴は文字（台詞）の囲みでその発信元が存在する点です．

会話や語りかける印象が強く，親近感に直結します．そのため，お知らせ や 感情 などを含む表現と相性がいいと考えられます．

ふきだしそのものの印象は，線幅や形によって変化が生まれます．

画像6


いかがでしたでしょうか．

囲むだけで存在感が生まれますし，表現の幅も広がりますね．使いどころが重要です．

ご指摘ご意見ご感想お待ちしております．
Twitter もよろしければお願いします．

それではまた次回．
お読みいただきありがとうございます．

西東




この記事が気に入ったらサポートをしてみませんか？