第二部デザイン編

あなたの商品を売る場所になる

オンラインショップをデザインします。

まずはテンプレートを使って製作し、

その後カスタマイズしていく方法をご紹介します。

第２部

オンラインショップの

デザイン篇

2-1 アカウント登録

2-2 情報を書き換える

2-3 新たにコンテンツを追加する

2-4 デザインを変更する

2-5 新しくページを作る

オンラインショップの

デザイン編

第２部

よりオリジナリティの高いデザインに挑戦する方は2-3 以降のステップへお進みください。

2-1 ～ 2-2 の行程だけでもカンタンにクオリティの高いデザインが可能です。初めての人は、まずはここから挑戦しましょう。

第２部　全体の流れデザイン篇

アカウント登録

2-1

それでは、早速オンラインショップの制作を始めます。まずはアカウント登録をして、

使用したいテンプレートを選びます。

デザイン篇

アカウント登録に必要となるメールアドレス、パスワード、ショップURLを準備します。

メールアドレス　　　　　　　

パスワード

ショップURL

お客様からの問い合わせメールが届くアドレスになります。

ウェブサイトにログインするときに必要なパスワードです。

http:// .goodsie.co.jp

ショップのURLとして表示されます。

※既に登録されているURLは使用できません。

※使用できる文字は、半角英数字になります。

アカウント登録2-1 デザイン篇

①②③


①ショップの名前（アドレス）　※英語入力②メールアドレス③パスワード

を入力して

アカウントを登録します。

※これらの情報はログイン時に必要となるので、　保管しておいてください。

④


④「ショップをデザインする」を選択します。


⑤ 表示されるテンプレートの中から、

　好みのデザインを選択します。

⑤

情報を書き換える

2-2

予め登録されている情報を書き換えて、

自分のショップを作成します。

その作業を通してコンテンツパネルの操作を覚えます。

デザイン篇

・ショップの名前を変更する・スライドショーにスライドを追加する

・店の説明の文章を入力する

・店の住所を入力する

・ラベルを変更する・連絡先の説明文を変更する

Step 操作する内容操作するページ

About

Home

Location

Contact

デザイン篇

ショップの名前を変更する

①

情報を書き換える2-2 デザイン篇

①ショップ名をクリックして選択する。

Home


②選択するとコンテンツパネルに切り替わります。

パネル内のヘッダーの枠の中に文字を入力します。

③入力した文字がリアルタイムに反映されます。

②

③ショップの名前を変更するHome

スライドショーに写真を追加する

①②


①プレビュー画面内のスライドショーの画面を選択します。

②コンテンツパネルが切り替わります。

「スライドを追加」を選択します。

Home

③



③コンテンツパネルが切り替わります。

「イメージ選択」ボタンをクリックし、画像を追加します。

Home

④

⑤



④ファイル選択をクリックします。

⑤ PC内にある画像から

　表示させたいものを選択します。

Home

⑥

⑦



⑥ ファイルを選択したら　アップロードボタンをクリックします。

⑦ アップロードが完了　すると画像が追加されます。追加された画像をクリックすると　スライドショーに画像が登録されます。　

Home



⑧ 登録した画像は、コントロールパネルの　スライドを保存をクリックしてスライドショーに反映させます。

⑧

Home

⑨



⑨ 無事にスライドが追加されました。　２枚目移行も同様に、スライドを追加から追加します。

Home

違うページを編集する

①

②


①　違うページを編集するときは、　　コントロールパネルのページタブを選択します。

② 「登録済み」の項目の中にページが表示されます。　　　ここでは About を選択します。

Home

テキストを編集する

③④

情報を書き換える2-2

⑤

デザイン篇

③ページが切り替わりました。　先程と同様に変更したい文章を選択します。④選択が完了すると、コントロールパネル切り替わるので、　文章を入力して変更します。⑤最後に保存を押して完了です。

About

ロケーションを登録する

①

②


