インタビュー

レスポンシブ対応など、大幅改修を行ったウェブ制作ソフト「BiND for WebLiFE* 8」

新たなフォーム作成サービスも開始した目的を担当者に聞く

BiND for WebLiFE* 8

 9月17日に発売された株式会社デジタルステージのウェブ制作ソフト「BiND for WebLiFE* 8(以下、BiND 8)」。デバイスの画面サイズなどに応じて適切なコンテンツデザインに切り替える“レスポンシブウェブデザイン”に対応したのがポイントとなるが、それだけでなく、中身のかなりの部分に大きく手を入れているという。

 また、これまでのBiNDシリーズとは別に、ウェブフォーム作成サービス「Smooth Contact」も新たに開始する。このSmooth Contactとは一体どういうものなのだろうか。BiND 8の変更内容とあわせ、開発を担当した四家和彦氏とデザイナーの洪泰和氏に話を伺った。

内部処理・構成も一新。自由度高くレスポンシブ対応できるBiND 8

開発ディレクションを担当した四家和彦氏

――以前のバージョンからの違いも含めて、新しいBiND 8の特徴を簡単に教えていただけますか。

四家氏:
 BiND 8ではレスポンシブウェブデザインに対応したのが大きいのですが、レスポンシブ対応というだけだと若干“今さら”な感じがあるかもしれません。実は、BiNDシリーズは2007年からずっと中身の仕組みを変えてこなかったところがあり、今回はそれを根本から刷新したバージョンにしています。処理スピード、HTML構造など、すべて生まれ変わっています。UIや使い勝手も全面的に変わっているので、実際にお使いいただければ、だいぶ違いが感じられるのではないかと思います。

――このタイミングで大幅に刷新した理由は?

四家氏:
 内部的なものとユーザーの要望の2つがあります。レスポンシブ対応になったことで、内部的な画像の持ち方など、従来の課題をクリアにして作り変えることができるタイミングでもありました。それと、定期的にウェブコンポーザー白書というユーザーアンケートを採っているのですが、そこで多く挙がったレスポンシブウェブを中心に対応したということになります。

――これまでのBiNDユーザーが新しいBiND 8に乗り換えた場合、今までのサイトはレスポンシブになるのでしょうか。

四家氏:
 BiND 7で作ったサイトであれば、比較的スムーズにレスポンシブ形式のウェブサイトにリニューアルが可能になっています。

洪氏:
 BiND 6からの場合は、仕組みが大きく変わってしまいますから、どうしても元々のデザインに関する情報を引き継げないところがあり、ズレが発生することがあります。新たに追加した「Dress」というデザイン機能を使ってカバーするなど、対策は必要になります。

――デザイン、UIも変わっているようですが、変更のポイントとなるところは?

デザイン、UI設計などを手がけた洪泰和氏

洪氏:
 今回開発に取り組む前に、いったん「理想型」を出してみました。デザイナーで集まって、どういうものがBiNDの使い勝手の向上に当たってふさわしいか、いったんフラットに意見を出し合ってみました。BiNDとは別物になってしまうと、従来のユーザーが使い勝手で迷ってしまうので、そこを試行錯誤しました。

 これまで機能を継ぎ足し、UI設計のところにぎゅうぎゅうで入っていた状態になっていたので、機能ごとにすっきりさせて整理をし、カテゴライズして配置し直したような作り方にしています。自然な流れの操作の中で設定できるように意識しました。

 これまでは立体的な装飾のUIにしていたのですが、今回は白ベースで明るいトーンの、フラットデザインに寄せました。ウェブサイトが主役になれるように控えめかつ機能的なUIデザインを心がけています。あとは今後の発展性も加味して“増築”しやすいように、という設計にもしています。

こちらが新しいBiND 8のフラットなインターフェイス
BiND 7のインターフェイス

――操作にかかわるUI面では具体的にはどんなところが変更点として分かりやすいでしょうか。

