Adobe ケーススタディー

FICCはWebプロモーション、Webコンサルティング、Webクリエイティブやバイリンガルコミュニケーションなどのサービスにより、外資系企業をはじめとした多くのクライアントとダイレクトな信頼関係を築きあげてきました。マーケティングリサーチから制作、効果測定まで総合的なプロデュースを行う体制と各種サービスがFICCの最大の特徴でもあります。

現在社員は20名。デザイン、デベロップ、プランニングなど、様々なスキルを持ったスタッフによって最適なクリエイティブ・ソリューションを提供しています。それぞれが、クライアントやユーザーニーズに対する提案を行い、Webコンテンツを通じてクライアントの企業価値やブランディングの確立を目指しています。

FICCは個々のスタッフによる、部署を超えた活発なコミュニケーションや、積極的な情報の共有によって、スタッフ同士が常に刺激を与え合う関係を築いています。そんなスタッフ間のコミュニケーションからWebデザインブックマークサイトの「Another Bookmark」Webクリエイターのための求人サイト「MOREWORKS」などの自社サービスが誕生しました。

今回は会社から絶大な信頼を寄せられているスタッフ2名に、Adobe CS4の魅力や使用感について伺いました。

メイベリン「マスカラマガジン」

アンテプリマ

アヤナリゾート＆スパ

社員同士の有益なサイト情報の活発な交換がきっかけとなって誕生したサービス「AnotherBookmark」。現在では登録者数120名、2868本(2009年6月24日現在)ものサイトが登録されている

――普段どのようなお仕事をされているのか教えてください

Flashサイトの構築を得意とする福岡陽氏

福岡氏
デベロップの部署に所属しながら、主にFlashサイトを構築しています。ゆえにメインで使うソフトはFlashなんですけども、場合によっては企画やデザインを担当することもあるので、Fireworksを使うことも多いです。3年くらい前から弊社で提供しているWebデザインブックマークサイト「AnotherBookmark」の制作、管理運営、構築や、同じく弊社で提供している求人サイト「MOREWORKS」の構築も担当しています。

デザインからコーディングまで担当する野島淳氏

野島淳氏
僕は主にデザインを担当しています。FireworksとPhotoshopを使ってグラフィックを作成し、たまにDreamweaverでコーディングも行います。

CS4導入の経緯

――CS4が出てすぐ導入されたんでしょうか

福岡氏
CS4は使いはじめて1ヶ月弱といったところでしょうか。CS3の導入タイミングが遅かったせいもあり、CS4の導入も少し遅かったですね。発表になってから、どんなことができるのか、使い勝手はどうなのかといったことについて、ブログやTwitterなどを通じて、知り合いのデザイナーやFlashデベロッパーなどの反応を入手していました。現在ではデザイン部署を中心に導入していますが、全体としてはCS3と半々くらいの混在状態です。

――CS4を導入しようと思ったきっかけはなんでしょうか

野島氏
特にCS3で絶対改善しなきゃいけないポイントがあるからCS4に、という流れではないですね。新しい機能を使ってみようという好奇心から使っているうちに、どんどんいいところが見えてきて、細かいところがいい感じでアップデートされていることが分かったので、これなら変えてもいいかなと思いました。特にFireworksはフォントのエンジンがPhotoshopやIllustratorと同じような感じになったので、それが大きな理由になっています。

業務の中で最も出現率が高い「Fireworks CS4」は即戦力になる機能多数

――Fireworks CS4のテキスト回りが強化されたことによって、チーム内でファイルのやりとりがしやすくなってる感じはありますか

福岡氏
そうですね。受け取ったときに整合性の取れたデータをいただけるのが一番助かりますから。Flashの場合、画像化してしまうことがほとんどですので、テキストデータもばっちり上がったものをそのままいただける、これが一番ありがたいことです。ただ、ファイルのやりとりもそうですが、そもそもデザインの段階でストレスがなくなっているという気がします。

