AI×デザイン実践コース

～第4話　デザインは"伝わる配置"から始まる～

前回のあらすじ

小冊子に載せる写真の権利について学んだ。著作権（撮った人の権利）と肖像権（写っている人の権利）は別の権利であり、両方を確認して初めて「使える写真」になる。フリー素材の「フリー」は「無料」であって「自由」ではないこと、AI生成画像にも現行著作権法が適用されることも確認した。判断に迷ったら「使わない」を選ぶルールをチームで策定し、写真と素材の使用可否を判断する基準を手に入れた。

窮屈なページ──詰め込みすぎの失敗

権利確認済みの写真とAIの叩き台の文章が揃い、いよいよページを組む工程に入った。夏の午前、せとうちマーレブルの事務所で神谷がCanvaを開き、屋島の見どころ情報を小冊子のページに並べ始めた。エアコンの低い音だけが響いている。北村が隣のスタッキングチェアに腰かけ、画面を覗き込んでいた。

写真、見出し、本文、地図情報、体験の案内。入れたい要素をすべてページに並べた。しかし、完成した画面を引いて見ると、どこから読めばいいかわからない。見出しも本文も同じくらいの大きさで書かれ、写真と文章の間に余白がほとんどなく、すべてが同じ重みで詰まっている。情報は確かに入っている。けれど、読む気が起きないページになっていた。

ページの上半分には屋島山上の写真と源平合戦の歴史解説を横に並べ、下半分にはうどん体験の案内と交通アクセスの情報を詰め込んでいた。見出しと本文の区別がつかず、写真のキャプションが本文に紛れている。1ページに収めようとした結果、余白がほとんど残っていなかった。

北村

うーん、情報は入ってるんだけどね……どこを見ればいいのかわからないんだよな

神谷

僕も同じことを感じています。素材は揃っているのに、なぜか読みにくいページになってしまって

北村

前に画面で見せてもらった時も「なんか違う」って感じだったけど、今回はまた別の「なんか違う」なんだよな。何が問題なのか、うまく言えないんだけど

デザイン4原則──「伝わる配置」の型

西園寺がオンライン画面越しに説明し、手前に神谷と北村がCanvaの画面を見ている

ノートPCにオンライン会議の画面を開いた。西園寺に窮屈なページの画面を共有し、状況を説明した。西園寺が穏やかに画面を見つめ、具体的な問題点を指摘し始めた。

西園寺

神谷くん、このページを見て、最初に気になるところを教えてくれる？

神谷

写真と文章の間隔が狭すぎて、どこが見出しでどこが本文なのか、ぱっと見ではわかりません

西園寺

その感覚は正しいわ。もう1つ、一緒に確認してみましょう。屋島の歴史の説明が、うどん体験の写真のすぐ横にあるでしょう？関係のない情報が隣り合っていると、目が迷ってしまうのよ

西園寺の指摘を聞いて、神谷が画面を見直した。確かにそのとおりだった。源平合戦の解説文が、体験スポットの写真の隣に置かれている。瀬戸内海の夕景の案内が、交通アクセスの情報の間に挟まっている。関連性のない情報がバラバラに散らばっているから、ページ全体が窮屈に見えていたのだ。

西園寺

まず、関連する情報を近くにまとめてみましょう。北村さんもお感じかもしれませんが、迷いが生まれるのは情報が散らばっているときなんです。歴史は歴史、自然は自然、体験は体験ですね。こうしてグループにまとめて近づけることを「近接」と呼びます

神谷がCanvaの画面で、屋島の見どころ情報を「歴史」「自然」「体験」の3つのグループに分け直した。歴史のグループには源平合戦の解説と屋島古戦場の写真をまとめた。自然のグループには瀬戸内海のパノラマと山上の緑の写真を集めた。体験のグループにはうどん体験の案内とやしまーるの散策情報を置いた。グループごとに余白を入れて区切ると、3つの情報ブロックがページの中で明確に分かれた。

西園寺

次に、写真の端と文章の端を揃えてみて。左端をきれいに一直線にするだけで十分よ

神谷

見えない線で揃えるんですね

写真と文章の左端を揃えた。ただそれだけの操作なのに、ページ全体に整った印象が生まれた。要素がバラバラに浮いている感じが消え、ひとつのまとまりとして見え始めた。

西園寺

ええ、それが「整列」なの。見えない線で揃えるだけで、ページに秩序が生まれるでしょう。次は、見出しのサイズ、本文のサイズ、写真の位置を全ページで統一していきましょう

神谷が全ページのレイアウトパターンを統一した。見出しは左上、写真は右半分、本文は写真の下。この配置を全ページで繰り返す。めくるたびに同じリズムが続くから、初めて見る人でも「ここが見出し、ここが写真」と予測できるようになった。

