076

B i N Dでステキなショップサイトを作るここからは、BiNDを使って実際にショップサイトを作っていきます。

短いステップで、カートまでできあがります。

操 作 編

◎ショップサイトの作成

◎ショップデザインについて

ここで紹介する機能

B i N D 4には、ショップサイト用のテンプレートが用意

されています。もちろん、1からサイトをデザインする

こともできますが、それはおいおいやっていくとして、

ここでは、どんな感じのサイトが作れるのかをチェック

がてら、テンプレートを見てみましょう。

BiND4を起動すると現れるサイトシアター画面で、［新

規サイトを作る］をクリックすると、様々なテンプレー

トが表示されます（ ）。その中で、E Cサイト用、Eコ

マース用と説明されているものが、ショップサイト用の

テンプレートです。それらをクリックして、内容を確認

してみましょう。実際の仕上がりイメージでプレビュー

できる（ ）ので、サイトに必要なものが何かも確認で

きて便利です。

細部は、いくらでも修正できますから、ここでは、ショ

ップサイトの全体像を掴むことと、何となく自分に合う

デザインを選ぶことに専念します。決めたら［作成］ボ

タンをクリックして、サイトの作成を始めましょう。こ

こでは、Kitchen cabinetというテンプレートの「White」

を選択しました。

テンプレートの選択

サイトシアターから、ショッピングサイト用のテンプレート「Kitchen cabinet」を選びます。

デザインを選んだら［プレビュー］で内容を確認し、［作成］をクリックしてサイトの作成に入ります。

077

Introduction

Part 1ショップをはじめよう

Part 2魅力的なプロモーション＆アピールをはじめよう

Part 3ユーザーをつなぐ！コミュニティをはじめよう

操 作 編

選んだテンプレートを見ると、必要な画

像がわかります。ショップサイトの作成

は、実はサイトそのものの構築より、必

要な写真や画像を揃えることの方が大変

で重要なので、実際のデザインテンプレ

ートを見ながら、自分だったら、どこに

どんな写真を配置するかを考えます（ ）。

商品写真はBiNDのソフト上で貼り付ける

もの、ショッピングカート用として、イ

ンターネット経由でアップロードするも

のに分かれます。ショッピングカート用

の商品写真（商品の様子がわかるシンプ

ルなもの）と、サイト上で紹介するイメ

ージ写真も含むものは、別々のフォルダ

に入れてまとめて管理しましょう。

あと、これはB i N D 4でサイトを作る際

の全般的にいえることですが、ビルボー

ド、つまりサイトの看板になる部分の画

像をしっかりと用意することが重要で

す。写真やイラストと、ショップ名、コ

ーナー名を組み合わせたビルボードは、

BiND内に用意されたSiGNやSHiFTで

簡単にカッコいいものを作成することが

できます。使い方は、1 1 0ページ以降を

参照してください。

写真や画像の準備

ECサイト用のテンプレートには、ネットショップのサイトに必要な、規約やプライバシーポリシーなどの項目があらかじめ用意されています。そのため、うっかり用意し忘れるということがありません。内容は、もちろん自分で書く必要がありますが、コーナーを全部自分で作る手間を考えると、他のデザインに集中できる分、便利なのです。

6 Eコマース用のテンプレートを使う意味

テンプレートを見ると、サイトに必要な写真や画像の種類や大きさがわかります。

告知部分お知らせやブログとの連携、人気商品ランキングなどをまとめておく部分。当初はなくても構わない。

規約部分規約や買い方、送料情報、プライバシーポリシーなどの、ショップサイトに必須な情報へのリンク。

ビルボードサイトや各コーナーの看板になる部分。イメージ写真やイラストと文字を組み合わせた画像が効果的。ここでは横長のものを用意する。

商品イメージ写真トップページなどは、商品の具体的な写真だけでなく、使用例や商品を含む風景といった広がりのある写真を用意する。

商品写真ショッピングカートやお勧め商品の欄には、商品の内容がわかる単品の商品写真を使う。

114

スライドショー作成ソフトS H i F Tを活用する

S H i F Tは、トップページなどに見栄えする、スタイリッシュなスライドショーを追加

する機能です。HTML5やJavaScriptを使ったさまざまな効果を、テンプレートを選

択し、カートリッジで使用する写真を選ぶだけでサイトに追加できます。

見栄えの良いサイトにできるほか、サイトを訪れた人へ複数のサービスや商品をすば

やくプレゼンテーションするツールとして活用できます。また、i P h o n eや i P a dなど

F l a s hを再生できない環境でも再生できます。S H i F Tを使用するには、ブロックエデ

