ARCTANGENTIT・BtoBコンテンツ制作

導入事例のデザイン・レイアウト

Web記事・営業資料の見せ方

この記事の内容
  1. 読む場面に合う形式を選ぶ
  2. 三つのテンプレートで、情報の配分を比べる
  3. 見出し、要約、本文を同じ説明で埋めない
  4. 図版は、変わった箇所が分かる範囲に絞る
  5. 写真とコメントは、話の近くへ置く
  6. 実際の読み方で、最終確認する

導入事例のデザインは、Webでじっくり読む記事、商談で見せるPDF、社内で回覧される資料によって変わります。最初に決めたいのは色や装飾より、その資料が誰に、どんな場面で読まれるかです。

口頭の説明がある商談と、担当者から転送されたPDFでは、必要な補足も違います。紙面の美しさと、読み手が判断できることを一緒に考えます。

見た目を決める前に、読まれ方を決める
  1. 読む場面

    商談、Web閲覧、社内での回覧

  2. 紙面の配分

    要約・本文・図・写真を選ぶ

  3. 実物で確認

    実寸の印刷と、実際の端末

読む場面に合う形式を選ぶ

形式 読まれ方 デザインで先に決めること
Web記事 画面を縦に読み進め、必要な箇所を探す 冒頭の要約、見出し、スマートフォンの表示
1ページの営業用要約 商談中に見せる、短時間で概要を確認する 主な課題と変化、残すコメント、情報量
2ページの事例資料 経緯を読み、社内へ持ち帰って検討する 前半と後半の役割、本文と図版の配分
複数事例を収録する事例集 目次や要約から、関心のある事例を選んで読む ページごとの役割、比較、移動のしやすさ

営業用要約や事例資料は、PDFで送ったり、A4用紙に印刷したりして使えます。詳しい選定理由や導入の工夫まで伝えたい場合は、ページを増やすことも検討します。一ページに収める必要があれば、概要版から詳しい記事へ案内する方法もあります。

三つのテンプレートで、情報の配分を比べる

以下はビズログの実際のデザインテンプレートです。社名、人物情報、本文、数値は説明用のサンプルであり、実案件の成果を示すものではありません。

ビズログのA4・2ページのデザインテンプレートA
文章をじっくり読ませる

本文を中心に、企業プロフィールと人物写真を添えた構成。導入の経緯や判断を詳しく伝えたい事例に。

ビズログのA4・2ページのデザインテンプレートB
課題と変化をひと目で伝える

課題・解決の要約と構成図を加えた構成。業務の流れやシステムの役割を、本文と合わせて確認できます。

ビズログのA4・2ページのデザインテンプレートC
人物や現場を大きく見せる

メイン写真を広く取った構成。話し手や導入した現場の様子を、記事の入口で伝えます。

ビズログのデザインテンプレート。画像内の社名・内容は説明用のサンプルです。ビズログでテンプレートを見る

文章中心の構成では、見出しと本文の流れを主役にできます。課題・解決と図版を加えた構成では、概要を短くつかめます。写真を広く取る場合は、写真自体に読者が知りたい情報があるかを確かめます。

導入した設備や利用する現場を見せたいのか、話者の表情を伝えたいのか。写真の役割を考え、本文に必要なスペースとの配分を決めます。

実際の記事で比べたい方は、公開中の参考記事もご覧ください。自治体のリモートアクセス導入事例では、本文と導入背景・効果の要約、ネットワーク構成図がどう役割を分けているかを見られます。自社の紙面を考える際も、本文だけでは伝えにくい仕組みを図にするか、短時間で概要を読める要約を置くかを検討します。

見出し、要約、本文を同じ説明で埋めない

見出しは記事で何が起きたかを知らせ、要約は全体像を伝え、本文は判断や変化の経緯を読ませます。三つの役割を分けると、同じ説明を何度も読む負担が減ります。

要素 架空の事例での書き分け
見出し 申請の状況を、担当者に聞かずに確認できるように
要約 紙とメールの申請をワークフローへ移し、進捗が見える運用に変更
本文 運用ルールをどう見直し、試行で何を修正したかを説明
図版 以前の確認経路と、導入後の確認方法を比較

成果数値を大きく見せる場合は、測っている対象と比較期間を近くに添えます。注記だけが小さく離れると、数字の意味を取り違えられることがあります。

図版は、変わった箇所が分かる範囲に絞る

システムの全構成を一枚に載せようとすると、矢印や機器が増えて読みにくくなります。導入事例では、今回の変化を理解するために必要な範囲を選びます。

申請状況を確認する手順

導入前

  1. 申請者が問い合わせ
  2. 管理部門が承認者へ確認
  3. 申請者へ状況を回答

導入後

  1. 申請者が画面で確認
  2. 例外のみ管理部門へ相談

説明用の架空の例です。ここで比べているのは申請の「状況確認」の手順で、承認そのものは引き続き必要です。図の対象を明記すると、何が変わり、何が変わっていないかを読み取りやすくなります。

写真とコメントは、話の近くへ置く

人物写真には部署・役職・氏名を添え、どの立場の発言かが分かるようにします。複数名が登場する場合は、写真とコメントの対応を崩さないことが優先です。

長いコメントを大きく抜き出すときは、条件が落ちていないかを確認します。「一部の業務では」という前提を削って強調すると、本文とは異なる意味になることがあります。

撮影前であれば、写真の準備と撮影リストから必要なカットを決められます。構図を先に考えておくと、後で無理に切り抜く作業も減らせます。

実際の読み方で、最終確認する

制作画面で拡大していると、小さな注記まで読めてしまいます。印刷物ならA4の実寸で、Web記事ならスマートフォンで、本文と図版の文字まで確かめます。

既存の紙面を使う場合も、記事ごとの文字量や素材に合わせた調整は必要です。テンプレートを選んだ後に原稿を押し込むのではなく、原稿とレイアウトを行き来して仕上げます。

文・編集:株式会社アークタンジェント

IT・BtoBの導入事例、取材記事、営業資料、ホワイトペーパーなどを企画・制作しています。

関連する解説・資料(ビズログ)

外部サイトのページが別タブで開きます。

作りたい事例について、お聞かせください。

取材先や内容が決まっていなくても、ご相談いただけます。商材、読んでほしい方、Webや営業資料などの使い道を伺い、必要な工程と費用をご案内します。

制作例をご希望の方は、業種や用途を添えてお問い合わせください。ご案内可能なものから、担当した工程とあわせてご紹介します。

ご相談先:株式会社アークタンジェント