インタビュー
最先端のWebサイトをコーディングなしで手軽に制作！「LiVE for WebLiFE* 2」
～開発者に聞く、jQuery対応の“スペシャルサイト”制作用ソフトとは
（2013/10/7 06:00）
jQueryによるリッチWebコンテンツを手軽に作成できるWindows/Mac OS対応のソフトウェア「LiVE for WebLiFE* 2（以下、LiVE2）」が、9月19日にリリースされた。開発元の株式会社デジタルステージには、Webサイト制作ソフト「BiND for WebLiFE*（以下、BiND）」という製品があるが、多様なサイト制作に幅広く対応するBiNDに対して、「LiVE2」は“スペシャルサイト”を作るためのツールと位置付けられている。
企業にとって、低コストで高いマーケティング効果を得るためのWebサイト活用や、ソーシャル連携、スマートフォン・タブレット向けWebサイトの重要性が高まっている中、「LiVE2」はどういった役割を果たすのか。「LiVE2」の開発に携わった井上 真史氏と洪 泰和氏にお話を伺った。
Webのトレンドをつかんだ最先端のスペシャルサイトを作る
――はじめに、「LiVE2」はどういう狙いで開発されたのか、教えていただけますか。
井上氏：
「LiVE2」は、"スペシャルサイトを作れるソフトウェア"というコンセプトで開発しました。スペシャルサイトというと、逆に言えばスペシャルではないサイトとはどういうものか、ということになると思うのですが、たとえばYahoo!のトップページのように、両サイドにメニューがあって、中央にコンテンツエリアがある典型的な形と言えると思います。こうしたデザインは、HTML文書構造の影響を受けている部分が大きく、そういう意味で、HTML構造に引きずられた従来型のサイト、と言い換えることができるかもしれません。
それに対して"スペシャルサイト"というのは、何よりデザイン性を重視した、HTML5、CSS3、jQueryを用いた、Webブラウザー画面いっぱいで表現するダイナミックで表情豊かな動きのあるサイトのことです。今の時代はこうした見て楽しむWebが求められているだろうと考え、「LiVE2」の開発を進めてきました。
――デジタルステージには「BiND」というWeb制作ソフトがありますが、「LiVE2」という別製品として開発したのはなぜでしょうか。
井上氏：
「LiVE2」を作った理由の1つとしては、Webの進化がドッグイヤーで、半年前の仕様が使えなくなったり陳腐化するなど移り変わりが早い中、スタンダードなWeb制作ソフトである「BiND」の役割を超えていく可能性があると思ったからです。
「LiVE」という製品ラインは、Webの最先端のトレンドを切り取るものだと位置づけています。2013年の今は全画面でダイナミックに動くのがトレンドなのでこの形ですが、来年の秋はどう変わっているか分からない。今後のバージョンでは、来年なら来年の、その時点でのトレンドをつかんだ製品内容になっているはずです。フットワークの軽いラインと言えるでしょうか。
洪氏：
「BiND」との大きな違いは、画面全体でデザインをレイアウトするところですね。従来のWebサイトの構造は、たとえば1000ピクセルという横幅の中で縦に情報を積んでいく考え方だったと思うんですけど、「LiVE2」の場合は1つの画面をスライドと捉え、それを2つ、3つに増やしていくようなイメージになります。
今までだとページの端に余白があったわけですが、テレビのように1画面内にダイナミックにレイアウトして表現します。テキストがモーションしたりとか、背景に映像が入っていたりとか、そういう演出が画面全体で行われるので表現のインパクトが変わります。
これによって従来は、多くの情報をどう整理して見せるかということが大事だったんですが、「LiVE2」を使ったスペシャルサイトでは、デザインとしてどう見せるか、という見せ所から考え始めて作るようなソフトウェアになっていますから。
――ブログ的な情報ページは「BiND」で、キャンペーンページは「LiVE2」で、といったように、組み合わせてWeb制作することも可能ですか？
洪氏：
はい。むしろ組み合わせて使うことをオススメしています。BiNDとLiVE2ではできることが違いますから、それぞれの特長を活かして併用することで、伝えたい部分をより明確化できると思います。
ブログや情報集約型のWebサイトがすでにあっても、その中の情報をキャンペーンなどでピックアップしたいとき、「LiVE2」が得意な分野になります。たくさんの情報を載せるのではなく、本当に一部分、一商品、もしかしたら一機能でもいい。その1要素についてだけで魅力的なページが作れてしまうのが「LiVE2」の強みですね。
ワープロソフトが使えれば使えるレベルを目指したUI
――「LiVE2」のユーザー層としては、どのくらいのスキルを持つ方を想定しているのでしょうか。
井上氏：
普段ブログやSNSなどを使って情報発信をしている人が、サイトの必要性を感じた時に、デザインやHTMLの知識がなくても簡単に作れるような設計を目指しています。具体的には、写真を選んでアップロードでき、キーボードから任意の数字・文字を入力できること。これ以上はもうやりたくない、という人ですね。普段はPCをあまり触らない若者、学生の方にも向いています。
洪氏：
作りたいデザインのテイスト、レイアウト、用途に合わせた「スライドテンプレート」を組み合わせるだけでWebページが作れるようになっています。テンプレートにある写真やテキストを差し替えるだけでオリジナルのページとして成り立ってしまうくらいです。
「LiVE2」が簡単に作れる最大の目玉は、WYSIWYGエディターでドラッグ操作によってページをレイアウトしていける機能です。画像や動画、文章をここに置きたいと思ってドラッグするだけレイアウトできます。プログラムから考えて作らないと表現できなかった従来のWebから離れ、直感で決められて、納得いくまで繰り返しトライできるので、レイアウトにかかる工数は大幅に削減できるはずです。
コーダーがいなくてもデザイナー1人だけでWebサイトを作れるようにしているのが特徴ですね。アイデア作りやデザインにたっぷり時間をかけられるように、コーディングはあえてさせない、という作りにしています。もちろん、知識がある方向けにHTMLなどのソースコードを編集する手段も用意していますので、細かい表現を追求することも可能です。
――写真素材などもかなり多く用意されていますね。
洪氏：
写真とBGMは、音楽家でありフォトグラファーでもあるHIROSHI WATANABEさんにご提供いただきました。写真は80枚、BGMは32曲収録しています。全画面で見せる「LiVE2」では写真の力が重要になります。きちんとした写真を出しただけでコンテンツに説得力が増しますし、写真にちょっとテキストを入れるだけでも、ポスターみたいなおしゃれな雰囲気になると思います。
井上氏：
写真を入れるだけでコンテンツとして成立してしまうというのは、プロの現場でもそうなんです。いい写真が1枚あって、あとはタイトルと文章がバランス良く入っていれば、かなり引き締まって、プロの仕事に見える。きちんとした素材さえあれば、悩まずにデザインを成立させられるというのも、効率化といいますか、「LiVE2」というソフトウェアの目指しているところでもあります。一生懸命作業するところを減らして、楽しいところに時間をかける、ということをこれによって達成できているのかなと。
「いいね!」を押してもらうなどSNSの具体的成果を得られるテンプレートも
――「スライドテンプレート」などはどれくらいのパターンが用意されているのでしょうか。
井上氏：
スライドテンプレートは"トップ"や"アルバム"、"記事"など12種類のカテゴリーに分かれていて、合計で100種類以上あります。モーションエフェクトについては、テキストについては8種類、BGアニメーションは16種類用意しています。これらをパズルのように組み合わせていけば、Webサイトが出来上がるようになっています。組み合わせれば無限大に、好きなようにWebサイトを作れるはずです。
スライドテンプレートのカテゴリーには"ソーシャル"というのもあります。これは、ゴールリンクがあるようなページを作れるものです。タイムラインのような形で情報を小さい単位で見やすく重ねていって、最後に"お問い合わせはこちら"などのリンクを設置したり、Facebookの"いいね！"を押せるようにしたりという、成果を取るためのページですね。こういったページは見映えよく作るのが難しかったり、機能的に実装するのが大変だったりするのですが、「LiVE2」では非常に簡単に作れるようにしています。
――追加テンプレート集も販売されていますが、今後も増える予定はありますか？
井上氏：
そうですね。主にビジネス関連のテンプレート集など、企業向けの素材を充実させていきたいと考えています。
それと、どうにかしたいと我々が常々考えている既存コンテンツについて、最適化できるような素材を出していければとも思っています。Webサイトのデザインも業界によって様式が固まりつつあるんですよ。教育医療機関などのサイトでよく見られる不親切な設計や現状ありがちな問題を最適化できるようなテンプレートなどを作りたいですね。
Flashの代替えとなるjQueryを採用
――「LiVE2」ではjQueryを採用していますが、jQuery採用の経緯を教えてください。
洪氏：
デザイナーの間で、Flashの代替的な位置付けとして、jQueryがスタンダードなライブラリとして認識されつつある、というトレンドがあります。jQueryがよく使われるようになったのは、データが軽いというのもありますし、オープンソースで、かつライブラリ化されているので、専門家でなくても扱えてコストもかからないから。Flashを作る場合は、基本的に有償の開発環境が必要になりますが、jQueryはフリーで配布されているので、知識があれば使い始められます。
井上氏：
「LiVE2」はPC、スマートフォン、タブレットの3デバイス対応を謳っていて、それぞれの端末に合ったコンテンツをPCと別に用意しているので、実は100種類×3のスライドテンプレートがあることになるんです。Apple製品をはじめとするスマートフォンがFlash非対応になって、閲覧にプラグインがいらないというのもjQueryの主な採用理由となりますね。PCに代わって台頭してきたスマートフォンやタブレットでWebサイトを見られないというのはありえないですから。
PC、スマホ、タブレットの3デバイスに対応、Webフォントでより美しく
――3デバイス対応とのことですが、特にAndroid端末は画面解像度が機種によってさまざまで、対応が難しかったのでは？
井上氏：
解像度についてはiOS端末もそうですが、Android端末ではさらに細分化されているので、基準としては一番市場に出回っている機種で一番解像度の高いものを参考に、コンテンツが画面を飛び出さない、かつコンテンツが必要以上に小さくならない、ということに注意して実装しています。どのスマートフォンでもしっかり画面にフィットした形で見られることを目指しました。
また、3デバイス対応の同期をオフにすることで、PCはPCのデザイン、スマートフォンはスマートフォン専用のデザイン、という風に変えることもできます。デバイスそれぞれでWebサイトの用途が全然違いますので、持ち歩いて使う小さな端末に最適化したデザインにしたい場合は、デザインを間引いたり、スマートフォン特有のサービスや機能を含めたりなど、PCと別のページ構成にすることも可能です。
――「BiND」と同じように日本語Webフォントサービスが利用できますが、「BiND」と「LiVE2」のWebフォント機能で違いはありますか。
井上氏：
仕組みとしては「BiND」と同じものになっています。「BiND」の方でプレミアムコースの300書体をすでに契約されている方であれば、「LiVE2」でもそのまま使えます。
洪氏：
ちなみにWebフォントは「LiVE2」と親和性がすごく高いんです。大きな画面にタイトルを大きく入れて、それに負けない大きさでリードを入れると、1つの美しい絵のように成立させられます。「LiVE2」で、Webフォントの活用の幅がさらに広がるんじゃないかなと思います。
履歴が管理できる画像編集ソフト「SiGN Pro」も付属
――同様に「Sign Pro」というソフトも付属しますね。
井上氏：
「SiGN Pro」は「BiND」と「LiVE2」に共通で付属している無料の画像編集ソフトで、Webの画像素材を作成するうえで必要な機能を無料で提供しよう、というコンセプトで開発したものです。
洪氏：
他の画像編集ソフトで作った画像の元素材って、制作過程でどこかに行ってしまうことが多いんですよね（笑）。「SiGN Pro」なら編集データごと管理していて、テキストを打ち直したり、色を変えたり、というのがすぐに行える。ひとつのWeb制作ツールの中で解決できるのは地味ですけどすごく効率的になってありがたいんじゃないかと思います。
わずかな情報しかないページの表現手段にも
――スペシャルサイトを作る以外に、「LiVE2」は他にどういった使い方が考えられるでしょうか。
洪氏：
実はそんなに掲載する情報はないけれどページだけは作りたいといったニーズも出てきています。数ページはおろか、1ページを埋めるだけの情報量もないけれど、ページは作らないといけない、という状況ってあると思うんです。しかし、少ない情報で従来のWebサイトの作り方をしてしまうと、間延び感やスカスカ感が目立ってあまりいい感じにならないことが多い。
そんな時に、「LiVE2」が表現手段の1つになると思うんです。情報発信の際に、Facebookやブログをやってたらなんでもそうじゃなくて、いろいろな方法論がたくさんあるんだということを皆さんに気づいてほしいし、我々も訴えていかなければいけないですね。
――スマートフォンやタブレット上でPCと同じようにWeb編集可能にする予定はありますか？
井上氏：
今後はありえますね。特にスマートフォンの方は1日ずっと身につけているような端末ですから、編集に使いたいというニーズは大いにあるでしょう。スマートフォンやタブレットからの編集ができるようになるようにしたいですね。
――最後にユーザーと読者にメッセージをいただけますか。
井上氏：
「LiVE2」はWebの今のトレンドを切り取るソフトです。個人的なテーマとしては、"もっと自由にわがままに、Webサイト作りを楽しんでほしい"というのがあります。そのために、テンプレートをパーツ単位で自由に組み合わせて作れるようにしているんですね。必要なものは全て揃えたつもりです。悩んで作って、とりあえず完成させることを楽しんでもらえればと思っています。今後も「LiVE」は、その時のWebのトレンドを切り取ったものになると思うのでご期待ください。
洪氏：
今までは多くの情報を集約させた形でページを作っていたのが、実はその中から1要素を切り取ってページを作ってみるだけで、すごく魅力的なものができる可能性を秘めているんじゃないかなと思っています。スペシャルサイトというか、1つの情報を切り出して魅力的に見せるといったことを、フットワークを軽く始めていただければなと考えています。
――本日はありがとうございました。
