ウェブサイトの設計と開発

訪問者が次の一歩へ進めるサイトに。

何を提供し、どこに対応し、どう問い合わせればよいかを明確にします。訪問者がその目的を果たせるよう、ページと機能を設計・修正します。

アール・デコ風のウェブサイトのイラスト。分かりやすい経路が目立つ操作ボタンにつながっている。

問い合わせの前に生まれる疑問に答える。

キッチン設置業者のサイトを思い浮かべてください。住まいの所有者が知りたいのは、どんな工事を受けるのか、どの地域に対応するのか、見積もりには何を送ればよいのかです。見た目が整ったページでも、この三つが分からないことがあります。

答えを一つの場所にまとめます。役立つサービスページは、工事内容、関連する例、問い合わせ方法を結び付けます。イラストは、それぞれのつながりを示しています。

キッチン設置のサービスページを描いた図。工事内容、対応地域、問い合わせに必要な情報が結び付いている。
図解例:一つのサービスページで、工事内容、対応地域、送るべき情報を伝えます。

ページの各部分に役割を持たせる。

そのサービスが自分に合うか判断できるように、ページのスペースを使います。書いていなければ訪問者が質問することになる情報から示しましょう。

工事内容と対応地域を具体的に。

「京都市のキッチン設置工事」は、「高品質なソリューション」より具体的です。どの作業を含むのか、訪問者の地域に対応するのかを説明します。対応地域は簡単に更新できるようにしておきます。

その例が何を示すのかを説明する。

キッチンの写真には説明が必要です。新しい収納を設置する工事と、扉だけを交換する工事は異なります。短いキャプションで範囲を示し、私的な情報は除きます。イラストはイラストと分かるようにしましょう。

次のリンクの目的を明確にする。

「キッチンの計画について相談する」なら、問い合わせの目的が伝わります。フォームやメールを開く前に、場所、簡単な説明、参考になる写真など、何を送ればよいかを示します。

画面の送信確認で、チェックはまだ半分。

フォームの項目名は分かりやすくし、必要な情報だけを尋ね、エラーの直し方を説明します。送信後は何が起きたのかを伝えます。W3Cのフォームガイドで基本を確認できます。

受信側も確認します。サイト所有者の了承を得て、テストと明記したメッセージを送り、指定の受信箱に届くことを確かめます。画面の確認表示だけでは、配信された証拠にはなりません。

スマートフォンに問い合わせの送信確認が表示され、矢印が受信箱に届いた同じメッセージへつながっている。
両側を確認します。訪問者には送信確認が表示され、指定の受信者には問い合わせが届きます。

問題に合った規模の変更を選ぶ。

伝わっていない情報を確かめて、最初に直す場所を決めます。見た目を変えるだけでは、問い合わせフォームの不具合や対応地域の説明不足は解消できません。

範囲を絞った修正

流れ自体が機能しているなら、対応地域を一文加えるだけでよいかもしれません。次の行動が不明確なら、リンクの改善と短い説明で足りることもあります。訪問者が元々したかった操作で、変更を確かめます。

より広い範囲の見直し

複数のページを見ても目的のサービスが見つからない、またはスマートフォンのレイアウトが基本的な操作を妨げるなら、構成の見直しが必要かもしれません。制作前に範囲と確認方法を合意します。

どちらの方法でも、日常的な編集は簡単なままにします。ページを作り直さずに、担当者がサービス情報、例、連絡先を更新できることが大切です。

一つのページ、一つの具体的な操作から。

最初の依頼内容から最後の確認まで、検証できる目的を持たせます。

ページと目的を送る。

想定する訪問者と、その人ができるようになるべきことを伝えます。例えば、対応地域の住まいの所有者がキッチン設置の見積もりを依頼できることです。

必要な変更を決める。

同じ流れをたどって障害を見つけ、範囲の明確な変更を提案します。対象は文章、ナビゲーション、レイアウト、読み込み、問い合わせ機能などです。

変更後に同じ操作を繰り返す。

合意した流れをパソコンとスマートフォンで確認し、キーボードでも操作します。文章の読みやすさ、画像の位置の安定、必要な情報の見つけやすさ、テスト問い合わせの到着を確かめます。

アール・デコ風のウェブサイトのイラスト。分かりやすい経路が目立つ操作ボタンにつながっている。

最初に取り組む価値のある変更を見つける。

ページ、届けたいお客様、その方にできるようになってほしいことをお送りください。その目的を、具体的なサイト改善にするお手伝いができます。