会社やお店の知名度を上げる為に今や欠かせないウェブサイト(ホームページ・HP)。
今どきウェブサイトが無いという事業所は無いと思いますが、サイトは作ったけれどほとんどアクセスが無く活用できていないとか、外注しているので費用がかかりあまり更新していないというケースもあります。

ウェブサイトを外注しないで無料で作成、運営するウェブサービスなどがあり、以前よりも費用をかけずに会社やお店の知名度・認知度を上げる方法など、ウェブサイトを活用するヒントにして下さい。

前段は「ウェブサイトってな~に?」とか「ブログとHTMLサイトの違い」といったウェブサイトの基礎的な話ですので、実践的なウェブサイト作成に関することを知りたいという方はウェブサイトの作成から読み進めて下さい。

ウェブサイトのしくみと役割

まず最初にそもそもウェブサイトとはな~に?
というところから始めたいと思います。

ウェブサイトは“Website”と表記しますが、一般に“ホームページ”と呼ばれることもあります。
ホームページとはウェブサイト全体を言うのではなく、通常ウェブサイトへの入口となるサイトのトップページ、ルートディレクトリにあるindexファイルで表示されるページのことです。

ウェブサイトはインターネット上で閲覧するのですが、サイトのアドレス(URL)が分かれば、世界中のどこにでもあるサイトを見ることが出来ます。そのようなことが可能になっているのが、サイトの住所(アドレス)を構成する“ドメイン”のシステムです。

ドメイン

  • ○○○.com
  • ○○○.net
  • ○○○.jp

などのような最後の部分に使われる com・net・jp などをTLD(トップレベルドメイン)と言い、2015年11月現在で1096個のドメインがあると言われています。
左側手前の文字がSLD(サブレベルドメイン)と言い、ここは任意に自由に決めることの出来る部分ですが、すでに誰かが登録している文字列は使用できません。

SLDの文字数に制限はありませんので、SLDとTLDの組合せによりたくさんのサイトが世界に存在し、それぞれに異なるドメインが付いているので、世界中のサイトを閲覧することが出来るようになっています。
世界中には10億個を超えるウェブサイトが確認されています。

ウェブサイトの構造

ウェブサイトはブラウザというアプリケーションソフトにより閲覧します。
主に使用されているブラウザソフトには次のような種類があります。

  • Internet Explorer
  • Microsoft Edge
  • Safari
  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Android Webview
  • Samsung Internet
  • Android Browser

HTML言語で書かれたデータをブラウザで開くことによって、通常よくみるウェブサイトになります。
データファイルはHTML言語で書かれているので、ファイルの拡張子は「.html」「.htm」となります。

HTMLファイルはすべて文字ですが、画像や動画を表示させるのもすべて文字で書かれたデータです。

文字の大きさとか色や配置など、そして画像の大きさや配置などの見え方を制御しないと、非常に見ずらいページになってしまうので、デザインを指定する「CSSファイル」が別に必要になります。

つまりウェブサイトは「HTMLファイル」と「CSSファイル」によって構成されています。

この辺の話は奥が深く、CSSに関する解説だけでも数百ページもの文量になるので省略しますが、ウェブサイトは「HTMLファイル」と「CSSファイル」によって作られているということを覚えておきましょう。

ウェブサイトは更新が必要

ウェブサイトは作ったらおしまいということはありません。
ご自分や社内のスタッフがサイトを作るケースや、専門業者に外注するというケースもあります。
どちらの場合でも、作ったまま数年もそのままという状態では、やがてアクセスしてくる人も少なくなり、存在していないも同様の役に立たないウェブサイトになってしまいます。

そのような状態にならない為には、サイトの更新をしていかなければなりません。
外注している場合には、外注先との契約で「サイトの更新」についても取決めをしておく方がよいでしょう。
社内やご自分で運営している場合には、更新の必要が出てきた時には更新し、常にサイトの情報などが最新のものになっているようにしたいですね。

*このサイトは管理人が自分で作っているサイトなので、更新作業は欠かさずやっていこうと思っています。

更新の必要性に関してですが、コンテンツの内容に変化があったとか、コンテンツの内容そのものが古く過ぎて現代では通用しないと言った場合は、当然更新しないといけませんが、インターネットの環境が変わったことによって更新が必要になることもあります。

ウェブ閲覧の半分以上がスマートフォンからのものになり、ウェブページはPCとスマホの両方に対応する必要が出て来ました。
主流となる「レスポンシブデザイン」に対応したサイトと、以前のままのサイトではユーザビリティが大きく違います。
モバイル対応の為のデザイン変更がすべてのサイトで必要になっていますが、小さな事業所のサイトの中には、未だにモバイル対応できていないサイトが数多くあるようです。

ウェブサイトを作っただけで放置するのは禁物です!!

ブログとHTMLサイトの違い

ウェブサイトにブログを利用しているケースがすごく多いのを知っていますか。
「ブログって日記のことでしょ?」と思うかもしれませんが、ブログそのものが生まれたのは確かに日記のようなもので、プログラムの開発経過を記録した“ウェブログ”がそもそもブログが生まれたキッカケでした。

