全商品一覧を見る

内容を見る


1. 準備段階

本格的なデザインに取り組む前に、運営者が望むショップのレイアウトや販売する商品の特徴などを参考にしてデザインを構想する必要があります。
ショップをオープンするタイミング、主な客層、販売する商品の種類など、ショップが持つ特徴を確かめた後、 それに相応しいデザインを考えてみましょう。
上手に描こうと頑張らなくても大丈夫です。浮かんだイメージを紙に一度まとめてみるだけでも十分です。

2. ショップ構造の構想

全体的なデザインを考え終えた後は、メニューや商品の表示などの構造について決めていきます。
デザインを構想するためには、まずショップ画面の構成について把握する必要があります。

ショップの画面はヘッダー(Header)、フッター(Footer)、ボディー(Body)、ナビゲーション(Navigation)の四つのエリアで構成されています。
この四つのエリアによる構成をベースに、ショップごとに各エリアの配置やサイズなどを変えることでオリジナリティーを追求することができます。

上のエリア区分に合わせ、下のようにデザインが反映されます。

まず、ショップのロゴを上部のヘッダーにどのように配置するか、そしてサイドメニューは左側と上部のうちどの位置に置くかなどを考える必要があります。
また、ショップの全体的なイメージやカラーはどのようにするかも重要なポイントとなります。
このように色々と工夫しながら先にショップのレイアウトを編集していきます。

3. レイアウトの理解

レイアウトとは、ショップのどのページでも共通して表示されるロゴ、カテゴリ、フッターエリアを意味します。
共通して表示されるエリアはレイアウトとして提供されるため、管理が簡単です。

1) レイアウトのHTMLソース構造

[PCデザイン > デザイン管理]の「デザイン編集」ボタンをクリックし、スマートデザイン編集ウィンドウからレイアウトを編集することができます。
レイアウトはHTMLソースの最初に<!--@layout(layout.html)-->の形で表示されます。(下の画像を参考)
該当のエリアにマウスオーバーするとレイアウトのHTMLファイルを開くことができます。

レイアウトのHTMLソースにおける必須構成要素は<!DOCTYPE>とHTMLの基本構造である<html>、<head>、<body>です。
<!DOCTYPE>はWeb標準における必須事項で、該当のHTMLがどのようなソースであり、どのバージョンの仕様に基づいてHTMLを記述しているかを明示するための要素です。
これを「DOCTYPE宣言」と言い、このDOCTYPE宣言を用いてブラウザにHTMLのバージョンに合う解釈を要請することになります。
DOCTYPE宣言はHTMLソースの最初の部分に作成され、その後に通常のHTMLソースが続けて記述されます。
なお、レイアウトのHTML構成においては、必要に応じてCSSやJS(JavaScript)ファイルを読み込むことが可能です。
定義されたCSSとJSは下の画像のように別色で表示されます。
<head></head>の間にはウェブサイトのmeta情報が入ります。
レイアウトのデザインに関する内容は<body></body>の間に作成します。

2) レイアウトとコンテンツエリアの連動

レイアウトページにコンテンツを挿入したい場合は、希望する位置に該当コンテンツのソースを入れてレイアウトと連動させます。
コンテンツソースはレイアウトページ内で<!--@contents-->を使用して読み込むことができます。

レイアウトHTMLには、該当ページにおけるレイアウト関連の編集内容がすべて反映されます。
ページごとに異なるレイアウトデザインを適用したい場合は、別のレイアウトページを作成してから適用するページ内でレイアウトHTMLを読み込んでください。
レイアウトの概念と基本的な構成に関する説明はここまでとなります。次はHTMLに関する説明に移ります。

1. HTML, CSS, Javascript?

英語だらけのウェブ言語やソースは難しいものと思われがちです。
しかし、英語のアルファベットが分かれば単語や簡単な文章が理解できますよね?ウェブ言語も同じです。
HTML、CSS、Javascriptの基本概念は次の通りです。

ウェブページの基本
  1. ① HTML ウェブページを作成する際に使うプログラミング言語の一つです。
    HTMLを使用して文章、表(table)、画像、動画など、ウェブページの全体的な構造とコンテンツを構成することができます。
  2. ② CSS ウェブページのデザインを担当する言語です。HTMLで作成したウェブページにデザインを適用して飾る際に使用します。
  3. ③ Javascript HTMLとCSSが静的な言語なら、Javascriptは動的な言語と言えます。アラートの表示やドラッグ&ドロップの実施など、ウェブページと連動して相互作用を可能にすることがJavascriptの目的です。

つまり、ウェブページにおいて、HTMLは構造、CSSはデザイン、Javascriptは動作を担当しているのです。
建築に例えてみましょう。
HTMLは建物、CSSは塗料の色を決めるための物、Javascriptは建物内に設置されたエレベーターを動かすためのエンジンやモーターに該当します。
HTMLをベースに、様々なエフェクトや素材を取り入れるためにCSSとJavascriptを使用するものとも言えます。
そう考えると、CSSとJavascriptは選択可能なオプションであり、HTMLが必須言語だということが分かります。

