Adobe ケーススタディー

「ミツエーリンクス」は1990年設立のWebインテグレーション企業です。海外展開されているナショナルクライアントなどを対象とした大規模なサイト開発を得意としており、コンサルティング、ユーザビリティ、アクセシビリティを始め、ログ解析など分析調査、Flashを使ったリッチ系の表現、Web標準を使った構築まで総合的なWebソリューションの提供を行っています。

「ミツエーリンクス」と聞くと真っ先に「Web標準」というフレーズが浮かぶという人が多いほど、その分野では業界を牽引する立場でもあります。また品質管理も徹底しており、品質管理の国際規格である「ISO9001」、環境管理システムの国際規格である「ISO14001」、情報セキュリティ管理の国際規格である「ISO27001/ISMS」など多くの国内外規格の認証を取得しています。

精鋭スタッフがCS4を試す

現在ミツエーリンクスではCS3を用いて制作が行われています。CS4の全社的導入にあたっては、コストと生産性のバランスが重要な鍵を握っています。そこで今回は取材もかねて一部のスタッフにCS4を1ヶ月に渡って試用していただきました。

今回CS4の感想を伺ったのは、第一Webインテグレーション本部第一WI部チーフデザイナーの黄聖實氏、第一Webインテグレーション本部第一WI部デザイナーの筒井豊氏、R&D本部 Web標準チームリーダーの酒井三四郎氏、第一Webインテグレーション本部第二WI部チーフデザイナーの前嶋康秀氏、第一Webインテグレーション本部第二WI部チーフデザイナーの高橋晶子氏、第一Webインテグレーション本部第二WI部デザイナーの土橋亜美氏、第一Webインテグレーション本部第二WI部デザイナーの廣神紀子氏の計7名。

いずれも経験があり、アプリケーションが網羅できるという理由で選ばれたスタッフです。

黄聖實氏

筒井豊氏

酒井三四郎氏

前嶋康秀氏

土橋亜美氏

高橋晶子氏

廣神紀子氏

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

黄氏
私はRIA(Rich Internet Application)コンテンツを作るチームで、Flashで連動するバックグラウンド系から、Flashコンテンツまですべてを担当しています。主に使用しているアプリはFlashです。

筒井氏
僕は黄と同じチームに所属しており、主にFlashコンテンツの作成と、デザインを少し担当しています。使っているアプリはPhotoshopとFlashがメインですね。

酒井氏
自分はWeb標準という技術で、HTMLとCSSとJavaScriptを利用して、主にマークアップ設計を行っています。そのため、メインで使っているのはDreamweaverですが、デザイナーから入稿されたPSDファイルを加工することもありますので、補助的にPhotoshopも使いますね。

前嶋氏
私は主にデザインですが、コーディングも少々行っております。使ってるアプリは、Photoshop、Illustratorのほかに、たまにFlash、Dreamweaverです。

土橋氏
私はデザイン担当です。使っているアプリは主にPhotoshopで、そのほかにIllustrator、Flash、Dreamweaverですね。

高橋氏
私は前嶋、廣神、土橋と同じ部署で、デザイナーをしています。使うアプリは PhotoshopとIllustratorが主なんですが、たまにFlash、もっとたまにDreamweaverを使います(笑)

廣神氏
私はデザインを担当しています。サイトのビジュアルを作るのが主な仕事です。アプリはPhotoshopがメインですが、他にIllustratorとコーディングの時はDreamweaverを使っています。

――通常はどのようなワークフローで作業されているのでしょうか。

前嶋氏
基本的にはまずディレクターがMicrosoft Office PowerPointでサイトの構成や要素に関する資料を作ります。それをもとに、デザイナーが（主に）Photoshopを使って、実際にデザインを起こします。それを弊社のデモサーバになどにあげて、お客様に確認していただき、デザインが決定したらDreamweaverを使って設計/実装します。

酒井氏
最近はコンペなどの段階でもHTMLに起こしていくことがありますね。

Dreamweaver CS4は「関連ファイル」と「ライブビュー」がいい

――なるほど。ではまずDreamweaverをご利用になった感想を伺います。

酒井氏
自分はDreamweaverをメインに使ってますけど、すごく大きなバージョンアップというより、痒いところに手が届くような機能のバージョンアップがありがたいと感じました。例えば、すでに様々なところで言われている機能ですが「関連ファイル」。HTMLファイルを開いたときに、それに関連するJavaScriptファイルやCSSファイルを全部教えてくれますし、ファイルにすぐアクセスできるのでよかったですね。

