ホームページの説明図を依頼する前に｜写真・文章との役割と必要資料を決める

ホームページの説明図を依頼する前に、読者の問いから順序・比較・関係の型を選ぶ方法を紹介。写真・文章との分担、元資料、発注シート、矢印の意味、スマートフォンでの表示、説明文と編集用データまで整理します。

サービスの流れや部門の関係を、ホームページで分かりやすく見せたい。図を依頼したいと思っても、営業資料をそのまま渡してよいのか、完成形まで社内で考えるべきか迷うことがあります。見栄えのよい参考画像だけを共有すると、色や形は似ていても、伝えたい関係が違う図になるかもしれません。

説明図を依頼する前に決めたいのは、読者が図を見て何を判断するかです。そのうえで、順序、比較、関係のどれを見せるのかを選び、元資料と確認者を用意します。この記事では、ホームページを改善する経営者やWeb担当者に向けて、説明図の発注範囲を具体化する方法を紹介します。

図にする業務の事実は、事業者側が確認する内容です。制作会社は、その事実を読む順番や配置へ変換します。きれいな図を作る作業と、矢印や枠が示す意味を確かめる作業を分けて進めましょう。

最初に、図を見た後に答えられる問いを書く

「サービスを分かりやすくする」だけでは、図に載せる範囲が広すぎます。「申し込み後に何が起きるか」「二つのサービスはどこが違うか」「自社と協力会社は何を担当するか」のように、読者が答えられるようにしたい問いを一つ書きます。

例えば、相談の流れを知りたい読者に、すべての社内部署を並べた組織図を見せても、次に何をすればよいかは伝わりません。逆に、窓口の違いを知りたい読者には、作業の順番だけを示す図では足りません。目的を一つに絞ると、必要な登場人物や工程、説明の量を選びやすくなります。

掲載するページと場所も、同時に決めます。サービスの概要を読む直後なのか、申し込みボタンの手前なのかで、図に必要な前提が変わります。依頼書には対象ページと前後の見出しを添え、図だけを別の資料として見たときの印象で判断しないようにします。

英国の統計局ONSの図に関する案内でも、伝えるメッセージと図の必要性を先に考える方針が示されています。これは同機関の制作方針ですが、説明図を増やす前に目的を確かめる参考になります。ONSの説明図に関する案内

写真・文章・図に、それぞれ任せる仕事を分ける

写真は、製品の外観、場所、作業の様子など、実物の状態を見せる材料になります。図は、写真一枚では追いにくい順番や役割のつながりを整理できます。文章は、その図に載せきれない条件や例外、用語の意味を説明する役割を担います。

三つを同じ内容で埋める必要はありません。例えば、設備の形を確かめる写真に、工程の順序まで無理に表現させず、流れは別の図で示します。図の中に長い注意書きを詰める代わりに、近くの本文で条件を説明する方法もあります。読者がどこを見れば何が分かるかを、掲載場所ごとに整理します。

一方、短い箇条書きで十分に伝わる内容まで、必ず画像にする必要はありません。説明が頻繁に変わる項目なら、Web上の文章や表の方が更新しやすい場合もあります。「図を一枚作る」という成果物を先に固定せず、図と文章を組み合わせる範囲から相談できます。

原稿全体の作成も依頼する場合は、ホームページの文章を丸ごと作ってほしいときの依頼方法で対象ページと取材の範囲を整理し、その中で図が必要な箇所を指定すると話を分けやすくなります。

順序・比較・関係から、図の型を選ぶ

型を選ぶときは、見た目が好みかより、どの意味を伝えるかを優先します。順序を示す図は、開始点と進む方向が必要です。比較では、同じ項目を同じ基準で並べます。関係を示す図では、誰が誰へ何を渡すのか、どこまでを一つの範囲に含めるのかを確認します。

次の表は、発注時の材料をそろえるための設計例です。具体的な業務内容や提供条件を定めるものではありません。自社の問いに近い行を選び、元資料と確認事項を書き換えて使います。

読者が判断すること	図の型	渡す元資料	先に確認する意味
相談後に何が進むか	順序を示す図	実際の段階と開始・終了の説明	必ず通る段階か、途中の分岐はあるか
二つのサービスはどう違うか	同じ軸で比べる図	両方の対象・範囲・条件	同じ基準で比較できるか
誰が何を担当するか	役割の関係図	担当範囲と受渡しの説明	矢印は依頼・連絡・納品のどれか
全体と一部分はどうつながるか	範囲を示す図	構成要素と含まれる範囲	枠の内外が何を意味するか

例えば、単に関係がある二つのサービスを矢印でつなぐと、必ず前後の順番で利用するように見えることがあります。比較対象を左右に並べたつもりでも、左側だけ大きくすると、優先度や規模の違いだと受け取られるかもしれません。配置、矢印、枠、大きさも意味を持つものとして確認します。

色を使って区別する場合は、項目名や記号なども併用し、色だけを頼りに読む形にしません。図の中で同じ色が別の意味を持たないよう、凡例や説明の要否も検討します。装飾の細部を決める前に、図を文章で言い換えたときに元の説明と一致するかを確かめます。

問いに合わせて順序・比較・関係の図を選ぶ設計例 — 説明図の型を選ぶ設計例。実際の業務手順やサービスを示したものではありません。