2. デザイン編集ウィンドウでのHTMLの確認

HTML、CSS、Javascriptの基本概念に基づいてスマートデザインの編集ウィンドウで編集を希望する画面をクリックすると、HTMLコードが表示されます。

表示されたHTMLコードの所々にCSSを読み込むためのソースが挿入されていることを確認できます

3.デザイン編集ウィンドウでのCSS、Javascriptの確認

HTMLコード上のCSSエリアで[ファイルを開く]のテキストをクリックすると該当するCSSファイルを確認できます。
ショップのレイアウトに使用されているCSSとJavascriptは/layout/basic/cssおよび/jsフォルダに、
各モジュールに使用されているCSSとJavascriptは/css/および/js/フォルダにそれぞれ保存されています。

スマートデザインの各機能は「モジュール」と「変数」で構成されています。
モジュールと変数の作動原理を理解すると、
ショップのデザインをより豊かに作り上げることができます。
変数はモジュールと連動して動作するもので、モジュールごとに使用可能な変数は決められています

ログインウィンドウの例を見てみましょう。
会員のログインやID・パスワードの照会が可能な「ログインモジュール」です。
ID・パスワードの入力欄やログインボタンはすべてログインモジュールに連動されている変数です。

2.モジュール

モジュールとは、1つ以上のコンテンツや機能の集合体を意味する言葉です。
モジュールはプログラムの最小単位であり、HTMLと変数の組み合わせで構成されています。
例えば、「会員」モジュールは会員登録ページと会員情報変更ページ、ID照会などのエリア(要素)の集まりで構成されています。
モジュールは独立した一つの完全なプログラムとして、ユーザーが入力したmodule=”モジュールID”により判断・駆動されます。
スマートデザイン編集ウィンドウの画面表示エリアにおいて、カーソルを動かす際、モジュールは青のボックスで選択されます。
下の画像は会員登録ページで選択されたモジュールの例です。

ソースを見ると、module="member_join"が存在することを確認できます。
つまり、会員登録ページ内にmember_joinと称されるモジュールが使われており、
該当モジュールをベースに各種の変数が表示されるようにデザインされていることが分かります。

ショップ画面では、下のようにカテゴリエリア全体が一つのモジュールとなっています。

モジュールの使用においてはページによる制限がないため、どのページにも自由に適用できます。

3.変数

スマートデザインにおいて、変数は管理画面と連動するショップの機能を表示するために使用されています。
「{$」と「}」の間に表示させたい値(項目)を入力してデザインを編集することができます。
例として、トップページの「おすすめ商品」に該当するソースを見てみましょう。
おすすめ商品のソースは"product_listmain_1"という特定のモジュールをベースにしており、その中に商品リストで使用される変数やタグが含まれています。

商品リストに含まれる3つの変数に関する説明は次の通りです。

  • {$category_title_text} 管理画面の[商品管理 > 商品カテゴリ管理]で設定したカテゴリ名の情報を表示します。
  • {$image_medium} 管理画面の[商品管理]で登録した商品の画像を表示します。
    {$image_small}、{$image_large}のように変数を変えるとリストに表示される画像のサイズが変更されます。
  • {$product_name} 管理画面の[商品管理]で登録した商品の商品名を表示します。

モジュールと変数の概念に関する説明はここまでとなります。
次は変数をショップに適用する方法の説明に移ります。

スマートデザインでは、HTMLコードの繰り返しや数字の設定を通してデータを希望する形で表示させることができます。

1. 繰り返し回数の設定

繰り返し回数の設定は次の3つの方法で可能です。
複数の方法が使われている場合の優先順位は[$only_html > $count > DBのカウント設定]となります。

  1. 1. 注釈オプション - $only_html
  2. 2. 注釈オプション - $count
  3. 3. DBのカウント設定

// 下記の場合、繰り返し回数は5回です。

// 下記の場合、繰り返し回数は3回です。

// 下記の場合、繰り返し回数はDBの設定によります。DBの設定がない場合、回数はHTMLの繰り返し単位によって決定されます。

2. ケースごとの繰り返し文の設定方法

1.繰り返される項目が同一の場合
1) コードには下のようにcountを設定します。

2) 上記のコードをブラウザの「ソースの表示」で確認すると、下のように同じliが5つ表示されます。

2.繰り返される項目が同一ではない場合
1) コードには下のようにcountを設定します。

2) 上記のコードをブラウザの「ソースの表示」で確認すると、下のようにcountに設定した数に至るまで最後の項目が繰り返されていることが分かります。

3. 注釈変数の適用

注釈変数を活用した繰り返し文をスマートデザインの編集ウィンドウで適用してみましょう。