ィタから［SHiFTスライドショーパーツ］ボタンをクリックして起動します（ ）。

BiND4からの新機能「SHiFT for WebLiFE」（以下SHiFT）では、手軽な操作で、美しく、バ

リエーション豊かなスライドショーが作成できます。

◎SHiFTの起動

◎ スライドショーの作成

ここで紹介する機能

B i N Dでスライドショーツール

操 作 編

クリックで画像を追加リストの画像を削除 チェックを外すとクリックする

まで次の写真に移動しない

スライドショー用の画像を追加

スライドショーテンプレートを選択

写真にキャプションを追加

リンクを追加

チェックを外すと１度再生してそのあと停止

写真のトリミングを変更

写真を入れ替え

S H i F Tの設定画面と各部の機能。スライドショ

ーの種類は、写真を選択する前に、［テンプレートを選択］からスライドショーのスタイルやサイズを選択します。

［ブロックエディタ］のパーツ一覧で［S H i F T スライドショーパーツ］をクリックして起動

115

Introduction

Part 1ショップをはじめよう

Part 2魅力的なプロモーション＆アピールをはじめよう

Part 3ユーザーをつなぐ！コミュニティをはじめよう

操 作 編■ 新規にスライドショーを作成

［ブロックエディタ］を開き、パーツ一覧で［S H i F T スライドショーパーツ］をクリックし

て起動するとSHiFTの画面が開き、テンプレート選択画面が同時に表示されます。

写真を選択する「アイテムブラウザ」が起動したら［フォルダの選択］ボタンをクリック。用意

しておいた写真が含まれるフォルダを選択します。アイテムブラウザより写真を選択して、［適用］ボタンをクリックします。

S H i F Tの画面左下で［新規画像］ボタンをクリックします。

ここでは２枚の写真を設定しました。写真の表示順は、左のカラムの順番です。必要であれ

ば、写真のサムネールをドラッグアンドドロップして、順番を変更できます。［保存］ボタンをクリックします。

左側のカラムでスライドショーのカテゴリを選択してから、右側の一覧でスライドショーテ

ンプレートを選択します。

カテゴリーを選択

S H i F Tの画面の左側に追加した写真が表示されます。写真の追加を必要なだけ繰り返し

ます。

132

デジタルステージ

133

BiNDの開発元であるデジタルステージの代表、平野友康氏は、

さまざまなソーシャルメディアを駆使してユーザーとのコミュニケーションを図っています。

その経験を基にソフトの開発を行うだけでなく、一企業の代表として製品のアピールにも

ソーシャルメディアを活用しています。

そんな平野氏に、ネットを使ったビジネスでのソーシャルメディアの活用法などについて聞いてみました。

「人を集める」ということはとても大変

デジタルステージのウェブサイト。もちろん、B i N Dを使った運営が行われています。部分的にCMSをカスタマイズした箇所や、幅をオリジナルサイズに変更しているなど、高度な利用法のショーケースとして見ることも。

140

山口県、阿知須温泉にある美

食とお湯が自慢のデザイナー

ズ旅館。1968年に創業した

古い旅館の外観はそのままに、

現代的な空間に改装されたそ

うです。

「てしま旅館」はウェブ上で

のクチコミがとても盛んにさ

れています。公式ウェブサイ

トや番頭てしまさんのブログ

を見て興味をもち、泊まりに

行かれたお客様が感銘を受け

てブログで再びクチコミをす

る…という好循環が生まれて

います。旅館のおもてなしは

一番大切ですが、その様子を

ウェブで伝わるようにしてお

くこと、そして、ユーザーと

つなげていくしくみも用意し

ておくことが、大切。その点

で、旅館サイトのお手本とい

ってもよいでしょう。

各種ソーシャルメディアを活用。サイトのデザインの邪魔にならない控えめなデザインを採用。

おすすめプランを魅力的に紹介。左上はメニューと電話番号を固定し次のアクションが起こしやすい。

旅館の番頭さんがウェブ上の番頭さんも兼務

てしま旅館

てしま旅館住所： 〒754-1277　山口県　　　山口市阿知須7418-8

電話： 0836-65-2248

FAX： 0836-65-3140

forHOTEL

141

サイトを更新するのに長い文章を用意する必要は必ずしもありませんが写真は重要です。献立や館内のご案内など、グッとくる写真をメインに用意すれば、多くのことが伝わります。

B i N D 3から搭載されているS Y N Cのクチコミ機能に、いわゆる「What ' s New」を作成する、ニュースの更新機能があります。レイアウトの崩れを気にすることなくだれでも最新掲載情報を更新できます。また、日付、タイトル、リンクと掲載の形式が整っているので、読者もサイトをチェックしやすくなります。ぜひ活用したいものです。

