良い設計は悪文を増やさない

Jul 27, 2026

1 min read

1 views

82%

ひとの目が迷う場所には、たいてい設計の迷いがある

多くの人は、文章が読みづらいときに「表現力が足りない」と考える。けれど本当に起きていることは、もっと地味で、もっと重要だ。読みにくさの正体は、しばしば情報の置き方が悪いことである。言葉が美しくないからではない。読者が今どこに立っていて、何を見ればいいのかが、途中で分からなくなるからだ。

これはUIにもそのまま当てはまる。たとえばダークモードの実装が複雑に見えるとき、問題は「色をどうするか」そのものではないことが多い。配色をあちこちに直接書き散らすと、変更のたびに全体を追いかける羽目になる。逆に、配色の意味をCSS変数に集約し、Tailwindのカスタムカラーへ橋渡しすると、見た目の制御点が整理される。複雑さが消えたのではない。複雑さの置き場所が決まったのだ。

文章も同じである。名文を目指す以前に、まず悪文を減らす。UIも同じである。華麗なアニメーションを足す以前に、まず構造を単純にする。両者に共通する問いはこうだ。人間は、どうすれば迷わず理解できるのか。

文章とUIをつなぐ共通原理: 意味を直接書かない

良い文章と良いデザインには、ひとつの意外な共通点がある。意味を、そのままあちこちに直書きしないことだ。直書きは一見わかりやすい。だが、わかりやすいのは書いた瞬間だけで、あとから効いてくる保守性を壊しやすい。

UIで色を各コンポーネントに直書きすると、たとえば背景を変えたいだけなのに、ボタン、カード、バナー、リンク、モーダルを全部探し回ることになる。文章でも同じで、同じ話を別の言い方で何度も繰り返したり、主語や前提が曖昧なまま比喩を重ねたりすると、読者は文脈の森で迷う。ここで重要なのは、派手さではなく参照の仕組みである。

CSS変数は色の意味を一箇所に束ねる。Tailwindのカスタムカラーはその意味を使いやすい形に再公開する。文章でいえば、これは「言いたいこと」を先に整理し、各段落がどの役割を持つかを明確にすることに近い。導入は何を問題にするのか、本文は何を比較するのか、結論は何を持ち帰らせるのか。読者が迷わない文章は、表現が上手いのではなく、責任分担が明確なのだ。

良い構造とは、情報を減らすことではない。情報の所属先を決めることだ。

この視点に立つと、ダークモードの実装と文章作法はまったく同じ問題になる。どちらも、表面の見た目ではなく、意味の層をどう設計するかの仕事である。

悪文は読み手のせいではなく、構造の未整理で起こる

「この文章は読みにくい」と感じたとき、人はつい読み手の集中力不足を疑う。だが多くの場合、原因は逆だ。悪文は、読み手に余計な推論を強いる文章である。誰が何をしているのか、どこが主張でどこが補足か、どの言葉が重要でどの言葉が装飾か。そうした判断を毎文ごとに読者へ丸投げしてしまう。

UIでも、色設計が崩れるとユーザーは同じ負担を負う。たとえば似たようなグレーが四種類あり、どれが背景でどれが境界線でどれが無効状態なのか分からないと、ユーザーは画面を見るたびに解釈を迫られる。優れたUIは、視線の移動を減らすだけではない。解釈の回数を減らす。文章も同じで、優れた文は、読者に「解釈させる」のではなく「理解させる」。

ここで役に立つのが、文章を意味層, 構造層, 表現層に分けて考えるモデルである。

意味層: 何を伝えたいのか。主張、事実、結論。
構造層: どの順番で理解させるのか。導入、比較、因果、例示。
表現層: どんな言葉で届けるのか。語彙、比喩、リズム。

悪文はたいてい、表現層でごまかしているように見えて、実は意味層か構造層に欠陥がある。UIの複雑さも同様で、見た目の派手さで隠していても、色の意味付けが崩れていれば、全体はすぐ破綻する。悪文とは、意味変数が散らかっている状態なのだ。

たとえば次のような文を考えてみる。

「この機能は便利で、しかも直感的で、ユーザーの体験を向上させ、満足度も上がるだろう。」

一見、問題なさそうだ。しかし何がどう便利で、何を根拠に直感的と言い、どの体験がどう改善されるのかが曖昧である。ここでは言葉の色が増えているだけで、意味の変数が定義されていない。対して、こう書けばよい。

「この機能は、設定画面を開かずに操作できるため、初回利用時の手数が減る。結果として、迷いによる離脱が起きにくくなる。」

後者は名文ではないかもしれない。だが、悪文ではない。そして多くの場合、読者が本当に欲しいのは名文ではなく、悪文でない文章である。

