非常に残念だが、われわれはmargin/blankを「余白」と訳した

マージンとデザイン<工業, UI, 映像, 装丁…デザイン>

TL;DR

人類よ、余白を愛せ。余白か死か。

友人と余白について話をする機会があった。余白は工業でもUIでも映像でもあらゆるデザインにおいて重要である。

そもそもmarginを「余分な白い部分」すなわち「余白」と訳した人はだれだ。出てこい。少し息を荒立てながら愚痴にお付き合いいただきたい。

これは以前在籍していたデザイン科の恩師も口を酸っぱくしていたこと。

デザイナーと一般で真逆な余白の捉え方

普通余白は「余分な白い部分」と思われる。余白は時に嫌われる。特に一概には言わないが役所や教育関係者などに。彼らはコンテンツを詰め込み、画面いっぱいに敷き詰めたがる。「なんでもっと書かないんだ！スペースがあるだろ！」と。

ところがデザイナーは違う。むしろ余白が主役。デザイナーにとってはメインヒロインだ。

無印良品 https://www.ndc.co.jp/hara/news/

余白は下地が「コンテンツ」に切りとられた1つの「コンテンツ」

「いやいや余白よりグラフとか、写真の方がよっぽど大事だろう」言いたいことはわかる。確かに重要だ。でもむしろグラフや写真のクオリティが高いことなんて当たり前では？

そんなことは百も承知で余白は余白として、真っ白なキャンバスがコンテンツに切り抜かれたというコンテンツの一つだと主張したい。

空間上の何かに切り取られた余白。余白がなければ成立せず、空間は余白によって生まれる。

そう考えればグラフ、文章、写真というコンテンツより、グラフ、文章、写真、余白の方がコンテンツが1つ多いのにまだ余白は嫌いと言うのか。

目はかんたんに騙せる

余白のとり方ってすごい難しいとおもう。余白をとるにはまず数値的にあわせて，それから調節する必要があるのだが，調節する際にわれわれの生きるための機能として備わっている「目」がかんたんに騙せることを思い出さなければいけない。

左と右どちらがより「真ん中」に配置してあると見えるだろうか？左の方は少々右上によっているような感覚にはならないだろうか。

ガイドを表示してみると右は三角形をアートボードの中心に設定している。実際左のようなデザインをよく見かける。でも視覚上大事なのは中心ではなく，重心だ。

これを余白という視点から見てみると，

簡単のため影は無視しているが余白が均等であるほうが真ん中に配置しているように見える。(影があるため若干上よりにしている)これは目の錯覚で錯視という。

ミュラー・リヤー錯視 https://ja.wikipedia.org/wiki/%E9%8C%AF%E8%A6%96#:~:text=%E3%83%9F%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%BC%E3%83%BB%E3%83%AA%E3%83%A4%E3%83%BC%E9%8C%AF%E8%A6%96(M%C3%BCller%2D,%E5%90%8C%E3%81%98%E9%95%B7%E3%81%95%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82

さらには明度や彩度，角度でも変わるからおどろきだ。

錯視を考慮したデザインは多岐にわたり，話題になった有名なものだとこれら。

Logo:Google&Nintendo / Image: https://twitter.com/GiveMeInternet/status/912340948520226817 [at] GiveMeInternet &[at] davidhellman from twitter

Google Design https://design.google/library/evolving-google-identity/

コラージュという訓練法

デザイン科ではコラージュを使い余白を訓練する授業がある。コラージュは雑誌や写真の切り抜きを「配置」する技法だ。この「配置」がいわばデザインなわけで、配置とは構図であり構図とは「どれくらい余白をとるか」を考えることである。

作成途中のコラージュ

頭の中で右のように余白と写真を変換して右で言う黒い部分が「より面白くなるような形」を雑誌から見つけて切り抜く。つまり余白を切り抜いて貼り付ける作業。

余白はつけたくないんだ

余白をつけられるようになってから言ってほしい。原研哉の無印良品を、Jony IveのAppleを、はたまた黒澤映画を見てもまだ余白がいらないと言うのか。観察が足りない。

[embed]HARA DESIGN INSTITUTE 日本デザインセンター 原デザイン研究所のウェブサイトです。www.ndc.co.jp

[embed]ユーザインターフェイスのデザインのヒント ユーザーエクスペリエンスへのエンゲージメントは、しっかりとしたインターフェイスのデザインが基礎となり構築されます。コーディングを始める前に、以下の基本となるデザインコンセプトを考慮してください。幅広いユーザーに向けてクリーンで効果的なインタ…developer.apple.com

[embed]Akira Kurosawa — Composing Movement

観察眼を身につけるためにももっともっとデッサンをこなし構成をやり、写真を撮り、画面をデザインしなければ(自戒)。

P. S.

そう言えば昔の美術館(?)と今のではだいぶ様相が違うよう。

今の美術館はホワイトキューブという建築様式が定番でMoMAが提案したものだ。一直線に並ぶ白い天井，白い壁，整列された絵画とキャプションに意味を見出す。「しぜんとこうなりました」*かもしれない。

良○(書ではない)

手によって切り取れた余白を確認しながら輪郭の外を描いていく練習です。 (中略) 手によって切り取られた余白って何？？？？？

[embed]山中俊治さん「言語としてのスケッチ」交流会 に参加したよ！ #デザインエンジニア #スケッチ #がようしラボ｜Shoko Sato｜note 12月26日（水）、 山中俊治さんによる「言語としてのスケッチ」交流会（がようしラボ 主催）に参加してきました。◆イベントページ http://gayoushi-lab.net/information/225 山中先生のプロフィール 山中…note.com

しぜんとこうなりました

[embed]無印良品［無印良品からのメッセージ］ 写真は無印良品のタモ材のベッドと椅子です。背もたれの角度が同じに設計されているので横から眺めるとふたつの背のラインがぴったりと一致します。同じ「背もたれ」に無理のない形を探っていくうちに、しぜんとこうなりました。 ...www.muji.net

見る人が反応するための余白のようなものをデザインすることに興味が向いているんです。

[embed]紙について話そう。 No.28（紙をめぐる話｜竹尾 TAKEO） 紙をめぐる話からシリーズ「紙について話そう。」No.28をご覧ください。www.takeo.co.jp

例えば、新潮文庫本の表紙の葡萄の位置は、上下の余白が見事に1.6:1の黄金比となるようデザインされています。

[embed]21_21 DESIGN SIGHT ■空想科学バラエティ「ロボつく」（テレビ東京） 7/26（日）、8/2（日）9:00-9:30 --------------- 小学生の子どもたちを対象にした科学情報番組。…www.2121designsight.jp

編集とは編むこと。

[embed]TVアニメ「舟を編む」 | 公式サイト 辞書は、言葉の海を渡る一艘の船。TVアニメ「舟を編む」2016年10月よりフジテレビ"ノイタミナ"ほかにて放送開始www.funewoamu.com

本研究では，人工知能（AI）が絵本イラストレーションの余白をどの程度認識でき るのか検証した

https://www.suac.ac.jp/researchcenter/research/specialresearch/2018/file/14350/kawa.pdf