なぜWebサイト（ホームページ）をつくるのか
お久しぶりです。半月ぐらいご無沙汰していました。この半月の間、Webサイト（以下、ホームページ）を作っていました。
ブログをはじめたものの、予想以上にアクセスが無く心がくじけそうになっていたのですが、ペーパークラフトの展開図を掲載してからちょくちょくアクセスされはじめたので、なんとか持ちこたえることができています（笑）。
下記が作成していたホームページです。ペーパークラフトの展開図が無料でダウンロードでき、簡単な作り方も載せています。興味のある方は、下記のリンクからどうぞ。
いや〜、「オリジナルコンテンツとは、一体なんぞや？（作り方ときっかけ）」でも書きましたが、時代はソーシャル・ネットワークまっただ中ですねぇ。
一方的なWebサイトでの情報発信は、個人レベルでは非常にきついと感じます。
それでも、私と同じようにホームページ（ブログ）を作ってみたい！という方が、いまこのページを開いてくださっていると思います。
あなたにお伺いします。あなたはなぜ、ホームページをつくりたいのですか？
「仕事で必要だから」という方は、WEBサイト制作会社もしくはWordPressをお勧めします。
サイトのつくり（デザインやユーザビリティ）って、以外と会社の評価に繋がっていると思います。
自分で全てこなそうとするとものすごい知識と時間が必要になるので、きちんとしたノウハウと知識を持っている方にお願いするのが一番だと思います。
また、人との交流が好きで、旅行先で撮った写真や、手作り作品や料理の写真をみんなに見てもらいたい！という方はInstagramやTwitterが向いているかなと思います。
運が良ければリツイートされたり、意見交換したりととても楽しいと思いますよ！
で個人的な見解ですが、人との交流は苦手だけど「自分の作品を公開して見てもらいたい」「役に立つかわからない無駄な知識を披露したい（笑）」といった孤独に耐性のある方は、ブログやホームページが向いているかなと思います。
私の場合、気まぐれで飽き性なので、いつでも更新して放置ができるホームページ向きだと思います。
なのになんで、コツコツ更新しなくてはいけないブログをはじめたのかというと、ぶっちゃけ簡単につくれるからです（笑）。
でも、ちょっと後悔しています・・・いろいろ調べてみたところ、「ブログは更新し続けないと、検索エンジンから消えるのが早い」と書いてある記事が多かったからです。
まぁ、なので急きょホームページをつくって、流されたくない記事（検索エンジンから消されてほしくないコンテンツ）を移すことにしたのでした。
私なりのホームページ（ブログ）の作り方
全くの初心者の方向けに、7つのステップにわけて書いていきます。
まずは作ってみてください。向き不向き、改善点等が見えてくると思います。
その後、自分に向いていると感じた人は、いろいろ調べて知識を増やしていってください。
知識が増えれば、ホームページ作りが楽しくなってくるかもしれません。
- どんなホームページ（ブログ）にしたいのかを考える
- ホームページ（ブログ）のスペースを無料で借りる
- まずはホームページ（ブログ）を作ってみる！
- コンテンツ（サイトの中身）をつくる
- ブラウザチェック、コーディングチェック
- スマートフォン（Android、iPhone）チェック
- 検索エンジンに知らせる
STEP1.どんなホームページ（ブログ）にしたいのかを考える
まずは、下記の項目をいろんなサイトを参考にしながら、考えてみてください。
- どんな内容にしたいのか考える（日記／ペット／写真／料理／専門知識／イラスト／車 他）
- サイトのタイトルとハンドルネーム（ニックネーム）を考える
- どんな人に見てもらいたいのか考える
- サイトのカラーを考える（可愛い／ポップ／かっこいい／爽やか など）
その他、自分で必要だと思うものは用意しておいてください。
（例えば、掲載したい写真やイラスト、専門知識ならメモを取っておくと良いかも。）
STEP2.ホームページ（ブログ）のスペースを無料で借りる
まずは、レンタルサーバー登録用にメールアドレスを用意します。
（もし、ずっと更新し続けることができ、きちんと管理できる方や、最初から有料レンタルサーバーを利用される方なら、フリーメールではなくきちんとしたメールアドレスで登録されたほうがいいと思います。）
連絡用メールアドレスをサイトに掲載する予定の方は、専用にもう一つ用意しておくと安心です。
（スパム業者がメールアドレスを自動収集しているようですので、いつでも変更できるように公開用メールアドレスはフリーメールが無難です。）
次に検索エンジンで、「ホームページ 無料レンタル」「ブログ 無料レンタル」と検索してみて下さい。いろんな無料レンタルサーバーが出てくると思います。
昔から「FC2ブログ」や「Amebaブログ」が人気ですよね。
ちなみに、私はずっと忍者ツールズさんでお借りしています。シンプルで使いやすいと思います。
レンタルサーバーにもよりますが、無料で借りるとサイトに自動的に広告が表示されます。
後々、有料版にして広告が非表示にできるのか、確認しておくと良いかもしれません。
また、容量やテンプレートの数、取得できるドメイン名（URLの○○.net△△.com□□.jp部分）が自分好みかどうかなども、合わせて確認しておいた方が良いと思います。
先ほど用意した登録用メールアドレスで、お好きなレンタルサーバーに登録してください。
取得するホームページアドレス（URL）は、短くわかりやすく、打ち間違いしにくいものが良いと思います。
それから、サイトのタイトルとURLが同じだと信頼性が高くなると感じます。
（【例】サイト名：ミケのおうち、ホームページアドレス（URL）：http://www.mikeshome.jp/）
STEP3.まずはホームページ（ブログ）を作ってみる！
ブログの場合は、レンタルサーバーの手順に従ってテンプレートを使用してください。
テンプレートの色や背景を変更するだけで、簡単にオリジナルデザインが作れると思います。
色や背景を変更したい時は、ちょっと難しいかもしれませんが「スタイルシート リファレンス」で検索してみてください。
ホームページの場合は、テンプレートはあるものの基本的にはいちから自分で作成することになると思います。
最低限必要なものは、「HTML」ファイル（○○.html）と「CSS」ファイル（□□.css）になります。
HTMLファイルには、ルールに従ってサイトの内容を書いていきます。
CSSファイル（スタイルシート）には、装飾（デザイン）を書いていきます。
書き方は長くなってしまうので省きますが、下記のサイトがおすすめです。
下記のサイトには、長くお世話になると思います。
HTMLやCSSのタグがわからない時は、下記のサイトで探してみてください。
STEP4.コンテンツ（サイトの中身）をつくる
ブログは、記事を書いて保存するだけで、コンテンツ（サイトの中身）が自動生成されると思います。
レンタルサーバーの作成手順に従って、作成してください。
ホームページは、1ページ1ページ自分で作成していきます。
基本のページ（トップページ、サイトの説明、コンテンツページ）が作成できれば、あとはコンテンツページを複製して内容を変更していくだけなので、頑張ってください。
ファイル名（○○.htmlの○○部分）を付けるにあたっての注意点は、半角英数字の小文字、アンダーバー（_）以外は使わない方が無難です。
また、数字から始まるファイル名も避けてください（404エラーページ等は除く）。
もう一つの注意点として、各フォルダの中には必ず「index.html」（トップページ）を作っておいてください。
入力されたURLからファイル名（○○.html）が省略されていた場合、その階層（フォルダ内）にある「index.html」が自動的に表示されるようになっています。
レンタルサーバーによっては、404エラーページ（入力されたURLが見つからない時に表示されるページ）をカスタマイズできたり、自分で設置することになると思います。
詳しく知りたい方は、「404エラーページ」で検索してみてください。
また、サイトをより良くするには、下記のPDFが大いに参考になるかと思います。
STEP5.ブラウザチェック、コーディングチェック
インターネットに接続して検索できる機械（ツール）がたくさんあると思います。
実は機械（パソコン、スマホ、テレビ、ゲーム機 等）ひとつひとつもしくはバージョンごとに、サイトの見え方が違います。
本当は、全て購入して見え方をチェックするのが一番なのですが、そんなの大富豪でも面倒くさくてできません（笑）。
最低限、自分の持っている機種とブラウザで、表示崩れが無いか確認してみてください。
特に、WindowsでInternet Explorer、FireFoxの表示チェック、MacでSafari、FireFoxの表示チェックができるととても安心かと思います。
できなくても、無料でチェックができるサイトを駆使すれば、表示崩れが押さえられると思います。
下記のサイトでは、Internet Explorerの様々なバージョンでの表示チェックができます。
ただ、残念なことにサイトの上部分しか確認できません。でも、参考になると思います。
もう一つ大切なことは、コーディングチェックです。
コーディングチェックとは、HTMLやCSSの記述に間違い（エラー）が無いか調べることです。
HTMLやCSSには、現在よく使われている2種類のバージョン（HTML4かHTML5、CSS2かCSS3）があります。
さらにHTML4では、厳密に書かなくてはいけない場合（Strict）と、書かなくても良い場合（Transitional）があります。
自分がどのルールで作っているのか把握しておいた方が、エラーが少なくなると思います。
エラーが少ないHTMLの書き方が気になった人は、「W3C」を調べてみてください。
完璧に作ってもうまく表示されない時は、文字コード、改行コード、空白スペース、半角全角、大文字小文字を再チェックしてみてください。
特に、ファイルを保存する時のテキストエンコーディングと、表示したいテキストエンコーディングが食い違っている場合が一番厄介です。
テキストエンコーディングが確認できるテキストエディタで、テキストエンコーディングを変更し、ファイルを上書きしなおすことをお勧めします。
下記のサイトでは、HTML5とCSSのチェックができます。
STEP6.スマートフォン（Android、iPhone）チェック
つい数年前まではパソコンからのアクセスが大半を占めていたのですが（＋ガラケー）、今ではスマホからのアクセスが急激に増加していると感じます。
スマートフォンは最新のHTMLやCSSを使用できる代わりに、機種やバージョンごとに表示が大きく異なります。（ディスプレイの向きも変えられますしね・・・）
また、操作がマウスと違いタッチパネルなので、リンクの大きさも考慮しなくてはいけません。
興味がある方は、「レスポンシブウェブデザイン」や「リキッドデザイン」、「ユーザビリティ」で検索してみてください。
下記のサイトで、ディスプレイのサイズによって表示される範囲がどう変わるのかが、確認できると思います。参考にどうぞ。
STEP7.検索エンジンに知らせる
ブログの場合は、レンタルサーバーにもよりますが、基本的に何も用意する必要はありません。
下記の検索エンジン登録サイトで、必要事項を記入してURLを登録してください。
ホームページの場合は、「sitemap.xml」「robots.txt」「rss.xml」を用意しなくてはいけません。
自動生成してくれるサービスがありますが、自分で作ることをお勧めします。
- sitemap.xml
- sitemap.xml（サイトマップ）とは、自分のサイトにどんなページがあるのか、全てのページを一覧にして検索エンジンに知らせるためのファイルです。
sitemap.xml（サイトマップ）を作ることで、検索エンジンがもれなくページの情報を収集できるようにします。
GoogleやBingに、このファイルの場所を教えてあげると、自動的にページの情報収集が始まります（最初は時間がかかります）。ページを作成したり更新するたびに、更新（修正）が必要です。
ページのURLを並べるだけの「sitemap.txt」版が一番書きやすいですが、最終更新日やサイトのタイトルも書ける「sitemap.xml」版が良いと思います。
画像や動画のアドレスも記入できるので検索してみてください。
ファイル名は自由に付けることができますが、「sitemap.xml」が無難です。
サイトの一番上の階層（フォルダ）に入れておきます。 -
sitemap.xml のサンプル
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.mikeshome.jp/mikesphoto/costume.html</loc> <lastmod>2016-12-24</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> - robots.txt
- robots.txtとは、情報収集してほしくないページ等を、検索エンジンに知らせるためのファイルです。
サイトの一番上の階層（フォルダ）に入れておけばＯＫです。
ファイル名は必ず「robots.txt」にする必要があります。
基本的には何も書かない方が無難ですが、サイトマップがある場所だけ書いておくと良いと思います。 -
下記のコードは、情報収集してほしくないページ等が無い時のサンプルです。
robots.txt のサンプル
User-agent: * Disallow: Sitemap: http://www.mikeshome.jp/sitemap.xml - rss.xml
- RSSとは、最新の更新情報だけを書いておくファイルです。
HTMLファイルにリンクを記述して読み込みます。
基本的に、RSSリーダーというソフト（アプリ）を使って見ることができます。（アドレスバーに「RSS」と表示されていればクリックしてみてください。）
いつ更新されるかわからないサイトに何度もアクセスしなくても、RSSリーダーを使っていれば、新しいページが追加されたことがわかります。
そういったRSSリーダーを使っている人（個人や業者、検索エンジン）向けにお知らせする機能です。
RSSファイルは自分で作ることになります。最新の更新情報を、最低5件ほど載せておけばいいと思います。
また、ファイル名は自由に付けることができます。 -
rss.xml のサンプル
<?xml version="1.0" encoding="UTF-8" ?> <rss version="2.0"> <channel> <title>ミケのおうち</title> <link>http://www.mikeshome.jp/</link> <description>ペットの猫「ミケ」の写真を公開しています。</description> <lastBuildDate>Sat, 24 Dec 2016 18:01:00 +0900</lastBuildDate> <item> <title>ミケの衣装</title> <link>http://www.mikeshome.jp/mikesphoto/costume.html</link> <description>「ミケの衣装」ページに、クリスマスミケの写真を追加しました。</description> <pubDate>Sat, 24 Dec 2016 18:01:00 +0900</pubDate> </item> </channel> </rss>HTMLファイルにリンクを書く時のサンプル（
<head>〜</head>内に書く）<link rel="alternate" type="application/rss+xml" href="rss.xml">
さて、内容も充実し、表示崩れもエラーも極力無いサイトやブログが完成したら、検索エンジンに「こんなサイトがあるよ！見に来てよ！」と知らせてあげましょう。
知らせてあげることで、検索エンジンに登録され、アクセスされる可能性がドンと上がります。
GoogleとBingはアカウントを作成する必要があります。
アカウントを作成してから、「サイトマップ」を送信してください。
Bingは、電話番号等の個人情報をきちんと入力しておかないと、登録されないように感じます。
Yahoo!カテゴリは、審査がかなり厳しいようです。なるべく、サイトの内容を充実させてから、登録をお願いしましょう。
登録の申し込み方法は、カテゴリを選択してから、右にある「Yahoo!カテゴリに登録したい」ボタンをクリックし、必要事項を記入し送信するだけです。
もしYahoo!カテゴリに登録されなくても、Googleと同じ検索エンジンを採用しているので、Googleに登録されればちゃんとYahoo!の検索結果にも反映されるようになります。
また、Googleが無料で提供してくれているアクセス解析ツールを利用すれば、どれだけアクセスがあるのか知ることができます。
