Adobe ケーススタディー

2008年1月設立のワンパクは、サーバサイドと連携したFlashサイトや、コミュニケーションを促進するユーザインターフェイスデザインなどを得意としており、リクルートの「FORM B」のようなゲーム要素の強い実験的なプロジェクトから、「マネックスグループ」のようなブランディングの構築をサポートするコーポレートサイトまで幅広く制作しています。

デバイスやハードウェアとの連携にも力を入れており、2009年1月5日から28日まで公開されていた自社の年賀サイト「ARE YOU HOT?」は、ピタゴラスイッチのように実際に自分の玉が転がり、リアルなガラガラ抽選機で福引ができ、その様子をライブで見られるとあって、抽選へ参加するために20〜30名の方が並び、1日最大約400名が利用するほどの人気を博しました。フィジカルコンピューティングツールキット「Gainer」を用い、仕組みはすべて手作り。完成までに1ヵ月ほどを要したそうです。

また、Eye-Fiを使ってデジタルカメラの写真取り込み、タブレットPCで落書きして公開できるアプリケーション「PhotoGaki」も開発。写真の取り込みには無線LAN内蔵のSD型メモリカード「Eye-Fi」と、写真共有サイト「Flickr」が使われており、落書きした写真が保存されるとプロジェクタを通じてリアルタイムにスクリーンに投影されるため、参加者同士のコミュニケーションが求められるイベント会場を盛り上げるツールとして各所から声がかかっています。

――「ワンパク」というと、ユニークなFlashコンテンツの制作が中心というイメージがありました(笑)

株式会社ワンパク代表取締役
阿部淳也氏

阿部氏
よく、「ワンパクにお願いするんだったら油の多い鉄板焼きな感じですよね」みたいなことを言われたり、Flashバリバリのサイトというイメージがあるようですが、表に出る事例がたまたま個性的なだけで、実際は偏りなく制作しています(笑)　我々は自分たちが何かをやりたいかというよりも、お客さまがかかえている問題を解決できる、きちんとコミュニケーションをデザインしていくソリューションを提供したいと心がけています。また、リアルな場所でコミュニケーションを生むツールを作りたいという思いもあるので、Web の世界で閉じないものというのにチャレンジしています。既にこれまで紙メディアをメインでやってきた業界の方やロボット業界の方々とコラボレーションした共同プロジェクトの始まっており、今年中にはアウトプットしていく予定です。

「マネックスグループ」のコーポレートサイト。ブランドの整理から、ユーザニーズ、ビジネスニーズからのコンテンツ定義、情報設計、開発まで全てを行った。

消去法というユニークな切り口でアルバイト探しができる、実験的なインターフェイスの「Form B」

2009年の年賀サイト「Are You Hot?」

「Gainer」が使われている「Are You Hot?」用のシステム。期間中はひっきりなしに福引きの玉が転がり続けていたという

Eye-Fiと連動した写真に落書きができるイベント用アプリケーション「PHOTOGAKI」

CS4は「出たから買った！」

ワンパクでは基本的には案件毎にチームを編成します。一度チームが決まると、人が増えることはあっても、途中でガラリと変わることはありません。阿部氏の言葉を借りれば、CS4は「出たから買った」そうですが、その機能がワークスタイルを細かいところでサポートしているようです。

――まずはみなさんが担当されている業務と、よくお使いになるアプリケーションを教えてください。

中川氏
僕はディレクターですが、コーディングを担当するケースもあるのでDreamweaverをよく使いますね。

高橋氏
僕はアートディレクターですが、実際にはデザインを起こしたり、Flashの制作を行ったり、ときにはコーディングもするなど多岐にわたって制作に関わっています。主に使うソフトは、Photoshop、Fireworks、Flash、Dreamweaverがメインになります。

野村氏
テクニカルディレクターという立場ですが、今は主にFlashのエンジニアとして実際にコーディングにも携わっています。また、バックエンドの設計等、実装にも関わっているほかにもR&Dのリーダー的な立場でもありますので、新しいデバイスや技術を扱うことも多いです。

杉山氏
メイン業務がマークアップなのでDreamweaverを使うことが多いのですが、デザインする機会も増えてきているので、PhotoshopやFireworksも使っています。

ディレクターの
中川博志氏

アートディレクターの
高橋篤史氏

テクニカルディレクターの野村政行氏

