F7HJ '
''
B i N D でステキな
ショップサイトを作る
操 作 編
ここからは、BiNDを使って実際にショップサイトを作っていきます。 ここで紹介する機能
短いステップで、カートまでできあがります。
◎ショップサイ トの 作成 ◎ ショップ デザ イン について
テンプレ ー トの選 択 B i N D 4 には、ショップサイト用のテンプレートが用意 されています。もちろん、1 からサイトをデザインする
'
サイトシアターから、ショッピングサイト用の テンプレート「 Kitchen cabinet 」を選びます。
こともできますが、それはおいおいやっていくとして、 ここでは、どんな感じのサイトが作れるのかをチェック がてら、テンプレートを見てみましょう。 ［新 B i N D 4 を起動すると現れるサイトシアター画面で、 規サイトを作る］をクリックすると、様々なテンプレー トが表示されます（
'
）。その中で、E C サイト用、E コ
マース用と説明されているものが、ショップサイト用の テンプレートです。それらをクリックして、内容を確認 してみましょう。実際の仕上がりイメージでプレビュー できる（
(
）ので、サイトに必要なものが何かも確認で
きて便利です。 細部は、いくらでも修正できますから、ここでは、ショ ップサイトの全体像を掴むことと、何となく自分に合う デザインを選ぶことに専念します。決めたら［作成］ボ タンをクリックして、サイトの作成を始めましょう。こ こでは、Kitchen cabinetというテンプレートの「White」 を選択しました。
076
(
デザインを選んだら ［ プレビュー］で内容を確 認し、 ［作成］をクリックしてサイトの作成に入 ります。
F7HJ '
写 真や画 像の準備
)
テンプレートを見ると、サイトに必要な写真や画像 の種類や大きさがわかります。
選んだテンプレートを見ると、必要な画
'' 操 作 編
ビルボード サイトや各コーナーの看板に
像がわかります。ショップサイトの作成
Introduction
なる部分。イメージ写真やイ
は、実はサイトそのものの構築より、必
ラストと文字を組み合わせた 画像が効果的。ここでは横長
要な写真や画像を揃えることの方が大変
のものを用意する。
で重要なので、実際のデザインテンプレ
Part 1
ショップをはじめよう
ートを見ながら、自分だったら、どこに どんな写真を配置するかを考えます （
)
）。
商品イメージ写真 トップページなどは、商品の
商品写真は BiND のソフト上で貼り付ける
具体的な写真だけでなく、使
もの、ショッピングカート用として、イ
用例や商品を含む風景といっ
Part 2
魅力的なプロモーション ＆アピールをはじめよう
た広がりのある写真を用意す
ンターネット経由でアップロードするも
る。
のに分かれます。ショッピングカート用
Part 3
の商品写真（商品の様子がわかるシンプ
商品写真
ルなもの）と、サイト上で紹介するイメ
ユーザーをつなぐ！ コミュニティをはじめよう
ショッピングカートやお勧め 商品の欄には、商品の内容が
ージ写真も含むものは、別々のフォルダ
わかる単品の商品写真を使う。
に入れてまとめて管理しましょう。 あと、これは B i N D 4 でサイトを作る際 の全般的にいえることですが、ビルボー ド、つまりサイトの看板になる部分の画
告知部分
像をしっかりと用意することが重要で
お知らせやブログとの連携、人気商品ラ ンキングなどをまとめておく部分。当初
す。写真やイラストと、ショップ名、コ
はなくても構わない。
ーナー名を組み合わせたビルボードは、
BiND 内に用意された SiGN や SHiFT で
規約部分
簡単にカッコいいものを作成することが
どの、ショップサイトに必須な情報へのリンク。
規約や買い方、送料情報、プライバシーポリシーな
できます。使い方は、1 1 0 ページ以降を 参照してください。
6
8DAJBC E コマース用のテンプレートを使う意味 E C サイト用のテンプレートには、ネットショップのサイトに必要な、規約やプライバシーポリシー などの項目があらかじめ用意されています。そのため、うっかり用意し忘れるということがありませ ん。内容は、もちろん自分で書く必要がありますが、コーナーを全部自分で作る手間を考えると、他 のデザインに集中できる分、便利なのです。
077
F7HJ (
,
スライドショー 作 成ソフト S H i F T を活 用する
操 作 編
（以下SHiFT）では、手軽な操作で、美しく、バ BiND4からの新機能「SHiFT for WebLiFE」 ここで紹介する機能
リエーション豊かなスライドショーが作成できます。
B i N D でスライドシ ョ ー ツ ー ル ◎ SHiFT の起動 ◎ス ラ イ ド ショーの 作成
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 を使用するには、ブロックエデ ［ブロックエディタ］のパ ーツ一覧で［ S H i F T ス
ィタから［SHiFT スライドショーパーツ］ボタンをクリックして起動します（
'
）。
ライドショーパーツ ］を クリックして起動
スライドショーテンプレートを選択
写真のトリミング を変更
スライドショー用 の画像を追加
写真を入れ替え 写真にキャプ ションを追加 リンクを追加
'
チェックを外すと １度再生してその あと停止
S H i F T の 設 定 画 面と各 部 の 機 能。スライドショ
ーの種類は、写真を選択する前 に、［ テンプレートを選択 ］から スライドショーのスタイルやサイ ズを選択します。
114
リストの画像を削除 クリックで画像を追加
チェックを外すとクリックする まで次の写真に移動しない
F7HJ (
■ 新 規にスライドショーを作成 (
［ ブ ロックエ ディタ ］を 開 き、 パーツ 一 覧 で ［ S H i F T スライドショーパーツ ］をクリックし
て起動すると S H i F T の画面が開き、テンプレート選
+
写真を選択する「 アイテムブラウザ 」が起動し たら［フォルダの選択］ボタンをクリック。用意
,
操 作 編
しておいた写真が含まれるフォルダを選択します。 アイテムブラウザより写真を選択して、 ［適用］ボタン をクリックします。
Introduction
択画面が同時に表示されます。
Part 1
ショップをはじめよう
Part 2
魅力的なプロモーション ＆アピールをはじめよう
,
S H i F T の画面の左側に追加した写真が表示 されます。写真の追加を必要なだけ繰り返し
ます。
)
Part 3
ユーザーをつなぐ！ コミュニティをはじめよう
左側のカラムでスライドショーのカテゴリを選 択してから、右 側 の 一 覧でスライドショーテ
ンプレートを選択します。
カテゴリー を選択
-
ここでは２枚の写真を設定しました。写真の表 示順は、左のカラムの順番です。必要であれ
ば、写真のサムネールをドラッグアンドドロップして、 順番を変更できます。 ［保存］ボタンをクリックします。
*
S H i F T の画面左下で［ 新規画像 ］ボタンをク リックします。
115
_dj[hl_[m m_j^ M;8 9ECFEI;HI
If[Y_Wb :?=?J7BIJ7=; デジタルステ ー ジ
132
^jjf0%%m m m$Z_]_jWbijW][$`f%
デジタルステージのウ ェブサイト。もちろん、 B i N D を使った運営が 行われています。部分 的に CMS をカスタマイ ズした箇所や、幅をオ リジナルサイズに変更 しているなど、高度な 利 用 法 の ショーケース として見ることも。
「 人を集める」ということはとても大 変 BiNDの開発元であるデジタルステージの代表、平野友康氏は、 さまざまなソーシャルメディアを駆使してユーザーとのコミュニケーションを図っています。 その経験を基にソフトの開発を行うだけでなく、一企業の代表として製品のアピールにも ソーシャルメディアを活用しています。 そんな平野氏に、ネットを使ったビジネスでのソーシャルメディアの活用法などについて聞いてみました。
133
M[X 9ecfei[h i
=H;7J I?J; =K?:; ) de$
旅館の番頭さんがウェブ上の番頭さんも兼務 てしま旅館
^jjf0%%mmm$j[i^_cWhoeaWd$Yec
おすすめプランを魅力的 に紹介。左上はメニュー と電話番号を固定し次の アクションが起こしやすい。
山口県、阿知須温泉にある美 食とお湯が自慢のデザイナー ズ旅館。1968 年に創業した 古い旅館の外観はそのままに、 現代的な空間に改装されたそ うです。 「てしま旅館」はウェブ上で のクチコミがとても盛んにさ れています。公式ウェブサイ トや番頭てしまさんのブログ を見て興味をもち、泊まりに 行かれたお客様が感銘を受け てブログで再びクチコミをす る…という好循環が生まれて います。旅館のおもてなしは 一番大切ですが、その様子を ウェブで伝わるようにしてお くこと、そして、ユーザーと つなげていくしくみも用意し ておくことが、大切。その点 で、旅館サイトのお手本とい ってもよいでしょう。
てしま旅館 住所： 〒 754-1277 山口県 山口市阿知須 7418-8 電話： 0836-65-2248
FAX： 0836-65-3140
140
各種ソーシャルメディア を活用。サイトのデザイ ンの邪魔にならない控え めなデザインを採用。
for H OT E L
グ ッ とくる写 真を用 意する
ビジ ュ アルなフ ッ タ ー のリンク
関連 リンク
写真 中心 の ページ
左上固定したサイドメニューはシンプルな文字のメニ ューですが、関連サイトや新設ページへのリンクなど サイトを更新するのに長い文章を用意する必要は必
は、メインエリアの下方に、画像付きの目次風にして
ずしもありませんが写真は重要です。献立や館内の
レイアウト。ページ全体がにぎやかになりますし、テ
ご案内など、グッとくる写真をメインに用意すれば、
ーマにあったビジュアルがあれば、よりユーザの目を
多くのことが伝わります。
引きやすく、クリックされやすくなります。
ニ ュ ー ス更 新のお知らせ
次のアクシ ョ ンへつなげる
ニュース 掲載 各種機能 取り込み
ニュースに該当する個 別ページがある場合は S Y N C で、リンクを作 成しておきます。
B i N D 3 から搭載されている S Y N C のクチコミ機 能に、いわゆる「 W h a t ' s N e w 」を作成する、ニュ ースの更新機能があります。レイアウトの崩れを気
行きたいなと思ったら「予約」ボタン、興味はあるの
にすることなくだれでも最新掲載情報を更新できま
でそのうち…という場 合 はツイッターをフォロー、
す。また、日付、タイトル、リンクと掲載の形式が
もっと写真が見たいなら F l i c k r と、閲覧者がページ
整っているので、読者もサイトをチェックしやすくな
を閉じてしまう前に、次のアクションへつなげるも
ります。ぜひ活用したいものです。
のを可能にしておくことが必要です。
141
F7HJ )
)
操 作 編
Tw i t t e r を組み込んで
お店のアカウントをアピール 「ツイート」や「つぶやき」と呼ばれる140文字以内のメッセージを公開したり、閲 Twitterは、
ここで紹介する機能 ◎ Twitter
覧したりするサービス。BiND4では、ツイートぺージを表示したり、ウェブの記事をツイート させるボタンを配置できます。
'
Tw i t t e r のタイムライン（ツイートを時系列に 並べたリスト）を配置するブロックを［ブロック
エディタ］で開き、画面右側の［ パーツ一覧 ］の［ウェ
即時的なPR などでお客さまと のコミュニケ ートを活性 化
ブサービス系パーツ ］にある［ Tw i t t e r ］をクリックし ます。
Twitter は非常にリアルタイム性が強く、使い 方によっては広がりが大きいメディアです。 タイムセールの予告やお知らせなどを Twitter を通して告知を行えば、ただウェブやメール クリック
で案内するより大きな反響が期待できるで しょう。B i N D 4 では Tw i t t e r のタイムライン だけでなく、フォローを設定する項目や、こ のウェブページのリンクを貼る項目を設定す ることができます。ただし、注目を集めるた めに、無差別に何百ものアカウントを過剰に フォローしたり、ツイートの内容と関係ない
(
S Y N C が立ち上がったら、タイムラインを表 示する Tw i t t e r アカウントを入力して ［ 次へ ］
をクリックします。
のにウェブページのリンクを貼る、重複ツイー トなどの行為は、他のユーザーを不快にさせ てしまうので逆効果。さらに、スパムとして 報告されてしまうこともあるので注意が必要 です。これらのルールに気をつけて利用すれ ば、Twitter は、インフォメーションやお客さ まとのコミュニケーションのための非常に有 効な手段となります。
146
Twitterアカウントを入力
F7HJ )
)
［デザインの選択］画面が開いたら、サンプル を参照してタイムラインの文字色と背景色の
組み合わせを選択。 ［次へ］をクリックします。
,
［クチコミ＆ R S S 購 S Y N C 画面が開いたら、 読ボタンを設置する］を選択し、 ［次へ］ボタン
)
操 作 編
をクリック。［ 表示するボタンの選択 ］画面の「「 つぶ やくボタン」を使用する」にチェックを入れて、 ［次へ］ ボタンをクリックします。
チェックを入れる
Introduction
Part 1
ショップをはじめよう
Part 2
*
魅力的なプロモーション ＆アピールをはじめよう
［オプションの選択 ］画面が開いたら、必要に 応じて各種設定を行います。 「自動調整」にチ
ェックを入れて、ブロックの幅に合わせてタイムライ ンが表示されるようにします。設定が完了したら ［次 へ］をクリック。
-
［サービスの設定］画面が開いたら、 Tw i t t e r アカウントを入力し、 ［ 次へ ］ボタンをクリック
します。
Part 3
ユーザーをつなぐ！ コミュニティをはじめよう
自動調整にチェック
+
さらに［次へ］をクリックして、設定の確認をし たら ［ 適用 ］ボタンをクリックして S Y N C を閉
じます。［ ブロックエディタ］に戻ったら、 ［ Tw i t t e r ］ パーツの下にカーソルを挿入し、 ［ ウェブサービス系 パーツ］にある［ニュース］をクリックします。
.
設 定を確 認して ［ 適 用 ］ボタンをクリックし、 ［ブロックエディタ］ で ［適用］ SYNCを閉じたら、
ボタンをクリックします。 ［サイトエディタ］ で ［アップロー ド］ ボタンをクリックしてページが公開されたら、ブラウ ザで開いて確認。ページには、指定した Twitterアカウ ントの最近のツイートが表示され、その下の ［つぶやく ボタン］ をクリックすると、ツイートにページのリンクを 貼る項目と、指定した Tw i t t e r アカウントのフォローを 設定する画面へ移動する項目が表示されます。
カーソルを挿入 クリック
147