無料でホームページを作成する手順
お金をかけずにお店のホームページを作る
無料のホームページ作成ソフト入手
事業主のお金を増やすには、出費を抑えることもひとつの方法。
と、いうことで、お金をかけないでお店のホームページを作成することに。まずはホームページを作成するためのソフトの入手から。
無料で使えそうなソフトをいくつかダウンロードするも、無料ということもあって使い勝手がいまいちだったり、使う前からこちらの情報を提供しなければならない怪しげなソフトだったり。
散々探してたどり着いたのが、「Microsoft Expression
Web 4」。パッケージソフトとして販売していたのが、無料公開になったとのこと。
ソフトの概要やダウンロードの手順は、AllAboutのウェブ作成ソフト Microsoft Expression Web が無料化を参照。
サイト（フォルダ）の作成
ソフトをダウンロードしインストールが完了したら、まず初めに取り掛かるのが、サイト（フォルダ）の作成だ。
もしすでにホームページを持っているのであれば、PCに保存されているフォルダを開けば良い。方法は、画面上部にある「開く」のアイコンの横にある下向き▼をクリックし「サイトを開く」を選択すればOK。
場所を「参照」から展開して、管理リストに追加しておけば、これから便利だろう。
さて、今回は新しくホームページを作りたいので、メニューバーにある「サイト（S)」→「新規サイト（N)」→「テンプレート」→「スモールビジネス1」→「OK」にすると、サイトビュー（フォルダ）が自動的に作成された。
まずは、このサイトビュー（フォルダ）にある「default.html」のコピーを作成し、「default.html」のファイル名を「index.html」に変更する。すると変更しても良いのか尋ねるダイアログボックス、続いてリンクが切れないようにしても良いかと尋ねるダイアログボックスが表示されるので、いずれも「はい」にする。
なぜ「index.html」にするかというと、優先的にそのページを読み込んでくれるというルールがあるから、ということだった気がする。また、このようにテンプレートである「default.html」をバックアップとして取っておけば、これから加工にしくじったとしても、やりなおしがきくという利点もある。
ヘッダの修正
では早速、今回選択した「スモールビジネス1」のヘッダー部分の電話番号を変えてみようと思う。
「master.dwt」というファイルをダブルクリックで開く。すると「デザイン」モードでヘッダとフッターが表示された。
右上に電話番号があるが、字が小さく選択範囲がよくわからない。また、この店のホームページを見たお客さんが、電話をかけるという場面を想像しても、もうちょっと字は大きい方がいい。
そこで電話番号の行を全選択し（電話という漢字の少し前をクリックすると上手く全選択できる）、右クリック。メニューに「フォント」があり、Wordと同じようにサイズを変更できる。
私がこの「Microsoft Expression Web」を気に入ったのは、使い慣れているMicrosoft製品と同じ操作で同じことができる点だ。普段から使っているショートカットキーがそのまま使えるのが嬉しい。
ちなみに「デザイン」モードで修正しにくい場合は、表示モードを「分割」や「コード」に変更すると良い。画面下の方に、「デザイン」「分割」「コード」と並んでいる部分の「分割」をクリック。
すると「コード」と「デザイン」」画面が上下に表示される。
ロゴの差替え
次にヘッダのロゴを差し替えてみる。ロゴはチラシを作った時にデザイナーさんから送信してもらった画像を「ペイント」というソフトで開き、店の名前の部分だけになるようにトリミングして使うことにした。
サイトビューのタブをクリックし、「images」フォルダを開く。ここに先ほどトリミングして保存したロゴ画像をコピー＆ペースト。ついでに他のページで使う画像もコピーしておこう。
ちなみに、ファイル名は全て半角英数字にする方のがルール。
「master.dwt」というタブに戻り、LOGOという画像部分をダブルクリック。「参照」をクリックし、先ほど「images」に保存したロゴを選択し「OK」にすれば、画像差換えができる。
ヘッダとフッターのメニューを減らす
テンプレートのメニューは多すぎるので減らしてみる。
が、その前に、今の状態で「master.dwt」のコピーを作っておく、理由は、これから消す部分を復活させたくなった際、このコピーファイルからパーツコピーすれば簡単に復旧させることができるからだ。
ではヘッダを削除しよう。一日も早く公開したいので、「ホーム」「商品」「連絡先」だけを残して後は消した。消し方もいたって簡単。それぞれの文字のちょっと斜め下の前でクリックして、各文字を全選択し削除キーを押すだけ。
もし消しすぎてしまっても、キーボードの「Ctrl」「Z」で元に戻せるので簡単だ。
フッターも同様に「ホーム」「商品」「連絡先」だけを残して後は消した。Copyrightは、「0000」を「2013」、「会社名」に「屋号」を入れてひとまず完了。
ファイル名の変更
「商品」「連絡先」テンプレートのファイル名も、「default.html」になっているので変更が必要。このままではメニューをクリックしてもリンク先に飛ばないからだ。
まずは「商品」。モードを「コード」に変更。43行目あたりに「products/products.htm」と書かれていることから「商品」というページは、「products」フォルダの「products.htm」というファイル名にすれば良いことがわかる。
「サイトビュー」のタブにある「products」を開き、「default.html」というファイルのコピーを作成。このコピーのファイル名を「products.htm」に変更する。
「連絡先」も同じ手順でファイル名変更。すると、「master.dwt」のメニューの上で「Ctrl」を押しながらクリックすれば、リンク先が開く。
ちなみに上の階層フォルダへ戻るときは、キーボードの「BackSpace」を押すのが便利。
検索されやすくする工夫
ホームページを作っても、お客さんに見てもらわなければ意味がない。そのためには、最低限、このページがどんなページなのか、どんなことを探している人におすすめなのか、わかるように説明を加える必要がある。
では、その方法。
「master.dwt」を開き、メニューバーの「ファイル（F)」→「プロパティ（R)」でダイアログを開く。ここにある「タイトル」「ページの説明」「キーワード」を埋めれば良い。
ここでポイント。
検索する人がどんなキーワードを入れるのか、どんな言葉に興味を持ってくれるのか想像しながら書く必要がある。
たとえば自分が日本酒の飲める居酒屋を探す場合、検索するときに使う言葉は「日本酒」「居酒屋」「○○駅」だろうか。それであればこれらの言葉が、「タイトル」「ページの説明」「キーワード」に自然に入るようにすれば良い。
具体的にどのような言葉を入れれば良いかというと、すでにあるお手本を参考にするのが近道だ。実際にこれらの言葉で検索し、結果の上位に表示されるページを開く。そのページの上の方で「右クリック」→メニュー中ほどの「ソースの表示」をクリックすると目的の言葉がある。
「title＝タイトル」「description＝ページの説明」「keywords＝キーワード」ということなので、検索上位に表示されるには、どのような言葉を使えば良いかつかめるだろう。
ちなみにキーワードの区切りは、「,」（半コンマ）を使う。