1. あなたの商品を売る場所になる
オンラインショップをデザインします。
まずはテンプレートを使って製作し、
その後カスタマイズしていく方法をご紹介します。
第２部
オンラインショップ
の
デザイン篇

2. 2-1 アカウント登録
2-2 情報を書き換える
2-3 新たにコンテンツを追加する
2-4 デザインを変更する
2-5 新しくページを作る
オンライン
ショップ
の
デザイン編
第２部
よりオリジナリティの高いデザインに挑戦する方は
2-3 以降のステップへお進みください。
2-1 ∼ 2-2 の行程だけでもカンタンにクオリティの高い
デザインが可能です。
初めての人は、まずはここから挑戦しましょう。
第２部 全体の流れ デザイン篇

3. アカウント登録
2-1
それでは、早速オンラインショップの制作を始めます。
まずはアカウント登録をして、
使用したいテンプレートを選びます。
デザイン篇

4. アカウント登録に必要となる
メールアドレス、パスワード、ショップURLを準備します。
メールアドレス
パスワード
ショップURL
お客様からの問い合わせメール
が届くアドレスになります。
ウェブサイトにログインするときに
必要なパスワードです。
http:// .goodsie.co.jp
ショップのURLとして表示されます。
※既に登録されているURLは使用できません。
※使用できる文字は、半角英数字になります。
アカウント登録2-1 デザイン篇

5. ①
②
③
アカウント登録2-1 デザイン篇
①ショップの名前（アドレス）
※英語入力
②メールアドレス
③パスワード
を入力して
アカウントを登録します。
※これらの情報はログイン時に必要となるので、
保管しておいてください。

6. ④
アカウント登録2-1 デザイン篇
④「ショップをデザインする」を選択します。

7. アカウント登録2-1 デザイン篇
⑤ 表示されるテンプレートの中から、
好みのデザインを選択します。
⑤

8. 情報を書き換える
2-2
予め登録されている情報を書き換えて、
自分のショップを作成します。
その作業を通してコンテンツパネルの操作を覚えます。
デザイン篇

9. ・ショップの名前を変更する
・スライドショーにスライドを追加する
・店の説明の文章を入力する
・店の住所を入力する
・ラベルを変更する
・連絡先の説明文を変更する
Step 操作する内容操作するページ
About
Home
Location
Contact
デザイン篇

10. ショップの名前を変更する
①
情報を書き換える2-2 デザイン篇
①ショップ名をクリックして選択する。
Home

11. 情報を書き換える2-2 デザイン篇
②選択するとコンテンツパネルに切り替わります。
パネル内のヘッダーの枠の中に文字を入力します。
③入力した文字がリアルタイムに反映されます。
②
③
ショップの名前を変更するHome

12. スライドショーに写真を追加する
①
②
情報を書き換える2-2 デザイン篇
①プレビュー画面内のスライドショーの画面を選択します。
②コンテンツパネルが切り替わります。
「スライドを追加」を選択します。
Home

13. ③
スライドショーに写真を追加する
情報を書き換える2-2 デザイン篇
③コンテンツパネルが切り替わります。
「イメージ選択」ボタンをクリックし、画像を追加します。
Home

14. ④
⑤
スライドショーに写真を追加する
情報を書き換える2-2 デザイン篇
④ファイル選択をクリックします。
⑤ PC内にある画像から
表示させたいものを選択します。
Home

15. ⑥
⑦
スライドショーに写真を追加する
情報を書き換える2-2 デザイン篇
⑥ ファイルを選択したら
アップロードボタンをクリックします。
⑦ アップロードが完了
すると画像が追加されます。
追加された画像をクリックすると
スライドショーに画像が登録されます。
Home

16. スライドショーに写真を追加する
情報を書き換える2-2 デザイン篇
⑧ 登録した画像は、 コントロールパネルの
スライドを保存 をクリックして
スライドショー に反映させます。
⑧
Home

17. ⑨
スライドショーに写真を追加する
情報を書き換える2-2 デザイン篇
⑨ 無事にスライドが追加されました。
２枚目移行も同様に、スライドを追加から追加します。
Home

18. 違うページを編集する
①
②
情報を書き換える2-2 デザイン篇
① 違うページを編集するときは、
コントロールパネルのページタブを選択します。
② 「登録済み」の項目の中にページが表示されます。
ここでは About を選択します。
Home

19. テキストを編集する
③
④
情報を書き換える2-2
⑤
デザイン篇
③ページが切り替わりました。
先程と同様に変更したい文章を選択します。
④選択が完了すると、コントロールパネル切り替わるので、
文章を入力して変更します。
⑤最後に保存を押して完了です。
About