先程と同様にコントロールパネルからpageを選択して、Locationのページを選択します。

①プレビュー画面の地図を選択します。②コントロールパネルの所在地を登録を選択します。

Location


③

④


③タイトル、住所、説明を入力します。

④入力が完了したら、保存をクリックします。

Location


⑤

情報を書き換える2-2

⑥

デザイン篇

⑤保存が完了すると、入力した住所が反映され、

　地図にピンが立ちます。

⑥最後にここまでの作業を保存して完了です。

⑤

Location

ラベルを変更する

①

デザイン篇情報を書き換える2-2

先程と同様にコントロールパネルからpageを選択して、Contactのページを選択します。

①変更したいコンテンツを選択します。

Contact


②

デザイン篇情報を書き換える2-2

②ネームラベルの名称を変更します。③名称が変更されたことをデザイン画面で確認します。

③

同様の手順で全てのラベルの名称を変更しましょう。

※メッセージとは、お客様が問い合わせを送信した後に　表示される文章のことです。「メッセージは無事に送信されました。」などの文章が　適切でしょう。

Contact

④


⑤


ラベルの変更が完了したら、説明文も変更します。④変更したコンテンツを選択します。⑤コントロールパネル内で文章を変更します。

Contact

新たにコンテンツを追加する

2-3

ドラッグ＆ドロップでコンテンツを置く操作を覚えます。覚えた操作で新しくコンテンツを追加して、

より自分らしいのショップを作成に挑戦します。

デザイン篇

・ソーシャルリンクを追加する

・動画を追加する

・画像を追加する

※ソーシャルリンクとは

Facebook等のソーシャルサイトへのリンクとなるボタンです。

Step 操作する内容操作するページ

About

Home

Location

デザイン篇

ソーシャルボタンを追加する

新たにコンテンツを追加する2-3 デザイン篇

ページに新しくコンテンツを追加する方法を覚えます。ここではソーシャルボタンをHomeのページに追加します。

まずは、コントロールパネルのpageからHomeに移動します。①移動が完了したら、コンテンツパネルを選択します。

①

Home



②コンテンツパネルの全般を選択します。

②

Home



Goodiseで扱うことのできるコンテンツが一覧で表示されます。コントロールパネル内でスクロールをすると他のコンテンツを見る事が出来ます。これらのコンテンツをドラッグ＆ドロップで設置します。

Home



ソーシャルボタンをドラッグ＆ドロップで設置します。③カーソルをソーシャルのアイコンの上に移動させます。　「ドラッグ」という文字が表示されます。

③

Home



④ソーシャルのアイコンをドラッグしてプレビュー画面に移動させます。　青色に変化したエリアがコンテンツを設置できるエリアです。

　「ここにドロップしてください」と表示される上でドロップすると、　そのエリアにコンテンツを設置することが出来ます。

④

Home


⑤ ⑥


③コンテンツが設置されるとコントロールパネルが切り替わります。リンクさせたいサービスのURLを入力します。

④入力が完了するとアイコンが表示されます。これで設置完了です。

Home

映像を追加する

①


コントロールパネルのpageからAboutのページに移動します。今度は映像を設置します。GoodsieではVimeoとYoutubeの動画を埋め込む事が出来ます。

①先程と同様に、ビデオのアイコンをプレビュー画面に　ドラッグします。

About


②


②ドラッグしたビデオをプレビュー画面内の青いエリアに落とすと、　ビデオが設置できます。

About


③④


③標準で表示される映像から変更するには、　コントロールパネル内のURLを変更します。　あなたが表示させたい映像のURLを入力しましょう。

④表示される映像のサイズ（高さ）や説明文を　変更することも可能です。

About

画像を追加する

①


コントロールパネルのpageからLocationのページに移動します。

①コンテンツの画像をプレビュー画面にドラッグします。

Location

画像を追加する

②


②スライドショーで画像を追加したときと同様に、　画像を登録すると、プレビュー画面に画像が表示されます。

