WEB制作コラム (WEB制作のポイント)

初心者が、WordPressでコーポレートサイトを作る全手順-1


初心者が、WordPressでコーポレートサイトを作る全手順

WordPressは、初心者でも十分に扱える優秀なCMSツールだ。
一般的にはブログソフトと認知されているが、カスタマイズ次第で、社長を納得させるだけのコーポレートサイトを構築できるほどの能力を持っている。

筆者がWordPressを採用する理由は、かんたんにコーポレートサイトを作れるからというだけではない。
WEBサイトは作ることを目的とすべきではなく、運用し、ビジネスに貢献させることこそ、企業が行うべきことだという信念があるからだ。

WEB制作プロダクションの筆者が言うのもおかしな話だが、多額な費用をかけ、きらびやかなWEBサイトを作っただけでは、ビジネスに貢献することなどあり得ない。
自社製品やサービスを紹介するコンテンツを作り、修正し、また加えていく。その繰り返しをねばり強く重ねていく企業だけがネットで強くなっていく。

このコーポレートサイトの運用に、最適といえるツールがWordPressなのだ。
WordPressは検索エンジンとの親和性が高い。これは世界的に証明されている。すなわち、集客を行ううえで有利だということだ。

社長から突然自社サイトを作れと命じられた。自社サイトにあまりコストをかけられない。あなたが、こんな事情を持つ担当者なら、この記事を参考にしながら、自社サイトの構築に取り組んでほしい。半年後、なるほど!と思えることが起こるはずだ。

WordPressを企業WEBサイトに仕上げるための作業ポイント

残念ながら、いくらWordPressがすごいと言っても、インストールしただけで企業WEBサイトとしての体裁は整わない。最低限の見栄えと構成を備えるべきだ。

この記事では、プログラミングはもちろん、HTMLやCSSを編集することなく、WordPressの管理画面だけを操作して企業WEBサイトへ仕上げていく手順を紹介することがテーマだ。

  • WEBサイトの構成を考える
  • コーポレートサイトに適したテーマを選ぶ
  • コーポレートサイトには不要なWordPressの機能や表示を削除する
  • WordPressでグローバルナビゲーション(サイトメニュー)を作る
  • WordPressでTOPページ(HOME)を作る
  • WordPressで会社案内ページを作る
  • WordPressで事業内容ページを作る
  • WordPressでお問い合わせページを作る
  • WordPressで最新のお知らせページを作る
  • ヘッダー画像を差し替える

WEBサイトの構成を考える

WordPressに手を加える前にやるべきは、サイトの構成を考えること。「周到な準備があれば、レースはスタートする前に決まっている」多くのスポーツ選手が口にする言葉だ。
企業WEBサイトのミニマム構成は、おおよそ以下のようなサイトマップになる。

コーポレートサイトのミニマム・サイトマップ

WordPressには、「固定ページ」という文字通り更新を行わない定型ページと、随時更新を行っていく「投稿ページ」という概念がある。上記のサイトマップを2つの概念を使って構築していく。

青枠で囲われている

  • TOPページ(HOME)
  • 会社案内
  • 事業内容
  • お問い合せ

については、WordPressの「固定ページ」を用いて制作。

赤枠で囲われている

  • お知らせ
  • お知らせ詳細

については、更新を重ねていくコンテンツなので、WordPressの「投稿ページ」を用いて制作する。

コーポレートサイトに適した「テーマ(フォーマット)」を選ぶ

WordPressの初期状態

WordPress4.1.1(2015年4月6日現在)のインストールが完了した直後は、次のようなページが表示される。
なんだこりゃ?と感じるほど、何の趣向もないページだ。

WordPressのインストールは、先に優秀なコンテンツが存在するので、そちらを参考にされたい。
「WordPress インストール」と検索するだけで、詳細な記事がいくつも見つかるのは、最も普及しているCMSツールである証拠でもある。あなたがWordPressに関して、分からないことが出てきても、いくらでも助けてくれる人たちがいるのは何とも心強い。これも筆者がWordPressをおすすめする理由のひとつだ。

「WordPress インストール」でGoogle検索してみる

WordPressの初期状態画面

WordPressの「テーマ」を選択しよう

本格的な作業に着手する前に、WordPressのテーマを選び直す。テーマとは、デザインフォーマットのことだ。
先ほど画面キャプチャで示したテーマは、WordPressのバージョン4.1.1の初期設定で選択されているテーマだが、ページの左側に機能が集中しており企業WEBサイトとしては、なじみのないものだ。思い切って、「コーポレートサイト」っぽくなりそうな、他のテーマに切り替えよう。

管理画面にログインし、[外観]-[テーマ]を選択すると、標準でインストールされているテーマが表示される。
今回は、この中から「Twenty Thirteen」を使用する。
自分好みのテーマをネットで探し、インストールすることも可能だが、ひとまず「Twenty Thirteen」を選択してみよう。

テーマを切り替えるのは、デザインキャプチャの下に表示されている「有効化」ボタンを押すだけだ。

WordPressのテーマ一覧画面

「Twenty Thirteen」を有効にした後、サイトのTOPページ(HOME)を表示した状態。

テーマ変更後のTOPページ(HOME)

WordPressから、コーポレートサイトには不要な機能や表示を削除する

標準テンプレート上からコーポレートサイトとして不要な要素を取り除いていこう。下のキャプチャの×印が削除する要素だ。

削除する要素

管理画面の[外観]-[ウィジェット(※)]を選択すると、左側に利用できるウィジェット、右側に設定中のウィジェットの一覧が表示される。このなかの「メインウィジェットエリア」から取り除くウィジェットを削除する。

