文章だけでは伝わらないことを、図や表にする

1. 「文章で説明すると、どうしても長くなってしまって」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「うちの仕事の流れを説明しようとすると、どうしても文章が長くなるんです。お客様から『結局、こっちは何をすればいいの』と聞かれてしまって。図にしたほうがいいんでしょうか」

これは、文章力の問題ではないことが多いです。文章は、一度に一つのことしか言えません。前から順に読むしかない形なので、「同時に見比べてほしいこと」や「位置の関係」を運ぶのが苦手です。

一方で、図にすれば何でも分かりやすくなるわけでもありません。言葉を詰め込んだ図。スマートフォンでは豆粒になる図。料金が変わったのに直せない図。図が増えて、かえって読まれなくなったページも、たくさん見てきました。

この記事では、文章のままでいいものと、図や表にしたほうがいいものの見分け方から始めます。そのうえで、作り方と、作りすぎないための目安までを書きます。

この記事で書くこと

• 文章では伝わりにくい、3つのもの
• 流れ・比較・構造、図の3つの種類と使い分け
• 図に入れる言葉を減らす方法
• スマートフォンで読めるかの確かめ方
• 画像で作る図より、文字で組む表が直しやすい理由
• 図の下に添える一行と、作りすぎない目安

2. 文章では伝わりにくい、3つのもの

文章で書いてうまく伝わらないとき、たいていは次の3つのどれかを運ぼうとしています。

① 順番

「お問い合わせをいただいたら、まずお電話でご状況を伺い、そのあと現地を確認し、お見積もりをお出しして、ご了承いただけたら日程を決め…」。手順を一文につなぐと、読む人は途中で何段目にいるのか分からなくなります。

順番そのものは、文章でも書けます。ただ、段の数が4つ、5つと増えると、読む人は頭の中で番号を振り直しています。その作業を、こちらで先に済ませておくのが図です。

② 比べること

「Aプランは月2回で、Bプランは月4回、ただしBは土日も対応で、Aは平日のみ…」。複数のものを、同じ項目で比べる話は、文章だとすぐに追えなくなります。

読む人は、メモを取りながら読むわけではありません。2つまでなら文章でも比べられます。3つ以上を、3つ以上の項目で比べるなら、表のほうが早く伝わります。

③ 位置の関係

「本社の1階が受付、2階が作業場、駐車場は建物の裏手で…」。何がどこにあるか、何が何に含まれるか。これも文章が苦手とするものです。読む人は、文章を読みながら頭の中に地図を描いています。描き間違えれば、そのまま伝わり方がずれます。

文章のままでいいもの

反対に、図にしないほうがいいものもあります。理由や考え方、気持ちです。「なぜこの仕事をしているのか」「どんな会社に頼んでほしいのか」は、矢印や箱に分けると、かえって薄くなります。

見分け方は簡単です。読む人に、頭の中で並べ替えや見比べをさせているかどうか。させているなら、図や表にします。させていないなら、文章を整えるほうが先です。文章の整え方は ホームページの文章を、読みやすく直す にまとめてあります。

3. 図の種類は3つ：流れ・比較・構造

ホームページで使う図は、ほとんどがこの3つに収まります。凝った図解の技法を覚える必要はありません。運ぶものが順番なら流れ、比べることなら表、位置の関係なら構造。この対応だけ覚えておけば足ります。

① 流れ：段の数は3〜6に収める

手順の図でいちばん多い失敗は、社内の工程を全部並べることです。社内では10段あっても、お客様から見て区切りになるのは4つか5つということがほとんどです。

段の決め方の目安は、「お客様が何かをする」か「お客様に何かが届く」ところで区切ることです。社内の確認作業や、担当者の引き継ぎは、お客様には見えません。図からは外します。

各段に添えるのは、何をするか、どれくらいかかるか、誰がするか。この3つで足ります。サービスのページのどこに流れを置くかは サービス紹介のページは、どの順番で書けばいいか の4段目に書きました。

② 比較：表は、項目を選ぶところで決まる

表は、作り始めると項目が増えていきます。読む人が選ぶときに、実際に見る項目だけに絞ってください。目安は、お客様から「AとBは何が違うんですか」と聞かれたときに、いつも答えている項目です。

他社と並べる表を作りたくなることもあります。ただ、根拠を示し続けるのが難しく、信用を落としやすい形です。表の作り方や注釈の置き方は ホームページに「比較表」を載せるかどうか にまとめてあります。

③ 構造：いちばん外の枠から描く

構造の図は、描く順番を間違えると込み入ります。いちばん外の枠（会社全体、建物全体）を先に決めて、中を区切っていくのが基本です。

よく使うのは、事業がいくつかある会社の全体像です。会社名の大きな枠の中に、事業を2つか3つ並べ、それぞれの下にサービスを2〜3行。これだけで、何をしている会社かが一目で分かるようになります。

