AI×デザイン実践コース
~第5話 誰もが手に取れる小冊子をつくる~
デザイン4原則(近接・整列・反復・対比)を学び、写真と文章が詰め込まれた窮屈なページを「伝わる配置」に再構成した。ペルソナ(たった一人の具体的な読者像)の感情ニーズに合わせて暖色系と白の余白を基調とした配色に変更し、北村が「読みやすい」「温かい」と自分の言葉でレイアウトの変化を語れるようになった。
「読めない人がいるかもしれない」──北村の問い
【シーン】夏の午前、せとうちマーレブルの事務所。会議テーブルの上に印刷したプルーフ(小冊子の校正刷り)が数ページ広げられ、横にノートPCが開かれている。北村が校正刷りの1ページを手に取り目を細めて見つめている。宮本がその横に立ち、同じページを覗き込んでいる。神谷はノートPCの前に座り、2人の様子を見ている。 【ロケーション固定】kagawa_13_marble_office に厳密準拠。第一参照=angle_meeting.png、第二参照=angle_desk.png。 【キャラクター参照】kagawa/characters/北村裕設定画像.png、kagawa/characters/宮本彩設定画像.png、kagawa/characters/神谷悠馬設定画像.png。 【人物】北村裕(62歳・男性、ライトブルーのボタンダウンシャツ、白いTシャツ、ベージュのチノパン、細い銀灰色の眼鏡、明るいシルバーのショートヘア、スタッキングチェアに座り校正刷りを手に取って目を細めている)。宮本彩(24歳・女性、ティール~海色のライトウィンドブレーカー、淡いライトブルーのポロシャツ、ダークネイビーの細身ストレートパンツ、暖色系ダークチェスナットブラウンのミディアムヘアを青緑色のシュシュで低めのポニーテール、北村の横に立ち同じページを覗き込んでいる)。神谷悠馬(27歳・男性、ネイビーのスーツに白シャツ、ネイビーのネクタイを着用、黒い短髪、スタッキングチェアに座りノートPCの前で2人を見ている)。 【構図】手前に会議テーブル、テーブル上に校正刷りとノートPC。北村がページを手に持ち顔を近づけている。宮本が横から覗き込む。神谷がPC側に座っている。背景に横一列で並ぶデスク2台、ホワイトボード、窓からの夏の自然光。 【小物】会議テーブル上の校正刷り(暖色系の配色、抽象的な文字と写真の配置。読める実テキストは描かない)、ノートPC。 【ロケーション整合】kagawa_13_marble_office:奥壁の2連窓下に前縁をそろえて横一列に並ぶ同一仕様・同一寸法(約140×70cm)の薄いグレーのメラミン天板デスク2台(左の北村デスクに黒いデスクトップPCモニター+クリアファイルの山+波模様マグカップ、右の宮本デスクに白ノートPC+マスタードイエローのリングノート+付箋付きサブモニター)、右壁側の窓とラックの間に置く約180×90cmの横長キャスター付き自立式ホワイトボード(赤・青・黒の抽象的な海岸線・清掃地点・工程枠+マーカー3本+イレーサー)、手前右のオーク調中古会議テーブル(約140×80cm)+チャコールグレーの事務用スタッキングチェア3脚(+右壁際に重ねた予備1脚)、奥壁の引き違い窓2連(白いアルミサッシ、右窓から自然光+外に高松市内の中層ビルと空)+窓間のコルクボード(60×45cmの木枠、色数を抑えたピンで留めた小さな風景写真・無地の表・予定カード)、右壁のグレーのスチールラック4段(上段に白い防災ヘルメットと双眼鏡、中段に白・水色・グレーのファイルボックスとA4バインダー、下段に段ボール箱・青い再利用コンテナ・清掃用トング・緑の作業手袋)。 【色調】窓からの夏の自然光が白・グレー基調の事務所を明るく照らす。テーブル上の校正刷りの暖色系配色が「前回整えたデザイン」を示す。 【避ける】読める実テキスト、商標、他人物、写真風の質感。
夏のせとうちマーレブル事務所。デザイン4原則——近接・整列・反復・対比の4つの配置ルールで整えたレイアウトに、暖色系の配色も決まった小冊子のページを会議テーブルの上に広げ、神谷と北村が見返していた。紙の上に並ぶと、画面で見ていたときより色が落ち着いて見えた。



