Webデザイン。イラレは出来る子。フォトショなんかに負けないもん。

Web制作

2015年7月11日、追記。

このページ、いまだによくアクセスされているようですが、その全員が「なんだよ2011年の記事かよ、クソが！」と不信感を抱くことと存じます。あらためて確認しますと、CC2015でも通用する内容ですのでクソとかいわずにご一読ください。

本編ここから

釣り気味のタイトルですみません。中身も釣りなのでご査収のほどよろしくお願いいたします。さて、この記事↓にリスペクトかつインスパイアされ、勢いで記事投下してみる。

Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

Webデザインをするにあたって、巷ではPhotoshopを使う人が多いようなのだが、ベクターデータの軽快さや自由自在の拡大縮小の便利さもあって、私はIllustratorを使っているため、日頃から虐げられている。ことWebに関しては、Photoshopがたけのこの里なら、Illustratorはきのこの山であり、フォトショがAKB48ならイラレは浜崎あゆみだ。仕事だってドタキャンしたくなるのである。

本稿について

そんなわけで、Illustratorが実は出来る子ということを少しでも広めるために、本エントリーを書く。Web Design Recipesさんの元記事はPhotoshopのチュートリアルではあるが、主旨としては「1pxにこだわってクオリティの高いデザインしましょうね」というフォトショ、イラレを問わない有意義なものなので、ぜひ読んでみてください。で、私の記事は、上でWeb Design RecipesさんがPhotoshopさんで作ってるボタン（あくまでも最初に出てくるボタンだけ）を、Illustratorで作ってみようという車輪の再発明なのだ。Photoshopをディスってるわけではないのでフォトショ派の人はお手柔らかにお願いしますね。喧嘩上等！

CSS3もマスターしちゃいたい欲張りなアナタに♪

さて、少しまじめな話をすると、今回のボタン作成に関しては、コツを分かってる人ならば、他方でもすぐに似たようなことができると思われる。そして後ほど触れるがCSS3を活用するときにも大いに役立つ。もちろんボタン作成に限らず、さまざまなデザインエレメントに応用可能だ。なので、本記事でも元記事でもよいが、ぜひ守破離していただければと思う。所要時間だが、慣れていれば15〜30秒、このエントリーを見ながらコツコツやって10分〜20分といったところだろうか？（追記：大嘘でしたｗ このあと試しに何秒か測ったら1分半かかった。しかも「角丸」「パスのオフセット」「ライスタライズ」「ドロップシャドウ」はよく使うので全てキーボードショートカットを設定しており、グラデーションもスウォッチ登録しておいてこのザマである）

下準備

普段イラレでWebやらない人は、こちらを見て初期設定を。ぜんぶ読むのがベターだがとりあえず本エントリーを追っかけるだけなら、「まずはイラストレーターの環境設定」の段落だけでOK。記事はCS4ベースだが、CSシリーズならいけるでしょう。

Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） - Memento Mac

さてそれでは実際の制作作業に入る。

Step1. 線幅1pxの線を描く

つまらない初期設定が済んだところで、さっそくこんな感じで四角を描く。変形パネルでピクセルが整数値になるように注意。前段の初期設定がなされていれば、どのように四角を書いても整数値になるはずだ（訂正：表示＞ピクセルプレビューがオンの場合は左のとおりだが、オフの場合は100%表示の状態で四角を描く必要がある）。CS5では「ピクセルグリッドに整合」機能があるらしく、このへんだいぶ楽になった模様だが、詳しくは知らない。

このとき、線が滲んで見えるはずだが気にしない。実はここがイラレでのWebデザインの勘所であり、関ヶ原であり天王山なのだが、天王山にあまりにもすぐ出くわしすぎて、多くの人がここで挫折し「やっぱWebはフォトショでしょ」となる。ラダトームの城を出たらいきなり死霊の騎士に出くわすようなものだ。この滲みを回避するのが次のステップだ。

