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

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

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

ほげ山くん：頑張ります！

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

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

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

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

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

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

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

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

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

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

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

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

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