トップページ > ホームページ作成方法

ホームページ作成方法

当社に依頼する前に、まず自社でホームページ作成にチャレンジしたい方の為に
ホームページの作成方法をまとめました。
基本的なホームページ作成方法から細かいテクニックまでご紹介します。

サーバーを用意する

まずはサーバーを用意しましょう。
使いやすく、安いサーバーはロリポップサーバー。コロリポプランなら月額105円です。
無料サーバーならFC2サーバーでしょうか?
※無料サーバーは広告が付いてきます。
また、問い合わせを受け付けるメールフォームを独自に作る事ができません。
ホームページ作成練習だけなら無料サーバーで良いですが、実際運用するつもりなら、
有料サーバーを借りましょう。独自ドメインの取得もご一緒に。

テンプレートデザインを選ぶ

サーバーの用意ができたら、ホームページに使用するデザインを先に決めてしまいましょう。
ホームページのテンプレートを配布しているサイトがあります。

・ nikukyu-punch
多彩なデザインがあり、さらに、各種プログラムも販売しています。

・ tempnate
シンプルなデザインが多いです。サブページは1枚しかないので、工夫する必要があります。
この先の細かい説明はs-hoshinoデザインのテンプレートを基準に説明します。

・ s-hoshino
デザイン性の高いテンプレートが揃っています。オススメ!サブページも作られています。
ここからの説明はs-hoshinoデザインのテンプレートを例に説明していきます。

必要なページを決める

ホームページに必要なページを先に決めます。
後から追加するのは面倒なので、先に決めましょう。
店舗のホームページを作成する場合は
・TOPページ
・店舗情報
・スタッフ紹介
・料金のご案内ページ
・アクセスマップ
・問い合わせフォーム
この6ページで、最低限のホームページが作れると思います。
S-Hoshinoテンプレートには、予めサンプルが用意されているので、
文章を変えるだけで、そこそこのホームページになります。

ホームページ作成に必要なソフトを用意する

ホームページ作成に必要なソフトは、高額なものから無料の物まで数多くあります。
今回は極力無料のソフトをご提案します。

HTMLファイルをテラパッドで開く

まずは、テンプレートのHTMLファイルの書き換え方ですが
(HTMLファイル通常はインタネットエクスプローラーのマークになっているファイルです)
HTMLファイルを右クリックして、『プログラムから開く』でテラパッドを指定します。
画面にテラパッドが表示されない場合は『既定のプログラムの選択』を選び、テラパッドを探してください。
※『この種類のファイルを開くときは、選択したプログラムをいつも使う』のチェックは外してください。
テラパッドでHTMLファイルを開けましたでしょうか。
意味不明な文字列が表示されていると思いますが、あまり気にしないでください。
後々わかってきます。

HTMLの基本

テラパッドでHTMLファイルを開くと、意味の分からない文章がずらっと出たと思います。
最近のHTMLファイルは、XHTMLという文法で書かれています。
XHTMLは携帯、スマホ、PCと全ての機種で使用出来る文法です。
HTMLファイルの基本構成は
まず、宣言からはじまります。

HTMLの基本はこちら

ホームページ作成に重要なタグを覚える!

タグを覚える Pタグ テラパッドでHTMLファイルを開くと英語のような文字列があります。
まず理解したいポイントはタグです。
テンプレートで使用頻度が高い pタグ aタグ dlタグ hタグを中心に説明します。

パスの指定方法

画像の指定で出てきたパス。
これは、そのファイルの場所とファイル名を指定する為の書き方です。
今、書き換えているHTMLファイルと同じフォルダに画像ファイルを置いている場合は
そのままファイル名(gazou.jpgなど)を指定すれば良いのですが
ファイルがゴチャゴチャになってしまうので、画像はimgフォルダ PDFファイルなどの文章はpdfフォルダに入れるなど
整理しながら全体を構成する事をお勧めします。

CSS スタイルシートの作成方法

CSS スタイルシートとはカスケーディングスタイルシートの略です。
ファイル名は自由ですが多くのサイトが style.css としています。
基本的に、スタイルシートは使わなくてもホームページ作成は可能なのですが
例えば、ホームページ作成で多く使われる
・文字の大きさや色を変更する
・タイトル文字に飾り付けをする
・背景に画像を使う
といった事を、スタイルシートを使わずに行うと、HTMLがタグだらけになってしまい読みづらく、後から変更するのも一苦労となります。

簡単なスタイルシートの作り方をご紹介しておりますので
ぜひチャレンジしてみて下さい。

画像を用意する

ホームページの文章入れ替えが出来たら、写真を入れて
お店や会社のイメージを演出しましょう。
写真のサイズですが、なるべく、HTML側で設定し、
実際の写真も指定したサイズでアップロードしましょう。
HTMLでサイズを指定すれば、大きい写真を自動で直してくれますが
表示するのに時間が掛かったりします。
ホームページ上のデータはなるべく小さくするのがマナーです。
画像サイズを直すには、上で説明したGIMPが便利です。

問い合わせフォームを設置する

一昔前までは、ホームページ上にメールアドレスが書いてあり
そのメールアドレスをクリックするとメーラーが起動して問い合わせが出来るようなシステムが主流でした。
これはaタグにmailtoを使い
<a href="mailto:info@aaaa.com">info@aaaa.com</a>
このように書くと
info@aaaa.com
このように表示されます。
しかし、この方法は、迷惑メール業者の放った自動ロボットにメールアドレスを収集されてしまう為
毎日迷惑メールがどっさり届くようになってしまいます。やめましょう。

グーグルアナリティクスへ登録する

