制作と検証

公開前に、画面と内容をどう確かめるか

作成日：2026年10月24日執筆：ツクノヴァ

公式サイトの制作では、文章を書き、画像を置くだけでなく、画面に表示して確かめる工程を設けています。画像中心の19ページ版を点検した際の確認方法と、その確認だけでは分からないことを紹介します。

正しい原稿が、そのまま表示されるとは限らない

原稿の内容が正しくても、実際のページでは文章が抜けたり、古い説明が残ったりすることがあります。画像のファイルが存在していても、参照先が違えば画面には出ません。保存できたことと、読む人が必要な内容を見られることは、分けて確認する必要があります。公式サイトの点検では、編集用の内容と、表示に使うページの見出し・本文・項目を照合しました。読み込みが成功したという応答だけで終えず、画像、リンク、文字の配置をブラウザーでも確認しています。この工程では、仕上がった画面の印象と、情報が正しく入っていることの両方を扱います。見た目が整っていても、製品の説明や提供状況が違えば案内としては不十分です。反対に、内容が揃っていても読みにくければ、必要な情報を確かめる負担が残ります。

画像が中心でも、説明は画面の文字として残す

今回の構成では、トップページの大きな画像に加えて、会社紹介、事業紹介、制作ガイドへ写真を配置しました。画像をきっかけに内容をつかみ、その下や隣の説明へ進めることを狙っています。一方、詳しい文章を画像の中に閉じ込める構成にはしていません。 見出しと本文はページの文字として置き、画面が狭くなったときに折り返して読めるようにしました。画像には内容に合う説明を付け、写真風の制作イメージを実績や実機画面と混同しないようにしています。写真の量を増やすだけでは、何を伝えたいページかは明確になりません。会社の考え方、製品の内容、制作の準備といったページごとの役割に合わせ、画像と文章が同じ話題を説明しているかを見直しました。

三つの表示幅で、同じページを読む

画像中心の19ページ版では、390、768、1200ピクセルの検証枠を使い、合計57の表示条件を確認しました。スマートフォン、タブレット、パソコンに近い幅を同じページへ与え、横にはみ出す箇所や文字揃えを見ています。小さな画面では、左右に並ぶ画像と文章が縦に変わります。このとき、画像が細くなりすぎないか、長い見出しが枠から出ないか、読む順序が分かるかが確認点になります。幅を狭めただけで終えず、実際の表示をスクリーンショットでも見ました。この検証はブラウザー内の表示幅を変えた確認です。すべての実機、OS、ブラウザーで検証したという意味ではありません。確認できた条件を記録し、別の環境で起きた問題が分かった場合には、その条件を追加して確かめる考え方です。

句点、行幅、文字揃えをそろえる

日本語の本文は、句点の後で改行する形に統一しました。長い説明を一続きの塊にせず、一文ずつ意味を追いやすくするためです。見出しと本文は左寄せにそろえ、節ごとに視線の開始位置が大きく変わらないようにしています。文章を左右いっぱいまで広げると、横長の画面では一行を追う距離が長くなります。詳細ガイドでは本文の幅を制限し、左側の見出しと右側の説明を分ける配置にしました。狭い画面では、見出しの次に本文が続く形へ変えています。短いカードの説明と、段落が続く記事では読み方も異なります。同じ文字サイズを機械的に当てるのではなく、一覧で比較するとき、詳しい内容を読むとき、それぞれの役割に合わせて余白と行の間隔を確認しました。

リンクの先まで確認する

リンクの見た目があるだけでは、目的の案内へ進めるとは限りません。製品のカードは該当する紹介ページへ、ガイドの目次は同じ記事の該当箇所へ、関連する説明は対応するテーマのページへ進む必要があります。今回の点検では、ローカルのページや画像の参照を照合し、一覧と詳細、製品とガイドのつながりを確認しました。見た目が似たリンクでも役割は異なるため、どこへ進むかが文言から分かることも見直しています。未確定のサービス利用先については、仮のURLで申込みへ進めるようにはしていません。制作中の説明ページを見られること、サービスを利用できること、支払いができることは別です。読む人が現在の状態を判断できるよう、提供状況とリンクの対応を揃えます。

同じ説明を繰り返さず、その画像の意味を書く

制作途中のガイドでは、複数の画像に同じ説明を付けていた箇所を見直しました。商品写真のページとデータ整理のページでは、画像を見せる理由が異なります。共通の言葉を繰り返すだけでは、読み手が新しく理解できる内容は増えません。商品写真のガイドでは、撮影候補と掲載位置を並べて、向きや余白を確認する意味を説明しました。 CSV準備のガイドでは、項目や値の扱いをそろえたうえで、元の内容と結果を照合することへつなげています。説明の修正後には、九つのガイドを二つの幅で再確認しました。文章を詳しくする作業と、実際の画面で読みやすいかを確かめる作業を往復することで、量だけが増えて読みにくくなることを防ぎます。

表示の確認と、公開後の確認を分けて続ける

この記事で紹介した確認は、公式サイトの制作中に行った点検です。実際に公開する際には、本番のアドレスでページが開くか、HTTPSで接続できるか、画像やリンクが取得できるかを改めて確かめる必要があります。また、表示できることと、検索結果に掲載されることも別です。公開時の設定を確認し、公開後は検索エンジンがページを発見できているか、内容の更新が反映されているかを見ていきます。検証した画面数を、そのまま集客や売上の成果として扱うことはしません。公開後に文章や製品を追加する場合も、変更した場所だけでなく、そこへつながる一覧や関連ページを確認します。最初の公開を終点にせず、情報の追加と確認を繰り返せるようにしておくことを、制作工程の一部にしています。