WordPressでブログサイト作成と一般的なビジネスサイトを作成する際の違い | デザインってオモシロイ -MdN Design Interactive-

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

2021.2.26 FRI

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

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

解説:(有)ムーニーワークス ハヤシユタカ

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

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

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

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

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

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

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

▲クリックして拡大

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

▲クリックして拡大

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

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

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

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

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

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

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

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

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

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

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

▲クリックして拡大

▲クリックして拡大

▲クリックして拡大

▲クリックして拡大

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

サンプルサイトで実装した機能

・サイト内検索(検索結果あるなしで見た目を調整)
・トップページに特定の記事をピックアップとして表示
・タグを使用して製品カテゴリをリスト化
・ウィジェットを使用して投稿以外に更新できるスペースを作成
・トップページのグラフィックをカスタムヘッダーを使用して変更できるように作成
・ナビゲーションにはカスタムメニューを使用して作成
・「投稿」「固定ページ」の他に「カスタム投稿タイプ」「タクソノミー」の使い方
・jQueryの読み込みや各種プラグインの活用方法
・Twitter,Facebook,Google+など各種ソーシャルボタンの設定とOGPの設定
書籍の概要やサンプルページは下記からご覧になれます。
URL: http://www.html5-memo.com/other/wordpress-book/


 

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

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

次回につづく



●本連載で使用しているサンプルサイトをゼロから作成できる書籍

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、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)
twitter facebook このエントリーをはてなブックマークに追加 RSS

この連載のすべての記事

アクセスランキング

2.15-2.21

MdN BOOKS|デザインの本
ワンプリント

Pick upコンテンツ

現在