スライスについての話。
Photoshopで作られたデザインPSDから画像を切り出していた、あの時代。
今も切り出しているといえば切り出してはいるのですが、「スライス」機能をかれこれ4年くらい使ってないなということに気づいたので、これまで私が経験したコーディングのオペレーションがどのように変わってきたか、まとめてみたいと思います。
第1章「テーブルコーディング」時代
第2章「CSSコーディング」時代
第3章「HTML5/CSS3」時代の到来
第4章 ツールの進化
第1章「テーブルコーディング」時代
CSSハックを使わずにIE6～8に対応していたあの頃でも触れましたが、10年ほど前はまだCSSコーディングがそれほど浸透していませんでした。
MacにはまだIEが存在し、NetscapeNavigatorというブラウザもありました。
ネスケはデフォルトの背景がグレーだったため、わざわざ背景色#fffを設定していたものです。
それよりもっと前の時代はひたすらpタグにalign=”center”とかつけて中央寄せにしたサイトが量産されていましたが、そこよりちょっとあとの話です。
職人が現れました。
左に画像、右にテキスト、のような横並びのレイアウト。
ボックスを角丸にしたデザイン。
高さや幅が内容に応じて変わる可変レイアウト。
そういったものを実現するために、tableを利用する人たちが現れたのです！
やり方を説明するのがめんどくさくて誰か記事書いてないかと思ったけど、ちょっとググっただけではそんな講座は出てきませんでした＼(^o^)／
きれいにテーブルコーディングされているサイトを探すのが大変でしたが、ここのソースを見てみてください。（2016年1月23日現在このサイトは現役ですが、もしなくなってたらゴメンナサイ）
valign=”top”とか、ほんとなつかしいですね(;´∀｀)
ボックスを9分割して、左上、右上、右下、左下、と角丸の部分はその画像を貼り、列の幅をきっちり指定して、デザイン通りに再現するという技です。
この技術をさらに極めていくと、テーブルを入れ子にし、外側のテーブルだけ上下左右1pxずつ大きくして背景色をつけ、1pxのボーダーを表現したりします。
なぜそんなことするかというと、ブラウザによってテーブルのボーダーのデザインが違ったので、ボーダーを0にしてから、テーブルの入れ子で線を表現したわけですね。
さらに極めていくと、9分割しないで画像をvalign=”bottom”で固定して、セルの背景には別の背景を敷いておくなどして、さまざまな表現ができるようになっていきます。
いずれにしろセルの幅と高さで1px単位の表現ができるので、プロならば常にデザインPSDと1pxもずれないようにコーディングするべき！という、「ピクセルパーフェクト」の概念が生まれました。
実際できあがったブラウザの画面とPSDを重ね合わせてずれがないかチェックしたりしてました。
ズレのないように背景や枠線の装飾、アイコンやボタンなどの画像をデザインPSDから切り出す作業が必要でした。
それが、「スライス」です。
PSD上で、どこをどう切り出すか矩形で選択して設定し、その矩形に名前をつけるとそのファイル名で切り出すことができます。
ここのサイトの画像にあるみたいに、ページのデザイン全体でどこを切り出すか決めるので、コーディングのことも考えながら切り出す必要がありました。
もちろん、組めないデザインはもってのほか、そんなデザイン出すやつはプロじゃない！という世界観だったことと、テーブルレイアウトは比較的見た目でわかりやすいことから、Webデザイナーでコーディングができない人というのはあまり見かけませんでした。
ちなみに、テーブルレイアウトをするうえでどうしてもうまくいかないことがあります。
それは余白。
中身がなにもないセルがあるとうまく幅が取れなかったりするので、いわゆるspacerと呼ばれる1px*1pxの透明なgif画像を用意してセルに入れ、画像のwidthを指定することで幅を確保しようという寸法です。
幅だけでなく、今でいうmin-heightにあたる最低限の高さを確保するために、9分割の中段外側のセルにspacerを置いて高さを設定したりもしました。
たとえばニュースリリースのリストがあったら、
「2016/01/01 ホームページをリニューアルしました。」
日付、余白、タイトル、の3列が必要です。
これを2列にしてスペースとかであけようとすると、ブラウザによって幅が変わっちゃったりするんですね。
そこでわざわざ列を増やして、ここにspacerを入れます。
（入れるのは一番上の行だけで問題ありません）
あっちにもこっちにも、imgだらけ…
テーブル自体の描画もわりと重いのですが、昔の回線、昔のPCスペック、昔のブラウザ、でこれですから、きっとその頃に戻ってネットを徘徊しようと思ったらイライラしっぱなしでしょうね。
第2章「CSSコーディング」時代
そういったテーブルレイアウトでがんばっていたことが、ある程度CSSでできるようになってきた時代。
グローバルメニューをfloatで横並びにしたり、hoverでボタンの色を変えたりできるようになりました。
フォトショップの機能も向上して、よりいっそうリッチなデザインをすることが可能になり、スキューモアフィズムというリアルな質感の表現をするデザインも増えました。
たとえばボタンにドロップシャドウがついて、背面の要素の色が透けて見えたりするわけです。
ところがここで問題が。
透過gifは、透明な部分は完全に透明のドット、それ以外は透明度0のドットですから使えません。
IE6などの古いブラウザでは、α値をもった透過画像を表示できません。
さらに驚くべきことに、昔のIEではpng形式の画像ファイルそのものが表示できなかったのです。
つまり、今でいうレガシーブラウザが現役だった頃はまだ、「背景ごと切り出す」という作業が残っていました。
spacerは不要になっても、画像はなかなか減りません。
コーポレートサイトなんかはとくに、新ブラウザに移行できない環境の企業も多かったため、CSSとテーブルレイアウトのハイブリッド、なんていうサイトもありました。
CSSで表現できることはCSSにやらせるけど、ピクセルパーフェクトのためにはテーブルレイアウトがやめられないってことですね。
第3章「HTML5/CSS3」時代の到来
およそ5年ほど前でしょうか、そろそろHTML5も勉強しないといけないぞ、という空気が漂い始めました。
さらに、CSS3なら角丸が表現できるぞ、というちょっとした衝撃も走りました。
実際にはIE6がいまだに動いていたくらいなので、「古いブラウザでは角が丸くならないじゃないか！」という問題はなくなりませんでした。
ピクセルパーフェクトであればレガシーブラウザ対応は切っても切れませんね。
でもそのうちに、IE6やIE7のシェアが減ってきました。
レガシーブラウザ対応をすればそれだけ工数がかかり、しかもユーザーが少ないから効果も少ない、ということで、お金の面もあり「IE6とか7は、内容が読めれば多少崩れててもいいよ」と言ってくれるようなクライアントが増えてきましたね。
それがだいたい3年ほど前でしょうか。
レイアウトはCSSで行い、共通で再現したい装飾のある部分だけ、画像を書き出せば良くなりました。
そうなると、デザインによっては透過pngが使える箇所も出てきます。
PSDで背景と統合して切り出す必要がなくなったのです。
であればもう簡単な話で、「レイヤーに基づく新規スライス」のような機能を使えばいいんですが、整理されていないPSDではそれもわりと面倒だったりします。
そこで私がずっと使ってる方法がこれ。
たとえばボタンの画像を切り出すなら、
・ボタンの上で[Alt]+右クリック
→これでレイヤーが選択される
・自動選択ツールを選択（隣接にチェック）
・ボタンの外側（レイヤー上の透明部分）をクリック
→シャドウなどを含めてデータのあるドットを避けて選択される
・[Ctrl]+[Shift]+[I]
→選択範囲を反転
・[Alt]+[I]、[Alt]押したまま+[P]
→切り抜き
でボタン画像が切り抜けます。
トリミングツールでも同じことができますのでお好きなほうで！ショートカットさえ覚えて慣れてしまえば、スピードはそんなに変わりません。
背景のレイヤーが邪魔だったり、ボタンをスプライトにするならそのまま「レイヤーを複製」で新規に開いてから保存します。
ガイド引いたり、スライスツールでギリギリを選択したり、レイヤーにファイル名をつける必要はありません。
シェイプレイヤーや、グループ化されたボタンの場合は自動選択が使えないので、
・シェイプレイヤーまたはグループを新規で複製する
・自動選択ツールを選択（隣接と全レイヤーを対象にチェック）
あとは同じように範囲選択して切り抜きです。
イラレが好きな人で「フォトショのレイヤーはめんどくさい」という人は、[Alt]+右クリックでレイヤーを選択できるのを知らないのではないか？と疑っています。
対してフォトショが好きな人からすると、イラレはひとつのレイヤーにオブジェクトがいくつもあって、パスが重なっているとよけいなものまで選択されてしまうなど不便に感じる点があります。
フォトショの肝は、レイヤーがオブジェクト単位になるようにしてグループ化するなど、整理整頓を心がけることです。
単色アイコンのパスがいくつものレイヤーに分かれてるとかうんざりします。
複合化くらいしとけと。
イラレを扱ってる人の方がそのへんはちゃんとしてるように感じます。
こういうところもプロとして美意識持たないといけませんね( ﾟдﾟ)ｳﾑ
最近はアセットの抽出っていう便利な機能もあるので、このあたりの作業はグッと楽になりましたよ。
第4章 ツールの進化
透過pngが使える、ピクセルパーフェクトでなくてよい、CSS3対応のブラウザのみ対象、といった条件が揃っているプロジェクトでは、Photoshopのスライス機能そのものを使うことはあまりなくなりました。
もしスライス機能を使うとしても、下記の参考サイトのような方法を覚えることで作業の効率化を図ることができます。
- 【保存版】現場で使えるPhotoshopの高速スライステクニック5選
- 【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！
- Photoshop CCでスライスを10倍速くする新機能「画像アセット」
- Photoshopでのスライス作業を効率アップし、コーディング時間を短縮するための3つの方法
さらに、2015年からはDreamweaverCCでExtractという機能を使うことができるようになりました。
PSDを開いて画像のアセット抽出などができます。
さらに、要素間の幅・高さが表示できたり、選択している要素のスタイルをコピーしたりできます。
といっても、コーディングしているときは同じプロパティをまとめて書いたりするので、コピー機能はあまり使いません。（使うスタイルだけチェックボックスで選択できますが、その選択するのがめんどくさい）
個人的に一番嬉しいのは、CSSファイルを編集しているときに、選択している要素のスタイルがサジェストで出てくるところですね。
たとえば幅239pxの要素を選択しているときに、CSSのコード上で「w」と打つと「width: 239px;」が出てきます。
画像を選択していても、divなどほかのセレクタでそのサジェストが出てくるから、簡単に幅を設定することができます。
スタイル丸々コピーするより、こっちのほうがありがたかったです。
Extractについては下記のサイトで詳しく説明されているので参考にしてみてください。
- PhotoshopとDreamweaverの新しいワークフロー 第1回：PSDファイルから効率よくデザインする2つの方法
- PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法
- PSDデザインカンプからのコーディングに超便利！Extract for Brackets
まとめ
いかがだったでしょうか。
最近Webデザインを始めた方にはそれほど縁のない話かもしれませんね。
でも、いまだにIE6に対応せざるを得ない案件や、メルマガの配信などでテーブルコーディングが生き残っています。
案外、テーブルコーディングできるだけで重宝がられる現場もあるかもしれません。
私がはじめて使った画像処理ソフトは初代PhotoshopElementsだったんですが、その頃は透過もできないしレイヤーを複数選択することもできなくて…でも当時はぜんぜん辛くなかったんですよね。
仕事でPhotoshopCS2あたりを使っていた頃に家でElementsを触ったら、あれもできないこれもできない、よく使うショートカットも使えない、でイライラしながら作業していたことを覚えています。
もし今CS2を使ったら、やっぱりイライラするんだろうな…