北村が校正刷りの1ページに目を近づけ、眉根を寄せた。以前から口にしていた要望だった。レイアウトが整い、配色も決まった今だからこそ、この課題に正面から向き合う段階に来ていた。

そこに宮本が事務所に戻ってきた。校正刷りを見せると、宮本が自分の経験を話し始めた。


宮本の祖母の声は、「誰もが読める」とは何かという問いを突きつけていた。同じページを手に取っても、文字の大きさひとつで「読める人」と「読めない人」が分かれてしまう。
ユニバーサルデザインの基本──文字サイズと推奨値
ノートPCでオンライン会議を開き、西園寺に状況を共有した。北村の要望と宮本の祖母のエピソードを聞いた西園寺が、穏やかに話し始めた。

ユニバーサルデザイン(UD)。障がいの有無や年齢にかかわらず、誰もが使えるデザインの考え方だ。北村の「年配の方にも読めるようにしたい」という要望は、まさにこのUDの発想そのものだった。西園寺が画面共有を切り替え、文字サイズの説明に入った。


ポイント(pt)という単位が初めて出てきた。文字の大きさを感覚ではなく、具体的な数値で語るための基準だ。西園寺が画面に10ポイント、12ポイント、14ポイントのサンプル文を並べて見せた。
【種類】概念図(文字サイズ比較図)。人物は描かない。 【構図】横長の3列レイアウト。左列に10ポイントの文字サンプル(小さく読みにくい印象、ラベル「10pt」)、中列に12ポイントの文字サンプル(やや読みやすい、ラベル「12pt ── UD最低基準」)、右列に14ポイントの文字サンプル(ゆったり読みやすい、ラベル「14pt ── 高齢者・屋外推奨」)。各列のサンプル文は同じ抽象的な文章(読める実テキストは不要、文字の大きさの差が一目でわかる抽象表現)。下部に「文字サイズが大きくなるほど、読みやすさは向上する」のキャプション。 【補助】タイトル「UDガイドライン──文字サイズの比較」。 【色調】白い背景に黒い文字。各列の枠線は淡いグレー。14ptの列だけ枠線を暖色系(オレンジ)にして推奨を強調。 【避ける】人物の顔、実在ロゴ、写真風の質感。
10ポイント——小さく、目を細めないと読めない。12ポイント——なんとか読めるが、長い文章では疲れる。14ポイント——ゆったりとして、自然に目に入る。並べて見ると、同じ文章でも大きさが変わるだけで読みやすさがまったく違った。北村が身を乗り出して画面を見つめた。