自分は手打ちでコーディングを行うので「デザインビュー」はほとんど使わないのですが、「コードナビゲータ」は親切だと思いました。Firefoxのアドオンである「FireBug」で見ていたようなことが、Dreamweaverだけで見ることができるという印象です。要素にカーソルを持って行ったときにどんなスタイルが当たってるのかをツールチップのように出してくれるので、コードに慣れていないデザイナーの方や、「デザインビュー」中心で作業される方には、感覚的に使いやすくなってるんじゃないかなとは思いますね。敷居を下げて、触りやすくなってる感じです。

前嶋氏
僕も使ったときにそういう印象があって。「デザインビュー」だけでコーディングを進めても安心して進められる印象がありました。「ライブビュー」も実際の表示が確認できていいよね。

酒井氏
WebKitエンジンの「ライブビュー」もいいですね。いちいちブラウザでプレビューしなくても、表示確認が簡単にできるようになっています。

――いろんなブラウザでどう見えるかというのには本当に神経を使う部分だと思いますが、「ライブビュー」の見え方についてはいかがですか。

酒井氏
基本的には「Safari」や「Google Chorme」と同じ「WebKitエンジン」なので問題ないと思ってます。ただ自分はいろいろなブラウザで問題なく表示するというところを担保する部署なので、「ライブビュー」で表示できたからOKという判断はできません。そこまでは省略できないので、必ずネイティブなブラウザで確認するという必要はでてきますけど、作業中のちょっとした確認の手間はずいぶん減ったと思いますね。

――「Subversion」対応についてはいかがですか。ご利用になりましたか？

酒井氏
今回「Subversion」を扱えるようになったっていうのが目玉の１つだと思うんですけど、その点に関してはまだ機能が若干弱いと思ってます。他のSubversionクライアントとの互換性がないので、使い方を誤れば問題の元にもなっちゃうかもしれないなと。従って「DreamweaverでSubversion管理をしましょう」と全社に広めるのはまだちょっと厳しいかなという印象ですね。次は大丈夫かなと期待しています。

そんな感じで「Dreamweaver CS4」は細かい部分でかなり使いやすくなっていますが、すでに開発が止まってしまっている機能を強化して欲しいというのはありますね。「テンプレート」とか、「ライブラリ」とか「スニペット」とか。あの辺りはもう完成してるという扱いになっているのか、最近あんまり触れてもらえないんで（笑）。そこはもっと強化してほしいなと思います。

関連ファイル。1クリックで読み込んでいるファイルが開く

コードナビゲータ。クリックすると該当するファイルが開き、指定箇所まで移動できる

Flash CS4 は 3Dとバックグラウンドとの連携が強化

――Flashについてはいかがでしょうか。

黄氏
僕の場合はバックグラウンドとの連携が多いので、Flash以外にもアドビ製品としてはColdFusion や、Flexを使ってるんですね。今回FlashがCS4になって、外部のコンポーネントが使えるようになったので、Flex用に開発されたコンポーネントを簡単に使えるようになったのが非常にうれしいですね。

前はLCDS(Live Cycle Data Service)やBlazeDSとAMF（Action Message Format）というメッセンジャープロトコルやRTMP(Real Time Messaging Protocol)を使う場合、NetConnection、RemoteMessageなどのFlex用で作られたコンポーネントを利用してFlexでしか連動できなかったんですけど、新たに外部のコンポーネントが使えることで、Flashとの連動ができるようになったことがすごいメリットになったと思います。また、今回「Adobe Pixel Bender Toolkit」というカスタムフィルタ機能が追加され、かなりきれいなフィルタが簡単に使えるようになりました。After Effects並にキレイで、軽いし、フィルターファイルが外部で連動するので、更新が早くなって作業効率がアップすると思います。

筒井氏
僕は比較的ベタですが、3D関係が強くなったところがうれしいです。以前なら、ちょっと奥行きのあるコンテンツを作ろうとしたら、視点とスクリーン、ムービークリップまでの距離を指定し、そこから計算されるZ座標を元にサイズと座標を計算する……という作業が必要でした。それが今回Z軸のパラメータが追加されたことで、Z軸を動かすだけで自動的にムービークリップのサイズと座標が変わってくれる。これで複雑な計算がかなり省略できるなと。

――実際に試してどの程度短縮できましたか？

筒井氏
実際にソースを見ると分かりやすいのですが、Z軸のパラメータを変えるだけで奥行きに関わる計算を自動的に行ってくれるんですよね。そういった部分では作業量は半分以下になったと考えます。また、ムービークリップの3D回転等も簡単にできるようになったので、Flash単体でのちょっとした3D表現の幅が広がるんじゃないかとすごく感じてます。

