WordPressでブログサイト作成と一般的なビジネスサイトを作成する際の違い

WordPressというとブログをオリジナルのデザインで作成できるCMS（コンテンツマネジメントシステム）ということで、ここ数年人気がでていますが、最近はブログだけでなく、通常のビジネスサイトやフォトブログなど幅広く活用されています。しかし、ブログのようにひとつのフォーマットで記事を日記のように書いていく場合と違い、ビジネスサイトでは原稿によって構成が変わるので複数のフォーマットを活用していく形になります。そこで本連載ではWordPressを使用してビジネスサイトの作成の考え方から、WordPressの基本のタグの解説、サイト構築によく使う記述などを解説してきます。

解説：（有）ムーニーワークス　ハヤシユタカ

WordPressを使用したことのない人でも、アメーバブログやエキサイトブログなどの無料ブログサービスでブログを更新したことのある人は多いと思います。

無料ブログにはたくさんのデザイン（テーマ）の中から好みのものを選択するだけで自分の好きなデザインですぐに始められるというメリットがありますが、広告が入ったり、細かいレイアウトのカスタマイズなどができないことから、HTMLやCSSなどの経験のある人はWordPressを使用してオリジナルブログを作成している人も多くいます。

そんなことから「WordPress = ブログツール」と思っている人も多いと思いますが、実際は通常のビジネスサイトの構築もすべてWordPressで行うことができます。

それでは、日記などのブログ的レイアウトとビジネスサイトの違いをWordPressを使用する前提で見てみましょう。

運営しているブログ「HTML5でサイトを作ろう」は一般的なブログレイアウトの形で作成していますが、TOPページの構成はこのようになっています。

しかし、ビジネスサイトを作成しようとなるとフォーマットがひとつというわけにはいきません。TOPページの他に、記事としてページが増えていく更新情報、会社概要やアクセスページ、製品を扱う場合は製品一覧ページと製品詳細ページ、お問い合わせやサイトマップなど、ひとつのレイアウトでは対応しきれない内容となっています。そうなった際に「WordPressでどのように構築すればよいか？」と迷ってしまう人も多いのではないでしょうか？

WordPress3.x以降ではこういった通常のビジネスサイトを想定したデフォルトのテーマになっていますが、初めての人には「このテーマがどういう役割で作られているか？」「どこをアレンジすればよいか？」などは少し難しいです。

そこでWordPressが初めての人、もしくはブログなどを作成したことはあるがビジネスサイトの構築は未経験な人に、一般的なビジネスサイトのテーマをゼロから作成することができるようになる書籍を執筆しました。

通常サイトではブログと違いサイト毎に構成は変わるので一般的なブログフォーマットより複雑になります。 それにはHTML、CSSでWebサイトが作れる知識の他にWordPressで細かいテンプレートファイルの理解やより細かい条件分岐などが求められます。

・サイト内検索（検索結果あるなしで見た目を調整）
・トップページに特定の記事をピックアップとして表示
・タグを使用して製品カテゴリをリスト化
・ウィジェットを使用して投稿以外に更新できるスペースを作成
・トップページのグラフィックをカスタムヘッダーを使用して変更できるように作成
・ナビゲーションにはカスタムメニューを使用して作成
・「投稿」「固定ページ」の他に「カスタム投稿タイプ」「タクソノミー」の使い方
・jQueryの読み込みや各種プラグインの活用方法
・Twitter,Facebook,Google+など各種ソーシャルボタンの設定とOGPの設定

書籍の概要やサンプルページは下記からご覧になれます。
URL: http://www.html5-memo.com/other/wordpress-book/

 

今回はWordPressで日記などのブログサイトを作成する場合と一般的なビジネスサイトの違いなどをまとめてみました。

次回よりビジネスサイトを作成する上での考え方、WordPressでのサイト設計での考え方など普通のブログ構築しか作成したことがない人などに向けてさらにステップアップできるような使い方を解説していきたいと思います。

次回につづく

---

Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/

【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)