チャレンジ! Movable TypeをCMSとして使ってみよう!

第3回 コーポレートサイトのヘッダ領域フッタ領域を作ろう

この記事を読むのに必要な時間:およそ 5 分

この連載も第3回目となりました。今回からいよいよ,Movable Typeを使用したコーポレートサイトの作成にとりかかっていきます。今回はサイトの全体像や要件を一通り見ていった上で,サンプルのブログ記事を投稿し,ヘッダ領域フッタ領域の作成まで練習してみましょう。

作成するサイトの全体像を確認しよう

くれま先輩:じゃ,ほげ山くん,今回私が担当するお客様のサイト制作を手伝ってもらうことで,Movable Typeのカスタマイズについて勉強していってもらいます。よろしくね!

ほげ山くん:頑張ります!

くれま先輩:まず,今回のお客様について説明するね。絵本の出版社「librito(リブリート)」さんという会社で,商品書籍の紹介をメインとした会社サイトを作って欲しいというご依頼なんだ。

図1 絵本の出版社「librito(リブリート)」さん

図1 絵本の出版社「librito(リブリート)」さん

ほげ山くん:おぉ!楽しそうな絵本がたくさんありますね!この絵本を1冊1冊紹介していくサイトなんですね。

くれま先輩:そうそう。楽しそうでしょ!サイトの名前は絵本出版のリブリート」,キャッチフレーズは0才児から大人まで,各年代が楽しめる絵本を出版していますって決まったの。それじゃ,私のほうで作成したディレクトリ構成と各画面のデザインを,ざっと見てくれる?

サイトのディレクトリ構成

表1 サイトの情報構造

 カテゴリ名(フォルダ名)などディレクトリ名 備考
カテゴリ国内作家の絵本japanカテゴリ+「ブログ記事」テンプレートをカスタマイズ(一覧ページは「ブログ記事リスト」テンプレート)
海外作家の絵本world
赤ちゃん向け絵本baby
最新情報news
フォルダ会社概要companyフォルダ+「ウェブページ」テンプレートをカスタマイズ
絵本出版のポリシーpolicy
その他サイトマップ(ルートディレクトリ)「インデックステンプレート」により、自動更新されるサイトマップページを作成
検索結果画面-デフォルトの「システムテンプレート」内に用意されている「検索結果」テンプレートをカスタマイズ
Atom(ルートディレクトリ)デフォルトの「インデックステンプレート」内に用意されている「Atom」を利用してフィードを作成(4.1では「RSS」が用意されていたが、4.2RC4を確認する限り、「RSS」が廃止されて「Atom」だけになりそうな見込み)
別ブログ絵本編集者のつぶやきブログblog同じMovable Type内に別ブログを作成し、MultiBlog機能を利用して、トップページに最新記事を表示させる

ほげ山くん:ふむふむ。第1回で勉強した「カテゴリ」「フォルダ」を使い分けるわけですね。「国内作家の絵本」「海外作家の絵本」「赤ちゃん向け絵本」「最新情報」は,記事の一覧ページが必要だし,Atom(RSSフィード)で情報を提供したいですよね。

くれま先輩:ほげ山くん,ちゃんとわかってるねぇ。

ほげ山くん:逆に「会社概要」「絵本出版のポリシー」は,最初に公開したら,あまり更新しないですよね。それから,サイトマップや検索結果ページ用のテンプレートもカスタマイズしていくんですね。

くれま先輩:もうひとつ重要なのは,「絵本編集者のつぶやきブログ」というのを作ることだね。このブログ部分は他のページと情報構造やデザインが変わるから,同じMovable Typeの中で別ブログを作成した上でMultiBlog機能を使って,サイトのトップページに記事一覧を表示させる予定だよ。

トップページに表示させる要素

ほげ山くん:了解しました!それで,これがそのトップページのデザインなんですね。

図2 トップページのデザイン

図2 トップページのデザイン

くれま先輩:大きく分けると,ヘッダ領域(header)・フッタ領域(footer)・グローバルナビゲーション領域(nav)・右カラム上部(secondry)のバナー領域は,複数のテンプレートで共通して利用する要素なの。後々説明するけど,これらの領域は,使いまわし可能なパーツとして作成するね。トップページのメイン領域(primary)は,まず,カテゴリをまたいで最新6件の絵本の表紙写真とスペックが表示される。その下に「最新情報」カテゴリ,別ブログの「絵本編集者のつぶやきブログ」の,最新5件ずつの投稿日とタイトルが表示される感じ。

ほげ山くん:で,この右カラムの下部分が,検索用のタグ一覧なんですね。

くれま先輩:そう。絵本を紹介するブログ記事に「著者」「対象年齢」「版型(本のサイズ)」なんかをあらかじめタグとして付けておいて,そのタグで検索できるようにしたいの。

著者プロフィール

黒野明子(くろのあきこ)

1973年生まれ。1995年 武蔵野美術大学短期大学部専攻科グラフィックデザインコース修了。

ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webデザイン・企画を中心に、DTPデザインなども行う。

現在、武蔵野美術大学共通デザイン研究室非常勤講師及び株式会社デジタルスケープ・PreJOBトレーニング講師も兼務。2005年秋頃から業務としてMTサイトの構築を始め、現在の業務のほとんどでMovable Typeを使用している。

著書:

『CMSとして使うMovable Typeガイドブック』 (翔泳社、共著)

『Movable Typeプロフェッショナル・スタイル』(毎日コミュニケーションズ、共著)

URL:http://cremadesign.jp/

コメント

コメントの記入