西園寺

これが「反復」ね。同じスタイルを繰り返すと、自然に統一感が出てくるわ。最後にもう1つだけ、試してみましょうか。見出しと本文のサイズ差を、もう少し大きくすると、大事なものが目立つのよ

見出しのサイズを本文の2倍ほどに変えた。見出しが一目で「ここが大事」と伝わるようになった。大きいものと小さいものの差が、ページの中に優先順位を作る。

西園寺

これを「対比」と言うの。大事なものを目立たせれば、読む人は一目で何が重要かがわかるわ

デザイン4原則のビフォーアフター。左に窮屈な原則適用前、右にすっきりした原則適用後のレイアウト比較

近接、整列、反復、対比。この4つの原則を順に適用した。写真も文章も1文字も変えていない。変えたのは配置だけだ。それなのに、ページが見違えるようにすっきりしていた。

北村

おお……全然違う。同じ写真と文章なのに、こっちのほうがずっと読みやすい。どこに何が書いてあるか、すぐにわかるぞ

北村

こういうことだったのか……。やっとわかった気がする。あの「なんか違う」の正体が、並べ方の問題だったんだな

西園寺

北村さん、いま「どこに何が書いてあるか、すぐにわかる」とおっしゃいましたよね。それが、この4つが効いている証拠です。近接、整列、反復、対比——デザイン4原則と呼ばれているんですよ。小冊子でもチラシでも使えますし、専門家でなくても、この4つを意識するだけで「伝わる配置」は作れます

神谷

素材を1つも追加していないのに、ここまで変わるとは思いませんでした

デザイン4原則は、1つずつ独立した考え方だが、4つを組み合わせると効果は何倍にもなる。近接でグループを作り、整列で秩序を与え、反復で統一感を保ち、対比で優先順位を示す。この順に適用すれば、どんな素材でも「伝わる配置」に整えることができる。原則に名前がつくと、チームの誰もが同じ基準でページを確認できるようになる。

色はメッセージ──ペルソナに合わせた配色

配色の比較図。左に寒色系（瀬戸内ブルー基調）、右に暖色系（夕日オレンジ＋余白）の同一レイアウト

レイアウトが整ったところで、配色の最終確認に進んだ。叩き台の段階で北村が「瀬戸内の温かみがほしい」と言い、暖色系で方向は決まっている。ただ、それがペルソナにとって本当に正しいのかは確かめていない。神谷は比較用に、宮本が観光マーケティングのフィールドワークで撮影した写真フォルダを開き、瀬戸内海の青い海と空から色を拾って、青を基調にしたカラーパレット（色の組み合わせ）も試作してみた。

神谷

取材写真の主役が瀬戸内海なので、比較用に青を基調でも組んでみたんですが、どうでしょうか

西園寺

きれいな色ね。でもここで1つ、立ち止まってみましょうか。この小冊子を手に取るのは、どんな人だったかしら

ペルソナ（たった一人の具体的な読者像）を振り返った。阪神間に住む30代の夫婦と未就学の子ども1人。旅行先で初めて目にする小冊子を、片手でベビーカーを押しながら手に取る家族連れだ。「家族の安心感」がこの小冊子のキーワードだった。

クールなブルーをベースに白い文字を乗せてみると、確かにきれいだった。瀬戸内海の写真との統一感もある。けれど、全体の印象が冷たい。雑誌の広告のような洗練さはあるが、子ども連れの家族が旅行先で気軽に手に取る温かさとは違った。

西園寺

色はメッセージなの。冷たい印象の青よりも、瀬戸内の温かい夕日をイメージした暖色系に余白を多く取ったほうが、この家族には合うかもしれないわね

神谷

色の選び方は「自分の好み」じゃなくて、「誰に届けるか」で決まるんですね

西園寺

ええ、そこを言葉にできたのが大きいわ。同じ素材でも、配色を変えるだけで受ける印象は大きく変わるのよ。ペルソナに何を感じてほしいか、そこを基準に色を選びましょう。これがデザインにおける配色の考え方なの

神谷が配色を青基調から暖色系に変更した。夕日のオレンジをアクセントカラー（目を引くポイントになる色）に、背景は白の余白を広く取る。写真もレイアウトも同じなのに、印象がまるで違った。冷たくスタイリッシュだったページが、手に取りたくなるような温かみのあるページに変わった。

配色を並べて比較した。左に寒色系のバージョン、右に暖色系のバージョン。同じ写真、同じ文章、同じレイアウト。違うのは色だけだ。寒色系はスタイリッシュだが距離がある。暖色系は親しみやすく、ページをめくりたくなる温かさがある。ペルソナの感情ニーズ——「家族の安心感」——に応えるのは、暖色系のほうだった。

