白銀比に従ったレイアウトの作成方法

どうも。

端末大好き変態ご主人、くまです。ʕ•̀ω•́ʔ✧

以前黄金比のレイアウト作成方法についてお話ししましたが、

今回は白銀比に従ったレイアウトの作成方法についてお話しします。

黄金比は美しさを感じさせ、1枚絵となる絵画や本の表紙などに適していて、

白銀比は調和を感じさせる比率で、要素の多い本の中ページなどに適しています。

見やすく読みやすくさせる、一言で言えば天使の調和でしょうか。

実は西洋は黄金比、日本は白銀比と言われるほど

古くは平安時代から使われている日本にとって馴染み深い比率です。

主に建造物に利用され、代表的なのは法隆寺などのお寺、

最近ではスカイツリーですかね。

ドラえもんやアンパンマン、スヌーピー、トトロ、キティ

など人気のキャラクターも白銀比で作成されています。

〈参考〉

https://matome.naver.jp/odai/2135972233184004001

〈出典〉NAVER

※ 画像をクリックすると拡大します。

やっていきましょうか。

初めにお話ししておきますと白銀比に従ったレイアウト作成は

割とセンスを求められるので黄金比と比べて難易度が高く、

「誰でもすぐに使えるようになる」とはいかないかもしれません。

なので今回はプロの方もあまりやらないようなしっかりとした画面構成を

作成していく様をご覧いただければと思います。

過去最長、本当に長いので眠い方は寝た後ご覧いただいた方が

良いかもしれません。ʕ´•ω•`ʔ

✴︎

日本のマイナーなゲームメーカーなんかは、ゲームコンソール画面など

エンジニアがレイアウトしている場合があり、

要素を詰め込みすぎたり、飾りをつけすぎたりと配置の美しさや

操作性を正しく意識されていないものがあります。

もったいないですね。

レイアウトを正していきましょうか。

一般的に知られている白銀比長方形はこんな感じです。

完全白銀比シート。

調整ガイドがかなり細かく設定されています。

[ PNG 透過画像 ]

白銀比は基本A4やB4などの紙面規格と同比率なのでサイズに合わせ、

拡大縮小して乗せればそのまま使えるのですが、

ゲーム画面など規格外サイズの場合はそのまま置けないので

移動させながら丁度いい感じの配置場所を探します。

とりあえず分かりやすいところで「1280x720pix」の画像サイズで

紙面的なレイアウトを作成してみます。

まず適当に余白を設けます。

次に余白の天地、または左右に合わせて白銀比を中央配置します。

（はみ出ても大丈夫です）

黄金比同様、縦横同比率ではない拡大縮小を行うと比率が変わり、

正しい数値の恩恵が受けられなくなるのでご注意ください。

Created whith Adobe Illustrator

簡単なものから順序立てて説明するととても時間がかかるので、

いきなり難しいレイアウトからいきます。

作る上で大切なのは順番。

先に見せたい、読ませたい、強調させたい要素の順に大きくして、

文章はなるべく簡潔にまとめることで伝わりやすくなります。

このレイアウトの場合、絶対的な要素はキャラ絵なので、

それをここだと願う場所へ配置し、ガイドに従わせて後に他の要素を

入れないよう大切に扱います。ʕ•ᴥ•ʔゝ

左側にはキャラクターのスペック、生い立ちなどを入れていきます。

文字が横組みの場合、左上から順番にここぞというガイドに従って要素を配置し、

文字色は多用するとどこから見て良いのかわからなくなるので、

基本1色

追加で1色

この程度にまとめると読みやすくなります。

もちろん色数を増やしてもまとめられますが、慣れていないと調整が大変なので

そんなときは使用色の濃薄で整えることをオススメします。

（例えば白→グレー→黒）

自身の欲求は極力抑えて見られる方のことを第一に考え、

ガイドに従わせながら愛情込めて配置します。

文字間は狭く、行間は広めに設定することで読みやすくなり、

上記の名前（REA）と説明文の文字の大きさを少し極端なくらい差をつけると

メリハリが出ていい感じにまとまります。ʕ^ᴥ^ʔ

右側の要素は主人公がいまだ言い返す言葉を探している、

相手の怒りを一撃で沈める彼女の必殺の言い訳、

「だってお腹すいてたんだもん！！」

これを強調させています。

ドン引きですよねw　

でも目を引くならこのくらいの表現で丁度いいんです。ʕ•̀ω•́ʔ✧

配置が終わったら左右、また俯瞰から見て、

天地の位置を合わせられる要素はなるべく合わせていきます。

さらに背景などに彼女らしい要素を追加して完成です。

ガイドがあるので配置場所はあまり悩まなくても良いのですが、

難しいのはサイズ感で、慣れていない方は要素を大きく配置しがちで、

気になってもどこまで小さくすれば良いか判断がつなないところかと思います。

こればかりはセンスというか慣れですかね。ʕ´•ω•`ʔ

