本文へ移動する
06-7777-3960受付 月〜土 9:00〜18:00
無料で相談する→

サービス何をつくるかは、話してから決めましょう。

サービス一覧を見る

制作・技術公開 更新

初めてのホームページの作り方をゼロから解説

この記事で分かること

初めて事業用のホームページを作るなら、最初に「誰に何を伝え、次に何をしてほしいか」を一文で決めます。その目的に必要なページと材料を集め、作る人・公開前に確かめる人・公開後に直す人を決めれば、使う道具を選びやすくなります。

読み方

初めて事業用のホームページを作るなら、最初に「誰に何を伝え、次に何をしてほしいか」を一文で決めます。その目的に必要なページと材料を集め、作る人・公開前に確かめる人・公開後に直す人を決めれば、使う道具を選びやすくなります。

この記事は、実際に制作を始める担当者向けの作業順です。制作会社への依頼を考える段階で、目的や見積もりの確認から整理したい方は初めての会社ホームページ制作の全体像を先にご覧ください。

まず一枚のメモに目的と必要なページを書く

「会社を知ってもらう」「商品を説明する」「問い合わせを受ける」など、役割を一度に増やしすぎず、最初に優先する用件を一つ決めます。たとえば、サービスの相談を受けたいなら、訪問者が知りたい対応内容、対象地域、相談方法を先に書き出します。実績や料金を掲載する場合は、公開できる事実と現在の条件を担当者に確認します。

最初のページ構成は、ホーム、サービス、会社情報、問い合わせ先などから、目的に必要なものを選びます。ページ名だけを先に増やさず、各ページで答える質問を一行ずつ書いてください。「誰のためのページか」「読んだあとどこへ進むか」が決まると、原稿と写真の不足も見つけやすくなります。Googleも、利用者に役立つ内容と、ページ同士を分かりやすくつなぐことを案内しています。Google検索のSEOスターターガイド

作り方を選ぶ前に、担当する作業を分ける

ホームページを作る方法には、自分で操作するサービス、WordPressなどの管理システム、制作会社への依頼があります。方法の名前だけで決めず、「原稿・写真」「ドメインと契約」「公開前のテスト」「更新と復旧」の担当を確認します。制作会社が作る場合でも、事業の説明と内容の最終確認は自社に残ります。

進め方自社で確かめること公開後に残る仕事
自社で作成サービスを使う必要な機能、契約条件、原稿と写真の登録更新、問い合わせの受信、契約更新
WordPressなどを自社で運用する設置先、編集権限、バックアップと更新の担当本体・テーマ等の更新、復元確認
制作会社と進める渡す資料、確認日、契約に含む範囲修正依頼、保守範囲、アカウントの管理
原稿と写真、契約とアカウント、公開確認、更新と復旧の四つに担当者を割り当てる図
作成方法が違っても、四つの仕事の担当を空欄にしないことが大切です。

WordPressを選ぶ場合は、編集しやすさだけでなく、更新前のバックアップと保守の手順を含めて考えます。WordPress公式文書も更新前のバックアップを案内しています。WordPressの更新手順。運用の内容はWordPress初心者向けの記事で分けて確認できます。

ドメイン、契約、原稿と写真を集める

ドメインはホームページのアドレスです。取得する場合は、希望する名前だけでなく、登録先、契約名義、更新通知が届く宛先、管理画面に入れる担当者を記録します。JPドメインは指定事業者を通じて登録し、事業者ごとにサービスやサポートが異なります。JPRSのJPドメイン登録に関する説明。作成サービスによってはドメインや公開先の扱いが異なるため、契約画面で確認してください。

原稿は新しく長文を書く前に、パンフレット、商品資料、よく受ける質問から集めます。会社名、所在地、対応内容、連絡先、営業時間などは実際の事業情報と照合します。写真やロゴは使う権利と掲載範囲を確認し、掲載する画面に合う大きさを選びます。必要な材料がそろわないページは、仮の実績や声で埋めず、公開範囲を見直します。

最初のページで「読む→確かめる→連絡する」をつなぐ

ホームの冒頭で何を提供しているかを伝え、詳しいサービスの説明と連絡先へ進めるようにします。見出しにはページの内容を表す言葉を使い、ボタンは「詳しく見る」「相談する」など行き先が分かる表現にします。ページのタイトルと説明文も内容に合わせて作ります。Googleは、検索結果のタイトルにページ内の見出しなども利用し、説明文は内容を要約する材料になると案内しています。Google検索のSEOスターターガイド

文字が小さすぎないか、見出しの順序が分かるか、画像に必要な説明があるか、リンクやフォームをキーボードでも操作できるかを確かめます。W3Cの簡易確認手順は、見出し、画像の代替文、文字の拡大、キーボード操作、フォームを点検項目として示しています。W3Cのアクセシビリティ簡易確認

公開前後に画面と実際の動作を試す

公開前はテスト環境などでパソコン・スマートフォンの表示、リンク、問い合わせの送受信を確かめます。公開直後には本番URLを開き、同じ操作をもう一度試します。担当者が別なら、初めて見る人にも手順をたどってもらいます。

  1. 各ページの見出し、文章、写真が正しく表示され、スマートフォンで横にはみ出さないか。
  2. メニュー、本文のリンク、ボタンが意図した実在ページへ着くか。
  3. 問い合わせフォームを使う場合、試しに送信し、受信先と返信方法まで確認できるか。
  4. 公開直後に本番URLとHTTPSの表示を確かめ、必要なページを閲覧できるか。
  5. ドメイン、作成サービス、管理画面の担当と更新期限が記録されているか。
公開前後に表示、リンク、問い合わせ、公開URL、運用担当の五つを実際に確認する図
公開前後に、見た目と動作の両方を確かめます。

問題が見つかったら、ページと端末、操作手順、期待した結果、実際の結果を一緒に記録します。「スマホでおかしい」だけより、修正する人が再現しやすくなります。公開しても検索結果にすぐ載るとは限りません。まず実際のURLを開き、必要ならSearch Consoleなどで状態を確認します。Google検索のSEOスターターガイド

公開後に誰が直すかまで決めておく

営業時間やサービスの変更、問い合わせ先、写真の差し替えは、公開後に発生します。自社で直す範囲と依頼する範囲を決め、少なくとも管理画面、ドメイン、公開先、バックアップの担当を引き継ぎます。WordPressなら本体や追加機能の更新も運用に含まれます。修正の依頼先が未定だと、間違いに気づいても直すまでに時間がかかります。

自社で作る方法と制作会社に任せる方法を比べたい場合はBämの会社ホームページ制作内容も確認できます。必要なページや担当がまだ決まっていなければ、今ある資料と困っている点を相談窓口で伝えてください。

参考資料

次の一歩読んだあとに

会社の場合も、考えてみませんか。

この内容を相談する→

ホームページ制作サービスを見る →

この記事を書いた人

Bäm[バム]運営事務局株式会社みやあじよ

株式会社みやあじよの担当者が、調査、執筆、編集、公開前の確認を行います。出典・数字・固有名詞・リンク・読みやすさを、公開の前に人が確かめます。

調べて、書いて、確かめてから公開します記事について連絡する

無料で相談する →