20. ロケーションを登録する
①
②
情報を書き換える2-2 デザイン篇
先程と同様にコントロールパネルからpageを選択して、
Locationのページを選択します。
①プレビュー画面の地図を選択します。
②コントロールパネルの所在地を登録を選択します。
Location

21. ロケーションを登録する
③
④
情報を書き換える2-2 デザイン篇
③タイトル、住所、説明を入力します。
④入力が完了したら、保存をクリックします。
Location

22. ロケーションを登録する
⑤
情報を書き換える2-2
⑥
デザイン篇
⑤保存が完了すると、入力した住所が反映され、
地図にピンが立ちます。
⑥最後にここまでの作業を保存して完了です。
⑤
Location

23. ラベルを変更する
①
デザイン篇情報を書き換える2-2
先程と同様にコントロールパネルからpageを選択して、
Contactのページを選択します。
①変更したいコンテンツを選択します。
Contact

24. ラベルを変更する
②
デザイン篇情報を書き換える2-2
②ネームラベルの名称を変更します。
③名称が変更されたことをデザイン画面で確認します。
③
同様の手順で全てのラベルの名称を変更しましょう。
※メッセージとは、お客様が問い合わせを送信した後に
表示される文章のことです。
「メッセージは無事に送信されました。」などの文章が
適切でしょう。
Contact

25. ④
ラベルを変更する
⑤
情報を書き換える2-2 デザイン篇
ラベルの変更が完了したら、説明文も変更します。
④変更したコンテンツを選択します。
⑤コントロールパネル内で文章を変更します。
Contact

26. 新たにコンテンツを追加する
2-3
ドラッグ＆ドロップでコンテンツを置く操作を覚えます。
覚えた操作で新しくコンテンツを追加して、
より自分らしいのショップを作成に挑戦します。
デザイン篇

27. ・ソーシャルリンクを追加する
・動画を追加する
・画像を追加する
※ソーシャルリンクとは
Facebook等のソーシャルサイトへのリンクとなるボタンです。
Step 操作する内容操作するページ
About
Home
Location
デザイン篇

28. ソーシャルボタンを追加する
新たにコンテンツを追加する2-3 デザイン篇
ページに新しくコンテンツを追加する方法を覚えます。
ここではソーシャルボタンをHomeのページに追加します。
まずは、コントロールパネルのpageからHomeに移動します。
①移動が完了したら、コンテンツパネルを選択します。
①
Home

29. ソーシャルボタンを追加する
新たにコンテンツを追加する2-3 デザイン篇
②コンテンツパネルの全般を選択します。
②
Home

30. ソーシャルボタンを追加する
新たにコンテンツを追加する2-3 デザイン篇
Goodiseで扱うことのできるコンテンツが一覧で表示されます。
コントロールパネル内でスクロールをすると他のコンテンツを
見る事が出来ます。
これらのコンテンツをドラッグ＆ドロップで設置します。
Home

31. ソーシャルボタンを追加する
新たにコンテンツを追加する2-3 デザイン篇
ソーシャルボタンをドラッグ＆ドロップで設置します。
③カーソルをソーシャルのアイコンの上に移動させます。
「ドラッグ」という文字が表示されます。
③
Home

32. ソーシャルボタンを追加する
新たにコンテンツを追加する2-3 デザイン篇
④ソーシャルのアイコンをドラッグしてプレビュー画面に移動させます。
青色に変化したエリアがコンテンツを設置できるエリアです。
「ここにドロップしてください」と表示される上でドロップすると、
そのエリアにコンテンツを設置することが出来ます。
④
Home

33. ソーシャルボタンを追加する
⑤ ⑥
新たにコンテンツを追加する2-3 デザイン篇
③コンテンツが設置されるとコントロールパネルが切り替わります。
リンクさせたいサービスのURLを入力します。
④入力が完了するとアイコンが表示されます。これで設置完了です。
Home

34. 映像を追加する
①
新たにコンテンツを追加する2-3 デザイン篇
コントロールパネルのpageからAboutのページに移動します。
今度は映像を設置します。
GoodsieではVimeoとYoutubeの動画を埋め込む事が出来ます。
①先程と同様に、ビデオのアイコンをプレビュー画面に
ドラッグします。
About

35. 映像を追加する
②
新たにコンテンツを追加する2-3 デザイン篇
②ドラッグしたビデオをプレビュー画面内の青いエリアに落とすと、
ビデオが設置できます。
About

