注：今回のエントリは主観がよりたくさん混じっています。ツッコミは適宜お願いいたします（誰

ここいらで普通のウェブデザインのお話。通常、現代的なウェブの作り手のかたはPhotoshopかFireworksでデザインを制作し、swfかhtmlに実装していく・・・というプロセスを踏むかと思われます。どちらも優秀なツールですが、僕（あくまで個人として）なりにどちらで制作していくのがいいのかな？というのは数年間、悩みのタネでした。
（昔勇吾さんには「俺Flashでやってるよ」と言われ驚愕した覚えがあります。今はどうか知りませんし、彼はそもそも、Ultimateですから・・・。）

悩みの原因

昔、MacromediaがFireworksの開発元で、AdobeがM社を買収するという話になったとき、Ps/Fwの棲み分けはどうなるの？っていう議論がありました。機能的にこの2つ、結構かぶっている訳です。今はどちらもベクトル/ビットマップ両方とも扱えるようになりましたし、包括している機能の多さでいえばPsはFwを取り込むんじゃないか？というお話のほうが有力でした。でも現状、そうなっていません。FwにはFwなりにWebに特化した利点が沢山あります。書き出しの柔軟さや動画gif、ページ機能、シンボル、Flashもそうですがレイヤーを意識しなくてもなんとかなる位の直感的な操作、そしてこれが決め手という方もいるかと思われますが、文字のアンチエイリアス・レンダリングの調整がとても柔軟な事があります。Psは文字のアンチエイリアスがプリセットされた5個しか存在しないのに対してFwでは256段階以上の細かいプリセットを作ることができます。

そんなに言うんだったらFwで作ればよくね？という話ですが、そうもいかない理由もいくつか。
・重い
・不安定（会社の先輩は一日に15回くらい落ちてました）
・グループ/グループ解除でテキストがずれまくる
特にウェブをやられる方々のtwitterやBlogを見ていてもCS4からその傾向が顕著です。要はバギーなんです。ツールとして終わっている、仕事にならない、リコールしろ、金返せなどなど・・・このtumblrでもFwの話題は常連です。で、僕もおおむね、同意見です。特に今年から働き始めた会社ではFwはCS4から・・・どうにかしなくちゃなぁ、と思っていました。

ツールに求める範囲

通常、ぼくが会社でやる業務はウェブのデザインと実装の両方です。実装をほかの方にお願いする場合もありますし、実装だけやる場合もあります。で、僕個人がツールに何を求めてるかって言うと、優先順位で
・レスポンス早い
・テキストが綺麗にレンダリングできる
・シンボルが使える（グラフィックの使い回しができる）
・矩形がいじれて、その変更が容易
・ほかの人ともシェアが簡単だとよりnice

・・・ええと、一番目の条件でFwを使いたくないというのがおわかり頂けるかと思います。特にレスポンスがあまりに遅いと、デザインで試行錯誤を、というところに支障が出てきてしまうのです。これはWin/Mac両方使っている意見からすると会社の環境でもあるMacでより顕著な印象です。これを理由に、いまだにWinXP・Fireworks3でデザインをされているweb屋さんを存じています。その「どストイック」さ、脱帽です。ただ、今もう手に入らないソフトじゃないと効率が追えないっていう悲惨な話も、ないですよね。

余談その1：あのMacの美しいUIは、Psで作られているそうです。だからなんだって話ですが、憧れですね、憧れ。
余談その2：Psでwebのデザインを作りたい理由はもうひとつあって、写真をいじるツールでそのままデザインをしたいという渇望です。Fwで色が気になっても勿論直すことが出来ますが・・・どうせならPsでガッツリいじりたいな、と思って無限ソフト間往復運動→メモリ消費がSUGOIことになっていました。

Photoshopでwebはデザインできるか

個人的に結論が出つつあるのでこのエントリーを書いています、で、可能だと思っています。昔からウェブに携われていたかたがたはよりPsでデザインをしている場合が多い印象です。そりゃだって、Adobeのソフトですものね。紙媒体のデザインから移行された方も多い時代には普通の流れのように感じます。要は、上述したツールに求めている部分をクリアできればPsでも全然いけるかな、と考えるようになりました。ひとつひとつメモ的に書いていこうと思います。

1.レスポンス

これはFwに比べては、と言う意味でPsの圧勝だと思います。ただしスマートオブジェクト使いまくると重たくなりますね・・・。

2.テキストが綺麗にレンダリングできる

特にFwやFlashのテキストは10ポイント前後のテキストレンダリングがPsよりも綺麗です。調整も容易です。webを作っているとデバイステキスト（つまりhtmlの文章）以外で小見出し、コピーライト、ボタン周辺などのサブ要素でこうした文字サイズの画像を作るケースが頻発します。
これをPsで無理やり、近いものを実現します。

画像はPsでタイプしたテキストです（意味は気にしないでください）。上2つは未調整のもので、下2つが調整済みのものです。何をしたかというと、

・カーニング設定
・ベースライン調整
・レイヤー効果

の3つです。すいません全然特別なこと、してないです。でも結構代わり映えがするもので、意識しているのは「縦線と横線の鮮明さ」とでも言いましょうか、アルファベットで言うとFの天井の横棒、Iの縦棒などがにじまず鮮明だと綺麗に見えるようです。これはサンプルのHelvetica Neue 55で言える事で、Boldなどにするとまたちょっと、違ってくるようです。

