特集
ショッピングサイトの開設も可能！ 高機能Webサイト制作ソフト「BiND for WebLiFE* 7」を試す
アニメーション効果付きナビゲーションやスライドショーでオシャレなサイトをデザインしよう
（2014/5/15 10:56）
「BiND for WebLiFE* 7」（以下、「BiND 7」）は、HTMLやCSSなどの専門知識をもたないユーザーでも扱えるWebサイト制作ソフトだ。“ブロック”と呼ばれるパーツを組み合わせてページを作成する仕組みになっており、アニメーション付きのメニュー“モーションナビ”やリッチなスライドショー機能“SHiFT”を組み合わせることによって、プロ顔負けのスタイリッシュなサイトを手軽にデザインできる。さらに“WebLiFE*サーバー”の利用権が付属するほか、無料のショッピングカート機能なども利用可能で、個人作品を展示するサイトからコンテンツを販売するビジネスサイトまで、これ1本で幅広いニーズに応えてくれる。
本特集ではこの「BiND 7」を実際に使ってWebサイトを作成しながら、「BiND 7」の魅力をご紹介したいと思う。
- ホームページ作成ソフト BiND for WebLiFE* 7 | バインド・フォー・ウェブライフ
- http://www.digitalstage.jp/bind/
「BiND 7」でできること
まずは「BiND 7」でできることを軽くご紹介しよう。
- “ブロック”の組み合わせによるページ設計。“ブロック”を編集する際は、文章や画像などの必要なデータをフォームに入力するだけの“スマートモード”と、より高度なデザインが可能な“エディタモード”を切り替えることが可能
- “jQuery”を活用したアニメーション付きのスライドショー「SHiFT」の最新版「SHiFT 2」
- ロゴやタイトル、バナー、ボタンなどの画像素材を編集できる「SiGN Pro」
- Twitter、Facebook、Ustreamなどのソーシャルサービスと「BiND」を連携させる無償サービス「SYNC 5」
- 無料で利用できるショッピングカート機能「BiND Cart」
- “WordPress”テーマの作成機能（プロフェッショナル版のみ）
- “Facebook”ページの作成機能（プロフェッショナル版のみ、「BiND」専用サーバーとの契約が必要）
価格はスタンダード版が19,800円、プロフェッショナル版が29,800円（税抜き）。個人向けとしては若干高めの値段設定のように感じるが、これだけの機能が専門知識なしに利用できるなら文句はないだろう。14日間無償で利用できる試用版が用意されているので、まずはそちらを試していただきたい。
なお、本稿ではとくに断りのない限りプロフェッショナル版（Windows版）を利用している。
「BiND 7」のインストール
「BiND 7」はWindows/Macに対応しており、Windows版はWindows 7/8/8.1で動作する。2.4GHz以上のプロセッサ、2GB以上以上のメモリ（4GB以上推奨）に加え、5GB以上のディスク空き容量が必要（推奨は10GB以上）となるので注意したい。また、動作には「Adobe Flash Player 12」以降が必要だ。
セットアップ
インストール作業は、基本的にウィザードに従って進めていくだけでよい。
もしシステムに「Adobe AIR」がインストールされていない場合は、「Adobe AIR」のセットアップが要求される。これは「BiND 7」に同梱されている各種ツールを動作させるために必要だ。ツールをインストールする際に「コマンドプロンプト」が表示されるが、これは触らないようにしよう。
続いて、「Adobe Photoshop」「Adobe Illustrator」のファイルを「BiND」で扱えるようにするために必要な画像処理ライブラリ「ImageMagick」のインストールを行う。「ImageMagick」のインストーラーは英語表記になっているが、基本的に［Next］ボタンを押していくだけでよい。
これで「BiND 7」本体のインストールは完了だ。OSの再起動が要求されるので、［はい］を押してOSを再起動しよう。
OSが再起動したら、デスクトップに作成されたアイコンから「BiND 7」を起動する。
すると、「BiND 7」のアップデートが通知される。デジタルステージのWebサイトを開き、アップデーターをダウンロードしてインストールしよう。執筆時現在の最新版はv7.02で、「SHiFT 2」などで見つかった不具合が修正されている。
ライセンスの認証
続いてライセンスの認証処理を行う。あらかじめデジタルステージのサイトで“デジタルステージID”を取得しておくと、認証処理がスムーズに行くようだ。
- DIGITALSTAGE | MyPage Service
- https://mypage.digitalstage.jp/
この“デジタルステージID”は、ソーシャルサービスと「BiND」を連携させる無償サービス「SYNC 5」や無償ショッピングカート機能「BiND Cart」を使う際にも必要なので、登録情報は大切に保管しておこう。
「BiND 7」を初めて起動するとライセンスの認証画面が現れるので、パッケージに同梱されている“製品登録カード”に記載されている24桁のシリアル番号を入力しよう。前述の通り、14日間無料で試用することも可能だ。
続いて使用許諾契約書を読んで問題なければ同意し、認証コードを入力する。認証コードは“MyPage Service”で取得可能。［認証コードを取得］ボタンを押すとブラウザーで“MyPage Service”へアクセスできる。あらかじめ“デジタルステージID”を取得しておくと、ここですんなり認証コードが取得できる。「BiND 7」は最大2台のPCで認証し、利用できる。たとえば、自宅と会社で利用したいといった需要にも対応。認証を解除し、新たに別のPCで認証し直すこともできる。
「BiND 7」によるページデザインの基礎
これで準備は完了。さっそくサイトを作成していこう。
「BiND 7」にはスタイリッシュなテンプレートが数多く用意されている。もし自分の用途に合致したテンプレートが用意されていれば、それを流用することで見栄えのよいサイトが簡単に作成できる。
しかし、200種類のテンプレートが用意されているとはいえ、目的やイメージとピッタリ合うものがあるとは限らないだろう。というわけで、今回はあえて“上級者向け”テンプレートを利用して、ゼロからサイトを作成してみることにする。「BiND 7」でのデザインの流れを把握する上でも有用なので、まずは空のテンプレートで“練習”してみることをお勧めする。
4つの“エリア”
「BiND 7」のページは、“ヘッダ”“ビルボード”“コンテンツ”“フッタ”という4つの“エリア”で構成されている。ページを作成したら［このページを編集する］ボタンを押し、編集モードへ移行しよう。それぞれのエリアが色分けして表示されるはずだ。
“ヘッダ”は、タイトルロゴやメニューなどを配置するエリアだ。各ページに共通する要素を配置するとよいだろう。
“ビルボード”は耳慣れない言葉かもしれないが、“広告掲示板”を意味する。ページで一番目立つ部分なので、何か訴求したいことがあればここに掲載しておくとよい。もちろん、何も置かないのもありだ。
“コンテンツ”は写真や記事など、そのページの目玉となるコンテンツを配置しておくエリア。メインコンテンツを配置する“メイン”のほか、後述の“レイアウト”の種類によっては、記事やリンクのリストといった補助的な項目を置いておく“サイド”といったサブエリアをもつ。
“フッタ”は“ヘッダ”と同じく各ページに共通する要素を配置するエリア。著作権表記などを挿入しておくのが一般的だ。
これら4つのエリアのレイアウトは、［レイアウト］ボタンを押すと現れるメニューで簡単に変更することが可能。メニューにはわかりやすいアイコンがついており、各エリアがどのような配置になるのかが一目でわかる。このようなリッチなユーザーインターフェイスが「BiND7」の特長の一つと言える。
“ブロック”の追加と編集
ページの構造がだいたい把握できたら、今度は“ブロック”を編集しよう。
エリアには最低1つのブロックが含まれており、増やしたり並び替えたりすることが可能。ブロックを選択し、右上のツールバーにある［編集］ボタンをクリックすると、ブロックエディターが起動する。
入門者のうちはこのブロックエディターはあまり使わない。代わりに、［ブロック選択］画面を開き、“スマートモード”で用意されているテキスト、メディア、ソーシャル、ナビゲーションといったパーツのテンプレートを利用することになる。“エディタモード”で自由に編集することも可能だが、まずは“スマートモード”で用意されているこれらのパーツテンプレートを組み合わせることから、少しずつ覚えていくとよいだろう。
「BiND 7」で利用できるパーツ
ここで、「BiND 7」で利用できるパーツのテンプレートを紹介しよう。これらを使いこなすだけでもかなり高機能でスタイリッシュなページがデザインできる。
アニメーション付きのスタイリッシュなナビゲーション
たとえば、他のページへの移動に使うナビゲーションをページへ追加することが可能だ。“ヘッダ”エリアあたりにブロックを追加し［編集］ボタンを押せば、［ブロック選択］画面が現れる。
［ブロック選択］画面の“NAVIGATION”欄を開くと、さまざまな種類のメニューがあるのがわかる。どれもマウスに追従してどこにフォーカスがあるのかわかりやすくアニメーションしたり、プルダウンメニューが滑らかに展開したりといったモダンなデザインになっている。スタイリッシュなものばかりで、どれを使うか迷ってしまうほどだ。
さらに、リンクの設定もすべてGUIで行える。項目を選択して、必要な項目を埋めていくだけでナビゲーションが完成するので、HTMLタグの知識は不要。メニューの並び替えもドラッグ＆ドロップで行える。
切り替えエフェクト付きのスライドショー「SHiFT」で写真を“魅せる”
次に、ページへスライドショー機能を追加してみよう。「BiND 7」には「SHiFT」と呼ばれる“jQuery”製の高機能なスライドショーパーツが付属しており、さまざまな切り替え効果をもったスライドショーが追加できる。好みのエリアにブロックを追加し、編集画面の“PHOTO”欄を開いて［SHiFT］を選択しよう。ブロックがスライドショーになる。画像の追加などの操作は、「SHiFT」専用のエディターツールで行える。
「SHiFT」では単に画像のスライドショーをみせるだけでなく、コメントを合わせて表示したり、クリックで別ページへジャンプするといったことも可能。最近カタログページなどでよく見かけるような、写真を大胆に使った印象深い商品説明ページの作成も簡単だ。最新版「SHiFT 2」では新しいエフェクトが多数追加されたほか、画像の切り替え間隔まできめ細かく調整できるようになるなどの改善が加えられている。
「SiGN」でスタイリッシュなロゴを加える
Webページのデザインに欠かせないのが、ロゴ画像だろう。画像編集に慣れていないとなかなか格好いいロゴが作れなくて悩むものだが、「BiND 7」には「SiGN」と呼ばれる本格的なロゴ作成ツールが付属しているので、この点も心配がない。
「SiGN」で作成するロゴの追加も、ブロックにパーツテンプレートを適用することで行う。［ブロック選択］画面の“PHOTO”欄で［SiGN］を選択しよう。
「SiGN」はレイヤーに対応しており、テキストや画像を移動・回転させて組み合わせながらロゴが作成できる。レイヤーの重なり順は、画面左下のアイコンをドラッグ＆ドロップして入れ替えることが可能。さまざまなテンプレートも用意されているので、それを改造したり参考にすると、絵心のない人でも割と格好いいロゴが作成できる。
ショッピングカート「BiND Cart」でショッピングサイトをお手軽構築
最後に、商品の販売を行うカート機能「BiND Cart」を追加してみよう。「BiND Cart」は、登録商品が5つまでなら無償で利用可能。各種クレジットカードや“PayPal”が使えるなど決済手段が豊富で、デジタルステージが提供するホスティング“WebLiFE*サーバー”を使っていないユーザーでも利用できるのがポイントだ。登録商品が5つというと少ない印象もあるが、商品は随時入れ替え可能なほか、それぞれサイズなどのオプションも設定できるので、これを活用すれば用途によっては十分だろう。
「BiND Cart」では一般の商品も販売可能だが、今回は最近追加されたばかりのデジタルコンテンツ販売機能を利用して、画像や音声を販売するページを作ってみよう。ちなみに、デジタルコンテンツとして販売できるのは以下の形式となっている。
- 音源ファイル（mp3、wav）
- 画像ファイル（jpg、gif、png）
- PDFファイル（pdf）
- 動画ファイル（mpeg、mpg、mp4、avi）
- アーカイブファイル（zip、msi、dmg、apk）
いずれもファイルサイズは1GBまでとなっている。
「BiND Cart」を利用するには、まずストアを開設する必要がある。「BiND 7」を認証する際に利用した“デジタルステージID”があれば、すぐに作成することが可能だ。
- 無料でできるBiNDのショッピングカート BiNDカート | digitalstage
- http://bindcart.com/
ストアを開設したら、商品をいくつか登録しておこう。
次に「BiND 7」でページにカート機能を追加する。カートを配置したい場所にブロックを作成し、［ブロック選択］画面の“SHOPPING CART”欄でカートを選択しよう。今回はボタンのみで構成されたシンプルなカートを選んでおく。
続いて、カートを「BiND Cart」に紐付ける。ボタンパーツの編集画面から「BiND Cart」ツールを起動し、カートで販売したい商品を選択しよう。「BiND Cart」ツールのログインには“デジタルステージID”ではなく、先ほど作成したストアのIDを入力することに注意したい。
紐づけが完了すると、ページから商品の購入が可能となる。ブラウザーでプレビューして試してみよう。
そのほかの注目機能：Webのトレンドに追随
そのほかにも、「BiND 7」にはさまざまな機能が備わっている。たとえば、最近はスマートフォンでサイトを閲覧するユーザーが多いが、「BiND 7」ではスマートフォン向けのページもテンプレートを用いて簡単に作成できる。
ただし、端末の種類を識別してページのデザインを自動的に切り替える“レスポンシブ”デザインなどの機能は搭載されていないようだ（「BiND 7」と簡単に連携できる“WebLiFE*サーバー”にはスマートフォン端末を識別して、自動でモバイル向けサイトを表示させる機能が付属している）。これは今後のバージョンに期待したい。
また、Twitter、Facebook、Ustreamなどのソーシャルサービスと「BiND」を連携させる無償サービス「SYNC 5」も魅力的だ。作成したサイトをソーシャルネットワーキングサービス（SNS）で紹介したり、ブロックのパーツとしてSNSを埋め込んだりできる。SNSとの連携は、Webサイトを運営していく上で欠かせない要素なので、支援があるのはありがたいところだ。
さらに、“Open Graph”へいち早く対応していることにも注目したい。“Open Graph”に対応したWebサイトでは、ページを共有する際にリンクだけでなくサムネイルやサイトの概要といった要素を盛り込むことができる。Facebookで共有する際に表示されるサイトのサムネイルなどをコントロールできるので、適切に設定しておけば大きな訴求効果が期待できる。
最後に
今回「BiND 7」を体験して感じたのは、ユーザーインターフェイスがリッチで、親切だということだ。入門者向けの“スマートモード”を使う限りでは、とくに難しく感じるところはない。サムネイルやプレビューが豊富なので、この操作を行うと次に何が起こるのかがイメージしやすいのもよい。「HTMLタグやCSSなど絶対に覚えたくないけれど、格好のいいサイトは作りたい」といったユーザーには是非おすすめしたい。
ソフトウェア情報
- 「BiND」Windows版
- 【著作権者】
- （株）デジタルステージ
- 【対応OS】
- Windows 7/8/8.1
- 【ソフト種別】
- 体験版
- 【バージョン】
- 7.02（14/04/17）