黄氏
他には、PhotoshopとFlashの連動はCS3からありましたが、Photoshopのレイヤーごと読み込める機能がより強化され、安定してきていると感じました。前はPhotoshopから制作した画像をいちいち書き出してからFlashにもってきましたが、今回からPSD単位で呼んできて、レイヤーを選んで終わりで、すごく速くなったし、自分がほしい状態の画像がすぐ使えるようになったと思います。デザイナーはFireworksやPhotoshopで作業して、外部におく。スクリプターは本当にActionScriptだけ書いて、組み合わせて1個のFlashにできる。更新するときもFlash側で修正するんじゃなくて、外部のパーツごと更新すればFlashが更新される。だんだんこういった作業フローになっていくことですごく効率が上がるんじゃないかと思います。

細かいところで言えば、スマートガイドの精度がアップした点、ステージ上にムービークリップを置いてもステージが見える点、プロジェクトの生成がやりやすくなった点、シンボルを作るときにライブラリフォルダーの設定もできるようになった点、Flashのメタ情報を簡単にかけるようになった点などもうれしいです。

高橋氏
「ボーンツール」とかできてますよね。あれはすごいですよね！　機会があれば使ってみたいです。

土橋氏
前は作るのものすごく大変だったのに！

筒井氏
Flashでアニメーションを本格的に作っている人にとっては、あれはかなりうれしい機能だとだと思いますね。キャラクター等を動かす際の調整時間が大幅に短縮できるため、クオリティがさらに上がるのではないでしょうか。

Z軸を使っている例

Z軸により、自動計算されるためスクリプトがシンプルになっている

ボーンツールを使った作例

Illustrator CS4は、細かい部分でうれしい改良多数

――次に、Illustratorはいかがでしょうか。御社ではご利用の方が多い印象です。

土橋氏
私も酒井と同じで、CS3からCS4への大きな更新というより、小さなことでよくなったところに非常に目が行きました。例えば「整列」ですが、今まではアートボードやトリムエリア基準でしかできなかったのが、今回キーオブジェクトを基準にした整列ができるようになりました。

また、作業していると自然にレイヤーが増えてゆきますが、Photoshopではレイヤーパネル上でスクロールできるのに、Illustratorではできなかったんです。それで Illustratorを使うたびに、レイヤーパネル上でスクロールしてしまい、画面を動かしてしまうというミスを繰り返してたんですけど、それがついにスクロールできるようになった！(笑)

あとは「マスク」がすごくよくなってました。今までは、マスクをかけると隠されるものと隠すもので両方を含めて1つの大きさという考え方だったんですね。だから隠れてるのにクリックできる状態なので、かなりイライラさせられてました。それが、今回マスクの大きさがオブジェクトの大きさという考え方に変わったんですね。おかげで、今までみたいに無駄な選択をしなくて済むようになったんです！

――精神的にものすごくさっぱりした感じで作業できそうですね(笑)

土橋氏
マスクだけ動かしたいときも動かしやすくなってますし、非常に細かいところばかりですが、どれもすごくうれしいです(笑)　加えて「アピアランス」がすごくよくなりましたね。まず表示・非表示がコントロールできる目のマークが付くようになった。さらにアピアランス内だけで線を追加して二重三重にできるんですよ。

線路を作るとき、今までは黒いラインを引いて、その上の同じところに白い破線を置いてたんです。でも今回のアピアランスは、1つのオブジェクト内に何本も線や塗をつけたり、効果をつけられます。おかげでレイヤー数もパスの数も減り、細かい仕事をできるようになったのがとてもうれしいです。個人的には「アピアランス」は一押しです。

高橋氏
私は「グラデーションツール」の改良がうれしかったです。今まではパネルにいかないと調整できなかったんですが、オブジェクトの上でリアルタイムでできるようになったんですよね。

前嶋氏
そう！あれすごいね。グラデーションを適用すると、オブジェクトの上にバー（グラデーションツール）が出てきて、ここが中心で、こういうグラデーションで、と「グラデーションパネル」みたいなことがそこでできるんだよね。色がどう変化しているかもスライダでわかるから、色を変えたいときはそこをクリックして変えられるのでとても便利！

高橋氏
あとオーソドックスなんですけど、Photoshopの「塗りブラシ」と「消しゴムツール」がIllustratorにも入ったこと。ちょっとボケ足がついてるイラストを描きたいというとき、今までIllustratorで線画を描いて、Photoshopに持って行って、Photoshopの塗りブラシなどで絶対はみ出るように描いてたと思うんですけど、そういうのが全部Illustrator上の塗りブラシでできるようになった。イラストをよく描く人には、特に便利なのかなと思っています。

左はCS3、右がCS4のレイヤーとアピアランスの様子。CS4では1つのパスで済んでいるのがわかる

