WordPressでブログとビジネスサイトを作成する際の違いを見てみる｜WordPressでビジネスサイトをつくろう【第1回】

本日よりMdN Design Interactiveにて『WordPressでブログでなくビジネスサイトをつくろう』の連載をさせていただくことになりました。

http://www.mdn.co.jp/di/articles/2782/

本連載は、WordPressを使用して通常のブログのフォーマットではなく、ビジネスサイトを構築する際の考え方やよく使う表現などをまとめていきたいと思います。

WordPressは「phpを勉強しなければならない」「サーバーの設定などプログラムが得意でないと難しい」などと思っている人もいると思いますが、基本のタグとファイルの使用ルール、いくつかの基本の書き方を覚えることでサイト全体を構築することができますので、まずは極力難しいプログラムを使用しないでサイト全体の構築ができるように解説をしていきます。

WordPressというとブログをオリジナルのデザインで作成できるCMS（コンテンツマネジメントシステム）ということで、ここ数年人気がでていますが、最近はブログだけでなく、通常のビジネスサイトやフォトブログなど幅広く活用されています。

しかし、ブログのように一つのフォーマットで記事を日記のように書いていく場合と違い、ビジネスサイトでは原稿によって構成が変わるので複数のフォーマットを活用していく形になります。

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

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

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

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

ここで日記などのブログ的レイアウトとビジネスサイトの違いをWordPressを見てみましょう。

WordPressで一般的なブログサイトのレイアウト構成

本ブログでもそうですが、もう一つのブログ『WEBデザインクリップ』でも一般的なブログレイアウトの形で作成していますが、TOPページの構成はこのようになっています。

WEBデザインクリップ

Whttp://webdesignmatome.com/

学校の元生徒の人達のブログでも同じようなフォーマットとなっています。

バンクーバーのうぇぶ屋

http://webya.opdsgn.com/

よくあるブログのTOPページではコンテンツエリアにあたる部分に各投稿記事の一部が表示されて、複数の記事の概要が見えるようになっていて、サイドエリアには広告スペースやブログのカテゴリや最近の記事などが配置されています。

そして記事をクリックすると記事の詳細ページに入りますが、構成はほぼ同じになりますのでレイアウトのパータンというのはTOPページや各カテゴリーの一覧ページと詳細ページのみを用意すればよいという形になります。

カテゴリーといっても、ブログなどでは投稿する記事をグループさせる程度でWEB系ブログだとしたら扱う内容によって「HTML5」「CSS3」「WordPress」など分類を分けるようにして表示するレイアウトは統一している場合が多いと思います。

一般的なブログでは最低限のレイアウトを作成すればよいので、WordPressの作業も比較的簡単なのでHTMLやCSSの知識がある人は、少しWordPressの基本の書籍などを見ることによって自由にオリジナルブログを作ることができました。

WordPressで一般的なビジネスサイトのレイアウト構成

しかし、ビジネスサイトを作成しようとなるとフォーマットが一つというわけにはいきません。

TOPページの他に、記事としてページが増えていく更新情報、会社概要やアクセスページ、製品を扱う場合は製品一覧ページと製品詳細ページ、お問い合わせやサイトマップなど、一つのレイアウトでは対応しきれない内容となっています。

そうなった際に「WordPressでどのように構築すればよいか？」と迷ってしまう人も多いのではないでしょうか？

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

WordPressビジネスサイトを作成する書籍を執筆しました

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

『WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作』2012/9/20発売

amazonで「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作を見る

『WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作』ではビジネスサイトを作成する上でよく使うフォーマットや機能を取り入れ、極力難しいプログラムを記述せずに誰でも簡単にWordPressで本格的なビジネスサイトを作成できる書籍となっております。

そこで本連載ではサイトを作成する上で、気をつけるポイントやサイト構築での考え方をサンプルを交えて解説していきます。

WordPressで作成したビジネスサイトサンプル

簡単な構成で見てみるとこのようになっています。

通常サイトではブログと違いサイト毎に構成は変わるので一般的なブログフォーマットより複雑になります。

それにはHTML、CSSでWEBサイトが作れる知識の他にWordPressで細かいテンプレートファイルの理解やより細かい条件分岐などが求められます。

今回の書籍では下記のようなよく使いそうな構成でWordPressでビジネスサイトのサンプルを作成しました。

その他に実装した機能としては下記のようなものがあります。

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

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

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

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