本文へ移動
TOOL GUIDE

何を、どの順番で 伝えるか。

ホームページづくりは、最初に目的を決めるところから。 会社・お店・商品を紹介するページの構成と、制作前にそろえたい素材を整理します。

構成図と写真を机に並べた制作準備のイメージ
01

目的を一つ、先に決める

最初に考えるのは「見た人に何を知ってほしいか」です。 会社の仕事を知ってほしいのか、店舗への来店を検討してほしいのか、一つの商品の特徴を理解してほしいのかで、必要な情報は変わります。 一枚のページにすべてを詰め込む前に、最も伝えたいことを短い一文にまとめます。 次に、読む人がその目的へ進むために必要な情報を書き出します。 店舗なら場所と営業情報、商品なら使う場面と特徴、会社なら事業と製品が出発点です。 目的と直接関係のない内容は、別ページへ分けるか、掲載を見送る判断ができます。

02

トップと詳細ページの役割を分ける

トップページでは、何のサイトなのかを画像と短い説明で伝えます。 そこから事業、製品、使い方などの詳細へ進めるようにすると、初めて来た人も目的の情報を選びやすくなります。 たとえば製品が複数ある会社なら、トップには代表製品を置き、すべての製品は一覧ページへまとめます。 製品ごとの詳しい機能や利用条件は、それぞれの紹介ページで説明します。 後から製品が増えても、トップページを際限なく長くする必要がありません。 同じ説明を複数のページへ書くと、変更時に内容が食い違う原因になります。 共通の説明は一か所にまとめ、関連するページから案内します。

03

ページの順序は、読む人の疑問に合わせる

見出しだけを上から読み、内容の流れが分かるか確かめます。 「何を提供しているか」「どんな場面に役立つか」「具体的に何ができるか」「どこで確認・利用できるか」という順序なら、初めて見る人も判断を進められます。 会社の内部事情や制作の作業メモは、訪問した人が知りたい情報とは限りません。 各段落が、読む人の疑問に答えているかを見直します。 リンクの文言も「こちら」だけで済ませず、「ツール一覧を見る」「制作の流れを読む」のように、移動先が分かる表現へ整えます。 まだ用意できていない利用先には、動かないボタンを置かず、現在の準備状況を伝えます。

写真とページの順序を並べた構成案写真とページの順序を並べた構成案

ページごとに伝える内容を決めてから、見出しと写真を組み合わせます。 必要な情報が欠けていないか、紙の段階でも確認できます。

04

写真は、役割を決めてそろえる

大きく見せる写真は、ページのテーマを一目で伝えるものを選びます。 商品を比較する画像、操作を説明する画面、雰囲気を伝える写真では役割が異なります。 同じような写真を何枚も並べる前に、それぞれが何を伝えるかを確認します。 操作画面は、必要な文字やボタンが読める範囲で見せます。 細部を切り落として見栄えだけを優先すると、機能の説明として役に立たなくなります。 写真の横や下には、何を示しているかが分かる短い説明を添えます。 実画面とイメージ画像を混同せず、イメージ画像を実績や実在する設備の証拠として扱わないことも大切です。

05

文章は、画像で分からないことを補う

画像だけでは、対応している作業、利用できる範囲、現在の提供状況を正確に伝えきれません。 見出しには段落の要点を、本文には選ぶために必要な説明を置きます。 一文に複数の話題を詰め込まず、文の終わりで改行すると、内容のまとまりを追いやすくなります。 同じ意味の宣伝文句を繰り返すより、利用する場面や確認できる機能を具体的に示します。 製品の説明では、完成している機能と構想を分けます。 料金や提供日が決まっていない場合は、確定したように書かず、案内できる段階になってから更新します。

06

更新する場所を決めておく

公開後に変わる情報を、制作の段階で洗い出します。 店舗の営業情報、商品の内容、ツールの機能や提供状況は、同じ頻度で変わるとは限りません。 変更する場所が整理されていると、小さな更新のたびにページ全体を作り直す負担を減らせます。 製品紹介は、名称、対象の作業、画像、機能、提供状況、詳細ページへのリンクを同じ形式でそろえます。 新しい製品を追加したときも、既存の製品と比較しやすくなります。 更新後は、本文だけでなく一覧や関連ページに古い案内が残っていないか確認します。

07

制作へ進む前の確認

ページの目的、必要な見出し、使用する画像、確定している文章をまとめてから編集を始めます。 未確定の箇所は制作資料に残し、公開前に確認できるようにします。 一度に完成形を決めようとせず、構成を選び、内容を入れ、実際の表示で読みやすさを確かめる順番で進めます。 ホームページ作成さんでは、サイトの種類と構成を選び、ページやセクションを編集し、プレビューで確認する流れを扱います。 現在の機能と提供状況は、製品紹介ページをご覧ください。

RELATED TOOL

製品の機能と提供状況を見る

ホームページ作成さんの紹介ページで、制作画面と現在の提供状況をご確認いただけます。

ホームページ作成さんを見る