――ファイルのやりとりで使われるのはFireworksのPNGファイルと、PhotoshopのPSDファイルのどちらが多いのでしょうか

福岡氏
ケース・バイ・ケースで、Photoshopのほうが制作しやすい場合はPSDファイルが届きます。それで混乱することは特にないんですけども、弊社ではFireworksの割合が圧倒的に多いですね。７割くらいかな？

野島氏
そうですね。全員が両方使えるので、Photoshopだけで制作することもありますが、だいたいFireworksに落とし込むことが多いですね。

福岡氏
自分がFlashをメインで扱うからかもしれませんが、Fireworksのほうが扱いが楽なんですね。一気にインポートすることもできますし、パーツ一つ一つがとりやすいですから。

――御社ではFireworksがかなり活躍してるようですね

福岡氏
いやー、Fireworks CS4は猛プッシュですね(笑)　CS3でもFireworksだけをまとめて買った記憶がありましたね。もちろんFlash、Dreamweaver、Photoshop、Illustrator、それぞれ導入してますけれども、一番大きく導入してるのはFireworksかもしれないですね。とにかくどこにでも出てくるんです。

昔はPhotoshopがほとんどだったんですが、3年ほど前から一気にFireworksに変えようという動きになりました。その頃は部署が少しずつできあがっている頃で、スタッフが増えていったんですね。それまでは一人で完結する作業が多かったんですが、どんどん連携作業になっていった。そうなるとFireworksのほうがいいだろうということになりました。

――では具体的にFireworks CS4ではどのような機能が役に立っていますか

野島氏
新機能の「スマートガイド」のおかげで、カンバスに対して配置するオブジェクトの位置が決めやすくなって重宝してます。それから、整列の分布でピクセル指定ができるようになったという点、この2つがお気に入りです。ガイドをひいてSHIFTキーを押しながらのマウスオーバーすると、ガイド間のピクセル表示がでるようになりましたよね。あれも気に入っていますね。さらにはPhotoshopのオブジェクトをそのまま埋め込める点とか、サイズが計れる「ものさしツール」もいいですね。これらは即戦力になると思います。

他には、カラーテーマを作成できる「Kulerパネル」も重宝しています。 Kulerである程度カラーを作って、クライアントとやりとりしたりっていうこともありました。

福岡氏
ちょうど色がキーになるコンテンツを作る案件があったんですよね。色の組み合わせが鍵で、全体のビジュアルに大きく影響を与えるコンテンツだったので、「Kuler」はちょうど良かったですね。

自分の場合、新規ドキュメントがタブ化するところもありがたいです。アプリケーション間で統一されてますよね。作業ではFlashとFireworksを行き来することになるんですけれど、「こっちはタブだったのに、こっちはタブじゃなかったんだ」みたいな些細な戸惑いがなくていいです。また、Fireworksでは大きい画像から小さいパーツを切り出すことが結構多いんですが、そうすると小さなウィンドウが隠れてしまうんですね。もちろんウィンドウを整列させればいいんですが、そういう小さな迷子みたいなことが最初からないっていうのはストレス軽減になっています。

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

FireworksのカンバスにPhotoshopのオブジェクトがそのまま読み込める「Photoshopファイル読み込みオプション」

フォントのインクリメントサーチが可能

環境設定では、テキストの行送り、ベースラインシフトなどが可能になっている

Adobe Kuler

「Photoshop CS4」は実用的なチューンナップで効率アップ

――Fireworksに次いで、注目してる機能をもつソフトはどれでしょう

福岡氏
いろいろあるんですが僕はPhotoshop CS4ですね。

野島氏
Photoshop CS4、結構いろいろアップデートされてますよね。例えばパネル群の操作性やアプリケーションバーとか。アプリケーションバーにある「ドキュメントレイアウト」というボタンで、タブの表示を全面表示だけでなく、左1つ、右2つというように変えられるのも便利です。あとは結構人気だと思うんですけど、自分としてもインパクトがあったのが「コンテンツに応じて拡大・縮小」です。今までは切って貼ってを繰り返したり、スタンプツールでペタペタしたり……。最近そういう作業が多いので(笑)、今後は作業効率がかなり上がるだろうと可能性を感じてます。

