Shiny Academy

AI×デザイン実践コース

~第5話 誰もが手に取れる小冊子をつくる~

前回のあらすじ

デザイン4原則(近接・整列・反復・対比)を学び、写真と文章が詰め込まれた窮屈なページを「伝わる配置」に再構成した。ペルソナ(たった一人の具体的な読者像)の感情ニーズに合わせて暖色系と白の余白を基調とした配色に変更し、北村が「読みやすい」「温かい」と自分の言葉でレイアウトの変化を語れるようになった。

「読めない人がいるかもしれない」──北村の問い

北村が校正刷りを手に取り目を細め、宮本と神谷が横で見守っている

夏のせとうちマーレブル事務所。デザイン4原則——近接・整列・反復・対比の4つの配置ルールで整えたレイアウトに、暖色系の配色も決まった小冊子のページを会議テーブルの上に広げ、神谷と北村が見返していた。紙の上に並ぶと、画面で見ていたときより色が落ち着いて見えた。

北村裕の表情アイコン
北村
この色合い、温かくていいね。前とは見違えたよ
神谷悠馬の表情アイコン
神谷
ありがとうございます。4つの原則を使っただけで、同じ素材でもここまで変わるんですよね
北村裕の表情アイコン
北村
ただね……ちょっと気になることがあるんだ。この文字ね、読めることは読めるんだけど、もっと年配の方には小さすぎないかと思ってね

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

北村裕の表情アイコン
北村
前にも言ったと思うんだけどね、フェリーのターミナルに置く小冊子だから、色々な方が手に取るわけだ。障がいのある方や高齢の方にもちゃんと読めるようにしたいんですよ

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

宮本彩の表情アイコン
宮本
あ、実は私の祖母も老眼なんです。以前、フェリーターミナルに置いてある小冊子を見せたことがあって……「字が小さくて読めん」って言われたことがあるんです
宮本彩の表情アイコン
宮本
祖母だけじゃなくて、高齢の方はみんなそうだと思います。フェリーターミナルには色々な年齢の方がいらっしゃいますから

宮本の祖母の声は、「誰もが読める」とは何かという問いを突きつけていた。同じページを手に取っても、文字の大きさひとつで「読める人」と「読めない人」が分かれてしまう。

ユニバーサルデザインの基本──文字サイズと推奨値

ノートPCでオンライン会議を開き、西園寺に状況を共有した。北村の要望と宮本の祖母のエピソードを聞いた西園寺が、穏やかに話し始めた。

西園寺遥の表情アイコン
西園寺
北村さん、大切なところに気づいてくださいましたね。宮本さんも、よく気づきましたね。文字の大きさひとつで、読めない方が出てしまいます。年齢や障がいの有無にかかわらず、誰もが使える・読めるデザインの考え方があるんですよ。これをユニバーサルデザインと呼びます。略してUDですね

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

西園寺遥の表情アイコン
西園寺
印刷物の文字の大きさは「ポイント」という単位で指定するんです。1ポイントは約0.353ミリメートルですね。小さな単位だけれど、この数字が読みやすさを大きく左右しますよ
西園寺遥の表情アイコン
西園寺
東京都のユニバーサルデザインのガイドラインでは、A4の印刷物に載せる文字は12ポイント以上が適切だとされているんですよ。高齢の方の利用が多いと見込まれる場合は、14ポイント以上が望ましいとも書かれていますね

ポイント(pt)という単位が初めて出てきた。文字の大きさを感覚ではなく、具体的な数値で語るための基準だ。西園寺が画面に10ポイント、12ポイント、14ポイントのサンプル文を並べて見せた。

10pt・12pt・14ptの文字サイズを横に並べた比較図。14ptが「高齢者・屋外推奨」として強調されている

10ポイント——小さく、目を細めないと読めない。12ポイント——なんとか読めるが、長い文章では疲れる。14ポイント——ゆったりとして、自然に目に入る。並べて見ると、同じ文章でも大きさが変わるだけで読みやすさがまったく違った。北村が身を乗り出して画面を見つめた。

北村裕の表情アイコン
北村
なるほど、こうやって並べると全然違うな。じゃあ、本文の文字は何ポイントにすればいいんだ
西園寺遥の表情アイコン
西園寺
フェリーターミナルに置く小冊子なら、14ポイント以上をお勧めしますよ。高齢の方も、屋外の明るい場所で読む方もいらっしゃるでしょうからね
神谷悠馬の表情アイコン
神谷
今の小冊子は何ポイントですか
西園寺遥の表情アイコン
西園寺
確認しましょう。Canvaの設定を開いてみて
神谷悠馬の表情アイコン
神谷
10ポイントです……
西園寺遥の表情アイコン
西園寺
それだと、UDの基準では小さすぎるわね。14ポイントに上げてみましょう