左上固定したサイドメニューはシンプルな文字のメニューですが、関連サイトや新設ページへのリンクなどは、メインエリアの下方に、画像付きの目次風にしてレイアウト。ページ全体がにぎやかになりますし、テーマにあったビジュアルがあれば、よりユーザの目を引きやすく、クリックされやすくなります。

行きたいなと思ったら「予約」ボタン、興味はあるのでそのうち…という場合はツイッターをフォロー、もっと写真が見たいならF l i c k rと、閲覧者がページを閉じてしまう前に、次のアクションへつなげるものを可能にしておくことが必要です。

グッとくる写真を用意する

ニュース更新のお知らせ

ビジュアルなフッターのリンク

次のアクションへつなげる

写真中心のページ

関連リンク

各種機能取り込み

ニュース掲載

ニュースに該当する個別ページがある場合はSYNCで、リンクを作成しておきます。

146

Tw i t t e rを組み込んでお店のアカウントをアピール

Twitterは、「ツイート」や「つぶやき」と呼ばれる140文字以内のメッセージを公開したり、閲

覧したりするサービス。BiND4では、ツイートぺージを表示したり、ウェブの記事をツイート

させるボタンを配置できます。

操 作 編

◎ Twitter

ここで紹介する機能

Twitterは非常にリアルタイム性が強く、使い

方によっては広がりが大きいメディアです。

タイムセールの予告やお知らせなどをTwitter

を通して告知を行えば、ただウェブやメール

で案内するより大きな反響が期待できるで

しょう。BiND4ではTwi t te rのタイムライン

だけでなく、フォローを設定する項目や、こ

のウェブページのリンクを貼る項目を設定す

ることができます。ただし、注目を集めるた

めに、無差別に何百ものアカウントを過剰に

フォローしたり、ツイートの内容と関係ない

のにウェブページのリンクを貼る、重複ツイー

トなどの行為は、他のユーザーを不快にさせ

てしまうので逆効果。さらに、スパムとして

報告されてしまうこともあるので注意が必要

です。これらのルールに気をつけて利用すれ

ば、Twitterは、インフォメーションやお客さ

まとのコミュニケーションのための非常に有

効な手段となります。

即時的なPRなどでお客さまとのコミュニケートを活性化

クリック

S Y N Cが立ち上がったら、タイムラインを表示するTw i t t e rアカウントを入力して［次へ］

をクリックします。

Twitterアカウントを入力

Twi t te rのタイムライン（ツイートを時系列に並べたリスト）を配置するブロックを［ブロック

エディタ］で開き、画面右側の［パーツ一覧］の［ウェブサービス系パーツ］にある［Tw i t t e r］をクリックします。

147

Introduction

Part 1ショップをはじめよう

Part 2魅力的なプロモーション＆アピールをはじめよう

Part 3ユーザーをつなぐ！コミュニティをはじめよう

操 作 編［デザインの選択］画面が開いたら、サンプルを参照してタイムラインの文字色と背景色の

組み合わせを選択。［次へ］をクリックします。

設定を確認して［適用］ボタンをクリックし、SYNCを閉じたら、［ブロックエディタ］で［適用］

ボタンをクリックします。［サイトエディタ］で［アップロード］ボタンをクリックしてページが公開されたら、ブラウザで開いて確認。ページには、指定したTwitterアカウントの最近のツイートが表示され、その下の［つぶやくボタン］をクリックすると、ツイートにページのリンクを貼る項目と、指定したTwi t te rアカウントのフォローを設定する画面へ移動する項目が表示されます。

［サービスの設定］画面が開いたら、Twi t te rアカウントを入力し、［次へ］ボタンをクリック

します。

［オプションの選択］画面が開いたら、必要に応じて各種設定を行います。「自動調整」にチ

ェックを入れて、ブロックの幅に合わせてタイムラインが表示されるようにします。設定が完了したら［次へ］をクリック。

自動調整にチェック

SYNC画面が開いたら、［クチコミ＆RSS購読ボタンを設置する］を選択し、［次へ］ボタン

をクリック。［表示するボタンの選択］画面の「「つぶやくボタン」を使用する」にチェックを入れて、［次へ］ボタンをクリックします。

チェックを入れる

さらに［次へ］をクリックして、設定の確認をしたら［適用］ボタンをクリックしてS Y N Cを閉

じます。［ブロックエディタ］に戻ったら、［Twi t te r］パーツの下にカーソルを挿入し、［ウェブサービス系パーツ］にある［ニュース］をクリックします。

カーソルを挿入

クリック