洪氏:
 これまでは中央に編集画面があって、その周囲を囲うようにボタンを配置していました。しかしこれでは上へ行ったり下へ行ったりとマウスカーソルの無駄な動きが発生するので、BiND 8では全体的に上に集中させる形でまとめています。

 また、従来もスマートフォン向け専用サイトを作ることはできましたが、今回はPCとスマートフォンの表示をスムーズに切り替えられるようにして、レスポンシブウェブならではの作業効率の向上をさらに目指しました。

各種ボタンは画面上部に集められた
スライダー操作でカラムの表示割合を設定できる

――一般的なレスポンシブ対応のウェブ制作ツールは、あまり自由度が高くない印象がありますが。

四家氏:
 レスポンシブウェブデザインの場合、ワンソースなので、PC向けコンテンツを作ったら、スマートフォン向けはソフトにレイアウトをお任せする、というものが多いと思います。でもBiNDは、スマートフォンだったらどう表示させたいか、というカスタマイズが細部に渡ってできるようになっています。このカスタマイズ機能は当初は予定がなかったのですが、なんとか方法を見つけて実現しました。デザイン、背景色も変えられるので、やろうと思えばスマートフォンとPCとで全然違うデザインにも仕上げられます。

PC向けとスマートフォン向けとでデザインを変えられる

――タブレット向けのコンテンツについては。

四家氏:
 タブレットではPC向けのコンテンツがそのまま表示されるようになっています。開発当初はタブレット用のカスタマイズ機能も追加しようかと思っていたのですが、ユーザーにとっては使いこなすのが難しい面もあります。

 実は別のソフトで、PC、タブレット、スマートフォンの3パターンを別個に作れるようにしたのですが、レイアウトの微調整も3つ必要になるので、手間、使い勝手の面でデメリットの方が大きくなってしまったので、今回は見送りました。

「Dress」で誰でもデザイナー並みのデザインセンスを発揮できる

――新たに加わった「Dress」という機能について教えてください。

四家氏:
 簡単に言うと、「Dress」は配色をがらっと変えるための機能です。全体の文字色、背景色などのいろいろな配色のセットを計18種類あるパターンから選択したり、各箇所の色をカラーパレットから選択して調整できます。背景はグラデーションにすることも可能で、書体、フォントサイズ、余白なども細かく設定できる上に、これらの情報を保存しておいて、後で別のウェブサイトを作る時に、その設定を選択するだけで一気に反映できるようにもなっています。PCとスマートフォン、両方を一度に変えられますが、それぞれ別に調整することも可能です。

 ユーザーがテンプレートからカスタマイズして使いたい時は、その人のスキル次第というところがありました。自由にカスタマイズができるゆえ、サイト全体として見た時にデザイン面で統制が取れなくなってしまうという課題がありました。

 そのデザインルールを作る、というところを仕組み化したのがDressになります。ウェブデザイナーがウェブをデザインする際に行う工程をDressであらかじめ設定しておき、あとはユーザーがコンテンツを入れていけば、統制の取れた、クオリティの高いウェブデザインにカスタマイズできる、というものです。

Dressによる配色設定の画面

――BiNDは、ローカルに対応フォントがなくても、作り手が意図した書体できれいに文字表示できるウェブフォントにも対応しているのが特徴ですね。

四家氏:
 今回からGoogle Web Fontsにも対応したので、ウェブフォントの数は合計すると700種類以上に増えていますし、フリーの日本語フォントにも対応しました。今までウェブフォントを使用するには弊社のサーバー契約が前提になっていましたが、今回から搭載されたウェブフォントについてはサーバー環境を問わず使うことができます。

さらに多くのウェブフォントに対応

洪氏:
 ウェブフォントのおかげで、今まで画像化していた文字要素の部分がほとんど要らなくなりました。そういう意味では、ウェブの作り方自体が相当変わってきたなという印象があります。今回搭載しているテンプレートでも、画像で文字を作るようなことはほぼなくなっています。SEOの面でも(テキスト化されているため検索に引っかかりやすいという)メリットがあると思います。

――他にはどんな変更点があるでしょうか。

