はじめに

技術記事や発表スライドを作るとき、図版やイラストを使って説明を補足したり、伝わりやすくしたりする場面はよくあると思います。言葉だけでは伝わりにくいことでも、図版や記号を添えることで、直感的に理解できる感覚を持ったことがある方も多いのではないでしょうか。

図版には、アイコンやイラスト、フォント、矢印、線など、さまざまな視覚要素が使われますが、それらがなぜ「伝わる」のかについて深く考えたことがある方は、意外と少ないかもしれません。

図版を差し込むことで「わかりやすくなった」と感じるのはなぜなのでしょうか。

筆者は、その一因に、見る人の経験や認知と図形などの視覚的な情報を結びつけることで、想像しやすくなるという点があると考えています。

たとえば「流れを示す矢印」は、多くの方にとって馴染みのある記号です。上向きの矢印（↑）を見れば「上に向かう動き」が、下向きの矢印（↓）を見れば「下に向かう動き」が、特に説明がなくても自然に想像できます。本来、矢印はただの図形にすぎませんが、私たちはその形に意味を感じます。それは、「知っている」「そう使われているのを何度も見てきた」という経験に基づいて、意味を補って理解しているからです。

仮に、方向を表すのに星マーク（☆）を使ったらどうでしょう？ なかなか「どちらの方向を表しているのか」想像しづらいですし、そもそも「方向を表している」と理解するのは難しいです。「夜空＝上空＝上方向」……といった連想も、考えれば不可能ではないですが、伝わるまでに時間がかかってしまいます。筆者自身、そういった発想がとても好きなのですが、図版は「理解しやすくするための手段」である以上、できるだけ迷わず伝わる表現を選びたいです。

このように、図版を作成するうえで大切なのは、すでに多くの人に認知されている記号や形、意味を持った視覚要素をうまく活用しながら、読者の想像と結びつけていくことです。見る人にとって「見たことがある」「何となく意味がわかる」というビジュアルは、それだけで理解の助けになります。

この記事では、「理解しやすい図版」をひとつの目標として、図版の作り方について紹介します。特に今回は、図版の構造全体ではなく、装飾的な部分——たとえばアイコンや線、フォントといった“見せ方”に関わる要素にフォーカスを当てて、図版をより良くするためのポイントをお伝えしていきます。

調整前の図版

今回は、「AstroをCloudflareでデプロイするという技術記事で使う、次の3つの図版の見た目を調整してほしい！」という依頼があったと仮定して、進めていきます。本題に入る前に、まずはそれぞれの図版が何を表しているのかを簡単に紹介しておきます。

ローカル環境でWebサイトを開発し、それをインターネット上のGitHubで管理します。そして、CloudflareでWebサイトを公開し、ユーザーがWebサイトにアクセスするまでの一連のプロセスを図版にしたものです。

Astroでコンポーネントを作成する際のディレクトリ構成を、2つの場合で表した図版です。なお、図版中にある「コロケーション」とは、コンポーネントごとに必要な画像やスタイルなどを、そのコンポーネントのディレクトリ内にまとめて配置する設計手法のことです。

Webサイトのヘッダーに画像を表示する際、PageHeader.astroで画像を読み込んでいる、ということを説明する図版です。併せて、ディレクトリ内のどこに画像を配置すればよいかも示しています。

次節より、これらの図版をもとに「装飾的な見た目をどう調整するか」を具体的に解説していきます。

対象をわかりやすく表現した「絵」を配置する

図版を作成するうえで、まず視覚的に効果がある要素はイラストやアイコンなどの「絵」です。ここでいう「視覚的に効果がある絵」とは、抽象的な表現で描かれたものではなく、対象をわかりやすく表現した具体的なビジュアルを指します。

絵は、文章に比べ、把握するまでの時間が速いと言われています。視線を留め、情報を一瞬で伝える役割として、絵は非常に効果的な要素です。

調整前の図版は、テキスト要素でもって情報を伝えているものが多いので、ここに絵を加えて図版の力をより発揮できるものとしていきましょう。

よく知られた絵の配置

冒頭でも述べていますが、ここで選択する絵は、直感的にわかるものを選択していきます。