進化してるなと感じたのは、画像補整の「覆い焼き・焼き込みツール」の辺りですね。以前と比べてきれいに、自然に仕上がる気がします。レタッチ作業も多いので、これからかなり使いやすさが上がるんじゃないでしょうか。「レイヤーの自動整列」、「レイヤーの自動合成」、「カンバスの回転」も便利だと思いますし、「マスクパネル」も気に入ってます。基本的にWebページで公開されている新しい機能は、全部すごいなと思っていますが(笑)

福岡氏
いろんな効果を適用して、レイヤー上でその効果を選択すると、該当するパネルが開いてくれるあたりもわかりやすい部分ですね。見て直感的に分かるというのは非常に大事だなと感じます。補正するときはどうしてもトライ＆エラーは避けられないですが、そういうところで時間が短縮されることはあると思いますね。

――どの程度作業時間が短縮されると思いますか？

野島氏
最低でも1割は絶対に短縮されるんじゃないですか。作業内容にもよりますが、レタッチ作業や背景の追加みたいな内容なら半分くらいになるんじゃないですかね。

福岡氏
レイヤーの扱いがよくなっているので、ある程度簡単なファイルであれば、今はもうFlashにそのままインポートできちゃいますしね。以前は受け取ったデータを見て、Flashでは再現できない効果が適用されていたりすると分解したり結合したりと苦労しましたが、そのあたりの苦労はかなり軽減されそうな気はしていますね。

統一されたアプリケーションバーでウィンドウとパネルの管理が楽になった

従来の覆い焼き

Photoshop CS4の覆い焼きは「トーンの保護」により、より自然な補正が可能になった

写真を「自動整列」ののち「自動合成」した例

レイヤーの複数選択が可能になり、レイヤーの統合が楽になった

手を使ったアニメーション機能の強化がうれしい「Flash CS4」

――Flashのお話が出たところで、Flash CS4の機能について感想をお聞かせください

福岡氏
今回アップデートは、Flashとして原点に戻ったようなアップデートだなと感じました。これまではスクリプト重視な機能強化が目立っていたと思いますし、コンテンツに対する世間のニーズもスクリプトでどこまで実現できるかという流れになっていたような気がします。でも今回は「タイムライン」の操作に「モーショントゥイーン」など“手を使ったアニメーション”の機能が強化されて、改めてアニメーションツールに戻ってきたなという感じがしました。

自分の場合、絵がうまいわけでもないですし、たくさんアニメーションが作れるわけでもないんですけど(苦笑)　地道に手を動かす、いわば彫刻刀で削っていくような作り方なんですよ。なので、手を動かしてアニメーションを制作しやすい機能の強化はうれしいです。

例えば三次元変形ですね。以前は作る前に「あー三次元か」と思いながら始めていました。ロゴが簡単に回るだけの演出にしても「スクリプトやんなきゃな」という気持ちで、なんていうか、ちょっと気が重いというか(苦笑)　それが今や手で動かせちゃいますからね！　億劫がらずに済むというのは大きいです。改めて手を動かすコンテンツが考えやすくなったと思いますし、アニメーション作りの可能性が広がったような気がします。

――新しい機能が制作意欲を刺激している感じはしますか？

福岡氏
使ってみて、学生時代に考えていたけれど、難しいと思って諦めていたアイデアを思い出しました。当時、おもしろいものが作れそうだと浮かんだアイデアだったんですが、関節がつながっているものを動かすのが難しそうだと思って。それこそ今なら「ボーンツール」で解決してしまいそうですが、当時は挫折してたなというのを少し思い出しましたね。今は便利になっているので、新しいものをつくろうかなという気持ちにさせてくれます。とにかく直感的に手で作るという部分でのパワーアップが大きいですよね。「スプレーブラシ」なんかもうれしい機能です。昔は一生懸命1個1個手で作ってましたから、なんで当時はなかったんだろうと恨めしいです(笑)

