ホームページの作り方

さて、今回から数回にわたって個人事業主さんが自分のお店のホームページを持つまでを考察していきましょう。
小さなお店もホームページを利活用することで売上倍増！・・・となればいいですよね。

［ホームページの作り方］
”ホームページの作り方”って聞くと、技術的な話、IT関連の難しい話を想像されるかもしれませんが、決してそんな話ではありません。お店のホームページで集客を図って売上を上げる、お店のホームページで商品を紹介してネットショップで売上を上げる、そんなホームページの作り方を勉強しようという話です。

［メインホームページ］
お店の看板ともいえるホームページですから、なるべくしっかりしたものを用意したいところです。ホームページの作り方を一から勉強して自作するのも大いに結構ですが、ビジネスをスピードアップさせるためには外注も検討しましょう。

MT（ムーバブルタイプ）やWP（ワードプレス）といったブログ管理ソフトを利用してホームページを管理することができますから、サーバー費用を含めても10万円前後で可能だと思います。

［店長ブログ］
さてここからが本題です。お店のホームページを作ったから大丈夫というわけではありません。お店のホームページを活用するためには、ホームページ以外にも”店長ブログ”を立ち上げましょう。

『ブログとホームページって何が違うの？』
『どうしてホームページがあるのにブログも始めなきゃいけないの？』

こんな疑問が聞こえてきそうです。この疑問には次回以降でお答えしていきたいと思います。

今回はホームページの作り方というテーマからは少しスピンアウトして、個人がホームページを持つということを考察してみましょう。

少し前まではホームページを持つといえば、お店をやっている人や会社、個人事務所など広報や宣伝が目的というケースが多かったと思います。今でもそういったホームページの作り方をしているところは多くありますし、これからもその作り方は残っていくと思います。

しかし、個人がホームページを持つという場合には、宣伝や広告といった意味はほとんどありません。もちろん、アフィリエイトや広告収入を目的としてホームページを持つということはありますが、個人がホームページを持つ”新しい目的”ともいうべきものが生まれつつあります。

［セルフ・ブランディング］
日本のインターネットの特徴のひとつは『匿名性』というものでした。自分の名前や所在は隠して言いたいことをいう、バレなければ何をしてもいいという無責任な態度がひとつのステレオタイプでした。

しかし、ホームページを持ち、ツイッターやフェースブックといわれるSNS（ソーシャルネットワーキングサイト）やミニブログなどの登場によって個人が実名で自分の意見を世間に発表するスタイルが確立されつつあります。

匿名ではなく実名で所在も明らかにして堂々と意見を発表することが可能になったわけです。

そこで必要になるのが『セルフ・ブランディング』というコンセプトです。日本人はとかく人を、所属する会社やグループで色分けしようとします。また個人も自分を紹介する場合に、「〇〇会社に務める△△△です」という自己紹介をしがちです。しかし、これからは自分の名前で勝負するセルフ・ブランディングの時代がくるのではないでしょうか。

数年前にホームページを作ろうと思ったら、有料のホームページ作成ソフトやサーバースペースをレンタルして簡単なチラシみたいなホームページを作るのがやっと…というのがホームページ初心者の方の状況だったかもしれません。
また、ホームページが出来てからも更新のたびに大変な思いをするのが常でした。

しかし今では環境がすっかり変わっています。

個人事業主さんや個人の趣味のホームページを持つのであれば、無料のブログサービスを利用すればいとも簡単にホームページを持つことが出来ます。ブログサービスは無料の上に簡単にできているので、知識や技術がなくても小一時間もあればブログを始められます。また、コメント欄が標準装備なので読者とのコミュニケーションも敷居が低く簡単なのも魅力です。

［ブログの特徴］
ホームページは”更新”が重要なポイントとなります。どんなによく出来たホームページであっても、半年も更新されていないホームページではリピーターは期待できません。頻繁にホームページを訪れてもらうためには、更新によって新しい情報を提供し続けなければなりません。

その点、ブログはテキストベースの記事を書いて投稿するだけですから、更新も簡単です。もちろんテキスト だけでなく、動画や写真、音楽などのコンテンツにも対応したブログサービスもありますから、文章だけの寂しいホームページになる心配もありません。とにかく手軽にホームページを持ちたいとお考えならば、ブログサービスを利用するのは賢い選択だと思いますよ！

簡単にホームページの構造についてまとめておきましょう。

Internet Explorer やFirefoxなどのWebブラウザーを使ってホームページを見ると、ブラウザーのウィンドウの中に画像や文章がきれいにレイアウトされて見ることができますが、ホームページのそれぞれのページは、画像や文章が、直にはりつけられているわけではありません。ホームページのデータは、HTML（Hyper Text Markup Language）と呼ばれる”記述言語”を用いて書かれており、その記述通りに表示するようにブラウザーに命令を出しているのです。

