コラム
ホームページの作り方

WordPressでのホームページの作り方

このエントリーをはてなブックマークに追加

ホームページ作成には、HTMLやCSSといったプログラミングのスキルが必要です。

そのため、初心者がHTMLを使ってホームページを一から作るのは大変です。

でも、WordPressを使えば、初心者でも素敵なサイトを簡単に作ることができます。

HTMLでのホームページは難易度が高い

本来、ホームページを作るには、HTML(HyperText Markup Language)とCSS(Cascading Style Sheets)の知識が必須です。
 
もし、HTMLとcssを使わずにホームページを作ろうとすると、画像がないHTMLメールのように、文字だけのものになります。
 
かつて、インターネットが世の中に出始めた頃は、そんな文字だけのホームページも実際にありましたが、今ではほとんど見かけないほど、美しく装飾された文字や画像が入ったホームページの方が一般的になりました。
 
訴求効果のあるホームページを作るには、HTMLとCSSの知識が欠かせない、というわけです。
 

HTMLの役割

HTMLは、ホームページの基本的な設定を作ることができ、文字を大きくする、色を変える、画像を入れるなど、様々なことができます。
 
ところが、HTMLでは、ひとつひとつ設定していかなければならないので、すべてをHTMLで作ると、コードと呼ばれる文字列がとても長くなってしまいます。
 
また、様々なことができるとはいえ、あまり複雑なことまではできません。
 
 

CSSでclassを作るとラクチン!

そこでCSSの出番です。
 
CSSができることの1つは、あるルールのまとまりを作ることができることです。これをclassといいます。
 
例えば、青い色で「xxx」という文字列が入ったボタンが必要だとします。
 
このボタンの設定をCSSで作ります。“青い色で、「xxx」という文字列が入り、高さ、幅はこのくらいで……”という設定です。名前を「button-blue」とします。
 
この「button-blue」を、HTMLの中で必要な場所に入れておけばいいのです。
 
CSSを設定しないでHTMLで書いた場合は、そのボタンを入れる場所にいちいち、「青い色で、xxxという文字列で、高さは……」と書き込まなければなりません。
 
しかも、「影付きにしたい」など複雑な設定は、そもそもHTML自体ができません。CSSなら、より複雑なことができます。

CSSなら設定を一発で変更できる!

また、「button-blue」の設定を変えたい、という場合も便利です。
 
文字列を「xxx」から「yyy」に変える時、HTMLですと、該当する場所をひとつひとつ直していかなければなりませんが、CSSで設定しておけば、「button-blue」の設定を変えるだけですべて反映されます。
 
まとめますと、
 
  • HTMLだけでもホームページを作ることはできる
  • ただし、手間がかかる上に、変更する時が大変
  • ある程度のことはできるけれど、あまり複雑なことはできない
一方、CSSを使うと、
 
  • できることが増えるので、表現が多彩になる
  • 変更するときは、該当のCSSを直せば一括で反映されるので、かかる時間も労力も少なくなる
といったメリットがあります。
 

HTMLとCSSを使うにはプログラミングのスキルが必要

このように、HTMLとCSSのおかげで、ホームページは魅力的なものになりますが、この知識を習得するのは簡単ではありません。プログラミングのスキルが必要になってきます。
 
特に、最近はスマートフォンの画面で見やすいものに自動で切り替わる、レスポンシブルデザインというものが必要です。これをHTMLでやろうとするのは、かなり高度な知識が必要です。
 
スマートフォン用のHTML画面を作っておいて切り替わるようにする、という方法もありますが、いずれにしても、デザインとコーディングというスキルが必要になってきます。
 
ホームページをHTMLで比較的簡単に作ることができるAdobe Dreamweaverやホームページビルダーというソフトがありますが、こちらも基本的な知識がないと、使いこなすことができません。

ホームページの作り方

HTMLとCSSの知識がなければ、きれいなホームページを作ることはできないのか? というと、そんなことはありません。
 
WordPress や Movable Type のようなCMS(コンテンツマネージメントシステム)を使えば、早いし便利です。
 

初心者にWordPressをお勧めする理由

  • 無料で使える
    WordPressはどなたでも無料で使うことができます。
     
  • テーマを選んでインストールするだけ
    デザインテンプレートが多数用意されており、インストールしてテーマ(テンプレート)を選ぶだけで、そこそこのものが作れます。
     
  • ユーザー数が多い
    WordPressのシェアは、世界でも日本でもトップです。WordPressは無料で利用できるため、サポートはありませんが、ユーザー数が多いため、使い方や解決策などの情報も数多くアップされています。
    “WordPress、日本で82.4%という高いシェア”
     
  • 多様なホームページが作成可能
    テーマやプラグイン(追加機能)を使用することで、多様なホームページを作ることができます。ブログ、企業のWebサイト、ネットショップ、ギャラリー、eラーニングモジュールなど。