レイアウトが変わって、他のアプリケーションとワークスペースが統一されて操作性が向上した点もいいですね。全体的に収まりがよい気がします。自分は絵も描きますが、その一方でスクリプトも書かなくてはいけない。最近はFlash内でスクリプトを書かず、外部ファイルとして扱う例も増えているようですが、私の場合はどうしても絵とスクリプトの往復が発生するため、Flash内だけで完結させるほうが好きなんです。それがやりやすくなったような気がしています。また、縦型プロパティになって、場所が移動して、だいぶ広く使えるようになって、イライラすることが減りましたね。

――Flash CS4のココが一押しという部分がありましたらご紹介ください

福岡氏
「ライブラリ」ですね。アイテムの種類よりもリンケージというか、名付けのほうが大切だろうと思っており、以前はなぜそれが前に来ないのかというもどかしさがありました。それが真っ先に直されてるというのはありがたいですね。また、ActionScript 3を使うようになってから、画像を呼び出したり、先に登録しておいたSpry（スプライ）とムービークリップを呼び出すケースがとても多くなってきたのですが、そうなると今までのライブラリだと窮屈で。サイトによってはパーツが膨大になったりして、下手したら画像が200個くらいあるんですね(苦笑)　その中探すのはかなり面倒だったんですけど、ライブラリの中に検索窓がついたため、探しやすくなった。ここはお勧めポイントです。

Flash Player 10の話になりますが、「ダイナミックサウンドジェネレート機能」ですね。クライアントワークに使えるかどうかは別の話ですけど、音の扱いが大分柔軟になるのは個人的には非常にうれしいです。あとはやはり処理速度向上という面で、「ハードウェアアクセラレーション」にも期待してます。

アニメーションツールとしての魅力がパワーアップした

アニメーションがAfterEffectsライクにできるようになった

ライブラリに検索ボックスがついて使いやすくなった

Flash_4_Player10でhobnoxのような音を使ったコンテンツも可能に

これから期待をもって大いに検証したい「Dreamweaver CS4」

――お二人ともマークアップが中心ではないと思いますが、Dreamweaverの使用感はいかがですか

野島氏
Dreamweaver CS4はコーディングで使用していますが、全体的にすっきりして、スペースが確保され、作業しやすくなってると思います。一番気になったのは、Webブラウザのレンダリングエンジン「Web Kit」を使ってDreamweaver内でプレビューできる「ライブビュー」と、該当するCSSソースコードにすばやくアクセスできる「コードナビゲータ」ですね。読み込まれているファイルがわかる「関連ファイル」も非常に便利だと思いました。

PhotoshopのPSDデータをそのまま入れて、スマートオブジェクトみたいな形で使えるっていうことですが、今のところDreamweaverからPhotoshopやFireworksに移って画像編集という作業はしていないので、連携についてはこれから探っていきたいと考えています。そのあたりの効率アップについてはかなり期待してます。

Webブラウザを起動することなく仕上がりの確認ができる「ライブビュー」

CSSソースコードにすばやくアクセスできる「コードナビゲータ」

読み込まれているファイルがすぐわかる「関連ファイル」

――最後に1ヶ月弱ご利用になったCS4全体の感想をお伺いします。

野島氏
“すっきり”ですね(笑)

福岡氏
我々はどうしてもアプリを複数立ち上げて制御することが多いんですが、違和感なく行き来できると感じています。もちろん目立つ機能もたくさんあると思うんですけど、それよりも長く使う上では、細かい部分がいかに使いやすくなっているかというところが重要だと思います。実際に機能一つ一つがチューンナップされていて、改善されているところがうれしいです。

――お忙しいところありがとうございました

【関連ページ】

CS4全体

Fireworks

Kuler

Photoshop

Flash

Dreamweaver

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