[3072] 誰のためのWEBサイトなのか

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［17］
CSS3 border-imageプロパティの基礎をおさえよう

秋葉秀樹
< https://bn.dgcr.com/archives/20110627140300.html
>
───────────────────────────────────
こんにちは、秋葉です。
プレゼン用のスライドを作っているときに気がつかなかったんですが、各ブラウザの対応度にちょっとした注意が必要だったのでお伝えします。

border-imageプロパティとは、文字通り、画像によってボーダー（枠線）を表示するためのものです。四角い画像の4隅の角のサイズだけ固定して、伸びるところは画像をストレッチさせたり、リピートさせたりすることが可能です。

中のテキストなどの量によって変わるボックスのサイズにもちゃんと対応してくれるんですね。今までは角丸ボックスのために、上と下と真ん中の3枚の画像を用意しないといけなかったのですが、これからは1枚の画像だけでいいんですね、便利です（こういった表現をするには、複数背景画像を指定するbackground-imageプロパティでも可能です）。

ただし、使い方に慣れていないと、頭の中でイメージした通りに表示してくれなかったり、ブラウザによって正しく動作しなかったりします。

まずは書き方のルールから。
border-image関連のプロパティは、個別のプロパティに分けて書く方法とショートハンドの方法があります。

【個別のプロパティとその記述例】
● border-image-source: url(demo.png);
　（使用する画像を指定します）
● border-image-slice: 10 20 10 15;
　（画像をスライスする領域の大きさを指定します。上記は上、右、下、左の順番）
● border-image-width: 10px 20px 10px 15px;
　（画像の幅を指定できます。上記は上、右、下、左の順番）
● border-image-outset: 10px 15px;
　（ボックス領域からはみ出させる距離を指定できます。上記は上下、左右の順番）
● border-image-repeat: stretch;
　（伸縮するボーダー領域にある画像をストレッチするか繰り返すか、などが指定できます、上記はストレッチ）

【ショートハンドの記述例】
● border-image: url(demo.png) 60 60 60 60 / 60px 30px 10px 30px repeat;
　（60の単位ナシがborder-image-sliceと同意で60px 30px 10px 30pxがborder-image-widthと同意、伸縮領域の画像は繰り返す）

【上記で注意するべき点】

●個別のプロパティには現在ほとんどのブラウザが対応していない
現時点では、最初に紹介しました「個別のプロパティとその記述例」はIE9、Firefox4、Safari、Chrome、Operaがサポートしていません。使うなら、2番目に紹介した「ショートハンドの記述例」を適用させることになります。

●各ショートハンドの情報は「/」で区切って書く
border-imageに関連するプロパティの中で、数値を持っている同じようなプロパティは、以下の順序で「/」区切りで書くのが原則です。
1. border-image-slice
2. border-image-width
3. border-image-outset

●各ブラウザがborder-image-outsetに対応していない
現時点ではほとんどのブラウザが3番目に記述するべきborder-image-outsetに対応していません。「ショートハンドの記述例」で、border-image-outsetの部分を省略しているのはそのためです。
なお、border-image-outsetによってはみ出した画像は、要素の領域外とみなされることになり、例えばクリック対象にはならないように策定されているようです。

●Operaにてborder-image-sliceは4箇所指定でないと動作しない
各ブラウザ用にベンダープレフィックスが必要です。ここでOperaだけborder-image-sliceの解釈が違うので、比較してみましょう。

　【一般のブラウザの指定】
　-webkit-border-image:url(img/bg.jpg) 45 40 / 45px 40px repeat;
　-moz-border-image:url(img/bg.jpg) 45 40 / 45px 40px repeat;

　【上記をOperaで指定する場合】
　-o-border-image:url(img/bg.jpg) 45 40 45 40 / 45px 40px 45px 40px repeat;

ここでは、border-image-sliceとborder-image-widthの各指定が、「上下45px、左右40px」とサイズを指定していますが、この部分がOperaだけ違っています。「上、右、下、左」と4辺を個別に指定しないと全く動作せず、どうやら画像すら表示されないようです、注意しましょう。

●border-image-sliceに単位はつけない
もうお気づきでしょうが、border-image-sliceにpxなど単位はついていません。
これはビットマップ画像だけではなく、SVGフォーマットの画像にも対応させるためという理由があるからだそうです。

●border-image-repeatには値が4つ
・stretch（画像がストレッチして伸縮する）
・repeat（画像が繰り返される）
・round（画像が繰り返されるが、領域内でスライスサイズに割り切られず、余る場合、画像をストレッチしながら繰り返す）
・space（画像が繰り返されるが、領域内でスライスサイズに割り切られず、余る場合、画像同士の間隔を開けて調整して収める）