WordPressを使った事例を見る
 

ヘッダー画像の作り方のコツ

ホームページにアクセスした時、まず何を見るでしょうか?
ヘッダー画像が目に飛び込んでくるはずです。

ヘッダー画像はホームページの“顔”です。ここでブログやサイトの世界観を見せているので、見に来た人が直観的に「なんだか、よさそうなページだな」「ここは私が見ておくとよいところだな」と思わせる必要があります。

ヘッダー画像には、どんなホームページなのか一目瞭然になるように、キャッチコピーがあるといいですね。

写真も、意味のある写真を使いましょう。時々、あまり内容と関係のない写真を使っているホームページを見受けますが、見に来た人が混乱してしまいます。

なので、ホームページの内容や商品、会社のミッションなどと関連性のある写真を使ってください。

また、スマートフォンで見たときの見やすさが、非常に重要です。“スマホファースト”で作成します。

✔ 文字の大きさが、スマートフォンでも見やすいか。
✔ 文字を詰め込み過ぎていないか。
✔ 画像が見やすいか。

パソコンで見たときの画像と、スマートフォンで見たときの画像を入れておき、画像が切り替わって、最適化した画像が見れるようにしておくとベターです。

事例(または開発経緯)を見る
こちらの事例は、幅を狭めるとスマホ版の画像になります。

お問合せフォームの作り方

自分のホームページを作るなら、当然、そこからお問合せをしてほしいですよね。
 
ホームページを見てくれた人が、「この商品いいな!」「このサービス気になる」と思っても、サイトの管理者と連絡を取る方法がなければ、そのままで終わってしまいます。
 
せっかく気に入ってくれたのに、みすみすお客様を逃してしまう、ということになるのです。
 
そこで「お問合せフォーム」が必要になってきます。
 
これはマーケティング用語では、CTA(Call To Action)と呼ばれるもので、一般的に「行動喚起」と訳されます。
 
この「お問合せフォームをHTMLで作るとなると、プログラミングの知識が必要です。
 
しかし、WordPressなら、「Contact Form 7」や「MW WP Form」といったプラグイン(追加機能)を活用することによって、簡単に作成することができます。
 
こういった利点もあって、自分のホームページを作るならWordPressがお勧めです。
 

MW WP Form

本格的なメールフォームが作れます。
確認画面、完了画面(Thank youページ)を作ることができ、アクセス解析ができます。
 

Contact Form 7

Contact Form 7で作ったフォームに登録されると、画面の中で「送信されました」と出るだけ、ページの遷移はありません。
 
専門的な知識があれば、ページ遷移しなくても、アクセス解析をすることは可能です。
Halonetではこちらのアクセス解析もできます。

サイトマップの作り方

サイトマップとは、ホームページ全体のコンテンツの構成を、リスト形式でまとめたもので、地図のようにどこに何があるかわかるようになっています。
 
サイトマップを作る目的は、検索エンジンの自動巡回プログラムであるクローラーに、ホームページの内容を漏れなく情報収集してもらい、検索エンジンに登録(インデックス)してもらうことです。
 
なぜ検索エンジンに登録してもらうことが必要かというと、登録されていなければ、検索対象にならないからです。
 
つまり、いくらよい記事を書いたり、キーワードを入れた記事を書いても、登録されていないと検索に引っ掛からないということなのです。
 
新しく作ったホームページは、はじめは単独で存在しています。このままですと、検索エンジンが見に来ることができません。
 
外部のホームページとのリンクを作れば、時間がかかりますが、そこから検索エンジンが見に来てくれるかもしれません。
 
サイトマップを作ってGoogleSearchConsoleに登録すれば、検索エンジンがすぐに見に来てくれます。サイトマップがあることで、ホームページの内容をくまなく見てくれます。
 
そして、検索エンジンに登録されて、検索対象になる、ということです。
 
この検索エンジンのためのサイトマップはXMLサイトマップといい、これもWordPressでプラグインを入れておけば、自動的に作ることができます。
 
サイトマップには、ほかにHTMLサイトマップがあり、こちらはホームページを見に来たユーザーが見ることができるものです。どこに何があるかわかりにくい場合、サイトマップから目的の内容を見つけに行くことができます。
 

 

 

■関連記事
>> ブログを書き続けるための5つのコツ

このエントリーをはてなブックマークに追加
コラム