ブラウザーは、例えば『文字を赤くしろ』という命令であれば、文字に赤い色をつけたり、『画像を貼り付けろ』という命令であれば、画像をその場所に表示したりします。

HTMLでは、タグと呼ばれる記号を利用することで、ブラウザーに文字や画像を表示するわけですが、このタグの基本的な特徴として、（1.）装飾する部分を開始部分と終了部分の2つが対になって機能し、（2.）あらゆるプラットホームに対応しており、（3.）タグで使われる文字は小文字と大文字の別はあまり気にしないという事が挙げられます。

HTML文書を書く場合、タグはある程度覚えなければなりませんが、基本的なルールさえ覚えてしまえば、あとは調べながら進めていけば問題なく書くことが出来るはずです。最初から凝ったモノに仕上げようとすると大変ですが、最初は読みやすい文書を心がけていけば問題ないと思います。

前回ご紹介したように、ホームページのデータを保管しておく場所がサーバーです。

ホームページは、HTMLやCSS（スタイルシート）で作成したファイルをサーバーに転送することで、誰でも見ることが出来る状態になります。サーバーはクライアントPCからの要求に応えて、データの受け渡しを行う役割を担います。

［データセンターとは？］
データセンターとは、顧客のサーバーを預かり、インターネットへの接続回線や保守・運用サービスなどを提供する施設のこと。サーバーを預かってインターネット回線やメンテナンスを提供するサービスを「コロケーションサービス」、「サーバーハウジングサービス」と呼びます。

［データセンターの魅力］
データセンターは耐震性に優れたビルに高速な通信回線を引き込んだ施設のことで、自家発電設備や高度な空調設備を備え、IDカードによる入退室管理やカメラによる24時間監視などでセキュリティが確保されています。基本的にはサーバの運用は顧客自身が行ないますが、サーバー監視サービスや、定期バックアップなどの付加サービスを提供しているデータセンターもあります。

サーバーは自分で構築することも出来ますが、24時間電源供給や不具合が出た場合の保守などは個人では大変な作業となります。そこでサーバーレンタルという選択肢もあるのですが、自前のサーバーを使いたいというニーズも多くあります。そこで利用したいのが、コロケーションサービスやサーバーハウジングサービスと呼ばれるものです。

今回取り上げるホームページの作り方として、必要となる『サーバー』についてです。以前にもご紹介しましたが、サーバーとはホームページのデータを置いておく場所のことです。

ホームページは、HTMLやCSS（スタイルシート）で作成したファイルをサーバーに転送することで、誰でも見ることの出来ます。ホームページの構成データをサーバーへ転送することを、「アップロード」といいます。

サーバーは、自分でサーバーを購入して独自運用することも可能ですが、高度な専門知識を要すため、初心者に限らず多くの方がサーバー会社と契約してスペースを確保することが一般的です。サーバーサービスは、サーバー専門業者、プロバイダーが契約会員向けに提供するサービス、インターネット関連の企業が幅広く提供するもの、また、サーバーサービスには有料サービス、無料サービスが存在します。

ホームページの作り方のうち、ブログサービスで作成する場合はサービス会社から提供されている「サービス型」（レンタルサービス型）であれば、そもそもサーバーを用意する必要はありません。最近は多くのブログサービスが無料で始められるようになっているので、初期費用が掛からないのが一般的になりつつあります。

レンタルサービス型のCMSやブログの場合は、そのサービスを提供している会社のサーバーを借りてCMSやブログを運用することになります。それ故、別途サーバー会社と契約する必要はありません。

今回はホームページの作り方として、技術的なことから離れて『コンテンツ』のことについて考察してみましょう。

まずコンテンツとは、中味のこと。伝えたいこと、メッセージ、イメージなど。
ホームページを通して、アクセスしてきた人に「何を伝えたいのか」ということを整理しておきましょう。

その際に難しいことは考えなくてもいいです。例えば、自分の趣味のことだったり、興味のあることだったり、なんでもOK。
ただし、趣味のものだったり、興味のあることをホームページで広く一般に公開するわけですから、何か「メッセージ」が必要です。

なんのメッセージもなくただ「集めたもの」を整理して公開しているだけ……というのはどうでしょうか。

最初はそうだったとしても、ホームページとして創り上げていく中で、何か伝えたいポイントが見えてくると思います。それがメッセージです。やはり、メッセージを明確にしておくことが大切です。

次に、そのメッセージを如何に伝えるか。