神谷は思わず北村の顔を見た。以前の北村なら「なんか違うんだよな」と感覚だけで伝えていた。それが今、「何ポイント」という具体的な単位で質問している。デザインの専門用語を使っているわけではない。西園寺が教えたばかりの単位を、自分の言葉として使いこなしている。

行間・コントラスト・余白──読みやすさを決める3つの要素

神谷がCanvaで文字サイズを変更し、西園寺がオンライン越しに確認している

神谷がCanvaを開き、まず本文を10ポイントから14ポイントに変更した。西園寺が画面共有を見ながら、さらに改善すべき点を1つずつ指摘していった。

西園寺遥の表情アイコン
西園寺
14ポイントに上げましたね。でもよく見てください——行と行がくっついて窮屈に見えませんか
北村裕の表情アイコン
北村
たしかに……文字が大きくなった分、行が詰まっている感じだな
西園寺遥の表情アイコン
西園寺
行と行の間だけではなく、1行分の高さ——行送りで考えます。ガイドラインに数値の定めはありませんが、私は文字の大きさの1.5倍以上を目安にしていますよ。本文が14ポイントなら、行送りは21ポイント以上になりますね。空いている部分だけを1.5倍にするのではありませんよ

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

北村裕の表情アイコン
北村
おお、行がほどけたみたいだ。さっきより読みやすいね
西園寺遥の表情アイコン
西園寺
これが行間の効果ですよ。次にこの注釈を見てください。薄い灰色の文字が白い背景に載っていますね
北村裕の表情アイコン
北村
言われてみると……読もうとしないと読めないな
西園寺遥の表情アイコン
西園寺
文字と背景の明るさの差——これをコントラストと呼ぶんです。白い背景に黒い文字ならはっきり読めるけれど、薄い灰色だと高齢の方には読み取りにくくなります。この差をしっかり確保することが大事ですね
西園寺遥の表情アイコン
西園寺
前回お伝えした「対比」も、英語では同じコントラストなんですよ。あちらは大きさや太さで優先順位をつける話、こちらは明るさの差で読み取れるようにする話ですね。同じ言葉でも、見ている軸が違うんです

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

北村裕の表情アイコン
北村
おお、はっきり読めるようになったな。前は薄い文字と背景の区別がつきにくかったんだ
西園寺遥の表情アイコン
西園寺
最後にもうひとつありますね。要素と要素の間にゆとりがないと、目がどこを見ればいいか迷ってしまうでしょう。詰め込みすぎず空きを持たせること——これが余白ですよ

神谷が要素の間隔を広げ、余白を確保した。行間、コントラスト、余白——3つの調整を1つずつ加えたことで、文字サイズを上げただけのページが「誰にでも読みやすいページ」へと変わっていった。

UD適用前(小さい文字・狭い行間・弱いコントラスト・余白なし)と適用後(大きい文字・広い行間・強いコントラスト・十分な余白)を左右に並べた比較図

しかし、14ポイントに変更して行間を広げ、余白を確保した瞬間、問題が起きた。

神谷悠馬の表情アイコン
神谷
あ……1ページに収まっていた情報が、はみ出してしまいました
北村裕の表情アイコン
北村
文字を大きくしたら、全部入らなくなったのか。困ったなぁ
西園寺遥の表情アイコン
西園寺
ええ、そこが避けて通れないところですね。文字を大きくして行間を広げれば読みやすくなりますが、その分、1ページに入る情報量は減ってしまいます。読みやすさと情報量は、同時には満たせないんですよ。これは避けられないトレードオフ(どちらかを良くすれば、もう片方を犠牲にする関係)ですね

可読性と情報量のトレードオフ──北村の決断

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

神谷悠馬の表情アイコン
神谷
方法は2つあります。載せる情報を厳選して減らすか、ページ数を増やして情報を分散させるか、です
北村裕の表情アイコン
北村
うーん、全部入れたいんだけどね……屋島の歴史も、交通アクセスも、うどん体験の案内も、どれも大事な情報だから

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

北村裕の表情アイコン
北村
……読めない小冊子は、置いてあっても手に取ってもらえないだろうな。せっかく色の使い方も並び方もいいものにしたのに、文字が小さくて読めなかったら意味がない
北村裕の表情アイコン
北村
交通アクセスは別紙にまとめて挟み込もう。本文はうどん体験と屋島の見どころに絞って、ページを1つ増やす。読みやすさのほうが大事だ

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

宮本彩の表情アイコン
宮本
北村さん、以前は「全部入れてほしい」とおっしゃっていましたよね。情報を削って、ページを増やすという判断を自分で出されるなんて……
北村裕の表情アイコン
北村
自分たちで作っているからね。中身がわかるから、何を残して何を削るか、判断できるんだよ
西園寺遥の表情アイコン
西園寺
大切なご判断ですね、北村さん。色々な方が手に取る小冊子だと最初におっしゃったのは、ご自身でしたね。読めない小冊子は、どれだけ内容が良くても届きません。読みやすさは、伝えるための土台ですね

