こちらの記事では多ページ構成のサイトを作成する際の、具体的な例を用いてご案内します。多ページ構成では、取り扱うコンテンツによって様々な構成で作成することができます。こちらでご紹介する例は、あくまで一例となりますが、こちらを基本として工夫してみてください。

１．会社案内(About Us)ページを作成する

会社案内は、新規に取引する相手だけでなく、商品やサービスのユーザー、さらには採用時には社員候補も参考にするコンテンツとなります。企業規模の大小に関わらず、しっかりとした内容を情報発信することで、信用や安心を訪問者に与えることができます。企業だけでなく、団体、サークル、コミュニティなどでも自身の情報を明示することは、発信する情報の信頼を担保するのに必要です。企業では、「会社案内」や「企業情報」などという表現が使われますが、団体やサークルなどでは、「私たちについて」や「About Us」などの表現で作成されることが多いようです。

既にご案内したように、「会社案内」のコンテンツとしては

• 会社の歴史やビジョン
• 経営陣の紹介
• 企業の使命と価値観
• 会社概要
• 会社沿革

などのコンテンツが一般的です。もちろんコンテンツは、これらのコンテンツでなければいけないというものではありませんので、状況に合わせて自由に変更いただいても問題ありません。ここでは、具体的な例として、Hirameki 7を運営するトライベック株式会社のコーポレイトサイトを参考に見ていきたいと思います。

このページは、上部より

・グローバルナビゲーション（各ページに共通して表示されるメニュー）

・大見出し（H1）

・コンテンツメニュー

　　　・会社概要

　　　・代表メッセージ

　　　・経営理念

　　　・社名・ロゴの由来

　　　・役員紹介

　　　・CSR/会社の取組、特色

　　　・地図・アクセス

　　　・CM等ギャラリー

・共通コンバージョンエリア

（問合せやホワイトペーパーダウンロードなどのコンバージョンコンテンツへの導線）

・共通フッター

（コピーライト表示やサイトマップ、取得規格や参画団体などの情報を掲載されることが一般的です）

というコンテンツで構成されています。

そして、この構成をHirameki 7で再現したページがこちらとなります。

完全に再現できている訳ではありませんが、大凡の構成やレイアウトは再現することができます。こちらをHirameki 7のWebサイト機能で再現する場合には、以下のようにパーツを配置します。

ご覧いただくとわかるように、空白パーツを使いレイアウトを調整しています。最初に選択したテンプレートにおいても、空白パーツを用いてバランスよくレイアウトを調整されていますので、テンプレートを元に新たなパーツを追加する際には、既存のパーツとの間に空白パーツを配置して全体のバランスを調整するようにすると良いでしょう。

Webサイトを作成する場合、以下の点に注意をすると見た目の良いサイトを作成することができます。

・スペース・・・コンテンツ間が詰まり過ぎないようにパーツ間を空白パーツを使い、整える。
・画像のアスペクト比の共通化・・・カラムパーツなどで画像を追加する場合、横幅が統一されるため、アスペクト比が違う画像が並ぶと高さがバラバラになるため、アスペクト比（縦横比）を揃えた画像を利用する。
・文章量・・・１つ１つのパラグラフが長くなりすぎないように工夫する。（パラグラフ毎にパーツを分けて使う＝無駄な改行を減らしつつ、パラグラフ間のスペース確保する。）
・画像と文章の配置が、ある程度パターン化されている・・・画像や文章などのパーツの使い方に一定のパターン（ルール）を決めておき、統一感を出す。
・コンテンツのまとまり・・・近しい内容のコンテンツをできるだけまとめて掲載する。
・見出しパーツを文字の大きさだけで選ばない・・・見出しパーツはHTMLソースではHタグ（HeadLineタグ）が付与されます。検索エンジンがWebサイトの内容を理解する際に、Hタグ（＝見出しパーツ）は「見出し」や「タイトル」として捉えられ、文字を大きくしたいためだけに見出しパーツを使い、文章を書いてしまうと、検索エンジンがWebサイトの内容を正しく理解できない可能性があります。

次の項目では、「見出しパーツ」や「テキストパーツ」で文字サイズ、文字色、フォントを変更する豊方法について説明します。

２．文字サイズを変更する

Hirameki 7の「見出しパーツ」や「テキストパーツ」の文字サイズや文字色、フォントは、一般的なWebサイトにおいて「読みやすい」とされる文字サイズ、文字色、フォントが選択されています。しかし、よりデザインにこだわりたい場合、「見出しパーツ」「テキストパーツ」共にHTMLタグを使って文字サイズ、文字色、フォントを変更することもできます。

大きさを変更する場合

<span style="font-size:20px;">テキスト</span>

フォントサイズの指定方法についてはいくつかの方法があります。上記コード例は、px（ピクセル）単位で指定する方法の記述となります。他に、相対的な指定方法として、◯％や◯emと親要素で指定されているサイズに対して指定する方法があります。

<span style="font-size:120%;">テキスト</span>
<span style="font-size:1.2em;">テキスト</span>

タグに追加するCSSコードは、以下のようにサイズだけでなく、色など様々な変更を同時に指定することができます。

<span style="font-size:120%;color:#333333;">テキスト</span>

文字色を変更する場合

<span style="color:red;">テキスト</span>

文字色を変更する場合は、style="color:色;" をタグ内に追加することで変更することが可能です。色は半角英数文字で英語名で記載したり、カラーコードで色を指定することが可能です。

カラーコードを調べる際には、Googleで「カラー選択ツール」と検索すると、下の画像のようにカラー選択ツールが表示されます。

また、文字の背景を変更する場合は、background-color:色;で指定します。

<span style="color:#ff8c00;background-color:aqua;">テキスト</span>

フォントを変更する場合

<span style="font-family: serif;">テキスト</span>

フォントを変更する場合は、style="font-family:フォント名;" をタグ内に追加することで変更することが可能です。フォント名には、以下のようなものがあります。

３．ヘッダーパーツでグローバルナビゲーションを作成する

ヘッダーパーツには、作成されたページをグローバルメニューとして表示させることができます。今回の再現サイトではメニューの幅の関係上、HTMLパーツで作成していますがグローバルメニューに各ページへのリンクを表示させる場合には、エディター画面で左側に表示される「ページプロパティ」内で設定することが可能です。

ヘッダーパーツの幅にも制限がありますので、すべてのページをグローバルメニューとして表示させる必要はありませんので、訪問者が求める情報を優先的に選んで表示させることをおすすめします。また、再現ページのようにHTMLパーツやテキストパーツを使って作成しても良いでしょう。

続いて、「会社概要」ページを例に各パーツの使い方についてご案内します。