仲良し姉妹のサイト作り奮闘記

●登場人物紹介
ミキ（姉）子ども服をリメイクしてペットの洋服を作る作家。最近、念願がかなって自分の店を開店したばかり。のんびりした性格で難しいことは苦手

マキ（妹）デジタル系グッズの制作会社に勤める会社員。所属する広報部がBiNDでウェブサイトを運営しているので少し詳しい。性格はしっかり者

BiND for WebLiFE* 4 開発／販売元●(株)デジタルステージ 価格●1万9800円（スタンダード版）、2万8800円（プロフェッショナル版）、3万4800円（Pro. オンラインショップ開店セット） 問先● http://www.digitalstage.jp/bind/

マキ　お姉ちゃん、はいこれ!
ミキ　えっ、何?
マキ　この前話した、ウェブサイトを作るソフト「BiND for WebLiFE*4」。
ミキ　ああ!「簡単なのに、カッコいいサイトができる」って言ってたやつね。マキは会社で使ってるんだっけ?
マキ　そう。ウチみたいに、マメに更新しなくちゃいけないのに、ウェブデザイナーやサイト運営会社に外注するほどの予算はないってところにぴったりのソフトなのよ。自分で作っても、プロに任せたみたいなデザインのサイトができるんだから。
ミキ　ふーん。「お金はないけどこだわりたい」って贅沢よね。私もあやかりたいわ。
マキ　だーかーらー、前からそう言ってたでしょ! お姉ちゃんのペット服、絶対ネットで紹介したら人気になると思うのに、なかなかウェブサイトを作らないんだもん。インストールしてあげるからやりなさい!
ミキ　えっ、そんなこといきなり言われても……。私にできるかしら?
マキ　とにかくやってみればいいと思うよ。写真もいまから撮ればいいんだし。
ミキ　でも写真だけじゃ作れないでしょ。
マキ　もちろんすぐに完璧なものは作れないけど、写真と商品説明なんかの文章があればとりあえずかたちになるから。ウェブなんだし、初めから完璧に作る必要はないのよ。まずは公開して、あとから少しずつ完成度を上げていけばいいの。
ミキ　なるほどね。じゃあ、やってみますか! で、何から始めればいいの?
マキ　お、やる気になったわね。まずは、BiNDを起動したら、テンプレートを選択するの。ペットの服を掲載するんだから、写真がたくさんあるのを選んでみて。
ミキ　テンプレートが多くて迷うなあ……。この「Kitchen cabinet」ってのがイメージに合う気がする。

サイトシアター

【1】BiNDを起動すると窓口となる「サイトシアター」が開く。「新規サイトを作る」をクリックして24種類、96バリエーションのサイトテンプレートから自分のイメージに合うものを選ぼう

【2】各テンプレートには色や細かな仕様が違うバリエーションがある。「作成」ボタンをクリックすると、「サイトエディタ」が起動する。一度サイトを作成すると「マイサイト」に登録されるので、次回以降はそちらから選べばいい

マキ　うん、いいんじゃない。「作成」ボタンをクリックすると……。ほら、これでサンプルのページが出来上がったでしょ。
ミキ　わぁ、いきなりお店紹介や利用ガイドまである! でも、これ私の店じゃないわよ。
マキ　当たり前でしょ。このテンプレートの素材を、お姉ちゃんの商品やお店の写真とかに入れ替えて、コメントも書くの。

サイトエディタ

【1】「サイトエディタ」では、左側の「サイトマップ」で編集対象のページを切り替える。ページの構成要素はテンプレートによって違うので、ひと通り内容を確認しておこう

【2】サイトマップで必要なページの追加や不要なページの削除をして、ページ数を整える。BiNDは各ページの構成要素である「ブロック」単位で編集するのが基本。ブロックの削除や追加、移動もできるので自由にレイアウト可能だ

【3】ページ内にある「ブロック」を選んで「編集」ボタンをクリックすると、「ブロックエディタ」が開く。サンプルのテキストや画像を置き換えて、オリジナルのコンテンツにしていこう

【4】「サイトエディタ」の画面下部にある「設定」から「ページ設定」を開くと、「ページデザイン」タブでページ全体やコーナーの背景色を変更できる。タブごと「セット」として設定を保存すれば呼び出しも可能

【5】サンプルデータをすべて入れ替えて編集が終わったら、「サイトエディタ」の下部にある「プレビュー」をクリック。実際にウェブブラウザーを使って表示を確認しよう

【6】「サイトエディタ」にある「サイト設定」を開き、「サーバー設定」タブでBiNDサーバーや自分が契約しているプロバイダーの情報を入力。「アップロード」を実行すれば設定先のサーバーで公開される

