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

第二部 デザイン編

Jul 22, 2015

Download

Education

goodsiemanual
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 第二部 デザイン編

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

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

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

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

第2部

オンラインショップの

デザイン篇

Page 2: 第二部 デザイン編

2-1 アカウント登録

2-2 情報を書き換える

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

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

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

オンラインショップの

デザイン編

第2部

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

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

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

Page 3: 第二部 デザイン編

アカウント登録

2-1

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

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

デザイン篇

Page 4: 第二部 デザイン編

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

メールアドレス       

パスワード

ショップURL

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

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

http:// .goodsie.co.jp

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

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

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

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

Page 5: 第二部 デザイン編

①②③

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

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

を入力して

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

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

Page 6: 第二部 デザイン編

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

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

Page 7: 第二部 デザイン編

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

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

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

Page 8: 第二部 デザイン編

情報を書き換える

2-2

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

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

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

デザイン篇

Page 9: 第二部 デザイン編

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

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

・店の住所を入力する

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

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

About

Home

Location

Contact

デザイン篇

Page 10: 第二部 デザイン編

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

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

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

Home

Page 11: 第二部 デザイン編

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

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

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

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

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

Page 12: 第二部 デザイン編

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

①②

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

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

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

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

Home

Page 13: 第二部 デザイン編

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

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

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

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

Home

Page 14: 第二部 デザイン編

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

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

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

⑤ PC内にある画像から

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

Home

Page 15: 第二部 デザイン編

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

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

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

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

Home

Page 16: 第二部 デザイン編

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

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

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

Home

Page 17: 第二部 デザイン編

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

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

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

Home

Page 18: 第二部 デザイン編

違うページを編集する

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

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

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

Home

Page 19: 第二部 デザイン編

テキストを編集する

③④

情報を書き換える2-2

デザイン篇

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

About

Page 20: 第二部 デザイン編

ロケーションを登録する

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

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

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

Location

Page 21: 第二部 デザイン編

ロケーションを登録する

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

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

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

Location

Page 22: 第二部 デザイン編

ロケーションを登録する

情報を書き換える2-2

デザイン篇

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

 地図にピンが立ちます。

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

Location

Page 23: 第二部 デザイン編

ラベルを変更する

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

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

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

Contact

Page 24: 第二部 デザイン編

ラベルを変更する

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

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

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

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

Contact

Page 25: 第二部 デザイン編

ラベルを変更する

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

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

Contact

Page 26: 第二部 デザイン編

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

2-3

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

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

デザイン篇

Page 27: 第二部 デザイン編

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

・動画を追加する

・画像を追加する

※ソーシャルリンクとは

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

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

About

Home

Location

デザイン篇

Page 28: 第二部 デザイン編

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

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

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

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

Home

Page 29: 第二部 デザイン編

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

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

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

Home

Page 30: 第二部 デザイン編

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

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

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

Home

Page 31: 第二部 デザイン編

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

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

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

Home

Page 32: 第二部 デザイン編

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

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

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

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

Home

Page 33: 第二部 デザイン編

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

⑤ ⑥

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

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

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

Home

Page 34: 第二部 デザイン編

映像を追加する

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

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

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

About

Page 35: 第二部 デザイン編

映像を追加する

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

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

About

Page 36: 第二部 デザイン編

映像を追加する

③④

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

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

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

About

Page 37: 第二部 デザイン編

画像を追加する

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

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

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

Location

Page 38: 第二部 デザイン編

画像を追加する

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

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

Location

Page 39: 第二部 デザイン編

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

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

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

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

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

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

Page 40: 第二部 デザイン編

動画(Vimeo ,Youtube)

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

タイトル文字

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

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

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

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

Page 41: 第二部 デザイン編

商品 地図 検索窓

画像をタイル状に配置

画像 商品詳細

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

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

Page 42: 第二部 デザイン編

デザインを変更する

2-4

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

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

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

デザイン篇

Page 43: 第二部 デザイン編

・レイヤーの概念を知る

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

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

・フォントの色を変える

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

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

Step

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

Home

レクチャー

デザイン篇

Page 44: 第二部 デザイン編

レイヤーの概念を知る

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

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

レイヤーの重なり方 (イメージ) 

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

などのレイヤー

レイアウト

ページ[列]

コンテンツ

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

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

デザイン篇

レクチャー

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

Page 45: 第二部 デザイン編

Goodsieのレイヤー構造 と名称

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

テキスト[モジュール]

というように

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

名称が表示されます。

レイアウト

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

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

ページ[行]

ページ[列]

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

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

レクチャー

Page 46: 第二部 デザイン編

レイヤーの確認方法

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

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

レクチャー

Page 47: 第二部 デザイン編

レイヤーの確認方法

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

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

レクチャー

Page 48: 第二部 デザイン編

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

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

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

Home

Page 49: 第二部 デザイン編

フォントの種類を変える

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

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

Home

Page 50: 第二部 デザイン編

フォントの種類を変える

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

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

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

Home

Page 51: 第二部 デザイン編

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

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

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

Page 52: 第二部 デザイン編

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

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

フォントの色を変えるHome

Page 53: 第二部 デザイン編

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

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

フォントの色を変えるHome

Page 54: 第二部 デザイン編

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

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

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

Page 55: 第二部 デザイン編

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

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

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

 変更が表示されます。

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

Page 56: 第二部 デザイン編

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

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

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

Page 57: 第二部 デザイン編

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

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

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

Page 58: 第二部 デザイン編

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

フォントの種類や色、

サイズを指定します。

テキストの位置や

行間隔、文字間隔を

指定します。

コンテンツの周囲の余白

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

余白を指定します。

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

Page 59: 第二部 デザイン編

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

背景を指定します。

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

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

できます。

罫線を付けることが

できます。

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

指定します。

幅や高さなどのサイズを

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

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

イズを指定できます。

主に画像のコンテンツに

使用します。

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

Page 60: 第二部 デザイン編

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

コンテンツに効果を

指定します。

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

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

きます。

コンテンツの配置方法を

指定します。

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

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

可能です。

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

出来ます。

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

使用します。

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

Page 61: 第二部 デザイン編

新しくページを作る

2-5

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

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

デザイン篇

Page 62: 第二部 デザイン編

Step ・レイアウトとページ

・新しくページを作る

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

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

Home

レクチャー

デザイン篇

Page 63: 第二部 デザイン編

レイアウトとページ

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

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

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

ページ

レイアウト

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

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

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

レクチャー

Page 64: 第二部 デザイン編

Goodsie Goodsie

レイアウトHome

Goodsie

About

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

ページ

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

デザイン篇

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

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

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

スライドショーテキスト

Page 65: 第二部 デザイン編

Goodsie Goodsie

スライドショー

レイアウトHome

Goodsie

テキスト

About

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

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

ページ

デザイン篇

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

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

ページの使い方です。

Page 66: 第二部 デザイン編

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

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

新しくページを作るHome

Page 67: 第二部 デザイン編

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

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

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

新しくページを作る

2-5

Home

Page 68: 第二部 デザイン編

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

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

新しくページを作るHome

Page 69: 第二部 デザイン編

不要なページを削除する

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

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

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

Home

Page 70: 第二部 デザイン編

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

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

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

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

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

Page 71: 第二部 デザイン編

次は、運営篇です。

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

残りは運営編で紹介する

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

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

デザイン篇