デザイナーの
杉山由起子氏

Fireworks CS4は、Photoshopとの連携や強化されたガイド機能が魅力

――では実際の作業でCS4がどのような形で関わっているか、または役に立っているかをご紹介ください。

阿部氏
ケースバイケースではありますが、最近は要件をつめる段階で、Fireworksを使ってワイヤーフレームを描いたりしますね。一昔前だと全部Microsoft Office PowerPointで作っていましたが直すの大変で。CS4だと台割りというか、ある程度パーツ単位で作っていって、その組み合わせで作れるんです。1個変えれば全部変わるんでラクチンなんですよ(笑)

高橋氏
そうですよね。Fireworksは「スマートガイド」や「整列」の機能が強化されるなど、結構レイアウトに関して強化された感じがします。CS3ではフォントを打ち込むときに結構重くなると感じてたんですが、CS4になってテキスト入力がスムーズになるなど改善されてると感じます。ページ機能もありますし、今後はワイヤーフレームを作るという段階から使用するケースも増えるんじゃないかなと思っています。

阿部氏
ページ機能はCS3からありましたが、CS4になってますます便利になってきたかなという感じです。

高橋氏
Fireworksは、ガイドとガイドの間のピクセル数が結構簡単に見えるようになった点も魅力ですね。あらかじめガイドをひいておけば、ピクセル数を知りたい箇所にカーソルを移動してSHIFTキーを押すだけで何ピクセル空いているのかがすぐに分かる。これはすごく助かります。以前はオブジェクト間のサイズを調べるのは手間がかかる事もあったんですが、Fireworks CS4ならコーダーの方にPNGでデータファイルを渡すとき、デザイナーがガイドをきっちり引いておけば、コーダーがPNGデータを開いた時にパッとDIVのサイズを決められるわけです。今後はそういう使い方ができていくんじゃないかなと思いました。

杉山氏
実は私は高橋に教えてもらったんですが、聞いた瞬間「そんな機能があるのか！」と感動しました。今までは余白のサイズを調べるのに、毎回四角形を描いて数値を見ていたので……(苦笑)

――アプリケーション間でデータをやりとりする際、便利になったと思うことはありましたか。

高橋氏
FireworksでPhotoshopのデータを読み込んだときに、以前はテキストレイアウトが壊れてしまうことが多かったんですが、今回のCS4になって全く変わらないまま読み込めました。さらにPhotoshopのスライスにも対応している。そういう部分で、Fireworksで作業する方と、Photoshopで作業する方がいる環境では大きな利点になるんじゃないかなと思います。

オブジェクトの配置をアシストする「スマートガイド」

ガイド間の距離が簡単にわかるようになった

Dreamweaver CS4の「関連ファイル」は即戦力

――Dreamweaver CS4でよかったと思う点を教えてください。

杉山氏
コーディングのときにすでに手放せなくなっているのが新機能の「関連ファイル」と「コードナビゲータ」です。「関連ファイル」はCSSファイルなど読み込んでいるファイルを教えてくれるので、いちいち追わなくても直接アクセスして閲覧・修正できるようになりました。もちろんソースを見れば分かるんですが、フォルダを開いたりファイルを探すという手間が省けました。それぞれは些細な時間かもしれませんが、積み重なった時間を考えると侮れないと思います。「コードナビゲータ」はデザインビュー上でどんなスタイルが適用されているかわかるし、修正したい箇所に直行できる。CSSファイルの該当箇所まで一気に飛んでくれるんで大変便利です。

今回からレイアウトも自由に変えられるようになりました。私の場合「コードビュー」での作業が中心で、「デザインビュー」の使用頻度はあまりないのですが、サイトのページの状態によっては、コードビューとデザインビューを上下だけでなく左右にも展開できるので助かります。

中川氏
「関連ファイル」はインポートしてるCSSも読めるじゃないですか。とりあえずHTML開いて「関連ファイル」を見るだけで読み込まれているCSSが分かっちゃうというのはいいですよね。

阿部氏
プロジェクトの進行中に人的リソースがどうしても足りなくなって、別の人に途中から入ってもらうことがあります。設計から関わっていればどのCSSにどのクラス書いてあるか理解できますが、途中から加わると状況の把握に苦労しますよね。でも聞くのもなんだし、自分で追うのも大変。それが「関連ファイル」のおかげで直感的にパッとわかるわけだからうれしいですよ。