神谷は思わず北村の顔を見た。以前の北村なら「なんか違うんだよな」と感覚だけで伝えていた。それが今、「何ポイント」という具体的な単位で質問している。デザインの専門用語を使っているわけではない。西園寺が教えたばかりの単位を、自分の言葉として使いこなしている。
行間・コントラスト・余白──読みやすさを決める3つの要素
【シーン】夏の午前、せとうちマーレブルの事務所。会議テーブルにノートPCが2台。1台は神谷がCanvaを操作中、もう1台にはオンライン会議の画面に西園寺の姿が映っている。北村がスタッキングチェアに座って画面を見ている。神谷がCanvaの文字サイズを変更している途中の画面が映っている。 【ロケーション固定】kagawa_13_marble_office に厳密準拠。第一参照=angle_meeting.png、第二参照=angle_window.png。 【キャラクター参照】kagawa/characters/神谷悠馬設定画像.png、kagawa/characters/北村裕設定画像.png、kagawa/characters/西園寺設定画像.png。 【人物】神谷悠馬(27歳・男性、ネイビーのスーツに白シャツ、ネイビーのネクタイを着用、黒い短髪、スタッキングチェアに座りCanvaを操作中)。北村裕(62歳・男性、ライトブルーのボタンダウンシャツ、細い銀灰色の眼鏡、明るいシルバーのショートヘア、スタッキングチェアに座り画面を真剣に見ている)。ノートPC画面越しに西園寺遥(30歳・女性、ベージュのジャケット、あごラインストレートボブ、細フレーム眼鏡、指示を出す表情)。 【構図】会議テーブルに神谷と北村が座り、ノートPCが2台開かれている。1台にCanvaの編集画面(文字サイズ変更中の抽象表現)、もう1台に西園寺のオンライン映像。背景に横一列で並ぶデスク2台、ホワイトボード、窓からの夏の光。 【小物】Canva編集画面(文字サイズが大きくなり行間が広がった抽象表現)。もう1台のノートPC画面上の西園寺の姿。 【ロケーション整合】kagawa_13_marble_office:奥壁の2連窓下に前縁をそろえて横一列に並ぶ同一仕様・同一寸法(約140×70cm)の薄いグレーのメラミン天板デスク2台(左の北村デスクに黒いデスクトップPCモニター+クリアファイルの山+波模様マグカップ、右の宮本デスクに白ノートPC+マスタードイエローのリングノート+付箋付きサブモニター)、右壁側の窓とラックの間に置く約180×90cmの横長キャスター付き自立式ホワイトボード(赤・青・黒の抽象的な海岸線・清掃地点・工程枠+マーカー3本+イレーサー)、手前右のオーク調中古会議テーブル(約140×80cm)+チャコールグレーの事務用スタッキングチェア3脚(+右壁際に重ねた予備1脚)、奥壁の引き違い窓2連(白いアルミサッシ、右窓から自然光+外に高松市内の中層ビルと空)+窓間のコルクボード(60×45cmの木枠、色数を抑えたピンで留めた小さな風景写真・無地の表・予定カード)、右壁のグレーのスチールラック4段(上段に白い防災ヘルメットと双眼鏡、中段に白・水色・グレーのファイルボックスとA4バインダー、下段に段ボール箱・青い再利用コンテナ・清掃用トング・緑の作業手袋)。 【色調】窓からの夏の自然光。Canva編集画面の「文字サイズ変更中」が実践の臨場感を伝える。 【避ける】読める実テキスト、商標、他人物、写真風の質感。
神谷がCanvaを開き、まず本文を10ポイントから14ポイントに変更した。西園寺が画面共有を見ながら、さらに改善すべき点を1つずつ指摘していった。



神谷が行間を広げた。行と行の間にゆとりができた途端、同じ文章がすっと目に入るようになった。





神谷が薄いグレーだった注釈文字を濃い色に変更した。ぼんやりしていた文字がくっきりと浮かび上がった。


神谷が要素の間隔を広げ、余白を確保した。行間、コントラスト、余白——3つの調整を1つずつ加えたことで、文字サイズを上げただけのページが「誰にでも読みやすいページ」へと変わっていった。
【種類】概念図(UD適用前後の比較図)。人物は描かない。 【構図】左右2列のビフォーアフター比較。左列「UD適用前」──小さい文字(10pt相当)、狭い行間、薄いグレーの文字と白い背景(弱いコントラスト)、余白なく要素が詰まっている抽象レイアウト。右列「UD適用後」──大きい文字(14pt相当)、広い行間(1.5倍以上)、黒い文字と白い背景(強いコントラスト)、十分な余白のある整理されたレイアウト。中央に矢印(左→右)。下部に「文字サイズ・行間・コントラスト・余白──この4つで『誰にでも読める』に変わる」のキャプション。 【補助】タイトル「UDの4要素──適用前と適用後」。 【色調】白い背景。左列(適用前)はグレー系の地味な配色で『読みにくさ』を表現。右列(適用後)は暖色系のアクセントと黒い文字で『読みやすさ』を表現。 【避ける】人物の顔、実在ロゴ、写真風の質感。
しかし、14ポイントに変更して行間を広げ、余白を確保した瞬間、問題が起きた。