人間は「ストーリー」が好きです。「なぜそうなったのか」「誰がどうしたのか」「どんな思いがあるのか」「サイドストーリー（裏話）」など。是非、ホームページのコンテンツ作成に際してはストーリーを意識しましょう。

最後の課題として挙げておきたいのが『コンテクスト』です。日本語にすると、文脈とか行間、前後関係、背景などといわれるものです。ストーリーを支える重要な要素ですが、このコンテクストがしっかりしているかどうかが重要です。

ホームページの作り方で無視できないのが、テキストエディタです。ほとんどのパソコンには最初からテキストエディタやメモ帳ソフトが入っていますが、必要最低限の機能しか備わっていないため、使いにくい面があります。

HTMLやスタイルシート（CSS）、JavaScriptなどを直接編集するなら、「タグ」や「プロパティ」の色分け表示可能で、さらに高度な編集機能を搭載したテキストエディタを使ったほうがいいと思います。色分け表示ができるテキストエディタには、タグと文章の違いが一目で分かる、記述ミス・スペルミスがすぐに分かる、有効・無効が分かりやすいといったメリットがあります。

HTMLタグ内部には何らかの色が付けられ、それ以外の文章は黒色で表示されるため、タグと文章の違いが一目で分かるだけで、ホームページの作り方がグッと楽になります。

HTMLタグは「<」記号で始めて、必ず「>」記号で閉じなければなりません。また、属性値は「”」記号で始めて、終わりにも「”」記号を書かなければなりません。これらの対応を忘れると、意図通りには表示されなくなります。ソースが色分け表示されていれば記述ミスを見つけやすくなります。

その他、「メモ帳」のようなテキストエディタではなく、高機能なテキストエディタを使うメリットとして、タブ・全角空白・半角空白の区別ができる、様々な文字コードが扱える、矩形選択や一括インデントなどの編集機能が使える、ブラウザを直接呼び出して表示確認できるなどのメリットが挙げられます。

ホームページの作り方で注目されている考え方が「WEBアクセシビリティ」というものです。まずは、アクセシビリティについてご紹介します。

アクセシビリティ（accessibility）とは、情報やサービス、ソフトウェアなどが、健常者だけでなく高齢者の方や障害を持つ方にとっても使いやすい、扱いやすいかどうかという意味で使われることが多くなっています。「accessibility」とは、「access+ability」と分解され、「近づきやすさ」「接近容易性」といった意味の英単語のことです。

いくつか例を挙げると、手を使えない人のためにマウス操舵だけでなく、キーボードでの操作が可能かどうか。弱視や老眼の人のためにフォントサイズや配色がカスタマイズ可能かどうか。視覚障害の人は読み上げソフトウェアを使用するので、それに適した記述方法が用意されているかどうか。

ホームページの作り方でも、このアクセシビリティという考え方が求められるようになってきています。それが一般に「WEBアクセシビリティ」と呼ばれるものです。具体的には、画像や音声などには代替テキストによる注釈をつけること、すべての要素をキーボードで指定できるようにすること、情報内容と構造、および表現を分離できるようにする（HTML文書とスタイルシートの使用）などの方針が定められています。このような作り方の根本には、「ユニバーサルデザイン」という考え方があり、万人が使用できる環境を作るという思想が必要とされています。

今回、ホームページの作り方の基本として学ぶのは、「スタイルシート」です。ホームページをブラウザに表示する際に必要になるものですが、スタイルシート単体ではあまり意味がありません。HTML文書とセットで初めて機能するものなのですが、今回はHPの作り方としてスタイルシートのことを勉強しましょう。

そもそもスタイルシートとは、ワープロソフトなどで、フォントの種類や文字の大きさ、色、行間の幅、修飾など、文書の見栄えに関する情報をひとまとめにした、文書の雛形のことを指しました。あらかじめ複数のスタイルシートを用意しておくことにより、簡単に文書作成することができるというものです。伝票作成などの定型文書を作成する際に、スタイルシートを利用することで見栄えを統一することができる便利なものです。

このスタイルシートという考え方はサイト制作でも利用されるようになり、現在では「スタイルシート」の意味はむしろホームページの作り方のほうが主流となっています。

HTML文書にスタイルシートを適用することで、複数のページの見栄えを統一することができます。また、HTML文書からレイアウトに関する情報などを分離し、文書の構造だけを記述することが可能になるので、HTML文書の論理的な構造が把握しやすくなるほか、メンテナンスがずっと容易になるというメリットがあります。

また、HTML文書がキレイになるため、検索エンジンのクローラーにも読みやすい構造になるため、SEO的にもいいとされています。