逆に、組織図を細かく載せても、お客様の役にはあまり立ちません。お客様が知りたいのは、部署の数ではなく、自分の用事がどの窓口につながるかだからです。

4. 図に入れる言葉は、少なくする

図を作るとき、いちばん削るべきなのは言葉です。

箱の中は、見出し語と一行まで

図の箱の中に、文章を丸ごと入れてしまう例をよく見ます。そうなると、図ではなく枠で囲っただけの文章になります。読む人は結局、文章を読むことになります。

箱に入れるのは、見出し語と、多くても一行の補足までです。

• 見出し語 ― 「現地確認」「お見積もり」のように、名詞か短い動きで
• 一行の補足 ― 「約1週間」「担当者が伺います」のように、数字か主語を
• それ以上の説明 ― 図の外、本文の中へ

説明を削るのが惜しいと感じたら、それは本文に書く内容です。図は目次で、本文は中身と考えると、どこに何を書くかが決まります。

言葉の形を揃える

箱ごとに言葉の形がばらばらだと、読む人は引っかかります。「お問い合わせ」「現地を確認します」「見積提出」「ご契約いただく」。名詞と文、漢語と敬語が混ざっています。

同じ図の中では、言葉の形を揃えてください。全部を名詞で終えるか、全部を「〜します」で終えるか。それだけで、図がすっきり読めます。

数字は、図に残す

言葉は減らしますが、数字は残します。「約1週間」「3回まで」「午前9時〜午後6時」。数字は短く、しかも読む人が判断に使う情報です。図の中で、いちばん働く言葉です。

社内の言葉を、図に持ち込まない

社内の工程表を元に図を作ると、社内の呼び名がそのまま残ります。「一次ヒアリング」「現調」「本見積」。社内では通じても、お客様には伝わりません。

図にするときこそ、お客様が使う言葉に置き換えてください。図は目立つぶん、分からない言葉も目立ちます。

色だけで、区別させない

図では、色で区別をつけたくなります。「赤は貴社がすること、青はお客様がすること」。ただ、色の見分けがつきにくい方もいますし、白黒で印刷すると違いが消えます。

色を使うときは、言葉か記号も一緒に添えてください。「お客様」「当社」と小さく書く、印を付ける。色は見分けやすくする手助けで、意味を運ぶのは言葉の役目です。色の数も、1つの図で2つか3つまでにしておくと落ち着きます。

5. スマートフォンで読めるか

ホームページを、スマートフォンで見る人は少なくありません。パソコンの画面で作った図が、そのまま読めるとは限りません。

横に長い図は、縮んで読めなくなる

パソコンで横に5つ並べた手順の図は、スマートフォンでは横幅に合わせて縮みます。文字が小さくなり、拡大しないと読めなくなります。拡大しないと読めない図は、多くの人にとって、無いのと同じです。

対処は、縦に積むことです。手順の図は、上から下へ流れる形にします。この記事の図も、スマートフォンでは縦に並ぶように組んでいます。

表は、1行ずつ縦に並べ替える

横に長い表も同じです。列が4つ以上ある表は、スマートフォンでは横にはみ出すか、文字が小さくなります。

文字で組んだ表なら、スマートフォンのときだけ、1行ずつカードのように縦に並べ替えることができます。項目名を各行に添えて、上から順に読める形です。画像で作った表では、この並べ替えができません。

確かめ方：自分のスマートフォンで、片手で見る

確かめ方は簡単です。

• 自分のスマートフォンで開く ― 作った人のパソコンの画面ではなく、手元の画面で
• 拡大せずに読めるか ― 指で広げないと読めない文字があれば、作り直し
• 横にずらさずに済むか ― 横に動かさないと端が見えない図や表は、縦に組み直す
• 年配の方にも見てもらう ― 文字を大きくする設定で使っている人もいます

スマートフォンで人が離れる原因は、図だけではありません。ほかの原因は スマートフォンで見たときに、人が離れる7つのこと に並べてあります。

6. 画像の図より、文字で組む表のほうが直しやすい

図や表を作るとき、デザインのソフトで画像として作るか、ページの中に文字で組むか、という選択があります。表と手順の図は、できるだけ文字で組んでください。

料金が変わった日に、何が起きるか

いちばん困るのは、中身が変わったときです。画像の料金表は、金額が1つ変わっただけで、元のデータから作り直しになります。元のデータを持っているのは前の制作会社だった、という話も珍しくありません。

その結果、古い金額の画像が、そのまま何年も残ることになります。本文は新しい金額、画像は古い金額。読む人は、どちらを信じていいか分からなくなります。

文字で組んだ表なら、数字を1つ書き換えるだけです。手間が小さいので、変わったその日に直せます。

画像にするなら、説明の文字と元データを残す

それでも、イラストを使った構造の図のように、画像で作るほうがいいものもあります。その場合は、2つのことを守ってください。

