[3052] 代打オレ

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［15］
CSS3 デザインプロフェッショナルガイド　出版記念イベントレポート

秋葉秀樹
< https://bn.dgcr.com/archives/20110530140300.html
>
───────────────────────────────────
こんにちは、秋葉です、やっと本が出ました。
「CSS3 デザインプロフェッショナルガイド」
< http://www.amazon.co.jp/dp/4839935467
>

著者は次の人たちです。
秋葉秀樹、秋葉ちひろ、小山田晃浩、外村和仁、蒲生トシヒロ、宮澤了祐

僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトや、その一部を紹介する実践的なセクションです。アイデアを織り交ぜ、すべてのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので、思い入れのある作品になっています。よかったら是非手に取ってみてくださいね。

さてさて、5月28日には東京に行ってきました。この書籍の発売セミナーイベントがありましたので、今日はそのレポートです。

USTREAMでセミナーの内容を見られます。
前編
< http://www.ustream.tv/recorded/15005500
>
後編
< http://www.ustream.tv/recorded/15008361
>

●外村さんセッション-前編-

トップバッターは外村さん、CSS3のtransitionとanimationを解説しています。書籍には詳しく解説できなかったイージングの濃い話もあります。両方ともアニメーションができるプロパティなんですが、動きをtransitionとanimationの違い、記述の方法などを実際作ったデモで解説しています。

○Transitionsプロパティの解説（外村さんセッション）
transition-durationはアニメーションする時間を指定出来ます、例えば...

　transition-duration: 2s:

とすると2秒かけてアニメーションします。
transition-propertyとは、どのプロパティの値をアニメーションするのか？　という指定が出来ます。
例えば...

　transition-property: left;

にすると、leftの値に限定してアニメーションします。

他にもdelay（遅延）やイージングをコントロールできます。

○Animationプロパティの解説（外村さんセッション）
Transitionsと似ているのですが、大きな違いはいくつもあります。
・キーフレームを指定して、例えば開始から50%のタイミングでCSSの数値状態を細かく指定します。
・無限ループが可能です。
・繰り返す回数が指定できます。

animation-directionとは、アニメーション終了時に繰り返しが指定されていると巻き戻しすることも指定出来ます。

　animation-direction: alternate;

にすると、今までのアニメーションの軌道を巻き戻し再生するという変わったプロパティです。

○イージング（外村さんセッション）
・アニメーションの動き方を指定できます。
・「ずっと等速」「最初ゆっくり、だんだん早く」など

CSSでアニメーションさせるのは簡単にできますが、内部でどういう処理が行われているか？　という原理をJavaScriptに置き換えて解説してくれました。JavaScriptが分からない人でも、できるだけ短いソースで細かく解説してますので、興味のある方は動画を停止しながら一つ一つ確認してみてください。

●小山田さんセッション

まずはCSS3のサポート状況の説明。
古いブラウザへの問題。

○Graceful Degradation
基準を新しいブラウザに持っていき、古いブラウザには妥協するという考え方。実際にはTwitterのホームページなどは、角丸やシャドウ、グラデーションなどをCSS3で表現していますが、IE8以前では諦める。デザインが劣化するけど情報閲覧は可能、機能性も問題ないようにする、といった考え方です。

○Regressive Enhancement
手法としてPolyfillという方法を使います。Graceful Degradationと違いは古いブラウザへの対応を諦めない、という言い方が正しいかもしれませんが、古いIEなどへの対応を正規のCSS3以外の手法で対応するというもの。
PIEというCSSエミュレータ使って、IE6でもborder-radiusなどを実現できるというもの。
< http://www.lawson.co.jp/
>
などが代表的な例です。

元々背景画像などを指定してPIEで角丸などを使うと、深度の問題で隠れてしまうのでその対策なども紹介しています。くわしくは映像をみてください。

○SVGとSessionStrageを使った実際のサイトの紹介
< http://www.kirishima.co.jp/aji/2011/spring/01/
>
PolyfillとはCSSだけでなく、HTML5の技術にも対応する考え方です。例えば、このあたりのライブラリを使うことで、古いIEにもHTML5の技術を使うことが可能になります。
< https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
>

●秋葉のセッション

この言葉を使わなかったんですが、HTML5の「Web Socket」を使ってアンケート投票をしました。双方向通信の面白さが伝わったらうれしいなあ、と。

こちらはスライドも用意しましたので、USTREAMとあわせて見てみてください。
スライドURL（PDF：3.9MB）
< http://akibahideki.com/css3/20110528_event_tokyo/akiba_css3_tokyo.pdf
>
それでは、本をぜひ、よろしくお願いします！！

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［277］Adobe Bridge CS3/CS4/CS5編
レーティングでファイルを選択する

