結構前ですが、10月17日、鷹野雅弘さん登壇のCSS Nite行ってきました。
紹介されていて気になったWEB制作の技術などをまとめておきます。
ほんとに、いろいろためになりました。
Illustrator
ライブカラー（CS3～）
複数のカラーバリエーションの提出が必要な時などに活躍。CS3からあることに驚きです。カラーピッカーをグリグリ回すだけでそれとなく使えるすごさ。
・Illustratorの「オブジェクトの再配色」を使ってカラーバリエーションを作る方法 | 株式会社LIG
・カラーバリエーションを作る以外にも、Illustratorのライブカラーは最強 - DTP Transit
文字タッチツール(CC～)
文字をオブジェクトのように感覚的に変形・回転・移動ができます。
アニメやゲームのタイトルで最近よく見かけるような文字組みデザインをちょちょいと作れてしまいます。
・【Illustrator】意外と知られていない便利機能（文字タッチツール）をご紹介！ - アラタナエンジニアブログ
IllustratorでWEB制作をする際の注意点や設定
WEB制作がIllustrator派の方は必見。設定をしっかり守ってaiを作成すれば、コーダーから厚い信頼を得られるかもしれません。
・IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） - DTP Transit
Photoshop
コンテンツに応じる（CS4～）
Photoshopは画像上の人物を判別できるのでこのような技術が可能なんだそうです。バックグラウンドな技術すごい。
編集→コンテンツに応じて拡大・縮小
スポット修復ツール（CS5～）
スタンプツールより便利になった修復ツール。余計なシミや電線など簡単に修正できます。昔、CS5の発表イベントでみた時は驚きでした。
髪の毛などの切り抜き(CS5～)
これはよく使う便利機能。細かく複雑な部分をササッと自動で自然に切り抜けます。マスクで出力すれば元データを壊さず、修正もできます。
・髪の毛の切り抜きも超簡単！スゴイぞCS5！ : Photoshop テクニックス
スライス⇒画像アセット（CC～）
画像アセットの設定を有効にしてPSDを保存をすると、定義した名前で自動スライスしてくれる。CCで推されている機能らしく、今後スライスはなくなるとのこと。
・Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加 | Stocker.jp / diary
WEBレイアウトの移り変わり
テーブルレイアウト
↓
CSSレイアウト
↓
マルチデバイスレイアウト
懐かしいです、テーブルレイアウト。僕がwebに足を踏み入れた頃はまだ良く使われていました。驚くことに今でもテーブルレイアウトが使われてるサイトはあったりするんです。そんなサイトはいっそのことリニューアルしないでそのままおいておいて欲しいと思ったり…（管理者は超大変だろうけど）。マルチデバイスレイアウトもCSSレイアウトの一部なのですが、レスポンシブ、本当に増えました。
画面サイズの多様化
スマートフォンの画面が大型化したり、タブレットの画面が小型化したりで、画面サイズは今や20000を超える種類があります。
さらにディスプレイはサイズの多様化だけでなく高解像度化しています。Retinaディスプレイの 1csspx = 2dpx を筆頭に、近年はiPhone6やnexusなど3dpx端末もでてきて収集がつかない状況に。
脱ビットマップ（JPG、GIF、PNG）
モダンブラウザの普及によって今までは画像でしか再現できなかったものをCSS3やSVGで表現できるようになりました。
これら、「デバイスの画面サイズの多様化」と「脱ビットマップ」によってマルチデバイスレイアウトが積極的に取り入れられるようになりました。
WEBとIllustrator
最近のWEBはピクセルパーフェクトの必要性がなくなりIllustratorとWEBデザインの相性が良くなってきています。確かに、Bootstrapなどのグリッドシステムを使うとカラム数と左右の余白がわかればそれなりにコーディングが出来てしまいます。
完全にPhotoshop派でしたが、もうそろそろIllustratorでもいいんじゃない？と思ってきています。
アイコンの移り変わり
サイトごとに自分でつくっていたオレオレアイコンからFontAwesomeなどのアイコンを利用する機会が増えてきました。制作に便利なだけでなく、普遍的な見慣れたアイコンはユーザーにも親しみやすいので良いとのこと。
・楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
感想
自分も含め、現場で働いている人でもAdobe製品のCS3時代から存在してる技術を知らない人が多くいるようでした。現場で働いてるからこそ知らないのかもしれませんが。
新しい技術やツールがたくさん出て便利になっているけど、それを使わなくてもなんとかなる現状。ネットで「新しい技術がでた」とか「こういう技術が流行っている」と騒がれてプレッシャーを感じたりしますが、現場では古い技術でなに不自由なく世の中がまわっている事実もあって、そのギャップにどうしたらいいのかわからなくなることもあります。
ちょっと前に話題になった、新しい技術がどんどん出てきて、それを追うのに疲れるって記事を見て「あぁ、そうだなぁ」と。そういうのはイノベーターやアーリーアダプターにまかせて、流行りきってから導入を考えても遅くないと思います。流行りきった後にその技術が現場の役に立つかどうかを検討するほうが、小さい制作会社にとってはリスクが少ないのでいいのではないかと。WEBの技術は便利うんぬん以前に、かなしいかな、流行り廃りがあったりするので。最悪の場合、便利で利用してるサービスが突然使えなくなってしまうことも考えられます。
CSSniteという老舗のセミナーということもあってか出席者は30代～がほとんどのようでした。きっとIE6とかtableレイアウトと戦ってきた人たちだと思います。少しずつweb業界も高齢化しているんだなぁと少ししみじみしました。
最後に、京都は貴重なWEBのセミナーを開催してくれたCSS Niteに感謝です。
Webデザインの現場ですぐに役立つ Photoshop仕事術
- 作者: 鷹野雅弘,黒葛原道,牧下浩之,三浦将
- 出版社/メーカー: ソシム
- 発売日: 2015/03/13
- メディア: 単行本
- この商品を含むブログを見る