他にも<!-- -->の間に様々な注釈変数を入れて活用することができます。
例)注文書作成ページの「注文書」モジュール

1. Cover

文字列が存在する際、該当の文字列を囲む前後の文字や特殊文字を設定します。

使用方法) {$foo|cover:(,)}
|cover:文字列の前にくる文字,後にくる文字

* 例 : 掲示板に投稿された記事のタイトルを特殊文字で囲む場合
タイトルを表す変数を次のように置き換えます。

2. Cut

文字列を表示したい文字数に合わせてカットします。
一番目の因子は表示する文字の数、二番目の因子はカットされた文字の表示方法(形態)になります。

使用方法) {$foo|cut:,}
|cut:表示したい文字の数, カットされた文字の表示方法(形態)
* 例 : 商品名を特定の文字数で表示したい場合
商品名を表す変数を次のように置き換えます。{$product_name|cut:10,...}

3. Date

日付と時間を表示するためのフォーマットを指定します。
年-月-日および時間の表示順を変更することができます。(月-日-年など)

使用方法) {$foo|date:Y-m-d H:i:s}
|date:年-月-日 時:分:秒

* 例 : [管理画面 > 掲示板管理 > 投稿日の表示]で設定した内容を無視して日付・時間を表示します。
「投稿時間を表示」にチェックしていても、それと関係なくDateモディファイヤーを利用して時間の表示/非表示を別途で決めることができます。
掲示板において、リストと詳細ページでそれぞれ異なる時間の表示方法を使用したい場合に活用できます。

4. Imgconv

入力された値がある場合、一番目の因子に指定された画像URLを割り当てて画像タグに置き換えます。
入力された値がない場合、二番目の因子に指定された画像URLを割り当てて画像タグに置き換えます。
二番目の因子を指定していない場合、空文字列に置き換えます。

使用方法) {$foo|imgconv:}
imgconv:入れ替える画像のURL, 入力された値がない場合に入れ替える画像のURL

* 例 : 変数のテキストではなく画像を変更したい場合、imgconvを使用して指定の画像に入れ替えます。
{$name_or_img_tag|imgconv:'画像URL'}

5. Strconv

imgconvモディファイヤーと機能は同じですが、画像ではなく別の文字列で置き換える点で違いがあります。

使用方法) {$foo|strconv:change}
$foo変数に値が入力されている場合、必ず「change」に該当する文字列に置き換えられます。
* 例 : アイコンを表す変数において、画像を文字列に置き換えたい場合
{$new_icon|strconv:新着商品} -> NEWアイコンの代わりに「新着商品」という文字列で表示されます。

6. Nl2br

DBに保存されているデータ自体が改行された文字列である場合、ブラウザでもそのまま表示させるため、
改行された文字列を探して「br」タグのみを挿入できる機能を持つモディファイヤーです。

使用方法) {$foo|nl2br}

7. Numberformat

数字で構成されている文字列を千単位で表示する際に使用します。

使用方法) {$foo|numberformat}

* 例 : 商品の販売価格に千単位ごとにコンマを入れます。

8. Replace

文字列を置き換えます。

使用方法) {$foo|replace:change}
$foo変数に値が入力されている場合、必ず「change」に該当する文字列に置き換えられます。

* 例 : 掲示板に「NOTICE」と表示される変数にreplaceモディファイヤーを適用し、
「お知らせ」と表示されるように文字列を置き換えます。
{$notice_icon|replace:お知らせ}

9. Striptag

変数に適用されているタグをすべて削除します。

使用方法) {$foo|striptag}
* 例 : 商品名に適用されているタグをすべて削除しないといけない場合、striptagを使用してタグを削除します。
{$product_name|striptag}

10. Timetodate

ユーザーが指定したフォーマットで日付(タイムスタンプ)を表示します。
(注意) $foo変数には必ずタイムスタンプ値を指定してください。

使用方法) {$foo|timetodate:Y-m-d}
* 例 : 特定の日付に表示を固定する場合
{$write_date|timetodate:2011-06-11 09:33:34}

11. Thumbnail

更新予定

12. Lower

すべての文字を小文字で表示します。

使用方法) <span>{$foo|lower}</span>
* 例 : 商品名に含まれている英字をすべて小文字で表示する場合
登録時に大文字が含まれていてもすべて小文字で表示されます。
{$product_name|lower}

13. Upper

すべての文字を大文字で表示します。

使用方法) <span>{$foo|upper}</span>
* 例 : 商品名に含まれている英字をすべて大文字で表示する場合
登録時に小文字が含まれていてもすべて大文字で表示されます。
{$product_name|upper}

14. Display

該当する値にreturn falseが適用されている場合、display:noneとして処理されます。

使用方法) <span>{$foo|display}</span>

* 例 : 商品情報の表示設定が「表示しない」になっている場合、display:noneとして処理されるため、画面には表示されません。



Top