border-image関連は結構ハマるので、今回は絞って記事にしてみました。
それでは今日はこのへんで。
今週はほとんど仕事で東京にいます、また再来週！

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［281］Illustrator CS4/CS5編
100ページ分スレッドテキストを作成する

古籏一浩
< https://bn.dgcr.com/archives/20110627140200.html
>
───────────────────────────────────
Illustratorは扱えるけど、InDesignは扱いがよくわからないという人もいるでしょう。でも、ページものの仕事が来てしまったときには、やはり頑張ってInDesignで......という気力がでないこともあります。

そんな場合は、頑張ってIllustrator CS4でページもののPDFを作るという方法もあります。CS4では複数のアートボードが最大100まで作成でき、PDFとして保存すればマルチページになるわけですから、これをどうにか利用したいところです。

ということで、以下のスクリプトは100ページ分のスレッドテキスト（流し込みするテキストフレーム）を作成するものです。


(function(){
var abNum = 100; // 100ページ
var pageW = 595.28; // A4サイズ横幅
var pageH = 841.89; // A4サイズ縦幅
var marginW = 20; // 横のマージン
var marginH = 30; // 縦のマージン
var docObj = app.documents.add(
DocumentColorSpace.RGB,
pageW, // A4サイズ
pageH,
abNum,
DocumentArtboardLayout.GridByRow, // 左から右、上から下
0, // アートボード間の余白
10 // アートボードサイズの平方根。Math.SQRT(abNum)
);
var X = 0;
var Y = pageH * 10;
var prevtxtObj = null;
for(var Y=5; Y>0; Y-=0.5){
for(var X=0; X<5; X+=0.5){
var rx = X*pageW+marginW;
var ry = Y*pageH-marginH;
var rw = pageW-marginW*2;
var rh = pageH-marginH*2;
var rect = activeDocument.pathItems.rectangle(ry, rx, rw, rh);
var txtObj = activeDocument.textFrames.areaText(rect);
txtObj.translate(X*pageW, Y*pageH);
if (prevtxtObj) txtObj.previousFrame = prevtxtObj;
prevtxtObj = txtObj;
}
}
})();


場合によっては2段組にしたい、3段組にしたいこともあります。そのような場合は、以下のスクリプトを使います。


(function(){
var abNum = 100; // 100ページ
var pageW = 595.28; // A4サイズ横幅
var pageH = 841.89; // A4サイズ縦幅
var marginW = 20; // 横のマージン
var marginH = 30; // 縦のマージン
var columnCount = 3; // 段組数
var columnGutter = 40; // 段と段の間隔
var docObj = app.documents.add(
DocumentColorSpace.RGB,
pageW, // A4サイズ
pageH,
abNum,
DocumentArtboardLayout.GridByRow, // 左から右、上から下
0, // アートボード間の余白
10 // アートボードサイズの平方根。Math.SQRT(abNum)
);
var X = 0;
var Y = pageH * 10;
var prevtxtObj = null;
for(var Y=5; Y>0; Y-=0.5){
for(var X=0; X<5; X+=0.5){
var rx = X*pageW+marginW;
var ry = Y*pageH-marginH;
var rw = pageW-marginW*2;
var rh = pageH-marginH*2;
var rect = activeDocument.pathItems.rectangle(ry, rx, rw, rh);
var txtObj = activeDocument.textFrames.areaText(rect);
txtObj.translate(X*pageW, Y*pageH);
txtObj.columnCount = columnCount;
txtObj.columnGutter = columnGutter;
if (prevtxtObj) txtObj.previousFrame = prevtxtObj;
prevtxtObj = txtObj;
}
}
})();


段組数と間隔は以下の2行の値を調整してください。

var columnCount = 3; // 段組数
var columnGutter = 40; // 段と段の間隔


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

Final Cut Pro X出ました。買いました。入れました。作品とかCMを作るにはいいかも。レンダリングしなくてもリアルタイム（マウスを動かすだけでエフェクト処理がリアルタイムに表示される）で処理できます。でも、以前とはかなり違うので、既存のワークフローを置き換えるというのはできないかも。うちみたいな映像素材で大量レンダリング処理するようなのはFinal Cut Pro Xでは無理みたいです。ということで、一応Final Cut Pro Xのページを作成してみました。

・Final Cut Pro X使い方辞典
< http://www.openspc2.org/reibun/FinalCutProX/
>