• 説明の文字を付ける ― 画像が見られない人のために、図が何を伝えているかを一、二文で。書き方は ホームページの画像に付ける「説明の文字」を、どう書くか に書きました
• 元データを貴社でも持つ ― 作り直せる形のファイルを、制作会社だけでなく貴社の手元にも置いておく

図の中の大事な数字や手順は、本文にも文字で書いておくと安心です。画像が読み込まれなかったときにも、中身が伝わります。

7. 図の下に一行。そして、作りすぎない

最後に、図を置いたあとの仕上げと、数の目安です。

図の下に、一行の説明を付ける

図を置いたら、その下に一行、この図で何を見てほしいかを書いてください。「上から順に、お客様にしていただくことは3つだけです」「プランの違いは、訪問の回数だけです」。

図は、見る人によって目の止まる場所が違います。一行あると、見るべき場所がそろいます。図をじっくり見ない人にも、要点だけは届きます。この記事の図の下に置いている一言も、同じ役割です。

本文の側からも、図に触れておきます。「下の図のとおり、ご依頼から工事までは5段です」。本文と図が互いを指している状態にしておくと、どちらから読んでも迷いません。

1ページに、1つか2つ

図が分かりやすいと分かると、全部を図にしたくなります。ただ、図が3つも4つも続くページは、どれが大事な図なのかが分からなくなります。

目安は、1ページに1つか2つです。そのページでいちばん伝えたいことに1つ。足りなければ、もう1つ。それ以上欲しくなったら、文章で足りないのか、ページを分けるべきなのかを考えます。

作りすぎの、よくある形

• 文章と同じことを、図でもう一度言っている ― どちらかを削る
• 飾りのための図 ― 「安心・信頼・実績」を3つの丸で囲んだだけの図は、何も運んでいません
• 比べる相手がいない表 ― プランが1つしかないなら、文章で書けば足ります
• 矢印が四方に伸びた図 ― 関係が込み入っているなら、図ではなく説明の順番を見直します

図は、文章では運べないものを運ぶための道具です。運ぶものが無い図は、読む人の時間を取るだけです。

手を付ける順番

• Step 1 ― いちばんよく電話で説明している内容を1つ選ぶ。ご依頼の流れか、料金のことが多いはずです
• Step 2 ― それが流れ・比較・構造のどれかを決め、紙に手書きで描く
• Step 3 ― 箱の中の言葉を、見出し語と一行まで削る
• Step 4 ― ページに文字で組み、自分のスマートフォンで確かめ、下に一行を添える

8. 雄喜晃の伴走：図にするかどうかから、一緒に決めます

私たち雄喜晃のホームページ制作では、図や表を飾りとして足すことはしません。お客様によく聞かれることを伺い、その中から図にすべきものを選ぶところから始めます。

私たちがやること

お打ち合わせで、電話やメールで何度も説明している内容を伺います。その中から、順番・比べること・位置の関係にあたるものを拾い、流れ・表・構造のどれにするかを決めます。箱の中の言葉を削り、言葉の形を揃え、表と手順の図は文字で組んで、スマートフォンでは縦に並ぶように作ります。図の下の一行も、こちらで案を書いてご確認いただきます。

写真を使う図の場合は、貴社で撮っていただいたものを整えて載せます。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。月5回までの更新代行も同じ月額の中なので、料金や手順が変わったときの表の書き換えも、ご連絡いただければこちらで反映します。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

手順や料金の中身そのものを、こちらで決めることはしません。どの順番で仕事を進めるか、いくらで受けるかは経営の判断です。私たちがするのは、決まった中身を伝わる形に組むところまでです。

また、他社のサービスを調べて並べる比較表は作りません。図の数で分かりやすさを演出することもしませんし、検索の順位や問い合わせの件数をお約束することもしません。

「説明すると長くなる仕事で、お客様に毎回同じことを電話で話している」という方は、一度ご相談ください。実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

9. まとめ：図は、文章では運べないものにだけ使う

ホームページで図や表を使うときに押さえることは、5つです。

• 運ぶものを見極める ― 順番なら流れ、比べることなら表、位置の関係なら構造。理由や気持ちは文章で
• 言葉は少なく ― 箱の中は見出し語と一行まで。形を揃え、数字は残す
• スマートフォンで確かめる ― 拡大しないと読めない図は、無いのと同じ。縦に積む
• 表と手順の図は文字で組む ― 中身が変わった日に、その場で直せる
• 下に一行、数は1〜2個 ― 何を見てほしいかを添え、作りすぎない

図を足すことが目的になると、ページはかえって読まれなくなります。読む人が頭の中でしている作業を、こちらで先に済ませておく。図の役目は、それだけです。

今日できることを1つだけ挙げます。この1ヶ月で、お客様に電話で説明した内容を3つ書き出してみてください。その中に、順番か、比べることか、位置の関係があれば、それが最初に図にするものです。

ぜひ一度、お話を聞かせてください。貴社の仕事の流れを、一枚で伝わる形にするところからご一緒します。