文字の太さもちょっと細いかな...くらいで品が出ます。

[ SUPERCONDUCTING ATOM GENERATOR ]

超伝導原子生成機 コンソール画面。

コンソール画面に合わせて中央に白銀比を置き、さらに両端にもつなげています。

白銀比は調和のひとつ「シンメトリー」も得意ですから、

左右対象同じような要素を配置してガイドに従わせれば見やすくなりますし、

黄金比に負けず劣らずかっこよくなります。ʕ•̀ω•́ʔ✧

[ GANUMEDES CONTROL TERMINAL ]

造船基地ガニュメデス コントロールターミナル。

もちろん背景にも使えて、同じようにシンメトリーの背景もキレイに仕上がります。

背景の中に追加要素がある場合、白銀比の中のガイドに合わせて

さらに小さな白銀比を設置します。ʕ•ᴥ•ʔ

端末の制御画面。

図のようになるべくガイド線にくっつくようにガイド間いっぱいに拡大（赤点）したり、

ガイドが重なっているところ（赤十字）を中心にすることで美しい調和がとれます。ʕ•ᴥ•ʔ

いずれお話ししますが、続編の物語をたどる航路、大三角恒星間マップです。

生命が存在する条件の1つとしてその惑星周辺に、

太陽と同じような熱を発する「恒星」が必ず存在します。

前作の惑星フォートテナールの場合、恒星アルタイルがそれにあたります。

話が少し外れましたが、白銀比を使用するにあたっての注意点は、

・縦横同比率以外の拡大縮小はしてはいけない。

・比率の異なる黄金比と白銀比を一緒に使うと、正しい数値の恩恵は受けられない。

[ HATCH FRAME EFFECT ]

当方ゲームが得意とするハッチフレームによる場面切り替え演出。

続編はさらにバージョンアップして開いたフレームの中に飛行体が飛び込みます。ฅʕ•ᴥ•ʔฅ

（エピソード1となっていますが、6ではなく1からに変更するかもしれません）

奥の星やハッチフレーム、すべての絵柄と文字が白銀比に従っています。

飛行体は黄金比で描かれていますが、このようにひとつの要素として

配置するだけなら比率は関係なく、数値による影響も出ません。ʕ•̀ω•́ʔ✧

このくらいシンプルなら出来そうですかね？ʕ•ﻌ•;ʔ

慣れるまで少ない要素で作成した方が良いかもしれません。

以上です。

なんとなくご理解いただければそれで十分なのですが、

もし興味が出てきましたら是非やってみてください。

慣れれば白銀比がない中で、小さな書類を1つ作るにしても、

気の使い方が変わり、自然にレイアウトを意識するようになり、

いずれ良いレイアウトが作れるようになると思います。

✴︎

関係ない話になりますが、自分の悪い部分で若い頃からクリア率2%とか

激ムズ謎解きゲームばかりをプレイしていたせいか、

視野というか、見方を切り替えるのが癖になっていまして、

誰も見ないようなところばかりを気にして、変に勘ぐってしまうところがあります。

それが割と良く当たって仕事の役に立つことも多いのですが、

難しい方向へ考えがいってしまうことが多いんです。

実際それが理由で前作は少々難しい謎解きになってしまって反省してるんです。

なので続編は公開前どなたかにプレイいただいて、

実直な意見をいただこうと思っています。