・毎度おなじみASCII.jpの連載。HTML5+NimbleKitでiPhoneアプリ作り第6回
「NimbleKitで自分だけのiPodアプリを作ろう」
< http://ascii.jp/elem/000/000/614/614469/
>

・Google API Expertが解説する HTML5逆引きリファレンス【発売中!!】
< http://www.amazon.co.jp/dp/4844330349
>

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

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Webディレクター養成ギブス［12］
誰のためのWEBサイトなのか

蓮井慎也
< https://bn.dgcr.com/archives/20110627140100.html
>
───────────────────────────────────
クライアントのWEBサイト担当者は比較的に臆病です。もちろんクライアントにもよりますが、それは官僚主義的な企業体質であればあるほど顕著で、上長の決裁を得られるかどうかなど、ユーザ目線に立っているかというよりも、担当者の目線は社長を含めた上長に向けられています。

売上アップを目指してWEBサイトを作るわけですから、ユーザ目線に立てていない時点で論外ですが、WEB制作側として、結局お金を出してもらうわけですから、最先端のトレンドを反映した自信を持って提案した方ではなく、捨て案の方を採用されたとしても文句は言えません。

そこに「トレンドを分かっていない！」「古い！」などを言うのは、クライアント目線に立てていない証拠であり、自分たちを対応力のなさを棚上げしているに過ぎません。

ユーザ目線に立てないクライアントが、クライアント目線に立てないWEB制作プロダクションと組んだとき、WEB制作進行はうまくいかなかったり、成果の上がらないWEBサイトに仕上がってしまい数か月でクローズするか、再リニューアルになったりと、悲しい結果になることが目に見えています。

しっかりとクライアント目線に立ち、クライアントを通してユーザの存在を意識することが、成果のあるWEBサイトを作り上げる基本スタンスです。

WEBディレクションは相手があってこその業務ですので、互いの思惑や価値観の違いがあることを前提に、営業職と同じような絶妙な駆け引きを必要とされる、人間味溢れた業務と言えます。

だからこそ多くのWEBディレクターは、この基本スタンスを分かっていながら、現実にはなかなか理想通りにはならず、WEBディレクションが難しいと言われることも、優秀なWEBディレクターがいない...と嘆かれる所以ではないかと思います。

それでも、クライアントに限らず、WEB制作メンバーとの絶妙な駆け引きを行う上で大事なことは、繰り返しますが、クライアント目線に立ち、クライアントを通してユーザの存在を意識することです。

例えば、まっすぐな水平線（ボーダー）が引かれていると仮定して、数値の上では水平な線でも、その水平線（ボーダー）の近くになんらかのオブジェクトがあるために、水平には見えず、目の錯覚で斜めにしか見えないとします。WEBデザイナーに修正の依頼をしても、返ってくる答えは「数値上、まっすぐです」が多いと思います。

考えても見てください。この水平線（ボーダー）を見るのはコンピュータでしょうか？　人間でしょうか？　見るのは人間です。数値上で水平だったとしても、人間が見て錯覚を起こしてしまうのであれば、思い切って角度をつけ、水平に見えるようにしたほうがよっぽどいいのです。

このとき、「数値上、まっすぐです」と答えるWEBデザイナーは、少なくともユーザの目線を意識していません。同様に自分の趣味を押し付けて、ユーザ不在の修正を要求するクライアント担当者も悲しいことに存在するため、WEBデザイナー相手にしても、クライアント担当者相手にしても、WEBディレクター自身がどう見えるか？　で意見を戦わせたところで押し問答になるだけで、まったく良い結果を生みません。

「ユーザはどう見えるか？」の言葉を投げかけ、数値や趣味の世界ではない別の次元で、あたかも自分の視点をユーザの視点に置き換えて考えてもらうことが、不毛な押し問答を避ける特効薬になります。

WEBディレクターは、クライアントとWEB制作メンバーだけではなく、ユーザとの間にも板挟み状態であるからこそ、より中立な立ち位置を求められます。ユーザが求めるのであれば、最新のトレンドを取り入れることも必要でしょうが、そこまで過剰に、最新トレンドを追い求める必要があるのだろうか？　と思います。

ユーザにとってのWEBとは、ユーザの目的を達成してもらうことであり、装飾としてのWEBデザインや、回りくどいWEBプログラミング処理は、必要ではあっても十分ではありません。

誤解しないでいただきたいのは、それらを軽視しているわけではありません。それでも過剰スペック分の制作費をクライアントに背負わせるのではなく、またクライアントが求めたとしても、それがユーザのためにならないのであれば、それを制止することもWEBディレクターの（大げさですが）存在意義と言えるでしょう。