たとえば開発に関わるツールやサービス（Astro、GitHub、VS Code、Cloudflareなど）を図版に登場させる場合は、そのロゴやアイコンを一緒に載せると、より伝わりやすくなります。すでに知っている人にとっては、視覚的に見ただけで「これはあれだ」とすぐにイメージが結びつくからです。

同じように、例2や例3に登場するコードファイル（例：PageHeader.astro）や、フォルダ（例：assets）も、見慣れたアイコンや記号で表現しておくことで、読者がすぐに理解しやすくなります。実際に普段使っているPCやエディタに近い見た目であれば、余計な説明がなくても自然と伝わるため、図版としても非常に効果的です。

統一されたビジュアルがもたらす「無言の説明」

また、同じ意味を持つ要素は、図版の中でも同じ絵やアイコンを使って表現するようにしましょう。色や形もできるだけ変えず、一貫性を保つことが大切です。

例2と例3の図版を見てみると、コードファイルや、フォルダといった共通の要素が登場しています。こうした場合、表記やビジュアルを揃えておくことで、見る人が「これは同じものだ」と迷わず認識できます。

逆に、同じ意味を持つはずの要素なのに、アイコンの形や色が少しでも変わってしまうと、読み手は「これは別物なのかも？」と混乱してしまいます。図版では、説明を書かなくても伝わることが理想なので、ビジュアルの統一性を保つことが「無言の説明」としての役割を担ってくれます。

想像できる絵を配置

例1の図版を見てみましょう。「ローカル環境」「インターネット上」といった言葉が使われています。これらも、絵やアイコンを添えることで、それぞれの状況がより直感的に伝わる図版にすることができます。

とはいえ、「ローカル環境」や「インターネット上」といった言葉には、先のサービスのロゴやアイコンのように、これといった決まったビジュアル要素が存在するわけではありません。そのため、どういう絵を選ぶかは、文脈や読者にとっての馴染みやすさを意識して判断する必要があります。

たとえば、ローカル環境には「デスクトップパソコン」や「ノートPC」のイラストを用いることで、「手元のPCで作業している様子」が視覚的に想起されやすくなります。同じように、インターネット上を表す際には「雲（クラウド）」や「地球アイコン」、「ブラウザのウィンドウ」といったモチーフを使うことで、人によって異なる想像をうまく共通化してくれる効果が期待できます。

ここで、「どのようにして図版に使う要素を思いつくか」について、筆者なりの考え方を少し紹介すると、連想ゲームのようにイメージを膨らませながら、図版に使う要素を選んでいくことが多いです。

たとえば「ローカル環境」という言葉を見たとき、読者にとってそれがどういう場面かをまず想像します。すると、開発者が自分のパソコン上でコードを書いている光景が思い浮かびました。そこから、「この場面にどの要素を選択すれば想像しやすいか」を考え、デスクトップパソコンのイラストという要素にたどり着いた、という流れです。

デスクトップの絵には、「個人のパソコン環境」＝「ローカル」という直感的な意味づけがしやすいため、サーバーやクラウドとの対比としても自然に理解されやすくなるという意図もあります。

今紹介したのは、あくまで考え方の一つです。絵の選び方に「これが正解！」という決まりがあるわけではありません。

「見る人にとってわかりやすいかどうか？」を基準にしながら、自分なりの方法で最適な絵を選択していくことが大切です。

適切なフォントを選択する

図版では、見出しや説明文、コード、要素のラベルなど、さまざまな情報をフォントで表現する場面があります。この節では、図版の中でフォントをどのように選び、使っていくかについて解説します。

読みやすいフォントを選択

まず、「どういったフォントを使用するか」ですが、とてもシンプルです。「読みやすいフォント」を使用します。

たとえば、ディスプレイフォントと言われるような、装飾的な書体は、視認性が低くなるため、図版にはあまり向きません。次に例1の図版に装飾的なフォントを使用したパターンとの比較を載せています。わかりやすいように、装飾的なフォントは少し大げさなものを選んでみました。

図版のように、情報を正確に伝えることが求められる場面では、「本文用フォント」と呼ばれる、長文にも適したフォントを選ぶのが基本です。

