TOOL GUIDE

編集したら、画面で確かめる。

文章と画像を入れたあとが、仕上げの時間です。 パソコンとスマートフォンの両方で、読みやすさと案内のつながりを確認します。

見出しと本文を分けて編集する

最初に見出しを読み、ページで伝えたいことが順に並んでいるかを確認します。見出しだけでは伝わらない条件や具体例を、本文へ補います。見出しを大きくするだけで情報の整理ができるわけではありません。同じ話題を扱う内容は一つのまとまりにし、別の話題へ進むときに新しい見出しを置きます。 本文は左揃えを基本にして、一文の終わりで改行します。長い文章を無理に一行へ収めたり、単語の途中へ改行を入れたりせず、画面の幅に合わせて自然に折り返すようにします。

画像は、表示した大きさで確認する

編集画面で選んだ画像が、実際のページでも読み取れるとは限りません。小さな画面の文字をさらに縮小すると、何の画面かは分かっても、操作の内容が伝わらなくなります。操作を説明する画像では必要な範囲を示し、近くの文章で画面の意味を補います。縦長の写真と横長の写真を同じ枠に置く場合は、切り抜きによって主役が隠れていないかも見ます。商品写真や制作画面を比較させたいときは、表示の比率や余白をそろえます。装飾用の写真と製品の実画面が混ざる場合は、説明を添えて役割を明確にします。

スマートフォンでは、縦に読む流れを見る

パソコンで二列や三列に並ぶ内容は、スマートフォンでは縦に並ぶことがあります。画像、見出し、本文、リンクの順番が自然かを確認します。カードが縦に続いたときに、どの画像と説明が一組なのか分かる余白も必要です。見出しが一文字ずつ折り返していないか、画面の外へ文字や画像がはみ出していないかを見ます。メニューを開き、目的のページへ進んだあと、再び一覧やトップへ戻れるか確かめます。パソコンの見た目を小さく縮めるだけで済ませず、スマートフォンの表示幅で内容を読み直すことが大切です。

画面構成と掲載写真を見比べるイメージ

修正したページは、文字だけでなく写真の切れ方や前後の余白も確認します。スマートフォンとパソコンで、同じ情報が読み取れるか見比べます。

リンクは、文章と移動先を一組で確かめる

紹介ページへのリンクと、サービスを利用するためのリンクは、役割が異なります。「詳しく見る」は説明へ、「利用する」は利用先へ進むなど、文言と結果を一致させます。まだ利用先がない場合は、準備中と分かる表示にします。画像全体がリンクになっているカードでは、画像と文章が同じページへつながるか確認します。主要メニューだけでなく、本文中のリンク、一覧からのリンク、ページ末尾の関連リンクも確認します。リンク先のページ名や提供状況を変更したときには、元のページの案内も見直します。

一覧と詳細の情報をそろえる

一覧に書いた製品名、説明、画像、提供状況が、詳細ページと一致しているかを見ます。一覧だけが古い状態だと、詳しく読んだ人がどちらを信じればよいか迷います。新しいツールを追加するときは、既存の詳細ページを置き換えず、そのツール専用の紹介先を用意します。同じ形式で追加していけば、製品が増えたあとも一覧から探しやすくなります。カテゴリを増やすときは、分類名だけで意味が伝わるかを確かめます。分類を細かくしすぎて一件ずつに分かれる場合は、使う場面が近いものをまとめる方法もあります。

公開用データの作成と、公開を区別する

公開用データを作成できたことと、インターネット上でページを見られることは別の段階です。作成したファイルの内容を確認し、実際の掲載先でページと画像が正しく表示されるかを確かめます。公開先の情報、掲載する文章、サービスへの案内は、公開前に確定させます。ホームページ作成さんの製品紹介では、端末別プレビューと公開用データ作成の機能をご案内しています。一般提供に関する条件や料金は、準備が整った段階でお知らせします。制作途中の画面を見ている段階では、すでに一般公開されているものとして扱わないようにします。

更新のたびに、変更した前後も読む

一つの文章を直したときは、その文章だけでなく、前後の見出しや案内も読みます。新しい説明が重複していないか、古い説明と矛盾していないかを確認するためです。画像を差し替えたときは、画像の説明とリンク先も一緒に見直します。大きな変更をした場合は、トップ、一覧、詳細という実際の移動順で確認すると、案内の漏れを見つけやすくなります。更新内容を記録し、次に直す場所が分かる状態で保管します。毎回同じ確認項目を使うことで、製品やページが増えても仕上がりをそろえやすくなります。

RELATED TOOL

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

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

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

編集したら、 画面で確かめる。