クライアントの競合他社がすごいデザインを作り、ユーザに感動を与えているとすれば、それを超えるデザインを作ることが最適解とは言い切れず、あえてシンプルで分かりやすい構成で、ユーザの飽きないデザイン提案もまた最適解なのかもしれません。

どんなにダサいページでも、CSSでレイアウトされていないレガシーなTABLEレイアウトであっても、現実に高い効果を上げているWEBサイトはたくさんあるはずです。

だからと言って、ユーザに偏り過ぎてもいけません。結局、制作費を出すクライアントや、実際にWEBサイトを制作しているWEBデザイナーやWEBプログラマーの意向も重要です。

そのサイトで効果があった／なかったかの結果がすべてを証明するでしょうが、そのような結果を待つのではなく、一呼吸を置いてユーザを少し意識するだけで、悪い結果は未然に防ぐとともに、よい結果を導くことはできます。

WEBサイト制作に限った話ではないと思いますが、我を通してもダメで、クライアントの言いなりでもダメ、ユーザに偏りすぎてもダメ。この三者の絶妙なバランスを保つことが効果の高いWEBサイト制作の秘訣であり、このハンドルを握っているのは、他ならぬWEBディレクターです。だから、WEBディレクションは難しく、難しいからこそ楽しく面白いんですね。

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（6/27）

・「助けの来ない無人島に、男23人とたったひとりの女。現代社会の縮図、東京島で一体何が起るのか？　サバイバル・エンタテインメント、上陸！」という映画「東京島」のDVDを見た。こんなおいしいテーマなのに、腹が立つほどつまらない映画になっていた。桐野夏生の原作は面白かったし、なによりもあの美貌の木村多江が主演というので楽しみにしていた。しかし同時に、絶対違うな、これは木村多江の役ではない、と思っていた。悪い予想通り、本当にどうしようもない主演映画だった。主役の清子は、もっとエロくて、もっと下品で、もっとタフで、もっと狡猾で、もっと図太い、もっといやな女のはずだ。清子は「本能そのままに」とか「変化することでしなやかに生き抜く」などサイトの作品概要に書かれていたが、そんな演技は全然できていない。悪いのは木村多江じゃなくて監督だ。ストーリーはテンポの悪い退屈な展開で、早送りの誘惑をようやく抑え込み、我慢に我慢を重ねて見終えた。そのエンディングも、よくわからないひどいものだった。これはリアルなサバイバルではない。緊張感がまるでない。エンタテインメントとしても中途半端。へたなファンタジーだ。2時間超なのに説明不足って、脚本が悪すぎ。腹立つなあ。（柴田）
< http://tokyo-jima.gaga.ne.jp/index.html
>
東京島公式サイト

・本日掲載の秋葉夫妻結婚披露パーティーに行って来た。というより受付。楽しかった〜。ライブハウスで行われ、新郎らによるバンド演奏、新婦らによるダンス、夫妻作成の動画上映などで、会場大盛り上がり。参加者は150人あまり。Webサイト制作者らはもちろん、彼らの学生時代の友人、生徒さんたちまで。一番奥がステージで、その前はスタンディングスペース。後方はテーブル席と飲食受け取りカウンター。受付は入口近く。ライブやダンスでは、受付にいるのがもどかしく、人にお願いして一部参加。やっぱり生はええわ〜。全身で音を受ける感じ。観客として近くの人たちと一緒に、名前叫んでみたりしたよ。普段はライブに行っても叫んだりしないんだけど、まわりの空気がとてもいい感じで。その後、男性陣の黄色くない声があちこちから。ダンスは予想していたより色っぽい系で驚いた。うぉー、ええやん、ええやん、と思ってまわりを見渡したら、ライブよりステージ前が多かった。というより男性客が増えている感じ......。動画はクロマキー合成もので、Webサイト制作者らはその手間のかかりように驚愕であったが、そうでない人たちはその大変さはわかっていなかったようだ。13分って！　カレーが美味しかったわー。帰り際に、そのカレーの横にいらしたコックさんに、美味しかったと言ったら、喜んでらしたわ。残った分をもらって帰りたかったぐらいよ。おかわりしていた男性陣も多かったし。久しぶりにレッドブルを飲んだわ。あー、ライブ行きたい〜。お土産にもらったクッキーに添えられていたメッセージカード裏には、URLとともに「今日の写真はここにアップしてね！　合い言葉○○」とあった。なるほど、いまはこういう形なんだ。（hammer.mule）