左はCS3のマスク、右がCS4のマスク。CS4では無駄な領域が選択されない

Photoshop CS4は、より自然体で使いやすくなっている

――Illustratorはかなりヒットのようですが、Photoshopはいかがでしょう。

廣神氏
全体的に見ると、画像の加工や補正など、ちょっとしたことが時間短縮できるなという印象です。その中で特に新しい機能「コンテンツに応じて拡大・縮小」が気に入りました。画像の中の特定の部分を変えずに、背景だけが拡大縮小できるんですよね。今までだと背景を切ってつないだりとかしてたんですけど、そういったところで簡単になったなと思います。

前嶋氏
人の大きさは変えずに、背景サイズだけを変えるという作業が簡単にできたんだよね。簡単に画像を縮めたり、拡げたりできるのは時間の短縮になるので、凄いと思います。

高橋氏
画像受け取ってみたらちょっとサイズが足りなかったってことは、意外とよくありますもんね。

――作業時間はかなり短縮されたとかなり実感しましたか？

廣神氏
はい。例えばそこがメインビジュアルになると作りこむのですが、そこまで作りこみが必要ではないちょっとしたイメージの場合の補正に時間を短縮が出来て、本来時間をかけるべきところにかける事ができればと思います。なので「コンテンツに応じて拡大・縮小」を使うとすごく簡単なので、一瞬で終わらせることができました。時間をかけなくてできるというのがいいなと思います。あとは、トーンカーブやレベル補正などがまとまってる「色調補正パネル」も使いやすくなってると思います。

前嶋氏
例えば「ズーム」がスムーズにできるとか、最大までズームアップしたときに、ピクセルのガイドが、1ピクセル単位で出てくるとか。デザインに集中できる環境をアシストしてくれているっていうのが今回のPhotoshopのいいところかなと思っています。

先ほどの「色調補正パネル」にしても、たぶん今までとやってることは変わらないんですよね。でもそれがひとまとめになって、その小さなウィンドウにトーンカーブなどが出てくるということが、こんなにも便利なのかということをすごく感じました。実際にデザインを作る作業の中で、自分がやりたいことが最小限の操作で、ストレスなくできるようになっているというのが、今回は一番大きなポイントかなと思いました。

「コンテンツに応じて拡大・縮小」で、背景だけを拡大した例

CS4は仕事で使いたい！

――自己紹介の時点から気になっていたのですが、誰もFireworksをお使いではないのでしょうか？

前嶋氏
あんまり使わないですね(苦笑) 一部では使っている人はいると思うんですけれど、やはり作り込みはPhotoshopがメインになりますね。

ただ、個人的にはこれからまさに使おうかなと思っているところなんですよ。クライアント向けのデモデザインやカンプを展開するときに、書き出しなどに使いたいなという気持ちはすごくあるんです。

ドキュメント作りの際にも役立つFireworks CS4の共有ライブラリ

――総合すると、CS4は積極的に使っていきたいと思えるようなバージョンになっていると思いますか？

酒井氏
自分の場合はDreamweaverを触ったわけですが、今までより速いなと思いました。動作がもっさりしていたらそれだけで使いにくいですから。

前嶋氏
僕自身、Macのノートパソコン持って客先にいって、お客さまの話聞きながらデザインを直しちゃったりするんですよ。そういうときにはPhotoshop CS4の直感的な感じや軽さはすごいありがたいし、実際に役に立つなと思いました。

黄氏
Flashもすごく機能が追加されて、効率もだんだん上がってるし、分業しやすくなっているし、結構いいと思います。

前嶋氏
現場レベルとしては「ぜひともって入れて欲しい！」とは思うんですけど(笑)

酒井氏
そうですね。「絶対に！」と(笑)

セミナーと勉強会でスキルアップ

――最後になりますが、御社では新しいアプリを導入するときや、情報の共有、新技術の習得などのスキルアップに関して、どのような活動をなさっていますか。

黄氏
私は今はデザイナーですが元々はプログラマーで、システムや言語の方が強いため私がいるFlashチーム内では、毎週言語のロジックなどの勉強会を開催しています。そこで毎月1回、目標管理として、お題を1つ決めて、サイト上で見つけた気になる機能を作ってみようとか、こういうことをこの技術を使いこんな形で表現しようといったことをやって発表してるんですね。そこで手法や機能を習得します。これは結構勉強になると思います。

――なるほど。本日はどうもありがとうございました。

【関連サイト、関連情報】

Illustrator CS4

Photoshop CS4

コンテンツに応じて拡大・縮小

Dreamweaver CS4

Flash CS4 Professional

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