同じ素材、違う印象──北村の目に映った変化

配色まで終えたページをノートPCの画面に映し出した。朝から取り組んでいた小冊子が、まるで別物になっている。

北村

色を変えただけで、印象がこんなに変わるのか……。最初に見せてもらったページとはまるで別物だ

神谷

写真も文章も同じなんです。変えたのは配置と色だけで、中身は何も変えていません

北村

正直に言うとね、デザインというのは絵が上手い人の仕事だと思っていた。でもこうやって見せてもらうと、「こっちのほうが読みやすい」「こっちの色のほうが温かい」って、自分の言葉で言えるんだよな

北村

神谷くん、この小冊子なら、手に取った人が「行ってみたい」と思ってくれる気がするんだ

会議テーブルの上に、朝から並べていた参考資料が広がっている。その向こうに、ノートPCの画面で暖色系の小冊子ページが光っていた。窮屈だった最初のページと、いま画面に映っているページとでは、同じ素材で作られたとは思えない。配置と色を変えるだけで、ここまで印象が変わる。

北村の言葉に、神谷は確かな変化を感じた。以前の「なんか違うんだよな」としか言えなかった北村が、いまは「読みやすい」「温かい」と、自分の目で見た変化を自分の言葉で語っている。デザインの専門用語は使わない。原則の名前も口にしない。それでも、何がどう変わったかを具体的に伝えられるようになっている。クライアントとして何を求めているかが、少しずつ言葉になり始めていた。

デザイナーじゃなくても──原則とツールの力

一日の作業を終え、西園寺にオンラインで進捗を報告した。

神谷

デザイナーじゃなくても、原則とツールがあればここまでできるんですね。正直、驚いています

神谷

北村さんが「こっちのほうが読みやすい」と具体的に言ってくださったのが、今日一番の収穫でした

西園寺

北村さんが変わり始めているわ。デザインの言葉を使わなくても、自分の感覚で良し悪しを判断できるようになっているの。これはとても大きな変化よ

西園寺

でもまだ終わりじゃないの。北村さんが以前おっしゃっていた「障がいのある方や高齢の方にも読んでほしい」という言葉、覚えているかしら。次は「誰もが読める」をデザインに加えましょうね

📌 覚えるポイント

関連する情報は近くにまとめる（近接）。バラバラに散らばった情報は「どこを見ればいいのか」という迷いを生む
写真と文章の端は、見えない線で揃える（整列）。端を揃えるだけで、ページ全体に秩序が生まれる
見出し・本文・写真の配置ルールを決めて、全ページで繰り返す（反復）。同じスタイルの反復が統一感になる
見出しと本文にサイズの差をつける（対比）。差があるから「何が重要か」が一目で伝わる
同じ素材でも、配色を変えるだけで受ける印象は大きく変わる。色は飾りではなく、ペルソナに向けたメッセージとして選ぶ
近接・整列・反復・対比の4つを知っていれば、専門家でなくても「伝わる配置」は組める。デザイン4原則は、才能ではなく再現できる型

📖 覚える用語

デザイン4原則: 近接（関連情報を近くに）・整列（見えない線で揃える）・反復（統一感）・対比（大事なものを目立たせる）。レイアウトの基本を体系化した4つのルール

📝 神谷の北村さんへの報告メモ

デザイン4原則によるレイアウト改善: 窮屈だったページに近接・整列・反復・対比を適用し、同じ素材のまま「伝わる配置」に再構成。北村さんから「どこに何が書いてあるか、すぐわかる」と評価をいただいた。
ペルソナに基づく配色の決定: 第2話で決めた暖色系の方向を、ペルソナ視点で青基調と比較して最終確認した。ペルソナ（阪神間の家族連れ）の「家族の安心感」に合う配色であることを確認した。
次工程への引き継ぎ: 今回確定した配置ルールと配色は、残りのページにも同じ型で適用する。次回は「誰もが読める」読みやすさを加える工程に入るが、配置そのものは崩さず、文字の大きさと色の濃淡を中心に調整する予定。

まとめ

デザインの基本は、近接・整列・反復・対比の4つの原則にある。同じ写真と文章でも、配置と色を変えるだけで印象は大きく変わる。色は好みで選ぶものではなく、届ける相手へのメッセージとして選ぶ。原則を知れば、専門家でなくても「伝わるもの」は作れる。

📚 出典・参考情報

経済産業省 — 「デザイン経営」宣言
マイナビ出版 — ノンデザイナーズ・デザインブック［第4版］（Robin Williams 著、2016年／近接・整列・反復・コントラスト（対比）の4原則の出典）
Canva公式サイト — デザインの基本

香川観光編のコース一覧へページ上部へ