ITサービスのホームページに実際の画面を載せたいけれど、どこまで見せればよいか。機能を全部撮影すると長くなり、画面を小さく並べただけでは、何ができるのか伝わらないことがあります。
公開する範囲は、見た人に何を確かめてもらうかから決めます。画面に並ぶ情報を見れば分かることは静止画、操作と変化を追いたいことは動画、自社の条件を当てはめる確認は個別デモへ分けると、紹介する内容を絞りやすくなります。素材には公開用のデータを使い、実際の製品仕様と説明が合っていることを確認します。
全部の機能ではなく、一つの仕事を見せる
ここでは、備品の購入申請を扱う架空のサービスを例にします。担当者が品名と用途を入力し、承認者が内容を確認し、申請者が結果を見る仕事です。これは説明用の設定で、特定製品の機能を紹介するものではありません。
最初の公開デモで伝えたいのが「申請の進み具合をどこで確認できるか」なら、申請一覧と状態の表示を中心にします。管理者が初期設定をする画面や、すべての帳票の出力まで続けると、見たい場面にたどり着く前に説明が増えてしまいます。
逆に、入力から承認までの操作感を確かめてもらいたいなら、完成した一覧だけでは足りません。どの画面で何を押すと、次にどんな状態になるかを見せます。同じ製品でも、答えたい質問によって必要な画面は変わります。
静止画・動画・個別デモを、確かめる内容で選ぶ
備品申請サービスなら、次のように見せ方を選べます。形式をすべて用意する前に、サイト上でどこまで理解してもらうかを決めます。
| 見せ方 | 確かめてもらうこと | この例で見せる範囲 |
|---|---|---|
| 静止画と説明 | 何の情報が、どこに表示されるか | 申請一覧の品名・申請者・状態を示す |
| 短い操作動画 | 操作すると、表示や状態がどう変わるか | 申請を送り、承認後の結果を開く場面を示す |
| 担当者による個別デモ | 自社の手順や条件に合わせて使えるか | 承認者が複数いる場合など、相談内容に沿って説明する |
静止画には、見てほしい箇所を説明する文章を添えます。画面全体を縮小して細かい文字を読ませるより、必要な部分を拡大し、「ここで申請の状態を確認します」と役割を示す方が内容を追いやすくなります。ただし、切り取ったことで別の画面と誤解される場合は、全体の中の位置も補います。
動画は、再生する前に何を見られるかを示します。申請者から承認者へ画面を切り替えるなら、今どちらの役割で操作しているかが分かる字幕や説明を入れます。無音でも主要な流れを追える説明と、本文の要点を用意すると、再生できない場面でも判断材料を読めます。
サイボウズの「動画で学ぼう」では、初めての方向けの概要と、項目の作成、一覧の絞り込み、データ入力などの操作別動画を分けて案内しています。概要と詳しい操作を一つに詰め込まず、知りたいことに合わせて選べる掲載構成の例です。
公開用のデータで、実際の動きを再現する
撮影には、説明に必要な項目だけを入れた公開用の環境を用意します。顧客の画面を撮ってから氏名だけ隠す方法では、添付ファイル名、履歴、コメント、通知などに別の情報が残る可能性があります。画面を切り替える動画では、途中で表示されるものも確認が必要です。
架空の備品申請なら、公開用の品名や用途を登録し、実際の製品で申請から結果の確認まで操作します。文章や数字を適当に埋めるだけでなく、前後の画面で同じ申請を追えるようにします。利用場面が自然につながっている方が、機能の説明にも使いやすくなります。
社名や個人名を実在の顧客から借りず、公開用の仮データであることを画面の近くに記します。撮影を始める前には、別の顧客環境へ切り替わらないか、通知やブラウザのタブに見せない情報がないかも確認します。個別デモでも、他社の情報をそのまま見せる理由にはなりません。
完成した画面と、説明用のイメージを区別する
開発前の画面案や、説明のために整えたイメージを載せる場合は、その状態を明記します。実際には操作できないボタンや、まだ提供していない機能を、利用中の製品画面のように紹介しないためです。
実製品の画面でも、特定のプランや追加設定が必要な機能なら、見ている画面の条件を添えます。「この操作ができる」と思って相談した後に、別契約や個別開発が必要だと分かる構成は避けたいところです。動画で待ち時間を省略した場合も、必要に応じて省略したことが分かる表示にします。
公開資料で説明しきれない条件は、「自社の承認手順を相談する」など、何を確かめられる個別デモなのかを示して案内します。単に「詳しくはこちら」と置くより、公開画面と個別相談の役割がつながります。
操作できるデモは、紹介ページとは別に範囲を決める
訪問者が自分で触れるデモを用意する場合は、画面を掲載するだけの制作とは仕事が変わります。どこまで操作でき、入力した内容がどう扱われ、試用後に何が残るかを決める必要があります。見た目が製品に似ていても、限られた操作を再現したものなら、その範囲が分かる案内にします。
まず静止画や動画で説明できるかを検討し、操作体験が導入判断に必要なら、製品担当者と別の制作範囲として相談します。操作できるデモを、通常のホームページ制作に当然含まれるものとして進めないことが大切です。
製品が変わったときに、差し替える場所を残す
公開後に項目名や操作が変わると、画面だけでなく字幕、本文、説明資料も古くなることがあります。どの利用場面をいつの仕様で紹介したか、元の画像や動画がどこにあるか、誰が仕様を確認するかを残しておきます。変更の影響がある素材を見つけられれば、すべて撮り直す前に必要な差し替えを判断できます。
BämのIT・BtoBサービスのホームページ制作では、利用する仕事、機能、条件を原稿・図・画面で伝える構成を考えます。公開できる製品画面と営業でよく受ける質問を共有し、サイトで見せる範囲と個別に説明する範囲を相談できます。製品自体や操作可能なデモの開発は、紹介サイトの制作とは分けて確認します。
参考資料
- サイボウズ：動画で学ぼう｜kintone（動画一覧の分類・案内構成を参照）
- Bäm：IT・BtoBサービスのホームページ制作
資料確認日：2026年9月21日。備品申請サービスの機能と公開例は説明用の仮例であり、kintoneの仕様を示すものではありません。