画像パーツ

【1】写真の入れ替えも簡単だ。変更する部分を「ブロックエディタ」で開き、写真を選択しよう。右側の「画像パーツ設定」にその画像の詳細が表示されるので、「開く」をクリック

【2】「アイテムブラウザ」が開いたら、「フォルダの選択」で使いたい写真のあるフォルダーを指定。サムネールの一覧から画像を選んで「適用」をクリックする

【3】「ブロックエディタ」の下部にある「適用」をクリックして初めて、編集中のページに変更が反映される。なお、そのままウィンドウを閉じると保存されない

ミキ　最初の写真、ずいぶん横長ね。こんな写真、私撮ったことないなぁ。
マキ　あ、いいのよ。ウェブページで使う画像はBiNDで好きなようにトリミングできるから平気。「SiGN for WebLiFE* 3」っていうソフトも付いてて、写真とテキストを組み合わせたロゴも作れちゃうわよ。

SiGN for WebLiFE* 3

【1】付属のSiGNを用いてショップのロゴも作成しておこう。「ブロックエディタ」で「SiGN 見出しパーツ作成」を選び、一覧から好みのものを選択する

【2】「SiGN」の「TEXT」編集画面で、ショップの名前やキャッチコピーといったロゴにしたいテキストを入力。色やフォントなどを指定する。「エフェクト」で縁取りを加えたり、文字の間隔や行間を調整したりすることも可能だ

【3】文字の色やエフェクトが決まったら、文字量に合わせて「SHAPE」でサイズを変更し、保存時のファイル形式を選択。PNGを選んで透明度を「0」にすれば、背景が透ける。最後に「保存」をクリックすれば完了だ

ミキ　じゃあ写真とBiNDがあれば何も用意しなくていいのね?
マキ　そう! 公開のためのサーバーも用意してくれているし。いいでしょ!!

ミキ　ねぇマキ、ちょっと教えてほしいんだけど……。
マキ　サイトの更新ね。どうしたいの?
ミキ　マキの会社のサイトってBiNDで作ってるんでしょ。このトップページにある、写真が順番に切り替わってるのって、どうやっているの?
マキ　ああ、あれはBiNDの「SHiFT for WebLiFE*」って機能を使っているのよ。
ミキ 「ブロックエディタ」にある「SHiFTスライドショーパーツ」のこと?
マキ　そうそう。お姉ちゃんにしては勉強してるじゃない(笑)。これを使うと、スライドショーを配置できるの。SHiFTのいいところは、ウェブブラウザーの標準機能を使って実現しているってことね。Flashが見られなくても表示できるから、iPhoneやiPadの対策もバッチリなのよ。

SHiFT

【1】スライドショーを作成するにはまず、「ブロックエディタ」の画面右側にある「パーツ一覧」から「SHiFTスライドショーパーツ」を選択する

【2】SHiFTの画面が開くので、テンプレート一覧からスライドショーのスタイルを選ぶ。一般的なフェードやスライスのほか、写真をページの背景に切り替えながら表示する、ポラロイド風のフレームに表示するといったテンプレートもある

【3】スライドショーで表示する写真を、SHiFTウィンドウ左側のエリアにドラッグ＆ドロップして登録する。画面下部にある「新規画像」ボタンをクリックして選択してもOK。写真の削除は隣の「削除」ボタンで実行する

【4】登録した各画像に対し、画像下部に表示するコメントやリンクの有無、リンク先などを設定する。自動再生やループといったオプションのオン／オフを選択したら、あとは「保存」ボタンをクリックすればスライドショーの完成だ

【5】その後、忘れずに「ブロックエディタ」で「適用」を実行すること。ウェブブラウザーでプレビューし、設定したコメントの表示やリンクの効果を確認しよう。画面下に小さな丸印が写真の枚数ぶん表示される

ミキ　へえー。最近はiPhoneを使っている人が周りにも多いからうれしいわ。ほかにも、マキの会社をまねしたいところがあるんだけど。この地図とか、このお問い合わせのページとか……。
マキ　それはほら、「ウェブサービス系パーツ」を見てみて。
ミキ　あ、ほんとだ。「Yahoo!地図」もあるし、「フォーム」もある。

Yahoo! 地図

「SYNC」の「Yahoo! 地図」を使えば、ほんの1分ほどでページに地図を埋め込める。マーカーには、あらかじめ用意したオリジナル画像も利用可能だ

フォーム

「フォーム」パーツを利用すれば、問い合わせ用フォームの作成も簡単だ。テンプレートを選び、表示されるガイドに従って項目を設定していこう