文字のカーニングは「そんな面倒なことできるか」と言われそうですがFwでもどっちにしても必要なことですし・・・。alt（Macはoption）+方向キーでステム（アルファベットの縦棒）が一番鮮明になる部分を探して、一文字づつ調整していきます。そして横棒のにじみを調整するために、ベースラインを0.3pt上げています。（左上・左下のFを比べてみてください）

ここでは副作用として逆に小文字のiの点がにじんでしまいましたが、こうした感じで縦/横に対して調整をかけていきます。

黒い背景のものは右上が調整前、右下が調整後です。先ほどの方法に加えてレイヤー効果を加えたもので、黒背景だと文字がつぶれがちになるのを緩和しています。これがアンチエイリアスの調整の代わりになります。調整項目は以下になります。

要は光彩を0pxで、同じ色を重ねているだけです。でもこれで結構見栄えはよくなります。白系の文字はスクリーンで、黒系の文字は乗算をかけると良い感じにアンチエイリアスの濃度が高くなっていきます。Fwの調整スライダに比べるとざっくりした調整ですが、Psでのレイヤー効果はコピペができるので他の文字要素に一気に適用したりなんかが容易です。この方法を取り入れてから、かなりFwに対する劣等感（何）が緩和されました。

追記：ちなみに長文のテキストを画像にする必要が発生して、一文字一文字、なんて事をしてる時間はない・・・ような場合は「段落」パレットの「左/上インデント」をカーニング設定の代わりに調整してあげると良いかと思われます。ベースライン/レイヤー効果と併用して使うと結構良い結果が今のところ、得られています。0.01pt単位で調整が効いてくれるので便利です。

3.シンボルが使える

ええと、ページ機能があるあいつには負けるのはわかっています、けどスマートオブジェクトというシンボル的機能のおかげで落ち込むこと（独立したファイルとして扱われるのでちょっと重たい）もあるけれど、私は元気です。ベクターも拡大縮小が自由なまま、Illustratorから持ってくることが出来ますし、でかい画像もオリジナルの解像度を維持したまま扱うことが出来るようになりました、っていうか最近知ったよ、偉いなPhotoshop。AHOだな俺は。

というわけでこれのおかげでヘッダやフッタ、ナビ系要素なんかはブンブン使いまわすことができるようになりました。別ファイルとして保存する利点は他にもあって、書き出しておけばそれだけで他の人と共有したりなんかも出来ます。ナビだけくれ、みたいな「あーあのpsd開くのダルいんですけど！」的な状況も回避可能です。

4.矩形がいじれて、その変更が容易

あー偉いね、偉いよFwは。知ってますよそんなこと。というわけでweb制作前提のFwが圧勝の要素がここです。ドットに必ずスナップしてくれるFwに対して、Psはベクターで矩形を引いてもよくにじんだり、ずれたりします。回避策をいくつか。

・自由変形にして0.1px単位で矢印キーで移動して調整
・はみだしたドットをラスタライズ（画像化）して直接削除/追記する
・よく使う矩形のバリエーションをスマートオブジェクトで保管しておく

僕はこの3つを状況に応じて使っています。あとスマートオブジェクトファイル以外に、「ステンシル」フォルダに透過画像を保管してたり、しています。

あとここでもレイヤー効果は使いでがあります。こうした角丸の画像を作る際、

これで実現できます。

この「レイヤー効果で境界線を作るとなぜか角丸になる」のは個人的にも謎のひとつなのですが、アンチエイリアスは綺麗なのでよく使っています。サンプル下の「半円を2つくっつけたような角丸の矩形」は元の四角形を高さ2pxにするとこれだけで半円状のものを作ることが出来ます。もちろんレイヤー効果なのでコピペ自在です。しかし、ネックとしては数値をいじると矩形全体の大きさが変化してしまうこと、10pxより数値を大きくしていくとエラいことになる（是非お試しを）事、ですが・・・。どなたかもっと良い方法があれば教えてください。

5.ほかの人ともシェアが簡単だとよりnice

これは逆にPsの圧勝だと思います。Fw入ってない人は居ても、Ps入ってないweb屋さんって、そうそうないと思われます。印刷の方も開けますし、場合によってはお客さんだって持っている・・・！凄いぜノール兄弟。

まとめ的な

・・・と、このblogにしては異様な長さで書いてしまいましたがPs上でウェブデザイン、いけるなぁと思って現状、FwではなくPsで制作をしています。ちなみに補足事項としてグリッドシステムはチーフに教えていただいたこいつを、ガイドを引く際は、Psはピクセルでスナップしないので一度mキーを押して、範囲選択をしてからそこにスナップするように心がけています。

最後に僕の周辺を差し障りない程度にレポートします。いくつかの現場でのお話を聞くにつけ、Fw/Ps率は半々か、といったところです。広告キャンペーンなどスピードがとにかく求められて印刷との親和性も高くて・・・というところではPsが多用されていて、凝ったディテールで、リッチな質感のものをじっくり・・・という案件が多いところではFwが使用されていたりしました。もちろんケースバイケースで、自分に一番あったものを使えばそれがベストなんですけどね！

で、なぜ改めてこんなこと書いてんの？というと会社で教えていただいたことも含めて、メモ代わりという事と・・・白状するとweb制作をはじめて早10年が経過してしまいましたが、ここ1年くらい、単発でやることはありましたがhtmlでのwebのデザインをガッツリやる機会がほとんどなかったので是非他のかたがたのご意見を改めてお聞きしてみたかったからです。お前の考えは間違っていると言う方、もっと良い方法あるよ、と言う方、ぜひぜひ、教えてあげてください。ではでは。