古籏一浩
< https://bn.dgcr.com/archives/20110530140200.html
>
───────────────────────────────────
Bridge CS3/CS4/CS5は、レーティングでファイルを選択することができます。これはファイルを選択しておいて、★をつけていくだけでできる簡単なものです。今回はこのレーティングに応じて（★の数に応じて）ファイルを選択させるスクリプトです。

最初は、現在開かれている最前面のウィンドウ内にある、レーティングがゼロのファイルを選択するスクリプトです。


var doc = app.document;
var fileList = doc.thumbnail.children;
for(var i=0; i<fileList.length; i++){
var rate = fileList[i].rating;
if (rate == 0){
doc.select(doc.thumbnail.children[i]);
}
}

ゼロではなくレーティングが3のものを選択したい場合には、以下のように変更して下さい。

if (rate == 0){
　　↓
if (rate == 3){

レーティングが3以上のものを選択したい場合は以下のように変更します。

if (rate == 0){
　　↓
if (rate >= 3){


上記のスクリプトでは、すでに選択されているファイルは、そのまま選択した状態になります。つまり、レーティングが3だけのファイルを選択する場合には、一度選択を解除しておく必要があります。が、それは面倒だという人は以下のスクリプトを使って下さい。以下の例では最初に選択を解除した後、レーティングが0と4のファイルを選択します。


var doc = app.document;
doc.deselectAll();
var fileList = doc.thumbnail.children;
for(var i=0; i<fileList.length; i++){
var rate = fileList[i].rating;
if ((rate == 0) || (rate == 4)){
doc.select(doc.thumbnail.children[i]);
}
}


もっとも、このような単純な処理はBridgeの場合、手作業でも十分です。そこで、前回の検索スクリプトと組み合わせてみます。すると、より複雑なファイル選択を行うことができるようになります。以下のサンプルは、ファイル名にsampleの文字が含まれており、なおかつレーティングが0か4のファイルだけを選択するものです。


var findText = "sample";
var doc = app.document;
doc.deselectAll();
var fileList = doc.thumbnail.children;
for(var i=0; i<fileList.length; i++){
var rate = fileList[i].rating;
var fName = fileList[i].name;
if ((fName.indexOf(findText) > -1) && ((rate == 0) || (rate == 4))){
doc.select(doc.thumbnail.children[i]);
}
}


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

あっという間に梅雨になってしまい、撮影が怪しい状態に。それよりも、さっさと原稿書かないといけない状態になっていたり......。
SHARPのAndroid携帯AQUOS PHONE。横向きにすると3D表示に早変わり。かなりきれいというか、奥行きがちゃんとある。FUJIFILMの3DカメラW3と比べると、かなりよくなっている感じ。ちなみにHTML5 WebStorageでデータ保存するとAQUOS PHONEの方がGALAXY Sより2倍くらい高速。でも、AQUOS PHONEよりiPhone 4の方がまだ速かったり......。

・毎度おなじみASCII.jpの連載。HTML5+NimbleKitでiPhoneアプリ作り第2回「NimbleKitをインストールしてJSでiPhoneアプリ開発」
< http://ascii.jp/elem/000/000/608/608254/
>

・Galaxy S (アンドロイド携帯) 使い方辞典
< http://www.openspc2.org/reibun/Android/Galaxy_S/
>

・iPhone/iPad × HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>

・HTML5+JavaScriptアイデア＆実践サンプル
< http://www.amazon.co.jp/dp/4048704486
>

・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Webディレクター養成ギブス［11］
代打オレ

蓮井慎也
< https://bn.dgcr.com/archives/20110530140100.html
>
───────────────────────────────────
インターネットが普及して約15年。WEB黎明期と呼ばれる時代からWEB制作業務を手がけてきた方の中で、現在もWEBデザインやプログラミング業務の現役の方は多いと思います。と同時に、分業化が進み、当時はやっていたが今ではWEB制作業務をやらずに、上流工程のみを業務にされている方もたくさんいらっしゃると思います。

また、WEB黎明期以降の分業化が進んだ後、WEB業界に入った方の中で、WEB制作業務を経験せずWEBディレクションを業務にしている方も多数いらっしゃるでしょう。

WEBディレクション業務とは、分業化が進むにつれて深く狭い知識が求められるWEB制作業務とは対照的に、WEB制作に関する知識（デザインからプログラミングまで）を広く浅く求められます。しかし、両方を同時に完璧にこなすことは至難の業であると思います。

ところが、今の時代はプレーヤーでありつつマネジメントができるプレイングマネージャが求められるように、分業化が進むWEB制作現場でも、WEBディレクターにもWEB制作スキルが求められるようになってくると思います。

WEB制作業務は、1990年代からは考えられないくらい高度化・複雑化しました。そうなるにつれて市場規模は大きくなる一方、WEB制作に関わる人は増え、競争原理からWEB制作費用はダウンしてきました。

WEB制作費用のダウンに伴い、WEB制作会社も利益確保が難しくなり、新戦力の投入もむずかしくなります。時間経過とともに、社内の人間はどんどん高齢化しています。特にWEB制作業務を離れて久しい「WEB制作スキルなどなくてへっちゃら」と思っているWEBディレクターは、少しは危機感を持つぐらいちょうどがいいのかもしれません。WEB制作スキルを磨くことを疎かにしていると、日進月歩で進む技術にまったくついていけなくなり、そのうち理解すらできなくなる日がくるかもしれません。

それはWEB黎明期に、インターネットが珍しかったということもあり、受注額も相当大きく、WEBを少し知っているだけで、人脈を駆使して案件とカネだけは引っ張る人を思い出します。なんちゃってWEBプロデューサーとか、WEBディレクターといった肩書の人が多かった時代です。

ところが時代が進むにつれ、なんちゃっての人たちが、この業界から少なくなっていった（淘汰された）ような気がします。今度は、制作業務から遠く離れてしまい、浅く広い知識だけ身につければ十分やっていける、またはWEB制作技術についていこうとしなくなったWEBディレクターが、同じ轍を踏むのではないか？　と少し心配だったりします。

もちろん培った人脈で仕事はとれますが、なんちゃっての人が多かった時代とは異なり、クライアントは以前よりWEB制作費にシビアだということです。受注単価の減少は、WEB制作者への発注額の低下に伴う品質の低下か、発注額維持による薄利多売での提案制度の低下を招きます。年々歳をとるに従い、掛かる経費も増しますことから、つまるところ、こんな金額ではやっていけない...と、この業界から足を洗うことになりかねません。

WEB制作スキルを追いかけないWEBディレクターは、WEB黎明期のWEBを知らない発注だけする人以上に、"シブチン"か"提案力のない人"レッテルを貼られる未来が待っているかもしれません。

そもそも私は、WEBディレクション業務とWEB制作業務は切り離すべきと主張しています。極端な言い方をすると、WEBディレクション業務とWEB制作業務で使う、頭と体の使い方が対照的すぎて、担当案件量にもよりますが、両方を同時平行で完璧にこなすことは神業に近いと思うのです。

それでも時代のニーズなのか、経営する側の怠慢なのかは分かりませんが、プレイングマネージャーならぬ、WEBディレクションとWEB制作の両方をこなせる、ユーティリティプレイヤーであったほうが、未だに混沌としたWEB業界で長く生きられると思います。

WEBディレクションの突き抜けたスキルを持ち、その他のスキルは平均的に持っておいて、平時は自分が最も得意とするWEBディレクターとして仕事をしながら、有事は平均的なスキルで社内ないしチーム内のフォロー役に回るのが理想的です。

職人（スペシャリスト）が求められた時代から、一般企業でゼネラリストが求められる時代に移り変わったように、WEB業界でもゼネラリストが求められる時代が到来しています。制作スキルさえあれば、所属する企業が倒産しても安心です。客先訪問して打ち合わせた人脈を駆使すれば、企業に所属する・しないに関係なく、仕事は必ず見つかるはずです（大企業相手では、個人では難しい局面はあります）。

だからこそ、普段からWEBディレクション業務の合間にWEB制作スキルを磨き、できればコーポレートサイトや社内コンテンツを担当させてもらうなど、直接クライアントに迷惑のかからない場所で実践しておくのがベターですが、難しい場合は、自分のサイトでも作って、セルフブランディングをしていってもいいかもしれません。

解釈や捉え方を間違ってはいけないのが、将来的にはWEBディレクターなど、上流工程に位置する職務に向かうべきです。WEB制作が得意だからと、WEB制作業務ばかりやっていると、年齢を重ねるごとに若い新世代の体力と感性には敵わず、そのときになって上流工程を担当しようとしても、頭と体の使い方が対照的なので、なかなか上流工程の仕事に馴染めないまま、いい歳になってもクライアント筋への人脈もないまま、WEB業界内での寿命を短くする結果に繋がるかもしれません。

いつでもWEBスキルを"アテ"にされては困りますが、有事のときや、納品前の最終局面で「代打オレ！」と制作現場に降りられるのが理想です。数日睡眠が摂れないような現場では、神と崇められるかもしれません（制作スキルが中途半端だとウザがられます）。

今のWEB制作現場で、年度末のバタバタのときに自分で自分を「代打オレ！」と指名して以来、WEBディレクション業務と平行してWEB制作・更新業務を行っていますが、常態化してしまい、WEBディレクター改め更新オペレーターと名乗るべきかもしれません。

これが一番ダメなパターンです。私を反面教師にバランスよくがんばってください。

【蓮井慎也 / Shinya Hasui】WEBディレクター兼更新オペレーター
地元のWEB制作プロダクションに所属。大手通販企業に常駐しWEB制作をしています。
< http://twitter.com/hasui
>
< http://ja-jp.facebook.com/hasui
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（5/30）

・「想定外」という言葉が3.11のあとしばらく、政府や東電、学者などから繰り返されたが、あんたらがイージーに使う言葉ではないだろうと、いつも不愉快だった。先日、わたしの好きな読売コラム「いやはや語辞典」にようやく「想定外」が登場した。作家の中村文則は「危機管理に携わる人間が、この地震の多い国で震災を『想定外』と簡単に言ってしまう感覚は恐ろしい」「軽々しく使ってしまう風潮が、今回の悲劇をさらに大きくしているように思う」と書く。まったく同感である。土木学会など3学会が「われわれが想定外という言葉を使うとき、専門家としての言い訳や弁解であってはならない」と指摘する共同緊急声明を発表した。まったく同感である。「想定」とは「こういう情況・条件だったらと、仮に考えてみること」である（岩波国語辞典）。「想定」もしない連中が「想定外」を使うなんて無責任も甚だしく、詐欺みたいなものだ。じっさい、原発に邁進した人たちは、大地震も大津波も「想定したくなかった」から思考停止したせいで、こういう大事故が起きてしまったのではないか。言い訳、弁解、逃げに徹する菅首相を見ていると、国家の危機管理はとうてい任せられない。あんた以外なら誰でもいい（フランケン岡田はさすがに困るが）とヤケクソ気分で言いたい。「想定外だから仕方ないという話ではない」と言っていたのがルーピー鳩山だが、あんたに言われたくないと全国民が思っている。ところで、かつて不利な状況にも平静を装う「想定内」を繰り返した、自分の危機管理に甘い、今は塀の中の男がいたな。「想定」の内外を言い訳するやつにろくな人間はいない。（柴田）

・Webディレクションって何だ？　と、ふと考え込むことがある。フリーだと営業含めて全部やることがほとんど。人にお願いする時は、怖いので優秀な人に頼むことになり、ほぼお任せ状態。これってディレクションとは言えないような。お願いする前に、こちらで調査やら要件やらまとめているから、ディレクションといえばディレクションなのだが、勘の良い人や自分よりデキル人に採算度外視で頼むと、逆に教わったりする。学べることが多いのだ。そういう人から頼まれたお仕事も採算度外視で請ける。そういえば、そういう人とやったお仕事の類似パターンが続けて舞い込んだりするんだよなぁ。／先週、書籍「IAシンキング」を出された坂本氏のワークショップセミナーを受講。知らなかった単語があったり、IA側からの考えってこうなんだ、と学べること多くて、とても充実した時間を過ごした。フリーなもんで、IAも何もかもひっくるめてやってるし、クライアントにも提案する。グループワークでは、ワイヤーフレームを作るものなのに、スペースの大きさや動線を、見せ方まで考えて迷宮に入り込みそうに。ワークショップとはいえ、実際に依頼があったものとして考えるわけで、クライアントの言いそうなこと、突っ込まれるところも空耳。で、制作順序がごっちゃになるのね。この内容はこのスペースに入るんだろうか、こういうコンテンツならこういう見せ方にした方がいいから、じゃあここにこのぐらいのスペースは確保して、いやいや、そうするとその下のコンテンツが...。そもそも、こんな見せ方で効果的なんだろうか、もっと良い見せ方は......。細かな見せ方を考えるのはデザイナーさんのお仕事だよ。まずはワイヤーフレームなんだよ。関西だとIAだけのお仕事って難しいんだよな......。（hammer.mule）
< http://www.amazon.co.jp/exec/obidos/ASIN/4862671063/dgcrcom-22/
>
→アマゾンで「IAシンキング」を見る（レビュー4件）