ブログは「php言語」を使ったプログラムで、ウェブページをHTML言語の知識が無くても作れるようにしたものです。
このようなプログラムを「CMS(コンテンツ・マネージメント・システム)」と言います。

先に「ウェブサイトの構造」で書いたように、HTMLファイルをブラウザで閲覧するものがウェブサイトですが、コンテンツの内容はHTML言語による命令文によって書いていきます。

このサイトは「ウェブサービス使えてますか?」というタイトルです。
仕事や生活などいろんなシーンで使える便利なWebサービスを集めています。

上の文章はこのサイトのタイトルと概要を書いたものですが、文字色がオレンジになって、1行目と2行目は改行されています。

これをHTML言語による命令文を使わずに普通に文字を書くと次のようになります。

このサイトは「ウェブサービス使えてますか?」というタイトルです。仕事や生活などいろんなシーンで使える便利なWebサービスを集めています。

文字色をオレンジにして改行する為には次のようなHTMLの命令文で囲ってあげます。



このサイトは「ウェブサービス使えてますか?」というタイトルです。
仕事や生活などいろんなシーンで使える便利なWebサービスを集めています。

<p>とか<br />といった文字は、「段落」とか「改行」を指示するHTMLタグです。

HTMLファイルはこのようなタグを書きながら、コンテンツの内容を書込んでいきますが、ブログなどのCMSはHTMLの知識が無くても、文章を書込んでいきながら、簡単な操作でHTMLファイルを作ることができるので、ウェブサイト作成にブログが利用されることが多くなっているわけです。

管理しやすいCMS

ブログを作るような感覚でウェブサイトを作っていけるのが「CMS」です。
CMSは海外のものが多いのですが、日本で開発されたシステムもあります。
どのようなシステムがあるかいくつかピックアップしてみます。

CMSwix
イスラエルで生まれたクラウドサービスです。テンプレートが用意されているので、ページに配置する文章や画像などを貼りつけて、簡単にページを作ることができます。
有料プランもありますが、無料で自社HPを公開することが出来ます。
独自ドメインを取得すると独自ドメインでのHP運用もできます。
jimdo
ドイツで生まれたクラウドサービスです。このサービスも「wix」とほぼ同じ仕様です。
無料のドメインはサブドメイン方式なので、分かりやすいアドレスを作ることが出来ます。
wp
CMSファイルをダウンロードしてレンタルサーバーなどで運用するタイプのCMSです。世界中のウェブサイトの中で、CMSで作ったサイトの6割を占めるのがWordPressです。
ユーザーも多く、機能拡張プラグインが豊富で、いろんなデザインや個性的なサイトを作ることが出来ます。
baser
日本で開発されたCMSです。
WoredPressと同様にファイルをダウンロードして、レンタルサーバーで運用します。
管理画面はすべて日本語ですので、使いやすさでは申し分がありません。

CMSを使ったウェブサイトの作成・運用は、HTMLコードを打込んで作るサイトよりも、更新作業がすごく楽になります。

HTMLサイトの場合は、新しいページを増やすとすべてのページに新規ページへのリンクを作らなければなりません。
CMSはこの作業を自動で行うことができるので、更新時の作業時間が格段に短くなります。また、サイト全体のデザインに関しても、ヘッダーロゴやヘッダー画像などの交換はボタン一つで出来るのに対し、HTMLサイトではすべてのページを手作業で行わなわなければなりません。

その他にもアクセス解析のコードの変更とか、広告掲載しているサイトでは広告コードの変更も簡単に出来ます。

インターネットが発明され、ウェブサイトが作られ始めた頃は、HTMLファイル+CSSファイルでウェブページをひたすら作っていましたが、今では、CMSでサイトを作ることが常識のような時代になっています。

これまで自社のサイトを外注で依頼して方は、試しにCMSを体験して「ホームページって簡単に作ることが出来るんだ」ということ実感してほしいと思います。

ウェブサイトの作成

ここからは、初めて自分でウェブサイトを作る人向けのコンテンツです。
ウェブサイトはこれまで書いてきたように二つの方法があります。

  • HTMLファイル+CSSファイルを手打ちで作る
  • CMS(コンテンツ・マネージメント・システム)で作る

HTMLファイル+CSSファイルは実用的ではありませんので、ここではCMSを使う方法を解説していきます。特に世界中で多く使われているWordPressによってサイトを作る方法について解説します。

WordPressの準備

レンタルサーバーを借りる

WordPressはシステムファイルをサーバーにアップロードして使いますので、まずサーバーを用意します。
ほとんどの方はレンタルサーバーを使うことになると思いますので、お好みのレンタルサーバーを契約して下さい。

レンタルサーバーにはどんなサーバーがあるのか分からないという場合は、こちらも参考になります。
》》》 レンタルサーバー選びのポイントは費用と用途とSSL