↓このように1pxのはずの線が実質2px分の線になって、しかも色は薄くなる（下の出来上がりイメージと比べてみると、上のパスがいかにシマリなく滲んでいるか分かる）。アンチエイリアスがかかっているだけで内部的には1pxのデータには違いないのだが、Webなどのディスプレイ出力が前提のメディアでは大問題となる。

で、クリアにする方法。

Step2. 線をクリアにする

滲んでいる線をクリアにするのは意外にも簡単で、「パスのオフセット」を以下のように設定して使う。それだけだ。たびたび手前味噌でなんだが、理屈や応用編は説明すると長くなるのでこちらに譲る（Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題）。

CC以降では？：パスのオフセットではなく「線パレット＞線の位置＞内側」でOKです。カンタン！（CS時代のこの機能は謎のにじみが発生して使えなかった）

↓

Step3. 角を丸くする

ここからは何も難しいことはない。「できる！イラストレーター」でも買ってきて読んでも間に合うレベルだ。こんなかんじ。

Step4. 塗りにグラデーションを設定

さらにこんなかんじ。説明することなさ杉。SEO対策上等！

Step5. ハイライトあてます

ドロップシャドウ効果を使うんだけど、光があたるべきところに光をあてるのでやってることはハイライトです。このへんもPhotoshopと同じ。これでほぼ完成！関係ないけど、ドロップシャドウを本当に影として使う場合、距離をとる場合（影を大きくする場合）はうすーく、距離が近づくにつれて濃くする。なぜかというと現実世界でもそのようになっているからだ。

Step6. 文字入れる

是々非々で。イラレの文字のレンダリングは死ねる。

完成!!

バンザーイ。てかこんなスカスカなチュートリアルでここまで辿りつけた人はいるのでしょうか？

CSS3でも同じことできます。

直近のWebデザイン界では一番ニーズがあり、アツい分野であるHTML5＋CSS3。このCSS3を使っても、今回のようなボタンを作れるし、既にその手のチュートリアルもたくさん見かけるようになってきた。というとじゃあもうデザインソフトいらないじゃん、とはならなくて、たとえば塗りや線を複数重ねたり検討段階でのトライアンドエラーがサクっと出来ないので、餅は餅屋でデザインソフトの出番がなくなることはまずないだろう。

ただそのようにして作成した「凝った」パーツが、最終的にはライトウェイトなCSS3やSVGとして吐き出されるという方向には向かうと思われる。「CSS3かデザインソフトか」ではなく「デザインソフトでデザインし、CSS3やSVGを吐き出す」という関係だ。

話を戻して、簡単なボタンならば、そして上にも書いたようにコツがわかっていれば、CSS3のコードを手打ちしてもこのようなボタンを作れる。詳しくは将来書くかもしれない次のエントリーにゆずるが、たとえばこんなボタンも一切画像パーツを使用せずに作れる。てかリンク先ではCSSソースも見られるので将来書くかもとかなんとかもったいぶる意味あんのかと（ｒｙ

2015年追記：ここに書いたとおり、この程度のボタンなら既にCSSで実装するのが当たり前になった。アピアランスを積み重ねていくイラレの操作性は、CSSでborder、background、text-shadow、border-radius、box-shadowなどを積み重ねていく作業と全く同じである。

おわりに

というわけで、元記事の一番最初に出てくるボタンだけをマネしてみたが、その他のパーツについても、ほぼ同じものをIllustratorでも作成できる。なのでこのエントリーで、普段Photoshopを使っている人が、少しでもIllustratorに興味を持ってくれたら本望だ。あとIllustratorというとすぐに「ベジェ曲線がぁぁぁ」とか言う人が多いのだが、あれを主要ツールとして使うのは文字通り「イラストレーターさん」等だ。Webのデザインするとき使わないとは言わないが、使うシーンとしてはPhotoshopのときのそれとおんなじである。同じWebを作るのだから当たり前といえば当たり前の話だ。

関連エントリ

Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） - Memento Mac
いまさらながらThe new iPad のイラストレーター（ai）形式テンプレートをシェア - Memento Mac