――「関連ファイル」でこれまでのイライラはどれくらい軽減されたでしょうか(笑)

杉山氏
3割は減ったかもしれません(笑)　小さな時間短縮の積み重ねで、総合的にはスピードアップにつながっていると思います。

Dreamweaver CS4の新機能「関連ファイル」

上段は左にデザインビュー、右にコードビューを表示。下段の例は左右にコードビューを展開している

「Subversion」への対応に大きな可能性を感じる

中川氏
私がDreamweaverで一番よく使うのは「サイトの管理」なんですが、「Subversion」への対応が気になっています。昔、一人で全てを担当することもありましたが、チームで作業すると作業がバッティングしたり、ファイルのバージョンが戻ってしまうというトラブルが発生してきます。そのようなリスクが減らせるのがSubversion対応なのかなと。

――実際にご利用になっていかがですか。

中川氏
今テストを進めている段階です。すぐには使えないかもしれませんが、今後のプロジェクトに非常に活きてくるような気がしてます。

阿部氏
もともと弊社はソース管理で「Subversion」を使ってるんです。大規模な会社ではないですが、どこかで世代帰りが1つおきただけでも、切迫した状況の中のプロジェクトでは結構なインパクトがあるんですよ。何も管理しない場合、調査や復旧にかかる時間は大きなロスにつながります。ですからバージョン管理は非常に大事。ただ、我々はMacユーザが多く、Macで使える「Subversion」のクライアントツールは限られていて英語版だったりします。英語ではオペレーション上不便なこともあるので、Dreamweaver CS4の日本語版なら楽だろうと期待しているんです。

野村氏
我々はグラフィカルなパーツもきちんと管理できないとまずい立場にありますので、同じバージョン管理システムでも「CVS」（Concurrent Versions System）ではとても間に合わない。一方で「Subversion」は、バイナリデータが扱えるという利点がありますから、「Subversion」でなければいけないという理由がありました。Dreamweaver CS4が「Subversion」対応になってよかったと思います。今後の方向性としては、サイトの管理をDreamweaverに一任していくという可能性を探っています。

Flash CS4は可能性を広げる素材の宝庫

――御社はFlashコンテンツの実績も豊富なわけですが、Flash CS4ではどんなところが気になっていますか。

高橋氏
アニメーションでは「ボーンツール」。とうとうきたなと思いました(笑)

野村氏
CS4になってモーションの制作機能が強化されたのですが、デザイナーが発想を広げるのに役立ちそうですね。静止画で検討するのとモーションがついた状態で検討するのとでは全然インパクトが違います。ですからカンプやアタリの段階でも、ある程度モーションつけた状態で制作したいのですが、そうなるとスピード重視で、到底モーションをスクリプトで書いてる時間はなくなる。そういうときに使えるのではないかと思ってます。実際にデザインショーケースでは、オープニングでの文字の動きのアタリをつける段階などで使っていました。アタリの段階では、動きを考えて、それにあわせてデザインを修正したりということを繰り返すことになるのですが、スクリプトに余計な時間をとられないので、開発スピードが縮まったのがうれしいです。

「モーションエディタ」で細かく設定できる点もうれしいですが、多数のモーションがプリセットされているのもありがたいです。プリセットされているモーションをそのまま世に出すことはありませんが、発想を広げる段階では眺めるだけでも参考になります。

――Dreamweaver CS4の「関連ファイル」が作業のイライラを削減していましたが、Flash CS4ではいかがですか。

野村氏
Flash CS4の場合、スピードアップした部分がある分、他のこと考える時間が長くなったので、トータルで時間が短くなったということはないです(笑)

――では、クライアントとのコミュニケーション、もしくはチーム内でのコミュニケーションで、何かメリットを感じましたか。

野村氏
内部のアイデア出しの段階で、非常に効果が出そうな気配は感じてますね。昔はある程度作り込むまでは、思ったようなアニメーションを当てられずに苦労しましたが、モーションエディタなどアニメーションで強化された部分のおかげで、まず作り込む前に動きを見る可能性や、考える選択肢、考えるチャンスが増えたかな。

個人的にかなりうれしかったことは、やはりFlash Player 10に対応したことと、ワークスペースをとても広くとれるようになったことですが(笑)　私はデベロッパースタイルなどいろんなスタイルを頻繁に使い分けるんです。普段はあらゆるものを小さくしておいて、タイムライン使ってアニメーション見たりしなきゃいけないときに戻すなどして切り替えて、スペースを有効活用しています。

