見出し画像

【デザイン基礎かるた:へ】

平行垂直
可能な限り
揃えて配置

本日は「ガイドライン、ちゃんと使えよ!」っていうお話です。
素人っぽく見えるデザインは、たいてい配置するパーツが上下左右、揃えられる所が揃っていない「バラバラ感」が一つの大きな特徴です。

たとえばこんな感じ。

スクリーンショット 2021-08-19 23.38.09

これはサンプル用に今までに見たよろしくない要素を煮詰めて後輩ちゃんに作ってもらったダミーの画面ですが、なんか気持ち悪くないですか?
パーツのトンマナとかマージンの開け方とかもさることながら、テキスト幅やコンテンツ幅が揃っていないので、全体がなんだか小汚く見える…。

要素を配置する前に画面にガイドラインをきちんとひき、そこに沿わせて配置するだけでも、美しく整理されて見える画面になります。
文字要素のみのページや簡単な要素で作るワイヤーフレームや企画書なども、これをやるだけでかなり見やすくなります。

画像2

制作ソフト内の整列ツールを使う、というのも一つの手ですが、あれはあくまでも数値上で揃えるため、パーツの形状や大きさによっては「揃えたのに揃って見えないな」ということになってしまいます。

デザイナーはソフトの自動処理を過信せず、見た目で揃っているかを気にして欲しいところ。

スクリーンショット 2021-08-19 23.54.40

勘違いして欲しくないのは、
・どの画面にもグリッドデザインを取り入れなさいよ
・デザイン全てを上下左右どこかのガイドラインに沿って配置しろ
という訳ではないということ。

たとえば、下図のような要素の少ないポスターや葉書はどこが揃っているかというと、『要素が縦真ん中のガイドラインにセンター合わせで統一』されている。これでもいいのです。

画像4

サイトやカタログのように複数要素を配置するような画面は、上下左右の基準を決めて要素を整理するだけでとっても見やすい画面になります。

そして、規則性を持ってパーツを揃えておくと、ポン、と違うルールのものを置いた時に今度はそれが活きる画面となる…!
これは『例外が活きる秘訣は法則にあり』の「れ」の回で紹介します。




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