画像最適化ツール「OPTPiX imésta」や、2Dスプライトアニメーションデータ作成ツール「OPTPiX SpriteStudio」などで知られるウェブテクノロジから、新ツール「CrossPSD」が発表されます。PhotoshopのPSDファイルをHybridcast向けのHTML5データを変換するもので、コンテンツ制作・ 配信ソリューション展（CONTES）でデモが予定されているとのこと。ツールの概要や開発の狙いについて、開発責任者の西田雅紀氏に伺いました。
―――今日はよろしくお願いします。はじめに西田さんの経歴について簡単に教えてください。
西田：はい、もともと前職でスマートフォンやフィーチャーフォンのファームウェアを開発していました。中でもホーム画面やロック画面、通話中の画面など、UIまわりの部分を担当していました。ただ、けっこう大変なことが多かったんです。
―――というと、どんなところですか？
西田：これはゲームでも同じだと思いますが、UIデザインではデザイナーさんがPhotoshopなどで画面をデザインして、それをプログラマーがプログラムに組み込んでいきます。ところがたいていはファイルをただ送ってくるだけで「あとは良い感じに実装して」と言われるんですね。なかには一つずつボタンやアイコンなどの座標を指定してくれる方もいらっしゃいましたが、ほとんどの場合、プログラマーが画像を一つずつ切り出したり、座標を数えたりしながら、手でプログラムに打ち込んでいました。これが結構大変だったんですよ。
―――なるほど、目に浮かぶようです。
西田：デザイナーさんとしても、自分たちは画面をデザインすることが仕事だから、プログラムの領域には踏み込みたくないという声が多くて。結果的にプログラマーとデザイナーの間で大きな溝を感じていました。これを何とかしたくて、PhotoshopのPSDデータをUI向けに簡単にコンバートできるようなツールの構想を温めていました。そんなときにHybridcast向けツールの話をいただいたんです。
―――Hybridcastについて、簡単に説明してもらえますか？
西田：HybridcastはNHKさんが提唱されている、放送と通信を連携させた新しいテレビサービスです。2013年9月からサービスが始まっていて、今のデータ放送の拡張版と言えるかもしれません。現在もデジタルテレビのリモコンで「dボタン」を押すと、ニュース番組やスポーツ番組などで、画面が小さくなって周りにデータ放送の情報が表示されますよね。
―――ああ、確かに。でも内容が乏しくて、あまり使っていません（笑）。
西田：そうかもしれないですね。実際、現行のデータ放送はデータを電波に乗せて送るため、帯域幅の問題からデータ容量に限界がありました。これがHybridcastでは、テレビに接続されたインターネット回線からHTML5のデータを受信するため、ちょうど画面にウェブページの映像をオーバラップさせたようなサービスが提供できます。Hybridcast対応テレビは家電メーカー各社から発売中で、対応機種が増えているところです。NHKに続いて民放でも対応放送が始まりつつあります。
―――具体的にどんなことができるんですか？
西田：HTML5のホームページでできることは、たいていできます。SNSと連動させて、番組やCMの視聴体験を共有したり、eコマースサイトと連動させたり。スマホアプリと連動させて、スマホをリモコン代わりにしたり、セカンドスクリーンにしたりすることもできます。料理番組を見ながら、レシピや作り方をタブレットで確認したり、といった用途にも使えますね。
―――アプリはどういった形で配信されるのですか？
西田：Android向けのアプリが先行して配信されています。今後は放送局や家電メーカー、番組単位などで、さまざまなアプリがリリースされていくと伺っています。前回の冬期オリンピックではNHKさんが「巻き戻し再生」のサービスも行われていました。
―――なるほど、電波ではなく、固定インターネットを使用すれば用途も広がりますね。ボタンを押すとアニメーションしたり、エフェクトが表示されたりといったこともできますか？
西田：はい、HTML5のサイトでできることは、たいていできます。もっとも今は対応テレビのCPU性能から、少し表示がもっさりしてしまうのですが、ここは今後に期待したいですね。
―――話を戻すと、このHybridcast向けのHTML5データをPhotoshopのPSDデータから簡単にコンバートできるのが・・・
西田：はい、「CrossPSD」となります。使い方は簡単で、はじめにツールを立ち上げて、ファイルメニューからPSDファイルを読み込みます。すると自動的に変換がかかって、HTML5のファイル群が作成されます。PSDファイルのレイヤー構造などを読み取って、HTMLのタグやCSSに変換する仕組みです。HybridcastコンテンツはHTML5がベースとなっているので、ブラウザでコンテンツの表示やタグ情報の確認ができます。
―――ボタンが押された時の検知や、アニメーションファイルなどはどのように組み込むのですか？
西田：現状はタグを見ながら一つずつ手で組み込んでいくことになります。将来的にはツール上で完結できるように、総合オーサリングツールとして成長させたいですね。とりあえず現状では、もっとも基本となる「PSDファイルのコンバート」機能だけに絞り込んでリリースすることになりました。ゲーム業界やウェブ業界など、さまざまな業界のニーズを取り込んで、痒いところに手が届くツールにまで育てていきたいです。
―――概要はわかりましたが、このツールならではの技術的な強みは何でしょうか？
西田：一つにはPSDファイルの解析技術を自社で持っていることですね。この手のツールやエンジンというのは、あまり存在しないんです。次に現状ではまだ実装されていませんが、JPGやPNGファイルなどの自動変換・画像最適化機能です。これは弊社が長年「OPTPiX imésta」で培ったノウハウを活用できます。またオーサリングツールとしてですが、こちらも「OPTPiX SpriteStudio」のアニメーション技術が活かせると思っています。
―――なるほど、社内技術で付加価値を高めていくわけですね。
西田：そうですね。将来的には「CrossPSD」を元に様々なご要望をお伺いしながら、UI 作成のための総合オーサリングツールをリリースし、弊社のラインナップをうまく連携させて、クリエイターの方々の作業を幅広くサポートしたいですね。
―――元となるPSDデータの作り方について、何かコツはありますか？
西田：はい、そこに依存してしまう傾向はあります。わかりやすい例で言えば、レイヤー名を日本語ではなく、アルファベットでつけるだとか。それから画面上のテキスト表示は、用途によってテキストと画像ファイルを使い分けてもらうだとか。時刻のように刻々と変わるものはテキストの方がいいですが、ボタンの説明文などは画像ファイルの方がキレイに出力できますしね。その際もPNGファイルがいいのか、JPGファイルがいいのか、用途によって使い分けてもらえるといいかなと、フォントについてもHTML5化したときにキレイに見えるものと、そうでないものがあります。
―――さまざまなノウハウがあるのですね。
西田：これらはチュートリアルとして、随時まとめていく予定です。
―――細かいところですが、このデモでは元となった画像のサイズと、コンバート後とのHTMLファイルの容量は、どれくらいになっていますか？
西田：50レイヤーくらいで構成された1980×1080のPSDファイルをPhotoshopで作って、それをコンバートしています。画像ファイルなどの最適化が行われていないので、現行では2.5MB程度になっていますが、まだまだファイルサイズを圧縮することはできると思います。
―――今後のアップデートについて構想はありますか？
西田：まずはCONTESの出展を皮切りに、さまざまな業界の方にお見せして、ニーズを集めていきたいと思っています。その上で、さまざまな形式の出力コンバータを用意していきたいなと思っています。HTML5以外にも、iPhoneやAndroid向けのUIファイルを出力するSDKなどが考えられるでしょう。またUnityやCocos2d-x、Unreal Engineといったゲームエンジンへの出力対応も進めていく構想はあります。
―――なるほど、PhotoshopでUIデザインを行って、それがすぐにネイティブアプリ向けのファイルとして出力できれば、たいへん便利ですよね。いわゆる「ガワネイティブ」的なソーシャルゲームの開発には便利かもしれません。
西田：そうですね。アイディア次第でいろいろな展開ができると思います。さまざまな業界の方に使ってもらって、育てていきたいですね。
―――ありがとうございました。
※画像はすべてPNG8（256色）で制作しています。