マキ　そこをクリックすると「SYNC for Web LiFE* 3」が起動するでしょ。このSYNCに表示されるガイドに従って設定していけば、地図やフォーム、動画をページの中に組み込めるのよ。ちょっと地図を作ってみるね。まず住所で検索。この地図でお店の場所をクリック──と。
ミキ　マーカーが付いた! これだけ!?
マキ　あとは「次へ」で進めて、「適用」ボタンを押せばいいの。お問い合わせフォームのほかにも、アンケートフォームなんかも作れるわよ。
ミキ　本当に簡単ね! じゃあ、ついでに、ほらここ、マウスを重ねるとバナー画像が変わるけどこれはどうやっているの?
マキ　ロールオーバーっていうのよ。2枚の画像を切り替える効果だから、まずSiGNでバナー用の画像を作っておくの。SiGNは普通の画像編集ソフトみたいに、作った画像をJPEGやPNG形式で書き出せるのもポイントなのよ。
ミキ　あー、SiGNってロゴを作るときに使ったソフトね。バナーも作れるの?
マキ　ロゴもバナーも、結局は画像編集なのよね。SiGNでバナーを用意してJPEGに書き出すでしょ。そしたら画像パーツとして読み込めば、リンク付きのバナーにロールオーバー効果を設定できるわ。

ロールオーバー

【1】ロールオーバーするバナーもSiGNで作る。ブロックテンプレートの一覧から、「バナー」カテゴリーを選び、作成したいバナーのサイズを選んで、ページに配置する

【2】SiGNでバナーを開いてテンプレートのテキストや文字の配置などを変更。完了したら「ファイル」メニューから「別ファイルとして保存」を選んで保存する

【3】ロールオーバー効果は、SiGNで書き出した画像をページに配置し、「画像パーツ設定」の「クリック設定」で付ける

【4】適用したら、ウェブブラウザーでプレビューしてみよう。1枚の画像があれば色の濃淡でロールオーバー効果を付けられる。もちろん違う画像の挿入もOKだ

ミキ　何でもできるのね! すごいすごい! じゃあ次はセール品の表の作り方を……。
マキ　ちょっとお姉ちゃん! 少しは自分でやろうとしなさい!!

BiNDテーブルパーツ

【1】表の作成には、「ブロックエディタ」のパーツ一覧にある「テーブルパーツ」を利用する。「テーブルパーツ・エディタ」に並ぶテンプレートから、作りたい表に近いものを選択して「作成」ボタンを押そう

【2】右上の「行や列の増減」で行／列の追加や削除をクリック操作で繰り返し、項目数を調整する。セル内をクリックすると、直接セル内のテキスト編集が可能だ。ツールバーにある「プレビュー」を実行すれば、表の仕上がりを確認できる

【3】表の編集が終わったら「テーブルパーツ・エディタ」の「適用」を選択し、「ブロックエディタ」でも「適用」をクリック。セル内のテキストやバーの色なども自由に変えられるので、ウェブブラウザーでチェックしながら調整しよう

ミキ　ねえマキ、ネットでもペット服を販売しようと思うの。この間からウェブを作って更新していたでしょ。そうしたら、それを見た人から通販はしていないんですかって問い合せが3件も来たのよ。
マキ　わー、それはスゴい。さっそくビジネスチャンス到来ね!
ミキ　実際どれだけ注文してもらえるかはわからないけど、ネット販売はいつかはやってみたいと思っていたし。
マキ　もっとお客さんが来てくれるように、私もTwitterやUstreamでお店の広報活動応援しちゃう♪

Twitter

【1】Twitterのつぶやきをページ内に組み込むことも可能。まずTwitterでアカウントを作る。ショップ専用のアカウントを用意するといいだろう

【2】ブロックエディタの「ウェブサービス系パーツ」で「Twitter」を選択。アカウントを登録してタイムラインのデザインや表示サイズなどを設定するだけだ

【3】「Twitter」パーツを組み込んだページをウェブブラウザーでプレビューしたところ。左サイドバーに設定したアカウントのコメント欄が表示される

Ustream

【1】Ustreamのリアルタイム映像配信も組み込める。Ustreamのアカウントを登録し、「ユーザ情報設定」で番組情報を設定しよう

【2】「ウェブサービス系パーツ」の「USTREAM」で番組のURLを設定すればOK。表示サイズの設定なども可能だ

ブログ

【1】すでに店の紹介ブログなどを作っていた場合、BiNDが対応するサービスであれば「ウェブサービス系パーツ」の「ブログ」パーツで組み込める

