デザインレイアウトの作成

出典: Live Commerceドキュメント

このドキュメントではLive Commerceのデザインレイアウトのついて理解し、テーマファイルを作成する方法について解説します。

Live Commerceのカタログ画面数は、41画面あります。

これを1つ1つデザインするのは現実的ではありませので、[10のレイアウトパターン]を作成して全ページを表示できるようにします。 デザイナーは10のレイアウトをマスターすればLive Commerceの何千ものページを表示させることができます。

Live Commerce開発者は41画面を10のデザインパターンで当てはめることが最も良くECサイトとして機能するという前提の下でレイアウトを設計しています。

1つのレイアウトパターンでも全41画面をレイアウトすることは可能です。しかし、その場合はワンパターンで全ページが構成されますので、ショッピングカート確認画面にカタログのメニューが表示されたり、支払い手続き画面に商品広告バナーが表示されてしまいます。それが全ページにわたり表示されます。ユーザーが求めるリンク以外を表示させるのはコンバージョン率（またはかご落）低下につながりますのであまり推奨できません。実際、旧来オープンソースで開発されたECサイトは、すべてのページに同じレイアウトが採用されているため、ユーザーにとって必要でない情報まで表示されている事がよくあります。

必須デザインファイル

以下はLive Commerceの標準テンプレートで配置された代表的なレイアウトです。これは6つのレイアウトを提示していますが、これを基準に10レイアウトを作成します。 以下の画像をダウンロードして、Photoshopでデザインレイアウトを作成する際のワイヤーフレームとして使うのもいいでしょう。

• 青色部分　>>　ヘッダー、フッター
• 赤色部分 >> コンテンツ部分
• 黄色部分　>>　サイドバー

ユーザーが最も閲覧するページ（滞在時間が長い）は1.トップページと3.商品一覧ページです。このページのレイアウトにはユーザビリティーを十分考慮してレイアウトするように心がけてください。

1.トップページ A-3カラム トップページは単一ページになるため、自由設計のレイアウトでも問題ありません。	2.カテゴリページ B-3カラム	3.商品一覧ページ C-2カラム サイドバーは左側に設置	4.商品詳細ページ D-2カラム サイドバーは右側に設置
5.コンテンツページ E-2カラム ページ機能で作成されたページのテンプレートとして利用される。	6.その他のページ F-1カラム このページが全ページの基本テンプレートとして利用される。

その他に、テーマディレクトのlang ディレクトリにある言語別の画像ボタンもデザインしておきましょう。

テンプレートファイルとレイアウトパターンの相関関係

Live Commerceのカタログ画面で表示されるデザインパターンは下図の通りです。

HTMLコーディングとテーマへの統合

コーダーは10のレイアウトからHTMLにコーディングをします。

HTMLコーディグ時には以下の点を遵守するように心がましょう。

1. W3C Valid XHTML/CSS
2. XHTML 1.0 Strict
3. Table-less CSS markup
4. Safari 3+, Opera9+, Google Chrome, FF3+, IE8
5. SEO Semantic Coding
6. Load Speed Optimization

HTMLへのコーディングが完了したら、10のHTMLファイルをLive Commerceのテーマファイルに統合していきます。

Live Commerceへの統合についての注意

コーディングする箇所は、ヘッダー(header.php)、フッター(footer)、サイドバー(sidebar)、CSSファイル(/css/) のみで、41テンプレートファイルのコンテンツ部分を再コーディングすることは推奨していません。

次のソースコードをご覧ください。

これはテーマにある404．phpというテンプレートファイル内に記述されたHTMLソースです。404．phpファイルを含むすべてのコンテンツ表示部分は共通して大外枠にはdivにid="contents"　がセットしてあります。コーダーはこのコーディングルールを確認し、先にHTMLコーディングしたソース内の共通コンテンツ部分には、404．php　を参考に同一のクラス名またはセレクタ名をセットしておく必要があります。もしコーダーが独自にクラス名をセットした場合は逆にLive Commerce側のテーマすべてを修正する必要があります。

<?php include('include/header.php'); ?>
<!--body -->
<div id="contents" class="clearfix">
  <div class="fullFrame">
    <div class="categoryFrame">
      <h1><?php echo TEXT_404_TITLE ; ?></h1>
      <br />
      <br />
      <p><?php echo TEXT_404_MSG; ?></p>
    </div>
  </div>
</div>
<!--body //-->
<?php include('include/footer.php'); ?>

コンテンツ部分とは、41画面で表示される個別のHTMLソースのことで、テーマに含まれる41のテンプレートファイル（*.php)のことです。この41ファイルをコーディングすることなくCSSとヘッダー、フッター、サイドバーだけでオリジナルデザインになるようにすることが重要です。（そうすれば最小限の労力でオリジナルデザインへ適用することができます）

そのためには、ヘッダーとフッター部分以外の中間に入るソースコードをLive Commerceのオリジナルのコードと一致させておく必要があります。これは絶対条件ではありませんが、コーディング作業を低減するための１つの手段です。

具体的には下記のコードです。このコードをheaderとfooterのセレクタの中間に採用します。

<!--body --> 
<div id="contents" class="clearfix"> 
  <div class="mainFrame clearfix"> 

Live Commerceへの統合手順

1. 全ページで共通して利用する文字装飾に関するCSSコードを　css/common.css にコピーしておきます。
2. 全ページで共通して利用するレイアウトに関するCSSコードを　css/layout.css　にコピーしておきます。
3. HTMLコーディングしたヘッダーとフッターのHTMLソースを include/header.php と include/footer.php に挿入し既存のLive Commerceのテンプレートタグに注意しながら1つ1つ置換します。HTMLソースのみをコピーし、外部インクルードされたファイルはcssフォルダ、Jsフォルダにそれぞれコピーするようにしてください。
4. サイドバーのHTMLソースを　include/sidebar.php に挿入して既存のテンプレートタグに注意しながら1つ1つ置換えします。
5. ここまでの作業で、正しいレイアウトになっているかどうかをブラウザで確認しておきましょう。