※「ウィジェット」とは、サイトを構成する「部品」。

削除管理画面

作業を終えると、不要なものはすべて排除され、スッキリとしたフォーマットになった。

削除後のTOP

こんどは、コーポレートサイトには必要のない、投稿ページへのコメントを受け付けないようにするための設定を行おう。
管理画面の[設定]-[ディスカッション※]を選択するとディスカッションに関する設定が表示される。

※「ディスカッション」とは、訪問者とコミュニケーションを図るためのツールのこと。

コメント停止など

初心者でも、かんたん!グローバルナビゲーション(サイトメニュー)の設定

固定ページを削除する

まず、WordPressのインストール時点でサンプルとしてすでに登録されている固定ページを削除する。
管理画面の[固定ページ]で固定ページの一覧が表示されるので、タイトルが「サンプルページ」のページを「ゴミ箱」へ送る。

サンプルページの削除

固定ページの「枠」を準備しておこう

次にWordPressの「固定ページ」でつくるページの「枠(内容はあとで入力)」を準備する。これらは、グローバルナビゲーション(サイトメニュー)からのリンク先ページとなるものだ。

  • TOPページ(HOME)
  • 会社案内
  • 事業内容
  • お問い合せ

これらは、管理画面の[固定ページ]-[新規追加]から入力する。
とりあえず、今のところ内容はなくても構わない。まったく何も入力していないと、グローバルナビゲーションのリンクをクリックしても変化がないので、ページタイトル程度は入力しておこう。

固定ページの入力

4ページ分を入力し、この状態で固定ページの一覧を表示すると以下のようになる。

固定ページ一覧

次に、登録した固定ページをグランドナビゲーション(サイトメニュー)に設定していく。
ちなみに、現状のままサイトのTOPを表示すると以下の様に表示されるが、固定ページの一覧がグランドナビゲーションに表示されているだけ。つまり、表示順も指定できないし、投稿ページで制作する「お知らせ」へのリンクも追加できない。
従って、あとで「メニュー」ウィジェットを使って作り直す。「メニュー」ウィジェットを利用すれば、表示順や任意のページへのリンク追加が自由自在になるのだ。

自動的に生成されたグランドナビゲーション

グランドナビゲーションの作成

管理画面の[外観]-[メニュー]を選択すると、「メニューの編集」画面が表示される。ここでは、画面右側にある「メニュー構造」にグランドナビゲーションのメニューを上から順に設定していく。

まず、固定ページで消したはずの「サンプルページ」が残っている(これはWordPressのバグっぽい)ので、これを削除する。メニューの個別設定を開き、「削除」をクリックすれば削除される。

メニューの編集(1)

次に、上から順にグランドナビゲーションに表示するメニューを追加していく。
追加したい固定ページをチェックし、「メニューに追加」をクリックすると、「メニュー構造」に表示される。これをメニューの分だけ繰り返す。順番を変更したい場合は、メニュー要素をつかみ、上下にドラッグすれば、かんたんに変更可能だ。

メニューの編集(2)

続いて、投稿ページで制作する「お知らせ」もグランドナビゲーション(サイトメニュー)に設定する。
「お知らせ」は、「カテゴリー」から選択する。
初期段階で、投稿のカテゴリーは「未分類」しか存在しないため、ひとまず「未分類」をチェックし、メニューへ追加する。さらに、グランドナビゲーション(サイトメニュー)の表示文字を「未分類」ではなく「お知らせ」に変更したいので、メニューの個別設定を開いて「ナビゲーションラベル」を「お知らせ」に修正する。
その後、「ナビゲーションメニュー」をチェックし、「メニューを保存」。設定を終了する。

メニューの編集(3)

ここまでの作業で、サイトのTOPページ(HOME)は、以下のようなイメージに仕上がった。
コーポレートサイト「らしく」なってきた。

ここまでのTOPページ(HOME)

WordPressがあれば、初心者でも十分にコーポレートサイトを構築できる

ここまでの作業で、コーポレートサイトらしい体裁は整った。WordPressを扱うこと自体が初めて、しかもHTMLを学んだこともない初心者でも、ここまでできることを理解していただけたと思う。
次回は、各固定ページの内容と見た目の修正を行っていき、サイト全体を仕上げていく。

時間とコストをかければ、WordPressでデザイン性に富んだWEBサイトを制作できる。しかし、それが正解ではない。この記事が、コストをかけず自社のWEBサイトを立ち上げたいと考える企業の担当者の参考になれば幸いだ。

誰にでも最初の一歩はあるのものだ。あなたの「なるほど!」を聞けるように、次回はさらに丁寧に解説していきたい。

別のコラムにもヒントがあるかも・・・

WordPressを活用したCMS、堅牢なシステムの構築なら

WEBシステムが誕生する以前、汎用機と呼ばれた大型コンピュータの大規模システム開発を経験してきたシステムエンジニアが約30年の経験をもとに御社のWEBアプリケーションを設計、構築。当社のシステム構築は、WordPressを活用したCMSにとどまりません。

WEBサイトの課題抽出、到達すべき目標、方法の設定、目標に達するためのコンテンツ企画、目指すべきコンバージョン率、件数の設定、目標達成までのサポート:お電話 06-4790-7270

とりあえずフレイバーズに聞いてみる

良いクライアントに恵まれていることも、フレイバーズの強み

上場企業をはじめとして、業界で確固たるポジションにあるクライアントに恵まれ、日々良い刺激をいただいています。

WEBサイト構築実績をチェックする

フレイバーズに、ご相談されませんか?

ビジネスを伸長させるための、次のWEB戦略、WEB運用についてご提案します。

メニューを閉じる