【2】Bloggerのブログを組み込んだ例。そのほか、Yahooブログ／Amebaブログ／ココログ／FC2ブログ／JUGEM／livedoorブログ／gooブログに対応している

ミキ　でも、どうすればいいのかしら?
マキ　うーん、ネットでお金のやり取りをするわけだから、決済システムなんかが必要になるはずね。私の周りは専門のサービスを使う人が多いけど、確かBiND 4の新機能に……。あ、やっぱり「BiND Server」でできるみたいよ。

ショッピングカート

【1】「Premiumコース」は、「BiND Server Control Panel」などから申し込める。ページを開いてユーザーIDとパスワードを入力してログインしたら、「FTPアカウント一覧」で「Premiumコース」を選択する

【2】「BiND Server Control Panel」の「ショップ情報設定」で各項目を入力して設定する。ショップのロゴ画像の登録も可能だ。ここで設定した「ショップコード」と「ショップパスワード」をしっかりと控えておこう

【3】支払い方法は、銀行振込や郵便振替などがあるが、クレジットカード払いを選択肢に入れるには決済代行サービス業者のイプシロン(株)との契約が必要

【4】「BiND Server Control Panel」の「商品管理」をクリックして、商品の名前／画像／定価／販売価格──などを登録していく。価格や在庫数などは各製品の「処理」項目にある「編集」ボタンをクリックすると変更可能だ

【5】ページ内に組み込むには、ブロックエディタの「ショッピングカートパーツ」で「ショッピングカート作成」を押す。「BiND Cart Tag Generator」が開いたらショップコードとパスワードを入力し、カートパーツおよび商品を選ぶ

【6】商品の名前や価格などの情報「商品タグ」のデザインをタイプA〜Fの6種類から選択。ブロックエディタに戻り「適用」をクリックすれば作業は完了だ

【7】ショッピングカートを組み込んだページをウェブブラウザーで確認してみよう。図はタイプBを選んだ場合の例だ。商品写真に右側に名前／説明／カートに入れるボタンなどが表示される

【8】「カートに入れる」をクリックすると、「カート確認」画面に切り替わり、ショッピングカートに商品が入った状態を確認できる。「ショップ情報設定」で登録したロゴが上部に表示されている。なお注文完了を伝えるテキストなどもカスタマイズ可能だ

ミキ　BiND Serverって、BiNDを買うと何カ月か無料で使えるサーバーのことでしょ?
マキ　そう、でもそれは「Basicコース」。もうひとつ「Premiumコース」っていうのがあって、それに登録するとBiNDで作ったウェブサイトにショッピングカートを組み込めるのよ。
ミキ　へー。でも難しそう……。
マキ　意外と簡単みたいよ。BiND Serverのウェブページで、ショップの設定と商品の登録さえすればいいって。あとはBiNDで作業するだけで、これまで作ってきたウェブサイトと連携できるっぽいわ。いままでの作業とあんまり変わらないかもね。私が買ってきた「BiND for WebLiFE* プロフェッショナル版」に付いている「BiND ビジネス・パス」を使えば、Premiumコースを3カ月無料で利用できるらしいから試してみたら?
ミキ　じゃあ、さっそく登録してみる! この「BiND Server Control Panel」の「ショップ情報設定」ね。ふーん。ねえ、この「BiND MOBiLE設定」や「MOBiLEキャンペーン設定」って何?
マキ　「BiND MOBiLE設定」は、BiND Serverで公開しているBiNDで作ったサイトを、携帯電話から閲覧しやすくしてくれる機能よ。

モバイル

【1】現在は決済にまだ対応していないが、携帯電話に最適化したサイトも簡単に作れる。「BiND Server」で「BiND MOBiLE設定」を実行しよう。「おまかせモード」を選ぶと自動的にサイトを変換してくれる

【2】「おまかせモード」で携帯対応になったウェブページ。なお、Premiumコースのユーザーは「じぶんでモード」を選んで携帯で閲覧した際の見え方を確認しながらレイアウトを調整できる

【3】「BiND Server Control Panel」の「MOBiLEキャンペーン設定」では、空メール送信によるメールの自動返信を設定できる

ミキ　お客さんの中には、携帯電話でしかウェブを見ないって人もいるから、それはいいわね。
マキ　「MOBiLEキャンペーン設定」は、お客さんが空メールを送ると、メールニュースの登録・解除やクーポン発行をできるようにする機能みたい。
ミキ　ちょうど年末のキャンペーンをどうしようか考えていたところなの。ネットショップも楽しくできそうだわ!

（MacPeople 2010年12月号より転載）