この図では、「次に何が起きるか」には順序、「どこが違うか」には比較、「誰とつながるか」には関係を対応させています。確認する点はそれぞれ、開始点、比較する軸、矢印の意味です。同じ内容を一つの型へ押し込まず、問いから選ぶための見本として使います。

元資料は、図にする事実へ戻れる形で渡す

営業資料や手書きのメモからでも相談は始められます。ただし、その資料が現在も正しいか、どこまで公開してよいかは確認が必要です。完成した図の見本を作ることよりも、段階や担当、条件について質問されたときに、根拠となる資料と確認者へ戻れることを優先します。

資料を渡す際は、図にする部分を指定し、使ってよい名称や数値、古くなった記載を区別します。「三ページ目の流れは現行ですが、担当部署の名称は変更済み」のような補足があると、制作会社が古い情報をそのまま図にすることを防げます。未確認の項目は空欄のまま、確認待ちと分かる状態で渡します。

参考にしたい他社の図がある場合は、何を参考にしたいかを言葉で添えます。「段階ごとに区切る見せ方」「登場する役割の分け方」など、構造の希望を伝えます。他社の図の文章、数値、固有の説明を自社の事実として置き換える指示にはしません。

手書きの下書きがあれば、箱と線だけでも役立ちます。線が何を表すか、省いてよい段階はどれかを説明できるようにします。資料内の細かな条件まで載せたい場合は、一枚を密にする前に、概要図と詳細説明へ分ける案を相談します。

発注シートには、図に入れないものも書く

架空のサービス案内を例にすると、依頼の主旨は「初めての人が、相談後に何を準備するか分かる図」と書けます。掲載場所はサービスページの相談ボタンの直前、元資料は担当者が確認した受付説明、確認者は受付責任者とします。この時点では、色やアイコンの指定よりも、誰が何を分かるようにするかが大切です。

そこへ「料金の確定や契約成立を表す図ではない」「社内の担当間の連絡は省く」と対象外を添えます。省く内容が決まると、公開する説明と社内資料の境界が見えます。一方で、読者が準備するものに影響する分岐は、見やすさのために消さず、図に残すか本文で説明するかを相談します。

不明な点は「資料を送った後、必ず見積もりに進むのか確認中」のように残します。制作会社には、確認前の段階を確定した矢印でつながないよう伝えます。初稿で仮の表現を使う場合も、確認箇所を明示し、そのまま公開用の図へ移らない進め方にします。

また、完成図を他の場所でも使う予定があるなら、最初に伝えます。Webページの本文と一緒に読む図と、営業資料に単独で置く図では、必要な見出しや補足が違います。今回はWeb掲載だけを依頼するのか、別用途の版も含めるのかを分けると、納品後に文字の小ささや説明不足が分かる事態を減らせます。

この発注例を自社へ当てはめる際も、未確定の業務を図の都合で決めないことが前提です。発注シートは正しい答えを埋める試験ではなく、確認が必要な事実と制作作業を分けるための道具として使います。

下書きでは、色より先に矢印と省略を確認する

最初の確認は、白黒の箱と文字でも行えます。誰がどこから読み始めるか、矢印をたどると何が起きるか、同時に進むものが前後関係に見えないかを、業務を知る担当者に確認してもらいます。この段階で意味が違っていると、配色や写真を加えても説明は正しくなりません。

特に注意したいのは、見やすくするための省略です。例外をすべて図へ入れる必要はありませんが、相談だけで必ず契約へ進むように見えるなど、判断を変える省略は避けます。図が概要なのか、全段階を網羅するものなのかを説明し、省いた条件を本文のどこで補うかを決めます。

確認者には「問題がないか見てください」だけでなく、確認してほしい箇所を指定します。「この二段階は順番が固定か」「矢印は物の受渡しか、連絡か」と質問すると、見た目の好みと事実確認を分けられます。複数の意見が出たときは、制作担当へ相反する修正を個別に送らず、内容の確認窓口でまとめます。

文章と図の表現を一緒に改める場合は、文章の書き直しで事実を確認する工程とつなげて管理します。図だけ新しい名称に替わり、前後の文章が古いまま残ることを防ぐためです。

掲載幅と、図を読めない場合の説明も依頼に含める

会議室の大きな画面で読める図が、スマートフォンでも読めるとは限りません。文字を含む横長の図をそのまま縮めると、内容が見えにくくなります。依頼時には、ページのどの幅で表示するか、狭い画面では縦に組み直すか、複数の図へ分けるかを相談します。

縦に組み直す場合は、読む順番や関係が変わらないことを確認します。横並びの比較を上下に並べただけで、上から下へ進む手順に見えていないかも見ます。スマートフォン向けの画像を別に作るなら、両方を同じ改訂時に直す範囲まで依頼に含めます。

図の内容は、画像が見えない場合にも伝わる説明を用意します。W3Cの複雑な画像に関する案内では、画像を識別する短い説明と、重要な情報を伝える詳しい説明を組み合わせる方法が示されています。短い代替テキストだけにすべてを詰めず、本文や近くの説明で関係を伝えることを検討します。W3C WAIの複雑な画像の説明方法

発注時には、図の画像だけでなく、見出し、図の短い説明、本文で補う内容まで成果物として確認します。これらを用意しただけでサイト全体のアクセシビリティを保証できるわけではありませんが、画像の制作と文章の準備が別々に止まることを避けられます。