プリセットされているモーション

野村氏のワークスペースの例

まさかのトラブル発生も「Bridge」に助けられた

「全然関係ないんですけど、実は今回Bridgeが大活躍しまして」と語り出したのは高橋氏。以前原因不明のトラブルで、パソコン内のローカルファイルをすべて消失したことがあったそうです。復旧ソフトでなんとか復活させることはできたものの、階層はおろか、ファイル名すら変わってしまい、頭を抱えたとか。そこで活躍したのがメディア管理ツールの「Bridge」だったそうです。

高橋氏
階層も全部なくなって、名前は全てリネームされて、同列にずらーっと出て来て……。さあ困ったというときに「Bridge」で見てみたら、PSDファイルもPNGデータも快適にサムネイルで表示でき、「レビューモード」での取捨選択もしやすかったんです。以前に比べて「Bridge」自体も早くなっていたので、復旧作業が思ってた以上に手早く終わりました。

今回はネガティブな使い方だったんですけど、そのままPhotoshopで直接編集できますし、仕事上RAWデータで撮影してそれを選別するという作業が増えているので、効率化という面ではかなり時間短縮につながるんじゃないかなと思ってます。

中川氏
長期に渡るプロジェクトでは、古い素材の保存先が分からなくなることがあります。PSDファイルをいちいち開いて確認するのは大変ですし、WindowsはそのままだとPSDのプレビューができない。でも「Bridge」だとサクサク見られるんで非常に重宝した時期がありました。

高橋氏
ちなみに僕はPhotoshopを主に使っていますが、CS4の「色調補正パネル」は必要なものがすぐ開けて便利だなと思います。特に画像の補正したい部分をで直接ドラッグして補正できるようになった「トーンカーブ」がいいなと。ここ最近はレベル補正の機能を使うことが多かったんですが、また使う気になりました。

カードをめくるように画像をスムーズに切り替えられるBridge CS4の「レビューモード」

修正したい箇所を、指でなぞるように動かすだけで補正できるPhotoshopの「トーンカーブ」

「ワンパク」的スキルアップ方法について

ワンパクでは、打ち合わせもプロジェクトマネージャやディレクターだけがクライアントと話すのではなく、デザイナーも可能な限り初期の段階から参加するそうです。全員が関わることで認識の食い違いを防げるだけでなく、自分の担当業務以外の作業への理解が深まり、スキルアップにつながるといいます。スキルアップといえば、新製品、新技術への対応も欠かせません。ワンパクではどのように対応しているのでしょうか。また、更に先に進むためにどんな努力をしているのでしょうか。

――情報の共有方法やフィードバックはどうしているのでしょうか。スキルアップのためにどんなことをしていらっしゃいますか。

中川氏
比較的アンテナを張り巡らせてる人間が多いので、その手の情報が社内のメーリングリストにいろいろと流れてきますね。

阿部氏
10数名の規模の会社なんで(笑)、集まって直接話しているというほうが大きいんじゃないですかね。何か分からないことがあったら、すぐみんなで「何!?」と集まって、問題解決しようとするチームワークが既にできてると思います。自分が関わっているか関わってないか、案件に関係するかどうかは抜きにして「なんかちょっと問題だよね」ということがあったら、すぐ集まってきて、とりあえずみんなでやってみようよということになり、「オレ一番にでーきた！」みたいなケースもあります。もしくは野村とかが「じゃあちょっとやってみます」みたいな感じになり、翌日になったら「できました！」とか。

――なるほど。それでは最後に、それぞれのソフトの印象をお伺いします。

阿部氏
Dreamweaverは“頼れるお父さん”、Fireworksは“弟”って感じ。Flashは“頼れるお兄さん”？

野村氏
Flashは“やんちゃなお兄さん”って感じですね(笑)

ご自身の体験談を紹介してください。カスタマーサクセスプログラムに参加.

Adobe ケーススタディー

ワンパクが発見したAdobe CS4 Web Premium の魅力

デベロッパー名:

使用製品

つぎの条件に合致する他の事例を検索する

製品を指定して検索

プロジェクトの詳細

遊び心たっぷりのサイトから、堅実なコーポレートサイトまで幅広く制作