ホームページの作り方

小さなお店のHPの作り方として、前回はホームページとブログを作ろうというところまでご紹介しました。
そこで今回のHPの作り方ですが、なぜホームページがあるのにブログも作らなきゃいけないかについて見ていくことにしましょう。

そもそも、ホームページとブログの違いについてですが、『何が違うの？』と疑問に思われる方も多いと思います。

［HPの作り方；ホームページとブログの違い］
まず基本的なことですが、ブログとはホームページの一つです。簡単にいうと、日記タイプのホームページがブログというわけです。

［HPの作り方；ブログの特徴］
ブログは一般的なホームページに比べて更新が簡単、初心者でも楽に始められるという特徴がありますが、その分多くの制限もあります。

＜メリット＞
◆無料で出来る（無料ブログサービスがたくさんある）
◆記事の更新、リンクなど一部の編集が非常に簡単
◆ページ数が簡単に増やせる（トップページ、カテゴリー、個別ページ、アーカイブなど、一度の投稿で複数ページが更新・自動生成される）

＜デメリット＞
◆容量に制限
◆画像、動画などリッチコンテンツのアップロードに制限
◆無料ブログサービス利用の場合、独自ドメインに制限（又は使用不可）
◆サイトデザインがあまり選べない

このようにブログにはメリット・デメリットがありますが、ホームページに比べて更新が簡単なことは大きな魅力となっています。ホームページ初心者の方の悩みがサイト更新に関するものが多い現実からすると、更新が簡単だというメリットは大きいと云えます。

次回の”小さなお店のHPの作り方#3”では、ホームページのメリット・デメリットについて見ていくことにしましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームページの作り方というと、技術的な作り方とコンテンツ（内容）の作り方と大きく2つあります。どうしてもホームページの作り方と聞くと、技術的なことばかりがクローズアップされますが、なんと云ってもホームページの作り方で重要になるのはコンテンツの作り方になります。

ホームページの技術的な作り方にばかり気をつけてしまうと、中身のないホームページが出来上がってしまうこともしばしば。ホームページの作り方で本当に気をつけなければならないのは、コンテンツの作り方なんです。

内容さえしっかりしていれば、技術的なことはあとからなんとでも修正がききますが、コンテンツがスカスカというのはなかなか修正がききません。ホームページの作り方で重要なのはコンテンツ（中身）だということです。でも、どうしても技術的な作り方を知らないと、ホームページなんて作れないんじゃないかと思う人が少なくありません。技術的な作り方のほうが順序だてて勉強できますし、すぐに形に表れるので学びやすいというのもあります。

でも本当にしっかりと練らないといけないのは、ホームページの中身の作り方なのです。コンテンツの作り方さえしっかりとしていれば、作り方なんてなんとかなるものです。「何を伝えたいのか」「何が重要なことなのか」ということを見失わないでホームページの作り方を勉強していきましょう。

ホームページの作り方を勉強するに当たって、本当に大事なことは技術的な作り方を学ぶことではなくて、コンテンツの作り方をしっかりとすることだということを今回はお伝えしました。

今回はHPの作り方の基本として、HTMLの基本についてご紹介しましょう。
初回の今日は、HTMLのタグについて簡単な説明を行っていきます。まだまだ、HPの作り方といえる段階ではありませんが、HTMLの構造やルールを覚えることが、HPの作り方の基本になりますのでしっかりと覚えていきましょう。

HP（ホームページ）は、HTML（Hyper Text Markup Language；ハイパーテキストマークアップランゲージ）というマークアップ言語を使って作られています。タグというマーク（命令）を使って、HTML文書の構造を指定したり、文字の大きさや色を変えるといったことなどが出来ます。HTMLを使ってHPを作る場合、メモ帳などのテキストエディタを使ってタグを記入していきますが、それをHTMLファイルとして保存しブラウザで開くと、タグの指定されたとおりにブラウザに表示されることになります。

HPの作り方の基本として、タグとは<タグ名>の記号で囲まれた半角の英数字のことです。試しにどのホームページでも構わないので、ホームページ上で右クリックして、「ソースの表示」を選択してみて下さい。メモ帳が立ち上がってたくさんの<　>で囲まれた文字が表示されると思います。この<>で囲まれているのがタグです。

メモ帳に表示されている文字は、同じ大きさで色もついていませんが、このタグを使って書かれたHTML文書をブラウザで表示すると、タグで指定された通りに文字の大きさや色を変えて表示されることになります。