36. 映像を追加する
③
④
新たにコンテンツを追加する2-3 デザイン篇
③標準で表示される映像から変更するには、
コントロールパネル内のURLを変更します。
あなたが表示させたい映像のURLを入力しましょう。
④表示される映像のサイズ（高さ）や説明文を
変更することも可能です。
About

37. 画像を追加する
①
新たにコンテンツを追加する2-3 デザイン篇
コントロールパネルのpageからLocationのページに移動します。
①コンテンツの画像をプレビュー画面にドラッグします。
Location

38. 画像を追加する
②
新たにコンテンツを追加する2-3 デザイン篇
②スライドショーで画像を追加したときと同様に、
画像を登録すると、プレビュー画面に画像が表示されます。
Location

39. Goodsieで使用できるコンテンツは全部で１８個あります。
スライドショーソーシャルボタン
HTMLコード 買い物カゴ クレジットカードの
アイコン
問い合わせ
フォーム
Twitter / ツイートする
Facebook / いいねボタン
tumber / Tumblrで共有
コンテンツ一覧2-3 デザイン篇

40. 動画
（Vimeo ,Youtube）
メールマガジン
登録の案内
タイトル
文字
コンテンツ一覧2-3 デザイン篇
文章 ページ
ナビゲーション
ソーシャルサイトへの
リンク
Goodsieで使用できるコンテンツは全部で１８個あります。

41. 商品 地図 検索窓
画像を
タイル状に配置
画像 商品詳細
コンテンツ一覧2-3 デザイン篇
Goodsieで使用できるコンテンツは全部で１８個あります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

61. 新しくページを作る
2-5
世の中に１つしかない、自分だけのショップが作るために、
新しくページを作る方法を覚えます。
ページの追加/削除の操作を行なうことで、
自分だけのサイトを構成することができます。
デザイン篇

62. Step
・レイアウトとページ
・新しくページを作る
・不要なページを削除する
操作する内容操作するページ
Home
レクチャー
デザイン篇

63. レイアウトとページ
Goodsieには、レイアウトとページという考え方があります。
レイアウトでベースを作り、ページで個々のデザインを行なう
という考え方が基本となります。
ページ
レイアウト
レイアウトのデザインをベースに
ページ別のデザインをする場所です。
各ページの共通となるレイアウトを
デザインする場所です。
新しくページを作る2-5 デザイン篇
レクチャー

64. Goodsie Goodsie
レイアウト
Home
Goodsie
About
新しくページを作る2-5
ページ
レイアウトの使い方です。
デザイン篇
レイアウトとページレクチャー
レイアウトでは、全てのページに共通で表示させたいコンテンツ
をデザインします。作成したデザインは、各ページと紐づけることで
汎用的に使う事ができます。
ナビゲーション ナビゲーション ナビゲーション
スライドショー
テキスト

65. Goodsie Goodsie
スライドショー
レイアウト
Home
Goodsie
テキスト
About
ナビゲーション ナビゲーション ナビゲーション
新しくページを作る2-5
ページ
デザイン篇
レイアウトとページレクチャー
ページでは、各ページの内容に合わせてコンテンツを設置します。
その為、オンラインショップに必要なページの数だけ、
Goodsieでもページを作る必要があります。
ページの使い方です。

66. ①
新しくページを作る2-5 デザイン篇
①コントロールパネルのページを選択して、
「ページを追加」をクリックします。
新しくページを作るHome

67. ②
③
新しくページを作る デザイン篇
② 「タイトル」「URL」を入力しレイアウトを選択します
（ここではMainを選択します。）
※レイアウトのデザインパターンは、
自分で増やすことができます。（詳細は上級編へ）
③ 完了したら「ページを保存」をクリックします。
新しくページを作る
2-5
Home

68. ④
新しくページを作る2-5 デザイン篇
④ ページの登録済みの一覧の中に、
先程作成したページが登録されました。
新しくページを作るHome

69. 不要なページを削除する
①
新しくページを作る2-5 デザイン篇
① ページの登録済みの一覧にマウスを重ねると、
３つのアイコンが表示されます。
左から「ページを編集」「ページのコピー」
「ページの削除」という意味です。
Home

70. ②
③
新しくページを作る2-5 デザイン篇
② 一番右の×印のアイコンを選択します。
③「本当にこのページを削除しますか？」というポップアップが表示されます。
削除してもよい場合は、OKボタンを押すとページが削除されます。
不要なページを削除するHome

71. 次は、運営篇です。
オンラインショップのデザイン篇はここで終了です。
残りは運営編で紹介する
「商品登録」「発送費の設定」「決済登録」などを行なってください。
それが完了するといよいよ開店です。
デザイン篇