ほとんどのサーバーは無料のお試し期間がありますので、まずお試しでやってみて、使いづらかったら変えてみたりとかして下さい。

サーバーにデータベースを作る

レンタルサーバーにはデータベースが用意されています。
(無料のサーバーや格安のサーバーにはデータベースが無いものもありますのでご注意を!)

データベースを作る時に必要な情報

  • 任意のデータベース名
  • 任意のユーザー名
  • 任意のパスワード

以上を考えておいてデータベースを作ります。

WordPressファイルをダウンロードしてアップロードする

WordPressファイルをWordPress 日本語サイトから最新版をダウンロードします。

ダウンロードするとたくさんのファイルがありますが、その中で加工するのは一つのファイルだけです。

「wp-config-sample.php」をテキストエディタで開きます。
テキストエディタはWindowsの“メモ帳”などを使います。

ファイルを開いて名前を「wp-config.php」に変えて保存します。
そして以下の部分を次のように4ヵ所書き換えます。

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'database_name_here');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'username_here');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'password_here');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

/** データベースのテーブルを作成する際のデータベースの文字セット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

database_name_here ⇒ データベース作成時のデータベース名
username_here ⇒ データベース作成時のユーザー名
password_here ⇒ データベース作成時のパスワード
localhost ⇒ サーバーで指定されるホスト名

つづいて次の部分を書き換えます。

/**#@+
 * 認証用ユニークキー
 *
 * それぞれを異なるユニーク (一意) な文字列に変更してください。
 * {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org の秘密鍵サービス} で自動生成することもできます。
 * 後でいつでも変更して、既存のすべての cookie を無効にできます。これにより、すべてのユーザーを強制的に再ログインさせることになります。
 *
 * @since 2.6.0
 */
define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

/**#@-*/

define・・・・・・の8行を秘密の鍵で取得したコードに書き換えます。
秘密の鍵はhttps://api.wordpress.org/secret-key/1.1/salt/にアクセスすると表示されます。

最後にもう1ヶ所変更します。

define('WP_DEBUG', false);

/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */

「define(‘WP_DEBUG’, false);」の下に次のコードを追加します。

define( 'WP_POST_REVISIONS', false );

ここを変える理由は
ワードプレスのインストール時にやっておきたいリビジョン機能の制御
を参照して下さい。

「wp-config.php」ファイルの変更を行い、他のファイルも一緒にアップロードします。
アップロードにはFTPクライアントを使いますが、FFFTPがお勧めです。

アップロードが完了したら「http://アップローしたサイトのアドレス/wp-admin/install.php」にアクセスして、サイトタイトルなどをとりあえず決めて、WordPressのインストールを完了させます。

WordPressでサイトを作る

記事の投稿方法

記事の投稿も含めてサイトの更新やメンテナンスをするには、まず「WordPressの管理画面」にログインします。

ウェブブラウザのアドレスバーに「http://アップローしたサイトのアドレス/wp-admin」と入力して[ENTER]キーを押すとログインページに移ります。

ユーザー名とパスワードを入力してログインします。
ログインすると「ダッシュボード」画面になります。

wp

左サイドバーの「投稿」にカーソルを移動します。折りたたみになっていたサブメニューが表示されるので、新規の投稿の時は「新規追加」をクリックします。以前に投稿した記事を編集する場合には「記事一覧」をクリックして、投稿記事のリストを表示させて編集したい記事の「編集」をクリックします。

wp

この画面で直接、文字の入力や削除・訂正もできます。

新規の記事の入力が終わり、アップする時は「公開」をクリックします。下書きの状態で保存するには「下書きとして保存」をクリックします。
投稿済の記事を編集した場合は、「更新」になります。

画像の挿入も簡単に出来ますので、気楽な気持ちでまずは慣れてみて下さい。

サイトの作成が途中だとか、まだ公開したくない場合は、「下書き」のままにしておくか、「表示設定」で「検索エンジンがサイトをインデックスしないようにする」にチェックを入れておくと「公開」してもアドレスを知っている人しかアクセス出来ないので、表示状態を確認しながら編集を続けることができます。

wp

まとめ

WordPressを使ったサイト作りは、HTMLの知識が無くても簡単にウェブサイトを作っていくことが出来ます。

細かなカスタマイズの方法や、高度なテクニックなどもユーザーによるフォーラムが充実しています。機能拡張のプラグインを導入すると更に高度なことも出来るようになります。

サイト作りが楽しくなること請け合いですので、是非やってみて下さい。

サイト運営の費用としては

  • 独自ドメイン代 年間1,000円ちょっと
  • レンタルサーバー代 年間数千円

独自ドメインを使用しなければサーバー代だけで運営していけます。
外注してHPを作っていたことが馬鹿らしくなりますよ。

自社や自分で作るのはやはりしんどいな~という場合には、リーズナブルな費用でホームページの作成・運営を受けてくれるホームページ作成サービスもあります。

質問などありましたらコメントからお気軽にどうぞ。

こんなサービスもあります 》》 無料で試せる、ホームページ作成なら【とりあえずHP】