可読性と情報量のトレードオフ──北村の決断
文字を大きくすれば読みやすくなるが、情報量は減る。同じページ数のまま全部の情報を入れて、なおかつ読みやすくするのは不可能だ。情報を減らすか、ページ数を増やすか。チームは判断を迫られていた。


北村が腕を組み、しばらく黙った。以前の北村なら「全部お任せで」と神谷に丸投げしていたかもしれない。けれど今は違った。自分で判断を下そうとしている。窮屈になったページを見つめ直し、ひとつひとつの情報の重みを吟味していた。


北村が自分の言葉で判断を下した。「全部入れたい」という気持ちと「読めなければ伝わらない」という現実を天秤にかけ、読みやすさを優先した。情報を厳選し、ページ数を1つ増やすという具体的な提案まで、自分の口から出てきた。



「伝わる配置」と「誰にでも読める」はセット
【シーン】夏の午前、せとうちマーレブルの事務所。会議テーブルの上にノートPCが2台開かれ、1台にはCanvaで完成した小冊子のページ(文字が大きく行間が広い暖色系レイアウト)、もう1台には西園寺のオンライン映像。北村・宮本・神谷の3人が画面を見つめ、達成感のある表情をしている。 【ロケーション固定】kagawa_13_marble_office に厳密準拠。第一参照=angle_meeting.png、第二参照=angle_desk.png。 【キャラクター参照】kagawa/characters/北村裕設定画像.png、kagawa/characters/宮本彩設定画像.png、kagawa/characters/神谷悠馬設定画像.png、kagawa/characters/西園寺設定画像.png。 【人物】北村裕(62歳・男性、ライトブルーのボタンダウンシャツ、細い銀灰色の眼鏡、明るいシルバーのショートヘア、スタッキングチェアに座り満足げに画面を見ている)。宮本彩(24歳・女性、ティール~海色のライトウィンドブレーカー、淡いライトブルーのポロシャツ、暖色系ダークチェスナットブラウンのミディアムヘアを青緑色のシュシュで低めのポニーテール、スタッキングチェアに座り黒いスマートフォンを手に持って画面と見比べている)。神谷悠馬(27歳・男性、ネイビーのスーツに白シャツ、黒い短髪、スタッキングチェアに座りCanva画面の前で小さく頷いている)。ノートPC画面越しに西園寺遥(30歳・女性、ベージュのジャケット、あごラインストレートボブ、細フレーム眼鏡、穏やかに微笑んでいる)。 【構図】会議テーブルを囲んで3人が座り、2台のノートPCを見ている。1台の画面には文字が大きく行間が広い暖色系のレイアウト(抽象表現)。もう1台に西園寺のオンライン映像。3人の表情に達成感。背景に横一列で並ぶデスク2台、窓からの光。 【小物】ノートPC画面上のUD適用済みレイアウト(暖色系配色、大きな文字、広い行間の抽象表現)。もう1台のノートPC画面上の西園寺の姿。宮本のスマートフォン。 【ロケーション整合】kagawa_13_marble_office:奥壁の2連窓下に前縁をそろえて横一列に並ぶ同一仕様・同一寸法(約140×70cm)の薄いグレーのメラミン天板デスク2台(左の北村デスクに黒いデスクトップPCモニター+クリアファイルの山+波模様マグカップ、右の宮本デスクに白ノートPC+マスタードイエローのリングノート+付箋付きサブモニター)、右壁側の窓とラックの間に置く約180×90cmの横長キャスター付き自立式ホワイトボード(赤・青・黒の抽象的な海岸線・清掃地点・工程枠+マーカー3本+イレーサー)、手前右のオーク調中古会議テーブル(約140×80cm)+チャコールグレーの事務用スタッキングチェア3脚(+右壁際に重ねた予備1脚)、奥壁の引き違い窓2連(白いアルミサッシ、右窓から自然光+外に高松市内の中層ビルと空)+窓間のコルクボード(60×45cmの木枠、色数を抑えたピンで留めた小さな風景写真・無地の表・予定カード)、右壁のグレーのスチールラック4段(上段に白い防災ヘルメットと双眼鏡、中段に白・水色・グレーのファイルボックスとA4バインダー、下段に段ボール箱・青い再利用コンテナ・清掃用トング・緑の作業手袋)。 【色調】窓からの夏の自然光。ノートPC画面のUD適用済みレイアウトの暖色系配色が「完成に近づいた小冊子」を象徴。3人の表情に達成感。 【避ける】読める実テキスト、商標、他人物、写真風の質感。
情報を厳選し、ページを1つ増やした小冊子のレイアウトが仕上がった。14ポイントの本文に行送り21ポイント以上、背景と文字の十分なコントラスト、余裕のある余白。UD適用前と適用後のページを並べて表示すると、変化は一目瞭然だった。