もちろん、少し「装飾を加えたい！」という場面ではディスプレイフォントを使うこともありです。画面の印象を華やかにしたい媒体では、装飾的なフォントが効果的に働くこともあります。ただ、図版において使用する場合は、「情報として重要度が低い」部分に限定するのがよいでしょう。

フォント選びもデザインする上で、楽しい作業です。基本を押さえつつ、図版が掲載される媒体や、読み手のターゲット層に合ったフォントを選択していきましょう。

コードを表現するときは

今回の図版ではコードの例が多く登場します。コードを書く機会が多い方にとってはおなじみのことかもしれませんが、コードを表現する際には「Monospaced Font：等幅フォント」を使用することを、筆者は基本としています。

等幅フォントにはすべての文字が同じ幅で表示されるという特徴を持ちます。そのため、コードのインデントや整列が崩れにくく、構造を視覚的に把握しやすくなります。また、「o（オー）」と「0（ゼロ）」、「1（イチ）」と「l（エル）」のような似た形の文字でも明確な違いがあるため、視認性が非常に高く、誤読を防ぐことができます。

実際のコードを書く場面でも、多くの場合で等幅フォントが使われています。コードを書く人にとってはおなじみのスタイルなので、図版も同じ見た目にしておくことで、スムーズに理解してもらえる図版に近づきます。

使用するフォントの数は抑える

最後に、使用するフォントの種類は、できるだけ少なくしましょう。図版に複数のフォントが使われていると視線の流れが乱れたり、情報の階層が見えにくくなったりして、視認性や可読性を損なう原因になります。

フォントを統一することで、図版全体に一貫した印象が生まれ、デザインとしての安定感も高まります。特に、見出し・本文・注釈などの役割ごとにスタイルを分けたい場合は、フォントの種類を増やすのではなく、「太さ」や「サイズ」で差をつけるのがおすすめです。

境界線が理解しやすい素材を選択する

例3の図版を見てみましょう。強調の線が引かれています。ここで意識したいのは、「境界線を明確に表現する」ことです。

この「境界」が意味するのは、図版中の要素と要素の視覚的な区切りのことです。

この境界が曖昧だと、図版の中で引いた強調の線が、本来区別したいコードを書く編集画面（黒い矩型）と混ざって見えてしまい、どこが注目ポイントなのかが伝わりにくくなってしまいます。

そこで今回の図版では、強調の線に「手書き風のタッチ」を取り入れています。これは無機質なUIの線とは異なるニュアンスを持たせ、図としての“注釈”であることを視覚的に示すための工夫です。

調整前と比較すると、強調の線がウィンドウの領域からはみ出しているような印象を受けるかもしれませんが、これは意図的なデザインです。操作対象の“外側”から強調が加えられていることを、視覚的に感じ取ってもらうための演出で、「この線はUIの一部ではなく、図としての注釈である」と読み取ってもらいやすくする狙いがあります。

ここで大事なのは、「変化を与えること」そのものが、強調として機能するという点です。図版において、強調の線がただ存在するだけではなく、通常のUIや図の要素とは明確に異なる「何か」になっていることで、「これは注目のための線なんだ」と読み手に自然に伝わります。

つまり、“強調ですよ”と言わなくても、デザインとしてそう見える・そう感じられるように変化を与えることが大切です。 線のスタイル、タッチ、位置、太さ、色など、「違う」と感じられる仕掛けがあることで、図版の情報がより伝わりやすくなります。

まとめ

今回の記事では、図版を作成するうえで基本となる3つのポイントを紹介しました。

1. 視覚的に効果がある絵を配置する
2. 読みやすいフォントを選択し、種類は抑える
3. 境界線が理解しやすい素材を選択する

どれも特別なテクニックというよりは、「どうすれば伝わるか？」という視点から図版を考える際の、ちょっとした足がかりになるような考え方です。

もちろん、デザインの世界にはまだまだ多くの表現方法や工夫が存在します。今回ご紹介した内容は、その中のほんの一部にすぎません。

それでも、言葉だけではなく「絵」や「見せ方」でも情報が伝わるという、ビジュアルならではの面白さや可能性を、少しでも感じてもらえていたらうれしいです。

次回は、図版の全体の構成や、色による伝え方を見てみましょう。