- Navigation
TEMPLATE DESIGN KIT
テンプレート作成支援キットとは
「テンプレートの作り方は知っているけれどレイアウトや色使いには自信がない」、「配布されているテンプレートをカスタマイズしたいけれどうまくいかない」、そんなSerene Bachユーザの方も多いかと思います。
技術的な知識だけでは、クオリティの高いデザインはできない
テンプレートを作成するための技術的な知識はあっても、デザインするとなると話は別です。普段仕事でウェブサイトを作成しているデザイナーは、余白の取り方ひとつで仕上がりのクオリティに差が出ることを知っています。また効果的な色の組み合わせ、各パーツのディテール、直感的なナビゲーションなど、ひとつのウェブサイトをデザインするためには実に様々な要素について考えなければなりません。
また複雑なデザイン＝クオリティの高いデザインと捉えがちですが、ウェブサイトにおいて「複雑さ」は必ずしも良いとは言えません。大切なのは全ての要素があるべき場所にわかりやすく配置されていること。つまりベースとなるレイアウトをシンプルに、各要素は十分なスペースを持って配置することです。このテンプレート作成支援キットは、シンプルな基本レイアウトにディテールまで作り込んだパーツをはめ込んでいく方法を採用することで、クオリティの高いデザインの実現を目指します。
デザインクオリティを保ちつつ、個性的なデザインが可能
テンプレート作成支援キットは、基本となるレイアウト（計8パターン）と18種類のカラースキーム（色の組み合わせ）を自由に組み合わせていただくことで、ウェブサイトとしてのデザインクオリティを維持し、そこにヘッダやバックグラウンド、ボタンやリストのイメージなどを付け加えていくことによって、個性豊かなデザインをユーザの方自身の手で作成していただくために開発されました（※カラースキームライブラリ、イメージライブラリは随時追加予定です）。
画像作成のコツをつかめば、カスタマイズも自由自在
テンプレート作成支援キットに含まれるヘッダやボタンなどのイメージライブラリを参考にして、ユーザの方自身が画像パーツを作成することができれば、よりオリジナリティのあるデザインを生み出すことが可能です。
テンプレート作成手順
実際にSerene Bachの管理画面でテンプレートを作成する前に、Previewフォルダ内のプレビュー用HTMLファイルをブラウザで開き、レイアウトの確認をすることをお勧めします。またColor Scheme Libフォルダの中からcolor.cssファイルをPreviewファイル内にコピーすることで、プレビュー用HTMLにカラースキームが反映されます。さらにPreviewフォルダ内のimgフォルダの中に、各イメージライブラリの中の画像をコピーすれば、プレビュー用HTMLに画像が配置されます。
ご注意：カラースキーム、画像を変更後は必ずブラウザで「再読み込み」をして確認してください。
実際にテンプレートを作成する際には下記の手順をご参照ください。
手順（1）ベースとなるレイアウトを選ぶ
レイアウトライブラリ（Layout Lib）の中から好きなレイアウトを選択します。
- レイアウトの種類 ※( )内はbase.htmlを格納しているフォルダ名
- 2カラム・幅780px・サイドバー（左）・カレンダー（テーブル型）
(2col_left_cal1) - 2カラム・幅780px・サイドバー（左）・カレンダー（横型）
(2col_left_cal2) - 2カラム・幅780px・サイドバー（右）・カレンダー（テーブル型）
(2col_right_cal1) - 2カラム・幅780px・サイドバー（右）・カレンダー（横型）
(2col_right_cal2) - 3カラム・幅780px・カレンダー（テーブル型）
(3col_780_cal1) - 3カラム・幅780px・カレンダー（横型）
(3col_780_cal2) - 3カラム・幅900px・カレンダー（テーブル型）
(3col_900_cal1) - 3カラム・幅900px・カレンダー（横型）
(3col_900_cal2)
- 2カラム・幅780px・サイドバー（左）・カレンダー（テーブル型）
選択したbase.htmlの内容を全てSerene Bach管理画面の「ベースHTMLテンプレート」の欄にコピーしてください。
ご注意：上記の作業を行った場合、Serene Bach管理画面の「ベースHTMLテンプレート」の欄にある内容を上書きしてしまいます。元あったソースのバックアップ等はご自身の責任でおこなってください。
サイドバーの幅は全て統一（180px）されておりますので、カテゴリや検索ボックスなどのモジュールを自由に組み替えることができます。
手順（2）基本のスタイルをコピーする
レイアウトライブラリ（Layout Lib）内にあるstyle.cssの内容を全てSerene Bach管理画面の「CSSテンプレート」の欄にコピーしてください。
ご注意：上記の作業を行った場合、Serene Bach管理画面の「CSSテンプレート」の欄にある内容を上書きしてしまいます。元あったソースのバックアップ等はご自身の責任でおこなってください。
手順（3）カラースキーム（色の組み合わせ）を選ぶ
カラースキームライブラリ（Color Scheme Lib）の中から好きな色の組み合わせを選択します。
- カラースキームの種類
※( )内はcolor.cssを格納しているフォルダ名です
※表示サンプルは全て「3カラム・幅780px・カレンダー（横型）」を使用しています - デフォルト（表示サンプル）
(Default) - ブラック1（表示サンプル）
(Black1) - ブラック2（表示サンプル）
(Black2) - ホワイト（表示サンプル）
(White) - ペール（ブルー）（表示サンプル）
(Pale Blue) - ペール（ブルー＆オレンジ）（表示サンプル）
(Pale Blue and Orange) - ペール（グリーン）（表示サンプル）
(Pale Green) - ペール（グリーン＆パープル）（表示サンプル）
(Pale Green and Purple) - ペール（ピンク）（表示サンプル）
(Pale Pink) - ペール（パープル）（表示サンプル）
(Pale Purple) - ペール（イエロー）（表示サンプル）
(Pale Yellow) - シック（ベージュ）（表示サンプル）
(Chic Beige) - シック（グレー）（表示サンプル）
(Chic Gray) - ダーク（ブルー1）（表示サンプル）
(Dark Blue 1) - ダーク（ブルー2）（表示サンプル）
(Dark Blue 2) - ダーク（ブラウン）（表示サンプル）
(Dark Brown) - ダーク（レッド）（表示サンプル）
(Dark Red) - ヴィヴィッド（オレンジ）（表示サンプル）
(Vivid Orange)
- デフォルト（表示サンプル）
選択したcolor.cssをstyle.cssと同じ階層にアップロードしてください。color.cssの文字コードはEUC-JPです。必要に応じてSerene Bachでご利用の文字コードにあわせて書き換えてください。ここで一度再構築をして実際に正しく表示されているかどうか、確認してみることをお勧めします。
手順（4）デザインに使用する画像を選ぶ
イメージライブラリ（Image Lib）内には適用する箇所ごとに分けられたフォルダがあります。更に各フォルダの中は使用するカラースキームや画面サイズなどよって分類されています。使用する画像をSerene Bachのtemplateディレクトリにアップロードします。
- 画像の適用箇所
※全ての画像を使用する必要はありません。 - 適用箇所
(イメージを格納しているフォルダ名 / ファイル名) - バックグラウンドー外側
(BackgroundImg Lib / body_bg.gif) - バックグラウンドーコンテイナー
(ContainerBG Lib / container_bg.gif) - ヘッダイメージ
(HeaderImg Lib / header_bg.jpg) - カレンダー（横型）
(HorCalendarBar Lib / calendar_h_bg.gif) - サイドバータイトルイメージ
(SidebarImg Lib / sidebar_bg.gif) - サイドバーリストイメージ
(ListImg Lib / ul_img.gif) - サイドバーリストイメージ（サブカテゴリ用）
(ListSubImg Lib / ul_sub_img.gif) - ページトップ矢印
(PageTopArrowImg Lib / pagetop_arrow.gif) - サーチボタンイメージ
(SearchButton Lib / search_btn.gif)
- 適用箇所
ご注意：初めて画像をアップロードする際には、事前にアップロード先に同じ名前の画像ファイルがすでに存在していないか、ご自身の責任で確認してください。
デザインサンプル（組み合わせ例）
