【Webデザイナー必見】Webサイト制作に重要なページテンプレート作成のコツ
デザイン・コーディング

【Webデザイナー必見】Webサイト制作に重要なページテンプレート作成のコツ

Share
このエントリーをはてなブックマークに追加

Webサイト制作の現場では、複数の人が関わりながらプロジェクトを進めるのが一般的です。そして、予算内でやりくりしつつ各方面に適切な指示を出すのがWEBディレクターの腕の見せ所ともいえるでしょう。今回はスムーズにプロジェクトを進めるために必要な「ページテンプレート作成のコツ」についてご紹介します。

テンプレート

目次

  1. Webサイト制作におけるテンプレートページ
    1. そもそもテンプレートページとは？
    2. 依頼する際に気を付けたい「パーツの選定基準」
  2. 汎用性が高いテンプレートページを作るには？
    1. 汎用性が高いテンプレートページ
    2. よくない例～クラス名が適切でない～
    3. 改善点～汎用性の高いクラス名にする～
  3. Web制作会社のおすすめする便利なクラス名
    1. 文章スタイルのクラス名
    2. カラム構造のクラス名
    3. マルチデバイス対応のためのクラス名
    4. フォント指定のクラス名
  4. まとめ

Webサイト制作におけるテンプレートページ

そもそもテンプレートページとは？

テンプレートページとは、そのサイトのWebページ作成において元となるようなページのことを指します。１つのサイトに対して、何百、何千といったWebページを作らなければならないこともあるでしょう。すべてのページを最初からコーディングしようとすれば、時間がいくらあっても足りません。

そこで現場では、必要最低限のパーツを組み合わせたページをテンプレートページとして作成し、そのテンプレートからパーツをコピーして別のページを作成していきます。この時に「汎用性の高いテンプレートページ」があれば、コーディングする量が減るという仕組みです。

依頼する際に気を付けたい「パーツの選定基準」

ところで、コーディングにおけるパーツの選定はどのように行えばいいのでしょうか？おすすめの方法としては、出来上がったワイヤーフレーム（Webページの設計図）を確認しながら、

別のページで使う予定のパーツをコピーできるか？
他のページで重複しているパーツが無いか？
既にあるパーツを使いまわしてコーディングできるか？

などを基準に選定をすることです。
※ちなみに、この時点で全ページのワイヤーフレームが間に合っていないと後に不足パーツが続出し、自分の首をしめることになります。ワイヤーフレーム作成は早めに完成させましょう。

効率的なワイヤーフレームの書き方は以前の記事「Webサイト制作におけるワイヤーフレームの役割とポイント」をご覧ください。

汎用性が高いテンプレートページを作るには？

テンプレートページ作成がWeb制作の要となることはわかっていただけたかと思います。それでは、「汎用性の高いテンプレートページ」とは具体的にどのようなものでしょうか？

笑顔の女性

汎用性が高いテンプレートページ

汎用性が高いテンプレートページとは、別のページにhtmlをコピーしても、レイアウトが崩れないようなクラスとスタイルが設定されたページです。

クラス名はその要素の役割が分かりやすいようにつけたり、どこにも使わないスタイルは書かないようにしたりするのが一般的なページ作成です。その上で、「汎用性の高いテンプレートページ」に求められるの

ページ内の役割ではなく見た目がクラス名になっている
あとで使いやすいスタイルが既にcssに書いてある

など、先々のことが考えられたものです。具体例を用いて次に説明します。

よくない例～クラス名が適切でない～

例えば、会社概要のページのテンプレートを作る際、企業理念をひとつのセクションにまとめていたとして、

  1. <!--html-->
  2. 〈section class="philosophy"〉
  3. 〈h1〉 企業理念 〈/h1〉
  4. 〈div〉 本文本文 〈/div〉
  5. 〈/section〉
  1. /*css*/
  2. .philosophy h1 {
  3. color : red ;
  4. font-weight : 700;
  5. }

この様に「企業理念」という見出しを、赤の太字にするスタイルをあてたとします。

しかし、この〈section〉～〈/section〉 を採用情報のページにコピペしようとした時、クラス名が「philosophy」のままだと意味が通じません。だからといって「recruit」に変更すると、折角書いたスタイルが効かなくなってしまうという問題が起こってしまいます。

つまりこのテンプレートを流用しようとすると、同じスタイルを再度記述するか、クラス名と意味が合わなくてもそのまま使うか、という選択をしなければ、見出しを赤太字に保てないのです。

改善点～汎用性の高いクラス名にする～

では、どのようなクラス名がいいのでしょうか？

例えば、sectionのクラス名を「philosophy」ではなく「right-box」にしておくと、その他の２カラムページの右側のセクションがあるページには、htmlをそのままコピーして使用しても、スタイルを保つことができます。

Web制作会社のおすすめする便利なクラス名

後続の作業を考慮したid・クラス名とスタイルを挙げるときりがありませんが、中でも、非常に使いやすいと感じたものをご紹介します。

文章スタイルのクラス名

  1. .tal {
  2. text-align : left !important;
  3. }
  4. /*クラス名にtalをつけるだけで、左寄せになる。*/
  1. .tac {
  2. text-align : center !important;
  3. }
  4. /*クラス名にtacをつけるだけで、中央寄せになる。*/
  1. .tar {
  2. text-align : right !important;
  3. }
  4. /*クラス名にtarをつけるだけで、右寄せになる。*/

カラム構造のクラス名

  1. .fll {
  2. float : left;
  3. }
  4. /*クラス名にfllをつけるだけで、左詰めになる。*/
  1. .flr {
  2. float : right;
  3. }
  4. /*クラス名にflrをつけるだけで、右詰めになる。*/

マルチデバイス対応のためのクラス名

  1. @media all and (min-width: 737px) and (max-width: 10000px ) {
  2. .sp-only {
  3. display : none !important;
  4. }
  5. }
  6. /*クラス名にsp-onlyをつけるだけで、スマホだけで表示させることができる。*/
  1. @media all and ( min-width: 736px ) {
  2. .pc-only {
  3. display : none !important;
  4. }
  5. }
  6. /*クラス名にpc-onlyをつけるだけで、PCだけで表示させることができる。*/

フォント指定のクラス名

  1. .en {
  2. font-family : 'Myriad Pro', 'PT Sans', sans-serif;
  3. font-weight : lighter;
  4. }
  5. /*クラス名にenをつけるだけで、決まった英語のフォントを設定できる。*/

どれも簡単なスタイルで、使用頻度の高いものなので、クラス名をつけるだけで見た目を変えられるようにcssにあらかじめ記述されていると、非常に役立ちます。

!importantも多く使用されていますし、htmlやcssの用法として正しい使い方ではないかもしれませんが、大量のページを増やしていくには、欠かせないポイントです。

まとめ

コーダーさんによっては、「テンプレートページ」をお願いします！というだけで通じる場合もありますが、そうでないケースの方が多いでしょう。下層ページのコーディングを依頼する際に、上記の例のような詳細を説明し、意図を理解してもらい、使いやすいテンプレートページを作成していきましょう。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。

初めて使う人にも使いやすく、セキュリティレベルの高いCMSパッケージ「iCMS」

詳しくはこちら
itra