1. デザイン篇
2-4
デザインを変更する
ショップをさらにカスタマイズする為に、デザインを変更します。
この作業でデザインツパネルの操作を覚えます。
オリジナルなデザインを作るときに欠かせない操作です。

2. デザイン篇
Step
レクチャー
操作するページ
Home
・レイヤーの概念を知る
操作する内容
・選択中のコンテンツの確認
・フォントの種類を変える
・フォントの色を変える
・フォントサイズを変える
・フォントの太さ、スタイルを変える

3. 2-4
デザイン篇
デザインを変更する
レクチャー
レイヤーの概念を知る
Goodsie のデザイン画面は
レイヤー構造になっています。
レイヤー構造とは、ケーキのミルフィーユのよう
に、別々の要素が重なり合った構造のことです。
レイヤーの重なり方 （イメージ）
コンテンツ
ページ[列]
Goodsieでは一番大きな レイアウト という
レイアウト[行]：グループ
レイヤーの上に、 レイアウト[行]:グループ や
などのレイヤー
ページ[列] などの各レイヤーが重なっています。
そして、テキスト や スライドショーなどの
コンテンツは一番上のレイヤーとして設置されます。
今、どのレイヤーを選択しているかは、
コンテンツパネルのデザインタブの
選択対象の欄で確認が出来ます。
デザインを変更しても反映されない場合は、
この選択対象が適切でない場合があるので、
デザインを操作するときは、選択対象を
確認しましょう。
レイアウト

4. 2-4
デザイン篇
デザインを変更する
レクチャー
Goodsieのレイヤー構造 と名称
レイアウト
スライド[モジュール]
レイアウト[行]:グループ
ページ[行]
ページ[列]
テキストを置いた場合は、
テキスト[モジュール]
というように
設置しているコンテンツの
レイアウト[列]
レイアウト[行]
名称が表示されます。
※ページ[行]とページ[列]、
レイアウト[行]とレイアウト[列]
はそれぞれ同じ範囲を選択します。

5. 2-4
デザイン篇
デザインを変更する
レクチャー
レイヤーの確認方法
コントロールパネルのデザインタブの選択対象に
現在選択しているレイヤーが表示されます。

6. 2-4
デザイン篇
デザインを変更する
レクチャー
レイヤーの確認方法
レイヤー名を選択すると、他のレイヤーが表示されます。
ここから他のレイヤーを選択することも出来ます。

7. 2-4
Home
デザイン篇
デザインを変更する
フォント書体の種類を変える
フォントの種類や、カラー、サイズを変更する方法を覚えます。
主にコントロールパネルのデザインタブを操作します。

8. 2-4
Home
デザイン篇
デザインを変更する
フォントの種類を変える
②
①
①コントロールパネルのデザインタブを選択します。
②その状態でプレビュー画面のタイトル部分を選択します。

9. 2-4
デザイン篇
デザインを変更する
フォントの種類を変える
Home
③
④
③選択対象が「ヘッダー[レベル１]」に変更されます。
④■にチェックを入れて、選択をクリックします。

10. 2-4
デザイン篇
デザインを変更する
フォントの種類を変える
Home
⑤
⑤ フォント一覧が表示されるので、
そこから好みのフォントを選択します。

11. 2-4
デザイン篇
デザインを変更する
フォントの色を変える
Home
①
①フォントの種類を変更したときと同様に、
コントロールパネル内のフォントカラーを選択します。

12. 2-4
Home
デザイン篇
デザインを変更する
フォントの色を変える
②
②カラーパレットが表示されます。
好みの色を選択すると、変更が反映されます。

13. 2-4
Home
デザイン篇
デザインを変更する
フォントサイズを変える
①
①フォントの種類を変更したときと同様に、
コントロールパネル内のフォントサイズを
選択します。
選択すると、白い入力枠が表示されます。

14. 2-4
Home
デザイン篇
デザインを変更する
フォントサイズを変える
③
②
②白い枠に数字を入力します（半角入力）
③プレビュー画面でリアルタイムに
z
変更が表示されます。

15. 2-4
Home
デザイン篇
デザインを変更する
フォントの太さ、スタイルを変える
フォントの太さの項目で文字を太字に
変更できます。
ノーマルと太字が選択できます。

16. 2-4
Home
デザイン篇
デザインを変更する
フォントの太さ、スタイルを変える
フォントスタイルの項目で文字を斜体に
変更できます。
ノーマルと斜体が選択できます。

17. 2-4
デザイン篇
デザインパネル項目一覧
デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。
フォントの種類や色、
テキストの位置や
コンテンツの周囲の余白
サイズを指定します。
行間隔、文字間隔を
およびコンテンツの枠内の
指定します。
余白を指定します。

18. 2-4
デザイン篇
デザインパネル項目一覧
デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。
背景を指定します。
罫線を付けることが
幅や高さなどのサイズを
選んだ色の背景にすることも、
できます。
指定します。ブラウザによる表示
任意の画像を背景にすることも
太さやスタイル、色などを
の違いを想定して最大 / 最小のサ
できます。
指定します。
イズを指定できます。
主に画像のコンテンツに
使用します。

19. 2-4
デザイン篇
デザインパネル項目一覧
デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。
コンテンツに効果を
コンテンツの配置方法を
表示方法を指定することが
指定します。
指定します。
出来ます。
半透明にしたり、簡単なアニ
重なり順序などを規定すること
特にナビゲーションのデザインで
メーションをつけることもで
で、より高度なデザインが
使用します。
きます。
可能です。