変数化された色と、変数化された主張

CSS変数を使ったダークモード設計が美しいのは、色を「見た目」ではなく「契約」に変えるからだ。たとえば --color-background や --color-text のような変数があれば、ライトモードでもダークモードでも、コンポーネントは同じ名前を参照できる。実装者は「何色か」を毎回考える必要がない。考えるべきなのは「この要素は何を意味する色か」だけになる。

文章にも、同じ発想が使える。優れた文章は、固有の言い回しを増やすことではなく、主張を再利用可能な単位に変える。たとえば、次のような一文があるとする。

「この仕様は分かりにくい。」

これは感想としては正しいかもしれないが、実装や改善に使いづらい。何が分かりにくいのか、どこで迷うのか、どう直せばよいのかがないからだ。ここで主張を変数化すると、次のようになる。

誰が読むのか: 初見の利用者
どこで迷うのか: 状態遷移の入口
なぜ迷うのか: 操作の結果が即時に見えない
何を改善するのか: フィードバックを増やす

このように分解すると、文章は単なる感想文から、設計の材料になる。つまり、良い文章は読み物である前に、思考のインターフェースである。これがダークモード設計と深くつながる。色を変数にすると実装が整うように、主張を変数にすると文章が整う。

この見方をさらに進めると、良い文章は「比喩が上手い文」ではなく、参照関係が明快な文だと分かる。何が何を指しているか、何が主で何が従か、どこからどこまでが一つの論点か。参照が安定していれば、読者は安心して読み進められる。

読みやすさとは、読者の知力に依存しないことではない。読者の知力を、迷子探しではなく理解そのものに使わせることだ。

良い設計は、作るときより変えるときに価値が出る

ダークモード実装が本当に効いてくるのは、最初に作る瞬間ではない。後から仕様が増えたとき、ブランドカラーが変わったとき、アクセシビリティ要件が入ったときだ。色が変数化されていれば、変更は局所的に済む。直書きが多いと、変更は雪崩になる。つまり、設計の良し悪しは、平常時ではなく変化時の摩擦で露わになる。

文章もまったく同じである。良い文章は、書いた直後の見た目だけでなく、後から読み返したとき、別の人が編集するとき、別の文脈に転載するときに効いてくる。悪文は、そのたびに意味が崩れる。曖昧な一文は、最初の読者には気にならなくても、次の読者には障害物になる。文章は静的な作品ではなく、時間の中で変化するインターフェースなのだ。

ここで重要なのは、複雑さをゼロにしようとしないことだ。複雑なものを無理に単純化すると、かえって嘘になる。そうではなく、複雑さを見える場所に隔離する。UIなら配色の責務を変数に集約し、文なら論点の責務を段落に集約する。そうすれば、見かけはすっきりし、内部は保守可能になる。

この考え方は、文章術にもデザインにも共通する、かなり強い原則である。

表現は自由でよい。責務は自由にしてはいけない。

自由に散らばった責務は、後から必ず読み手を苦しめる。責務が整理された表現は、多少無骨でも長く使える。実務の現場で価値があるのは、だいたい後者だ。

Key Takeaways

まず悪文を消す。 名文を目指す前に、誰が何を言っているのかが一読で分かる状態を作る。
意味を直書きせず、変数化する。 UIでは色をCSS変数に、文章では主張や論点を段落構造に分けて管理する。
読みにくさは、読者の能力不足ではなく構造の負債である。 迷わせている箇所は、たいてい情報の所属先が曖昧な場所だ。
変更しやすさは、良い設計の重要な指標である。 後から直せる文章、後から変えやすいUIは、最初から責務が整理されている。
表現の美しさより、参照の明快さを優先する。 読者が「解釈」ではなく「理解」に集中できるとき、文章もUIも強くなる。

結論: 良い文章とは、読者の脳内に余計な色を増やさないこと

文章を書くとき、人はしばしば「どう言えば美しいか」を考える。だが本当に問うべきなのは、どこで意味を定義し、どこでそれを再利用するかである。UIでも文章でも、上手さの本質は装飾ではない。読み手の頭の中に、不要な判断や曖昧な色を増やさないことだ。

だから、良い設計とは、最初から賢く見えることではない。あとから見ても迷子にならないことである。ダークモードの色が変数で整理されていると、画面は静かに安定する。文章の論点が整理されていると、読み手の思考も静かに進む。どちらも目指しているものは同じだ。派手な表現ではなく、意味の持続可能性である。

そしてここに、少し意外な真実がある。美しさは、しばしば最後に現れる。まず構造があり、次に理解があり、そのあとで初めて、表現が輝く。悪文を避けることは、文章を地味にすることではない。読者が意味にたどり着くまでの道を、まっすぐにすることだ。