宮本が学びの本質を一言で言い当てた。西園寺がオンライン画面越しに深く頷いた。


宮本がスマートフォンでUD適用前と適用後のページを写真に撮り、見比べていた。

神谷はペルソナカードに書いた林田家のお母さんを思い浮かべた。阪神間に住む30代のお母さんが、片手でベビーカーを押しながらフェリーターミナルで小冊子を手に取る。文字が大きく、行間が広く、コントラストがはっきりしていれば、片手でページをめくりながらでも「次はここに行こう」と読める。
ユニバーサルデザインは特別な人のためのものではなかった。ベビーカーを押す片手のお母さんにも、老眼の高齢者にも、誰にとっても「もっと使いやすくなる」ための考え方だった。
📌 覚えるポイント
- ユニバーサルデザインは「特別な人のための配慮」ではなく、「すべての人がより使いやすくなる」ための設計。あとから足す装飾ではなく、最初から全体に効く土台として考える
- 文字サイズは感覚で決めない。屋外で読まれる小冊子は、東京都のUDガイドラインが高齢者の利用を見込む場合に望ましいとする14ポイント以上を基準に置く
- 文字を大きくするだけでは読みやすくならない。行間(行送りを文字サイズの1.5倍以上にするのが実務上の目安)、明るい色と暗い色の差、詰め込みすぎない余白——印刷物では、文字サイズを含めたこの4つを一組で調整する
- 文字を大きくすれば、そのぶん載せられる情報は減る。読めない小冊子は結局手に取ってもらえないので、読みやすさを先に取り、情報のほうを厳選する
- 近接・整列・反復・対比で「伝わる配置」を作り、ユニバーサルデザインで「誰にでも読める」にする。きれいなだけでは足りず、誰もが手に取れて初めて伝わるデザインになる
- 「なんか違う」ではなく「これは何ポイントですか」と聞けるようになると、改善は一気に速くなる。専門用語は要らない。数字と自分の言葉で具体的に伝えられるかどうかで決まる
📖 覚える用語
- ユニバーサルデザイン(UD)
- 障がいの有無や年齢にかかわらず、誰もが使える・読めるデザインの考え方。文字サイズ・行間・コントラスト・余白が鍵
- ポイント(pt)
- 印刷物の文字サイズの単位。1ポイント=約0.353mm。UD配慮の小冊子では本文12pt以上が目安、高齢者・屋外用途は14pt以上が望ましい
- ユニバーサルデザイン(UD)の適用
- レイアウトと配色を固めてから文字サイズを見直したため、途中でページから情報があふれる手戻りが出た。次に印刷物を作るときは、文字サイズと行間を先に決めてから要素を配置する順序に変えたい。そうすれば入る情報量が最初から見えるので、削る判断を後回しにせずに済む。
- 文字サイズ指定の運用
- 今後の修正依頼はポイント単位でやり取りし、変更前後の数値をページごとに記録して共有する。数値が残っていれば、印刷所への入稿時にも同じ指定をそのまま伝えられる。感覚のやり取りに戻すと、直したはずの箇所が次の版で元に戻りやすい。
- 情報厳選とページ数追加の決定
- 別紙に分けた交通アクセスは、フェリーの時刻やダイヤが変わっても本体を刷り直さずに差し替えられる。本体には当面変わらない内容だけが残る構成になったので、増刷の判断もしやすくなった。追加した1ページ分の印刷費は、次回の見積もりで確認する。
