こんにちは、DX開発事業部の佐藤です。
現在、iret.mediaではテーマ別ブログリレーを実施中です！
私はデザインチームとして、こちらの記事をお届けします。
みなさんは「デザインの4原則」を知っていますか？
良いデザインには必ず見られる原則であるとされ、「近接」「整列」「反復」「コントラスト」からなります。
「デザインの話なら、エンジニアの私は無関係だな」と思うかもしれません。
しかし実は、プログラミングで実践していることとデザインの4原則には共通点があります。
本記事では、デザインの4原則を紹介しながら、デザインとプログラミングの親和性をお伝えします。
エンジニアがデザインを学ぶメリットを、少しでも感じてもらえると嬉しいです。
デザインの4原則とは？
デザインの4原則とは、以下のような原則を指します。
1. 近接 (Proximity): 関連する要素を近づけてグループ化する。
2. 整列 (Alignment): 要素を意図的に揃えて配置する。見え方をすっきりと洗練させる。
4. 反復 (Repetition): デザインの視覚的要素（色、形、フォントなど）を繰り返し使って一貫性をつくる。
4. コントラスト (Contrast): 要素に優先順位をつけて、重要なものを目立たせる。
これらの原則は、Webサイトやアプリの見た目を整え、ユーザーにとって「分かりやすく」「使いやすい」体験を作るために使われます。
デザインの4原則とプログラミングの共通点
では、これらの原則とプログラミングの共通点を具体的に説明します。
1. 近接: 関連コードのグルーピング
デザインの「近接」:
メニュー項目をまとめたり、記事のタイトルと本文を近づけたりするように、関連性の高い情報をグループ化します。
プログラミングの「近接」:
プログラミングでは、関連する処理を行う関数やメソッドをクラスなどにまとめたり、特定の機能に関する設定値を一箇所に集めたり、関連する変数を近くで宣言したりするでしょう。
これらは、コードの関連性を高め、読みやすく、理解しやすくするためであり、「近接」の考え方そのものです。
/**
* 近接の例: 関連するアクションをまとめる (Laravel)
* 特定のテーブルへのCRUD処理を1つのクラスにまとめることで、
* 関連性の高いロジックを「近接」させています。
*/
class ProductRepository
{
// 全ての商品を取得
public function getAllProducts()
{
// ...
}
// 新しい商品を登録
public function createProduct(array $data)
{
// ...
}
// 既存の商品を更新
public function updateProduct(int $id, array $data)
{
// ...
}
// 商品を削除
public function deleteProduct(int $id)
{
// ...
}
}
2. 整列: インデント、コードフォーマット
デザインの「整列」:
テキストを左揃えにしたり、画像やボタンをグリッドに沿って配置したりして、視覚的なつながりや秩序を生み出します。
プログラミングの「整列」:
コードのインデントが「整列」にあたります。
コードフォーマットを適応することでブロック構造を視覚的に分かりやすくし、コードの流れを追いやすくすることはコード全体に秩序をもたらす「整列」の一環と言えます。
3. コントラスト: ログレベル、設定値、命名規則
デザインの「コントラスト」:
見出しを大きくしたり重要なボタンの色を変えたりして、情報の優先度を示しユーザーの注意を引きます。
プログラミングの「コントラスト」:
変数名や関数名に意味のある名前をつけることで、その役割の重要性を示唆します（例: temporaryValue ではなく customerName と命名する）。
また、ログレベル（INFO, WARN, ERROR）を使い分けたり、エラーメッセージを目立たせたりするのも、情報の重要度に応じて「強弱」をつける行為です。
定数を大文字で書く慣習（例: MAX_CONNECTIONS）も、変更すべきでない値であることを示す「強弱」の表現です。
// 強弱の例: ログレベル (Laravel)
class PaymentGateway
{
public function charge(float $amount, string $token)
{
Log::info('決済処理を開始します。金額: ' . $amount); // 通常の情報
try {
// 決済API呼び出し処理...
$result = $this->callApi($this->apiKey, $amount, $token);
if ($result->isSuccessful()) {
Log::info('決済成功。'); // 成功情報
return true;
}
Log::warning('決済試行失敗。リトライします。試行回数: ' . $attempt); // 警告
} catch (\Exception $e) {
Log::error('決済処理中に予期せぬエラーが発生しました。'); // 重要なエラー
}
Log::error('決済に失敗しました。最大試行回数を超えました。'); // 最終的なエラー
return false;
}
// ... 他のメソッド
}
4. 反復: コーディング規約とコンポーネント化
デザインの「反復」:
Webサイト全体で同じボタンデザインや配色、フォントスタイルを使うことで、一貫性を生み出します。
これはユーザーに安心感を与え、使い方を学習しやすくします。
プログラミングの「反復」:
コーディング規約に従って変数名や関数名の命名規則（キャメルケース、スネークケースなど）を統一したり、同じ処理を関数やコンポーネントとして再利用したりするのは、「反復」の原則に基づいています。
これにより、コード全体の一貫性が保たれ、予測可能性が高まり、保守性が向上します。
デザイン原則のメリットは、コーディングルールのメリットと同じ
このように、エンジニアのみなさんは、デザイン原則に近い考え方をすでに実践しています。
コーディングルールにはすでにデザイン原則が組み込まれていて、以下のようなメリットを生んでいます。
- コードの可読性・保守性の向上:
より構造化され、意図が明確なコードになります。 - 認知負荷の軽減:
整理されたコードになり、読む人の負担を減らし、バグの発見や仕様変更が容易になります。 - チーム開発の円滑化:
一貫性のあるコードになり、チームメンバー間の認識齟齬を減らし、スムーズな共同作業を促進します。
まとめ: プログラミングの延長としてのデザイン
デザインの4原則は、決してデザイナーだけのものではありません。
デザインの4原則は情報を整理し、分かりやすく、効率よく伝えるための論理的で普遍的な考え方です。
そして、エンジニアが日頃から実践している「良いコード」を書くための工夫は、まさにこれらの原則に基づいています。
つまり、エンジニアはすでにデザイン的な思考の素地を持っていると言えます。
「デザインはセンス」「自分には関係ない」と思っていた方にとっても、デザインはより身近で取り組みやすいものだと感じてもらえたら嬉しいです。
簡単30秒