ホームページが完成したら、あとは反応を待つだけ・・・ではありません。
ここからしっかりと手間を掛ける事で、ホームページを活用出来ます。
まず、ホームページにどれくらいのお客様が来店しているのか調べるために
アクセス解析を設置します。
アクセス解析は、色々な会社が販売していますがお勧めはグーグルアナリティクスです。

グーグルアナリティクスはこちら(別タブ開きます)
無料で使える上にかなり高性能です。
gmailなどのグーグルアカウントを持っていれば使えます。(グーグルアカウント作成も無料です)

グーグルウェブマスターツールへ登録する

グーグルアナリティクスの設定が出来たら、次はグーグルウェブマスターツールの設定です。
認証の作業がありますので、先にアナリティクスを設定してください。
まず、グーグルウェブマスターツールにアクセスします。
なぜか、再度ログインが必要になります。

グーグルウェブマスターツールはこちら(別タブ開きます)

サイトマップを作る

サイトマップとは、自分のホームページの構成表のような物で
全てのページが表示されています。
ここで説明するサイトマップは人間に向けたサイトマップではなく
ウェブデータ収集ロボットに向けたサイトマップです。
ファイル名 sitemap 拡張子は .xml です。(ファイル名は自由ですがsitemap.xmlでいいと思います)
中身はテキストデータなのでテラパッドでも作れるのですが、
面倒なのでツールを使います。
FC2で提供されているサイトマップ作成ツール

FC2サイトマップ作成ツールはこちら(別タブ開きます)

こちらにURLを打ち込めば自動で作ってくれます。
出来上がりのファイル名も sitemap.xml なので、そのまま使えます。
パラメータはいじる必要なし

robots.txt(ロボッツテキスト)を作る

まずは robots.txt について。
グーグルなどの検索エンジンは世界中のウェブサイトデータを収集しています。
ウェブサイトデータを収集するプログラムをボットといいます。
(グーグルのデータ収集ロボットはグーグルボットと言われています)
このデータ収集ロボットがホームページに訪れて、データを収集して帰って行くのですが
まず読み込むデータが robots.txt です。
このrobots.txtを設置する目的は、自分のホームページを隅々まで収集してもらう事と
最新情報をすぐに反映してもらうためです。

robots.txtとsitemap.xmlをウェブマスターツールに登録する

作成したrobots.txt(ロボッツテキスト)とsitemap.xmlはウェブマスターツールに登録します。
グーグルに対して自分のサイトを伝える事が出来ますので
結果としてSEO対策に強く影響します。
この作業はグーグルに自分のホームページをしっかりと収集してもらう事を目的としています。

feed(フィード)を配信する

ホームページもフィード配信ができます。
本来はブログの更新情報を配信する為の物なのですが
ホームページでもフィード配信をする事で、最新情報をいち早く伝える事ができますし
SEO対策の一環としても効果的です。
(フィード配信をすると色々なロボットが巡回してくれます)
実際にフィードを購読してくれる方は少ないですが
少なくとも自分だけは購読できますね。

フィードの配信をしたら完成です。

完成した後のお話

ホームページが完成し、グーグルからロボットが定期的に来るように出来れば完成です。
この後、特定のキーワードで自分のホームページが上位に表示されるかどうかは
自分以外の方の行動で決まります。
ホームページに、訪問者にとって有意義な情報は載っていますか?
周りのみんなに広めたくなるような情報は載っていますか?
ここが決め手となります。
訪問者にとって有意義な情報があれば、訪問者のブログで紹介されるかもしれません。
訪問者の運営するホームページからリンクしてもらえるかもしれません。
逆に言うと、ここがポイントになります。
他にはない、オリジナルコンテンツで他の方に推薦されるホームページが上位に表示されます。
こういった検索エンジンで上位に表示される為に色々と行動する事をSEO対策と言います。
SEO対策と言うと、少し前まではリンク集への登録が主流でした。
リンク集からのリンクは、現在、無意味で、さらにペナルティの対象になります。
○○ディレクトリ登録なども意味なしなのでご注意下さい。
ディレクトリ登録に労力を費やすなら、そのキーワードについての解説ページを追加しましょう。
きっと訪問者が満足してくれます。
親切に解説すると、リンクしてもらえるかも??

スマートフォン専用サイトの作り方

スマートフォンの作成方法を調べると、言語の設定や記述の違いなど、良くわかりません。
極端に高度なテクニックを使用したいなら別ですが、通常のスマートフォンサイトは
通常のHTMLやXHTMLで作れます。

注意点としては、リッキドレイアウト(横方向に伸びるデザイン)を採用しないと、スマートフォンを横に傾けた時、デザインが崩れます。

シンプルなスマートフォンサイトを作成するなら jquery mobile をお薦めします。

画面移行の時に画面がスライドしたり、次ページへの移動時間が短くできるのでお勧めです。

ファビコンの作り方

ここは番外編として。
ファビコンの作り方です。
ファビコンはフェイバリットアイコンの略。
このホームページは赤いベースにITと書かれた画像をファビコンにしています。
ブラウザーのタブの所に表示されているアイコンです。
簡単な作り方がありますのでご紹介します。

エラーページの作り方

エラーページとは、URLの入力ミスをしたり、リンクをしてくれた人がURLを間違えた時のフォローができます。
例 ブログサイトで多いのですが、当サイトのTOPページは
http://www.itsnerima.com/ ですが
http://www.itsnerima.com/東京WEB企画 と書いてしまった場合。
URLはITの所まで認識してしまいます。
(そのリンクをクリックした人はホームページに来れません)
『Not Found』の画面が表示されてしまいます。

SITE MENU

NEWS

google+1

Facebook

Feed

Copyright(C) 東京WEB企画 All Rights Reserved.