四家氏:
 埋め込み地図にGoogle マップのAPIである「Styled Map」を使えるようにして、全体のカラーリングや建物などの図形の配色などを自由に設定できるGUIツールを作りました。プリセットとしてもいくつか配色パターンを用意してあって、ウェブサイトのデザインに合った配色に一発で変更できます。

GoogleのStyled Mapに対応し、GUI上でカスタマイズ可能に

BiNDのアドバンテージとは?

――BiNDシリーズには、今回のパッケージソフトのほかに、クラウドサービスの「BiNDクラウド」もあります。それぞれの製品は今後どうなっていくのでしょうか。

四家氏:
 作成したサイトのエクスポート/インポート機能を、BiND 8とBiNDクラウドの両方に付けて、そこで相互にデータのやりとりができるようになります。我々はクラウドとデスクトップソフトの両方を持っているのがアドバンテージなので、そこの両方の良い部分をうまく両立させたサービスを提供できれば、他にはない唯一のツールになれるだろうとも考えています。

――ウェブ制作ツールには無料の他社ツールもたくさんある中で、BiNDの強みとは?

四家氏:
 BiNDが目指しているのはウェブのデザインツールです。一方、無料のブログサービスなどは自分でデザインを細かく選べるわけではありませんし、「WIX」のようなデザインに凝れる無料のウェブサービスもありますが、WIXはある意味で自由すぎるためレイアウトが崩れることも多々あります。その点、BiNDはブロックを積み上げていく仕組みのため、デザインが崩れにくい設計になっているのも特徴です。

 また、BiNDは、作り込むほどオリジナリティが出てくるウェブサイトになる、と言えると思っています。デザインにこだわって自分のコンテンツを発信していきたい層は確実にあり、その層に向けたツールとして、BiNDはしっかり特化できているのかなとも思います。

新しいフォーム作成サービス「Smooth Contact」

――BiNDとは別に新たなフォーム作成サービスも開始すると伺いました。

四家氏:
 「Smooth Contact」は、9つのテンプレートから、デザイン性の高いフォームが作れます。フォームの枠、チェックボックスの配色などがテンプレートごとに違っていて、ウェブサイトのテイストに合わせたフォームデザインを選択可能です。フリーコースで無料で作れるほか、BiND 8のプロフェッショナル版には、Smooth Contactの有料プロコースである1年間のライセンスも付いています。

テンプレートから選べるフォームデザインの例

――BiNDではなく、新しく「Smooth」という名前で始めたのはなぜでしょう?

四家氏:
 今まで私たちのサービスの主軸はBiNDだったわけですが、ウェブサイトを作るだけがネット活用の接点ではありません。そこで、BiNDからいったん離れて、拡張的なサービスを今後手がけていきたいと思ったからです。BiNDユーザー以外でもSmooth Contactだけを使えるようになります。スタイリッシュで、入力したくなるような、いい感じのフォームサービスに仕上がっています。

――フォームといっても、単純なお問い合わせフォームだけでなく、待ち合わせやスケジュール調整のためのフォームサービスなど、機能特化したサービスは他にもあると思います。そういった分野もカバーしていく予定ですか?

四家氏:
 ウェブマーケティングにもつながるアンケート集計などは当然やりたいですね。

いずれは更新性のあるブログやニュースサイトにも使えるように!?

――最後にBiND 8のおすすめや、今後の計画などがあれば。

洪氏:
 BiND 8では、レスポンシブ対応だけでなく、画面全体を大きく使うためのデザインの仕組みも搭載されていて、よりダイナミックな表現ができるようになりました。デザインする上ではとても面白いツールになったと思います。

四家氏:
 (PC表示とスマートフォン表示が切り替わる)ブレイクポイントも気にしないで作れるようになっているので、レスポンシブウェブデザイン対応のウェブサイト制作ツールとしては、だいぶ使いやすいのではないかと思います。

 将来的な思いとしては、ブログツール的な使い方も簡単にできるようにして、スマートフォンから更新できるようにするなど、より使いやすいツールにしていきたい。デザインだけにとどまらず、更新性のあるカジュアルな方向にも使えるようにと考えています。

――本日はありがとうございました。

(協力:デジタルステージ)

日沼 諭史