Location

Goodsieで使用できるコンテンツは全部で１８個あります。

スライドショーソーシャルボタン

HTMLコード買い物カゴクレジットカードのアイコン

問い合わせフォーム Twitter / ツイートする

Facebook / いいねボタンtumber / Tumblrで共有

コンテンツ一覧2-3 デザイン篇

動画（Vimeo ,Youtube）

メールマガジン登録の案内

タイトル文字


文章ページナビゲーション

ソーシャルサイトへのリンク


商品地図検索窓

画像をタイル状に配置

画像商品詳細



デザインを変更する

2-4

ショップをさらにカスタマイズする為に、デザインを変更します。

この作業でデザインツパネルの操作を覚えます。

オリジナルなデザインを作るときに欠かせない操作です。

デザイン篇

・レイヤーの概念を知る

・選択中のコンテンツの確認

・フォントの種類を変える

・フォントの色を変える

・フォントサイズを変える

・フォントの太さ、スタイルを変える

Step

操作する内容操作するページ

Home

レクチャー

デザイン篇

レイヤーの概念を知る

Goodsie のデザイン画面はレイヤー構造になっています。レイヤー構造とは、ケーキのミルフィーユのように、別々の要素が重なり合った構造のことです。

デザインを変更する2-4

レイヤーの重なり方　（イメージ）　

レイアウト[行]：グループ

などのレイヤー

レイアウト

ページ[列]

コンテンツ

今、どのレイヤーを選択しているかは、コンテンツパネルのデザインタブの選択対象の欄で確認が出来ます。

デザインを変更しても反映されない場合は、この選択対象が適切でない場合があるので、デザインを操作するときは、選択対象を確認しましょう。

デザイン篇

レクチャー

Goodsieでは一番大きなレイアウトというレイヤーの上に、レイアウト[行]:グループやページ[列] などの各レイヤーが重なっています。そして、テキストやスライドショーなどのコンテンツは一番上のレイヤーとして設置されます。

Goodsieのレイヤー構造と名称

テキストを置いた場合は、

テキスト[モジュール]

というように

設置しているコンテンツの

名称が表示されます。

レイアウト

レイアウト[行]:グループスライド[モジュール]

レイアウト[行]レイアウト[列]

ページ[行]

ページ[列]

※ページ[行]とページ[列]、　レイアウト[行]とレイアウト[列]　はそれぞれ同じ範囲を選択します。

デザインを変更する2-4 デザイン篇

レクチャー

レイヤーの確認方法


コントロールパネルのデザインタブの選択対象に現在選択しているレイヤーが表示されます。

レクチャー

レイヤーの確認方法


レイヤー名を選択すると、他のレイヤーが表示されます。ここから他のレイヤーを選択することも出来ます。

レクチャー

フォント書体の種類を変える


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

Home

フォントの種類を変える

①

②


①コントロールパネルのデザインタブを選択します。②その状態でプレビュー画面のタイトル部分を選択します。

Home

フォントの種類を変える

④

③


④■にチェックを入れて、選択をクリックします。

③選択対象が「ヘッダー[レベル１]」に変更されます。

Home

⑤

⑤ フォント一覧が表示されるので、　そこから好みのフォントを選択します。


フォントの種類を変えるHome

①


①フォントの種類を変更したときと同様に、　コントロールパネル内のフォントカラーを選択します。

フォントの色を変えるHome

②


②カラーパレットが表示されます。　好みの色を選択すると、変更が反映されます。

フォントの色を変えるHome

①


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

フォントサイズを変えるHome

②


z②白い枠に数字を入力します（半角入力）

③プレビュー画面でリアルタイムに

　変更が表示されます。

③

フォントサイズを変えるHome


フォントの太さの項目で文字を太字に変更できます。ノーマルと太字が選択できます。

フォントの太さ、スタイルを変えるHome


