「ちゃんとしたウェブサイトを用意したいけど難しそう」とついつい敬遠してしまう人は多い。そこで、小さいながら自作のペット服ショップを営む姉のミキと、会社で広報を担当している妹のマキというふたりのウェブ初心者の姉妹が、戸惑いながらもショッピングサイトを完成させる過程をリポート。利用するソフトはショッピングカート機能が加わってより実用的になった「BiND for WebLiFE* 4」だ。実際のBiND 4ユーザーのコメントも掲載しているので参考にしてほしい。
●登場人物紹介
ミキ（姉）
子ども服をリメイクしてペットの洋服を作る作家。最近、念願がかなって自分の店を開店したばかり。のんびりした性格で難しいことは苦手
マキ（妹）
デジタル系グッズの制作会社に勤める会社員。所属する広報部がBiNDでウェブサイトを運営しているので少し詳しい。性格はしっかり者
|
BiND for WebLiFE* 4 開発／販売元●(株)デジタルステージ 価格●1万9800円（スタンダード版）、2万8800円（プロフェッショナル版）、3万4800円（Pro. オンラインショップ開店セット） 問先●contact@digitalstage.net http://www.digitalstage.jp/bind/ |
|---|
BiNDなら簡単! サイト作りの基本
自分の店のウェブサイトを作ると公言しつつ、なかなか行動に移さない姉のミキ。それを見かねた妹のマキが、ある日「BiND 4」を買ってきた。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があれば何も用意しなくていいのね?
マキ そう! 公開のためのサーバーも用意してくれているし。いいでしょ!!
「otogi designs」は、プロダクトを中心としたデザイン事務所のウェブサイト。シューズメーカー「アキレス」とのコラボレーションによるファーストプロダクト「いろばき」を販売中
BiND 4ユーザーの声
遊び感覚でサイト作り
BiNDの好きな点は、画像や伝えたい情報をパズルのように組み込んでいくだけで、簡単にウェブサイトが作れるところですね。
サイトのデザインに合わせたオンラインストアが作りたかったので、今回のBiND 4のショッピングカート機能はとても魅力でした。また、細かいマージンやカスタムタグの設定など、こんなことができればなぁと思っていた部分が改善されて、かなり使いやすくなったのもうれしいです。テンプレートそのものも編集できるので、今までのＢｉＮＤよりオリジナリティーのあるサイトが作りやすくなったと思います。今後は、TwitterやUstreamといった新機能もいろいろ取り入れていきたいですね。
（オトギデザインズ 森岡聡介）
(次ページに続く)
