プログラマとデザインの四大原則

こんにちは、あのぶるです。

あなたはデザインに興味はありますか？
今回はソフトウェアエンジニアにとても身近な、でも対極な世界に見えて難しそうな「デザイン」の入り口のお話をしたいと思います。

さて、「デザイン」という言葉を辞書で引くと

作ろうとするものの形態について、機能や生産工程などを考えて構想すること
(大辞林 第三版より)

とあります。日本語としての「デザイン」だともう少し絞り込んで、主に見た目を体系立てて整えることを指すことが多いようです。そのため「デザイン」と一口に言っても(それこそソフトウェア開発にもたくさんの分野があるように)様々な分野がありますが、今回は主にUI、DTP、Webデザイン分野を想定したお話になるかなと思います。

もしフロントエンドやスマートフォンアプリ開発など、画面を作るようなプログラミングをしているのであれば、デザイナーさんが作った画面デザインを組み込む作業をしたことがあったり、あるいは自分で画面構成を考えたりすることがあるかもしれません。
画面を実装した時、デザイナーさんに「デザインと違うので修正してください」と指摘を受けて、ずいぶん細かいところまで拘るんだなぁと感じたことはありますか？
私たちの書くプログラムコードもそうであるように、一見何気なく並べられているように見える画面の構成要素も、丁寧に読み解いていくと全てにちゃんと意味が込められています。色や文字の配置はもちろん、余白を計画的に作ることこそがメリハリのあるデザインを作る大事なポイントなんだそうです。

自分はエンジニアだからデザインは縁遠い、と感じるかもしれません。でも、ここで仕事やコミュニティ活動に関わる作業を色々と思い起こして欲しいのですが、「見た目を整える」という作業、実は私たちにとっても身近な作業なんです。ドキュメントの作成はもちろん、CSSフレームワークを使って社内ツールを作る時にも、LT資料や個人名刺を作る時にも、誰かと視覚を通じて情報を共有するときは常にデザインが関わってくると言っても過言ではないくらいです。
もちろん、ある程度知識を身につけておけば、デザイナーさんと一緒に仕事をするときの会話も今よりスムーズに出来るはずです。避けて通ることも出来るものですが、ソフトウェアエンジニアもデザインの基礎を学ぶといいことがたくさんあります。せっかくなので簡単にですがデザインに関する有名な原則をひとつ紹介したいと思います。

デザインの世界には「デザインの四大原則」というものがあります。「近接」「整列」「反復」「コントラスト」の4つをまとめてそう呼んでいて、簡単に説明すると以下のような意味です。

• 近接: 関係あるものは近くに、関係ないものは遠くに
• 整列: 全ての要素を意識して揃える
• 反復: 同じものを繰り返し使って統一感を作る
• コントラスト: 違うものは違うと一目で分かるようにする

……こう考えてみると、読みやすいコードの書き方にも通じるものがあるような気がしませんか？実際「情報設計」や「情報デザイン」と呼ばれるデザインの分野がある位なので、情報の塊であるプログラミングにも考え方を応用出来るのは当然のことなのかもしれません。

デザインの四大原則は「これさえ守れば人を惹き付けるデザインが簡単に出来る」というものではありませんが、少なくともある程度使いこなすことで「人を困らせないデザインが出来る」ようになると思います。ノンプロがするデザインはそれが一番大事なことなので、是非頭の片隅に置いて欲しいなと思います。

とはいえ、きちんと説明するのはあくまで趣味でデザインをかじっている私には荷が重いため、おすすめの本を紹介紹介したいと思います。
タイトルの通り、非デザイナーが必要に迫られてデザインをする時に必要な基本的知識を、デザインの四大原則を柱としてギュッと詰め込んだ本です。

デザインの四大原則を使いこなして、ドキュメントもコードもスマートに管理できるエンジニアになれるといいですね。一緒に頑張っていきましょう！