フォントスタイルの項目で文字を斜体に変更できます。ノーマルと斜体が選択できます。

フォントの太さ、スタイルを変えるHome

デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。

フォントの種類や色、

サイズを指定します。

テキストの位置や

行間隔、文字間隔を

指定します。

コンテンツの周囲の余白

およびコンテンツの枠内の

余白を指定します。

デザインパネル項目一覧2-4 デザイン篇


背景を指定します。

選んだ色の背景にすることも、

任意の画像を背景にすることも

できます。

罫線を付けることが

できます。

太さやスタイル、色などを

指定します。

幅や高さなどのサイズを

指定します。ブラウザによる表示

の違いを想定して最大 / 最小のサ

イズを指定できます。

主に画像のコンテンツに

使用します。



コンテンツに効果を

指定します。

半透明にしたり、簡単なアニ

メーションをつけることもで

きます。

コンテンツの配置方法を

指定します。

重なり順序などを規定すること

で、より高度なデザインが

可能です。

表示方法を指定することが

出来ます。

特にナビゲーションのデザインで

使用します。


新しくページを作る

2-5

世の中に１つしかない、自分だけのショップが作るために、新しくページを作る方法を覚えます。

ページの追加/削除の操作を行なうことで、自分だけのサイトを構成することができます。

デザイン篇

Step ・レイアウトとページ

・新しくページを作る

・不要なページを削除する

操作する内容操作するページ

Home

レクチャー

デザイン篇

レイアウトとページ

Goodsieには、レイアウトとページという考え方があります。

レイアウトでベースを作り、ページで個々のデザインを行なう

という考え方が基本となります。

ページ

レイアウト

レイアウトのデザインをベースにページ別のデザインをする場所です。

各ページの共通となるレイアウトをデザインする場所です。

新しくページを作る2-5 デザイン篇

レクチャー

Goodsie Goodsie

レイアウトHome

Goodsie

About

新しくページを作る2-5

ページ

レイアウトの使い方です。

デザイン篇

レイアウトとページレクチャー

レイアウトでは、全てのページに共通で表示させたいコンテンツをデザインします。作成したデザインは、各ページと紐づけることで汎用的に使う事ができます。

ナビゲーションナビゲーションナビゲーション

スライドショーテキスト

Goodsie Goodsie

スライドショー

レイアウトHome

Goodsie

テキスト

About

ナビゲーションナビゲーションナビゲーション

新しくページを作る2-5

ページ

デザイン篇

レイアウトとページレクチャー

ページでは、各ページの内容に合わせてコンテンツを設置します。その為、オンラインショップに必要なページの数だけ、Goodsieでもページを作る必要があります。

ページの使い方です。

①


①コントロールパネルのページを選択して、　「ページを追加」をクリックします。

新しくページを作るHome

②

③

新しくページを作るデザイン篇

② 「タイトル」「URL」を入力しレイアウトを選択します　（ここではMainを選択します。）　　※レイアウトのデザインパターンは、　　自分で増やすことができます。（詳細は上級編へ）

③ 完了したら「ページを保存」をクリックします。

新しくページを作る

2-5

Home

④


④ ページの登録済みの一覧の中に、　先程作成したページが登録されました。

新しくページを作るHome

不要なページを削除する

①


① ページの登録済みの一覧にマウスを重ねると、　３つのアイコンが表示されます。

左から「ページを編集」「ページのコピー」「ページの削除」という意味です。

Home

②

③


② 一番右の×印のアイコンを選択します。

③「本当にこのページを削除しますか？」というポップアップが表示されます。

　削除してもよい場合は、OKボタンを押すとページが削除されます。　

不要なページを削除するHome

次は、運営篇です。

オンラインショップのデザイン篇はここで終了です。

残りは運営編で紹介する

「商品登録」「発送費の設定」「決済登録」などを行なってください。

それが完了するといよいよ開店です。

デザイン篇

第二部 デザイン編

Education

第二部デザイン編