デザイン初心者のはじめの一歩 ~ デザインの基本「①整列」

はじめに

自分はWebアプリケーションを開発するエンジニアです。ユーザーが触れる画面の作成から、裏側のサーバー内のプログラムまで広く対象としています。

そんなデザイナーではない自分ですが、プロダクト開発においてデザインは非常に重要な要素だと思っています。なぜなら、プロダクトのデザインがユーザーにとってのプロダクトの印象、体験の方法に強く影響を与えるからです。

デザイン初心者が最初に身に付けた方が良いことは?

ただ、自分みたいな「デザイン経験がない人間がどうやってデザインスキルを伸ばしていけばよいか分からん」と思っていました。

色々デザインを勉強していく中で、デザイン初心者はまずデザインの4つの基本原則は押さえるべきだと強く感じました。全てのベースになる考え方だからです。

(参考:誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

そんな自分が学んできたデザインに対する知見をアウトプットしたいと思います。今回は、4つの原則の中で「整列」について紹介します。

※注意:一応前提ですが、今回対象としているのはグラフィックデザインという意味でのデザインです。文字や画像、配色を使った情報伝達を目的とした手段のことです。デザイン思考などは扱いません。

デザインの基本原則 ~ 「整列」

デザインの基本原則である「整列」は、全ての要素を意識的に配置しなければならないということです。たとえるなら、散らかった部屋を整理整頓するイメージです。

整列の例①:名刺のレイアウト

実際の例を見ていきましょう。

たとえば2つの名刺のレイアウトを用意しました。みなさんは一体どんな印象を持つでしょうか?

解説をすると、左側の名刺は各要素の文頭が揃っていないのでガタガタな印象を与えてしまいます。

一方、右側のデザインの名刺は、各エリア毎で文頭を揃えているので、きちんと整った印象を与えます。つまり整列されたデザインということです。

整列で大事なポイントは、レイアウトの中に見えない整列する線を引くことができるかという事です。上の例でいうと、右側のデザインでは見えない整列の線を2本きちんと引くことできています。

整列の例②:WEBページのレイアウト

別の例も見ていきましょう。コワーキングスペースの設備の紹介ページを作ってみました。どの部分が整列できていないか分かりますか?

上の例はタイトル、写真、説明文の縦、横の幅が揃っていないので、バラバラな印象を与えてしまします。次に、整列を意識したデザインを見てみましょう。

下のデザインでは、写真のサイズや文字数を調節することで、タイトル、写真、説明文を同じサイズの枠に揃えることを意識しています。今回の例でも、見えない整列線が縦、横に引くことができますね。

まとめ

今回はデザインの原則である「整列」をいくつかの例を使って紹介しました。

整列についてまとめると、以下の通りです。

・全ての要素を意識的に配置すること
・整列されたデザインには、見えない整列線を引くことができる

デザインは一見感性が試されるものという印象を持っていましたが、学び始めると基本をしっかり学ぶことで、努力次第で後天的に身につけるスキルとと思えるようになりました。自分としても大きな発見でした。

「デザインの基本」の紹介記事

他のデザインの基本についても、記事を書きましたので興味がありましたら、ぜひご覧ください!

① デザイン初心者のはじめの一歩 ~ デザインの基本「整列」(今回)
② デザイン初心者のはじめの一歩 ~ デザインの基本「反復」
③ デザイン初心者のはじめの一歩 ~ デザインの基本「コントラスト」
④ デザイン初心者のはじめの一歩 ~ デザインの基本「近接」

参考文献

このデザインの基本については、参考文献で紹介した本に解説されていますので、もっとも詳しく知りたいという方は自分で本を手に取っていただければと思います。

ノンデザイナーズ・デザインブック / Robin Williams (著) 

やってはいけないデザイン/ 平本久美子(著)


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキ、ありがとうございます( ´ ▽ ` )
67

shinji.uyama

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。