ホームページの作成手順

シンプルなレスポンシブデザインのホームページを作ってみよう!

ホームページ作成に必要な環境は全て揃っており、使用するソフトは書籍などでとりあえず学習済みという前提で、独自ドメインを使って一般サイトを構築してゆく手順を解説します。 サンプルはこんな感じです。色などをカスタマイズすれば幅広く使えます。

作業環境
【使用パソコン】 Windows8.1
【オーサリングソフト】 Adobe DreamweaverCC(Creative Cloud)
【画像加工ソフト】 Adobe PhotoShopCC(Creative Cloud)
【ドメイン取得】 ムームードメイン
【レンタルサーバー】 ロリポップ・コロリプラン
【解凍ソフト】 ALZip無料版
【テンプレート】 アットマガジンズ社オリジナル(HTML5+CSS3 UTF-8)

  1. どんなホームページを作成するのかアイデアを固めよう!
    1. 作成する前に設計図を描きます。ホームページには必ず目的があるはずなのですが、目的にたどり着けないホームページがよくあります。そういうのは作るだけ無駄ですよね?ソファーに腰掛けて目を閉じて、ゆっくり想像しながら、アイデアをメモに書き出してゆきましょう。誰に対してどんな目的で作成するのか?必要なページは?どんな順番で見てもらいたいか?などを頭で考えてノートに書き出しておきます。A4の紙1枚にまとめられる程度にシンプルに考えると良いと思います。 この作業をしっかり行うと、後の作成作業がとても楽になります。
    2. SEO対策をこの時点で考えておきましょう。どんなキーワードで上位表示されたいのか?ということを明確にしておきます。
  2. ドメインを取得する
    1. アイデアが固まったらドメインを取得します。ドメインには1-2で決めたキーワードを含めておくとSEOでは少し有利です。例えばSEO対象キーワードが「ホームページ」であれば、取得するドメインを[ homepage.com ]などにしておくことが理想です。当サイトもそんな発想で[ homepage-magazine.com ]というドメインを取得しました。
  3. レンタルサーバーを借りる
    1. レンタルサーバーは先に借りてしまいます。ロリポップなどは10日間のお試し期間付きなのですのでこの間の利用料はかかりません。良さそうだったら料金を支払い、独自ドメインを設定して準備完了とします。独自ドメインの設定が浸透するまで早くて24時間、遅いと72時間程度要しますので先にやってしまいます。
  4. テンプレートをダウンロードしてパソコン側の環境を整える
    1. ホームページを白紙から作成するのはとても大変ですのでテンプレートを使います。テンプレートとは骨組みのようなもので、ページ作成に必要なベースが既に出来上がっています。このテンプレートを使うことで作業時間を大幅に短縮することができます。⇒ テンプレートダウンロード(無料)
    2. ダウンロードしたファイルは圧縮されていますので解凍します。解凍には専用ソフトが必要ですので、お持ちで無い方はダウンロードしてご利用下さい。解凍ソフトは無料で提供されているものが多数ありますが、Windows版とMac版などがありますので使用環境に合わせてダウンロードしてご利用下さい。私が使用しているのはALzip(Windows)です。
    3. 解凍ソフトをパソコンにインストールしてから圧縮ファイルをクリックすると自動で解凍が始まります。解凍するとホームページ作成に必要なhtmlファイルなどが入ったフォルダが表示されると思いますので、デスクトップに適当なフォルダを作成し、この中身を全てフォルダ内に移動させます。フォルダ名にはサイト名称をつけて、ドキュメントファイルの中などに移動して保存しておきます。
  5. オーサリングソフトの設定を行う
    1. DreamweaverCCを起動させ、新規サイトの設定を行います。メニューの[ファイル]を選択し、[サイトの管理]をクリックします。[新規サイト]を選択し、サイト名と使用するフォルダ名を選択します。使用するフォルダ名というのは2-3でサイト名称を付けたフォルダです。
    2. 同じ管理画面でサーバーの設定も行ってしまいます。レンタルサーバーの管理画面などでFTP情報を確認して必要情報を記入して接続テストを行っておきます。必要な情報は「FTPサーバ名」「ログインアカウント」「パスワード」「ルートフォルダ名」です。
  6. トップページのデザインを修正する
    1. Dreamweaverの環境設定ができたらメニューから[ファイル]→[開く]でindex.htmlを開きます。サイト名称やカラー設定を行います。テキストの大きさや色、メニューの項目やリンク先のURLなどの詳細を細部にわたって細かく決定してしまいます。トップページをしっかり作れば、サブページ作りが楽になりますので納得できるまでじっくり考えて作ります。
  7. ページ割りを行う
    1. トップページが確定したら、複製を作ってサブページを作ります。トップには必要だけどサブページには不要な部分を削除し、これをサブページのテンプレートとして000.htmlなどの名称で保存しておきます。
    2. このサブページのテンプレートをコピーしながら各ページを作成してゆきます。中身は後から作るので、とりあえず必要なページを名前を付けて保存してゆきます。この作業をページ割りといいます。ページの名前はコンテンツの中身をよく表現しているもので、正式な英語か正式なローマ字で付けます。例えば「ホームページの作成手順」というページ名称は英語では“Homepage creation procedure”と言います。長いので、creation_procedure.htmlという名称にしました。もしもローマ字にする場合は“sakusei_tejyun.html”になるでしょう。
  8. テキストコンテンツを書いてゆく
    1. ページ割りができたらいよいよコンテンツを作成してゆきます。画像などは後から挿入しますのでまずテキストを書き込んでゆきます。
    2. コンテンツを書き終えたらソース部分の編集を行います。作業モードを[コード]に切り替え、ページ上部の<title>と<meta>部分のdescriptionとKeywordを書き込んでゆきます。<title>と<description>はSEOで重要ですのでしっかり書きましょう。全てのページに同じ<title>や<description>を使用するとSEOでは不利ですので全て違う物を記入します。
  9. リンクを繋げてゆく
    1. テキストコンテンツ内に内部リンクを張れるテキストがあればリンクします。内部リンクとは同じホームページ内のページとページをリンクするという意味です(全く別ドメインにリンクするのは外部リンク)。内部リンクを張り合うことで読者の導線が広がります。
    2. コンテンツ同様、メニューなどでもリンク切れが無いかチェックします。
  10. ブラウザーで確認してみる
    1. 「ブラウザーでプレビュー」機能を使って確認します。
    2. 全体をブラウザーで確認します。現在の主流はAndroid、Safari、Chrome、Internet Explorer、Firefoxの5ブラウザーです。プロは全てのブラウザーで表示確認を行いますが、初心者の方はSafariとIE,お持ちのスマートフォンでの確認程度で良いと思います。
    3. ブラウザーごとに表示方法が微妙に異なりますので、必要に応じてCSSを編集します。
  11. イラストや写真画像を挿入する
    1. ブラウザーテストをしながら文章を読んでみましょう。文章ではなかなか伝えられない部分などにイラストや画像を挿入してゆきます。挿入した画像やイラストには必ずALT設定を行います。必要であれば画像などからリンクも張りましょう。
  12. アップロードする
    1. フォルダ内の全てのファイルをFTPを使ってサーバーにアップロードします。
    2. 取得した独自ドメインを入力して表示されればアップロード成功です。
  13. サイトマップを作成する
    1. ここでいうサイトマップとは人間が見るページ用のサイトマップと、検索エンジン向けのXML版サイトマップです。
    2. html版のサイトマップには、サイト内の全てのページをリンクで繋いだものを作ります。道案内のようなものです。小規模なサイトの場合はトップページがサイトマップの役割を果たしています。
    3. XML版は少々特殊な言語で作ります。URLを入力すると自動でsitemap.xmlを作ってくれるサービスがありますのでそれを使うと3分程度で自動生成されます。生成された[ sitemap.xml ]をフォルダ内に入れて、FTPでアップロードすれば準備は完了です。
    4. 同じフォルダ内にある[ robots.txt ]というファイルをメモ帳などで開いて、ドメイン部分を自分のドメインに書き換えます。このファイルがあると、検索エンジンが巡回してきたときにXML版のサイトマップの位置を確実に探し出すことができるようになります。
    5. [ sitemap.xml ]と[ robots.txt ]この2つのファイルをサーバーにアップロードしておきます。
  14. Googleに通知する
    1. アップロードしたホームページは、ネット上に公開こそされていますが誰もたどり着くことはできません。そこで検索エンジンの長であるGoogleにサイト完成の報告をし、検索エンジンに登録してもらいます。
    2. Googleアカウントを取得して、ウェブマスターツールと検索し、Googleウェブマスターツールのアカウントを取得します。
    3. ウェブマスターツール内の[クロール]→[サイトマップ]から3-3で生成したsitemap.xmlを送信します。保留になればOKです。あとはGoogleの巡回待ちです。

ということでここまでが基本的なホームページの作成手順になります。手順が多くて面倒なのですが、コンテンツ作成部分を覗けば慣れると3時間もあればできてしまう程度の作業量です。

ブログやクラウドサービスなどで作成すると、Googleに通知したりする作業が省けて楽ですが、Googleに直接通知ができる窓口を持つことは、SEO対策的にとても有利です。ウェブマスターツールは1週間に1度くらいは確認すると良いでしょう。サイト上に致命的なミスが見つかると教えてくれますので「手遅れ」になることが防げます。