「伝わる配置」と「誰にでも読める」はセット

完成したUD対応ページを前に、北村・宮本・神谷が達成感を共有している

情報を厳選し、ページを1つ増やした小冊子のレイアウトが仕上がった。14ポイントの本文に行送り21ポイント以上、背景と文字の十分なコントラスト、余裕のある余白。UD適用前と適用後のページを並べて表示すると、変化は一目瞭然だった。

宮本彩の表情アイコン
宮本
前のページと並べてみると、全然違いますね。文字が大きくて、行間が広くて、すっと目に入ってきます
宮本彩の表情アイコン
宮本
近接・整列・反復・対比のデザイン4原則で「伝わる配置」を作って、ユニバーサルデザインで「誰にでも読める」にした。この2つはセットなんですね

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

西園寺遥の表情アイコン
西園寺
そのとおりよ、宮本さん。きれいなだけでは足りないわ。誰もが手に取って、読んで、行動できる——それが「伝わるデザイン」の完成形なの
北村裕の表情アイコン
北村
なるほどね……きれいに作ることと、誰にでも読めるようにすること。両方あって初めて完成なんだな

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

宮本彩の表情アイコン
宮本
この小冊子なら、私の祖母にも胸を張って見せられます

神谷はペルソナカードに書いた林田家のお母さんを思い浮かべた。阪神間に住む30代のお母さんが、片手でベビーカーを押しながらフェリーターミナルで小冊子を手に取る。文字が大きく、行間が広く、コントラストがはっきりしていれば、片手でページをめくりながらでも「次はここに行こう」と読める。

ユニバーサルデザインは特別な人のためのものではなかった。ベビーカーを押す片手のお母さんにも、老眼の高齢者にも、誰にとっても「もっと使いやすくなる」ための考え方だった。


📌 覚えるポイント

  • ユニバーサルデザインは「特別な人のための配慮」ではなく、「すべての人がより使いやすくなる」ための設計。あとから足す装飾ではなく、最初から全体に効く土台として考える
  • 文字サイズは感覚で決めない。屋外で読まれる小冊子は、東京都のUDガイドラインが高齢者の利用を見込む場合に望ましいとする14ポイント以上を基準に置く
  • 文字を大きくするだけでは読みやすくならない。行間(行送りを文字サイズの1.5倍以上にするのが実務上の目安)、明るい色と暗い色の差、詰め込みすぎない余白——印刷物では、文字サイズを含めたこの4つを一組で調整する
  • 文字を大きくすれば、そのぶん載せられる情報は減る。読めない小冊子は結局手に取ってもらえないので、読みやすさを先に取り、情報のほうを厳選する
  • 近接・整列・反復・対比で「伝わる配置」を作り、ユニバーサルデザインで「誰にでも読める」にする。きれいなだけでは足りず、誰もが手に取れて初めて伝わるデザインになる
  • 「なんか違う」ではなく「これは何ポイントですか」と聞けるようになると、改善は一気に速くなる。専門用語は要らない。数字と自分の言葉で具体的に伝えられるかどうかで決まる

📖 覚える用語

ユニバーサルデザイン(UD)
障がいの有無や年齢にかかわらず、誰もが使える・読めるデザインの考え方。文字サイズ・行間・コントラスト・余白が鍵
ポイント(pt)
印刷物の文字サイズの単位。1ポイント=約0.353mm。UD配慮の小冊子では本文12pt以上が目安、高齢者・屋外用途は14pt以上が望ましい
📝 神谷の北村さんへの報告メモ
ユニバーサルデザイン(UD)の適用
レイアウトと配色を固めてから文字サイズを見直したため、途中でページから情報があふれる手戻りが出た。次に印刷物を作るときは、文字サイズと行間を先に決めてから要素を配置する順序に変えたい。そうすれば入る情報量が最初から見えるので、削る判断を後回しにせずに済む。
文字サイズ指定の運用
今後の修正依頼はポイント単位でやり取りし、変更前後の数値をページごとに記録して共有する。数値が残っていれば、印刷所への入稿時にも同じ指定をそのまま伝えられる。感覚のやり取りに戻すと、直したはずの箇所が次の版で元に戻りやすい。
情報厳選とページ数追加の決定
別紙に分けた交通アクセスは、フェリーの時刻やダイヤが変わっても本体を刷り直さずに差し替えられる。本体には当面変わらない内容だけが残る構成になったので、増刷の判断もしやすくなった。追加した1ページ分の印刷費は、次回の見積もりで確認する。

まとめ

ユニバーサルデザインは、特別な人のための配慮ではない。文字サイズ・行間・コントラスト・余白を整えれば、すべての人にとって読みやすくなる。「伝わる配置」と「誰にでも読める」の2つが揃って初めて、「伝わるデザイン」は完成する。