[3147] 伝える技術 〜クレーム対応を例に〜

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［24］
Google Developer Day 2011に行ってきました

秋葉秀樹
< https://bn.dgcr.com/archives/20111107140300.html
>
───────────────────────────────────
こんにちは秋葉です。
11月1日にパシフィコ横浜で行われた「Google Developer Day 2011」に行ってきました。参加総勢2,000人以上という大きなイベントでした。それにしても世の中にはこんなにGoogleファンが多いのか？　と思ってびっくりしてました。

会場ではいくつものブースに分かれてセッションをしているのですが、英語のセッションの場合、会場参加者全員に翻訳イヤホンを配布するという準備もすごいです。きっと同時通訳している人も専門用語に詳しい人じゃないと務まらないんだな。と思ったり。

さて、午前中から基調講演がスタートしたんですが、やはり実際のデモのほうがみなさん魅入っていたようでしたので、そのあたりのレポを。

今後の新しいHTMLでできることの紹介がありました。
※これは将来リリースされるChromeのデモなので現在正式リリースされているものには実装されていないので注意。

【次期リリース予定のChromeを使ったHTML5のデモンストレーション】

■アニメーションを実現するAPIの紹介
< https://picasaweb.google.com/lh/photo/qr6uVkA1PfJEtGGkzDi-vQ
>

今よく知られている、HTML上でアニメーションを行う手段として、
◎CSS3のtransitionsやanimationsを使う方法
◎JavaScriptでsetTimeoutやsetIntervalでタイマーを使い、その中で移動な
どを行う方法
が、あります。

CSS3のほうは、あくまでCSSでできる範囲での動きしか実現できないので、より細かい案件レベルの実装はいままでJavaScriptで行う方法が多かったんですが、これにはちょっとした問題として、環境によっては正しいFPS（1秒間に何コマ動かすという単位）が出ない問題があります。

それをなるべくパフォーマンスも考慮した実装方法として策定されているrequestAnimationFrameのデモがありました。requestAnimationFrameは、JavaScriptでアニメーションさせるための安定かつ最適なメソッドだと言われています。
< https://picasaweb.google.com/lh/photo/GBWhpUe6Mhvg7TqXjqHlyw
>

▽従来の方法
window.setTimeout( function (){
//アニメーション
}, 1000/60 );

▽新しい方法
function callback(time) {
//アニメーション
window. requestAnimationFrame(callback);
};
callback();

※おそらくしばらくはベンダープリフィックスが必要。
（webkitRequestAnimationFrameといった感じ）

〈メリット〉

・プログラム上で複数走っているアニメーションによって起こる負荷を最適化、軽減してくれる。
・ブラウザタブが後ろに回ったら処理をストップしてくれる。
・消費電力もなるべく軽減、やさしい。

■ブラウザからカメラ、マイクロフォンへのアクセス
< https://picasaweb.google.com/lh/photo/5eaNENvP_efZ4ZJqGqcQ6w
>

これは以前、私も記事を書かせてもらいましたが、目に見えて楽しい機能なのでぜひ勉強しておきたいところ。

window.getUserMedia("video", function (stream){
document.querySelector("video").src = window.URL.creatObjectURL(stream);
});

マシンに接続されたWebカメラにアクセスして、ビデオストリーム（要は動画データ）をvideo要素につなぐというもの。実は現在Operaが特殊なビルドで実装していますが、Operaの場合は上記のスクリプトではなく、

window.getUserMedia("video", function (stream){
document.querySelector("video").src = stream;
});

だけで動くことになります。現在仕様が定まっていないのでこのあたりは実装レベルではしばらくブラウザ間で違いが出るかもしれません。

■Full Screen Content
< https://picasaweb.google.com/lh/photo/gpZIx-9tJhfF_T1PpEPjCw
>

ここのサイトでデモが見られました。↓
< http://html5-demos.appspot.com/static/fullscreen.html
>

確かにFlash Videoではフルスクリーン表示が当たり前のように使えますが、video要素に対してフルスクリーンという機能はこのような形で実装されるでしょう、という解説でした。

■Web Audio Data API
< https://picasaweb.google.com/lh/photo/lTLvSU0JdIAl9uioPnHziA
>

Audio要素でしたら、MP3の音源をHTMLベースで鳴らせることで知られていますが、今回のデモでは、内部で音を生成するというもので、HTML5のAudioとはちょっと違った機能らしいです。シンセサイザーってありますよね.あれに近いものです。

音にはサイン波や矩形波といった、「音の基みたいなもの」があって、そこにフィルターを掛けていくことで、よく僕達が聞く音楽のシンセサウンドが作られるのは僕も昔やったことがあるので分かるのですが、それをHTMLベースでやることが目的なんでしょうね。

以前僕は、Audio要素を使ったリズムマシンを作ってみたんですが、遅延がひどいです。テンポを決めてもそのとおりに鳴らず、スネアドラムだけ遅れたり、シンバルが途切れたり、というちょっと残念なことがありましたが、Audio Data APIを使ったデモではとにかくスムーズにリズムを刻んでいました。

音楽をやっていたので、これはぜひ挑戦してみたいです。

〈ブース〉
< https://picasaweb.google.com/lh/photo/RjxRa_pXQQEHdF_rmQhz2g
>

html5j.orgの第0回HTML5 プログラミング&クリエイティブコンテスト最優秀賞受賞作品「100face」が面白かったです。撮った顔写真にエフェクトをかけて、集めた写真をWebGLの3D空間に飛ばしていました。近くにいたのはhtml5j.orgコミュニティではおなじみの白石さん。

〈ボランティア〉
< https://picasaweb.google.com/lh/photo/2WSq7JxZE38qouELx94SWg
>

ボランティアで会場の運営に協力してくれた方が100人以上いたらしく、さすがGoogleの魅力に惹かれた人たちが多いんだな、とエンディングは圧巻。色んなGoogleの方とも仲良くなれた気がします。

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［294］Adobe Photoshop CS3/CS4/CS5編
テキストファイル内の文字を調整して配置しPSDで保存する

古籏一浩
< https://bn.dgcr.com/archives/20111107140200.html
>
───────────────────────────────────
今回は、前回のスクリプトに文字を調整する部分を追加したものです。これまでと同じように、基本となるPhotoshopデータを用意しておく必要があります。また、テキストレイヤーを非表示にしておくと、若干高速に処理されます。


// テキストファイル内の文字を連続配置し1つのPSDファイルとして保存する
(function(){
var psdFile = File.openDialog("基本となるPSDファイルを選択してください","*.psd");
if (!psdFile){ return; } // キャンセルされたら何もしない
var textFile = File.openDialog("配置するテキストファイルを選択してください","*.txt");
if (!textFile){ return; } // キャンセルされたら何もしない
var saveFile = File.saveDialog("保存するPSDファイル名を入力してください");
if (!saveFile){ return; } // キャンセルされたら何もしない
var maxSize = 720; // 最大ピクセル数
//　PSD形式保存オプション
psdOpt = new PhotoshopSaveOptions();
psdOpt.alphaChannels = true;
psdOpt.annotations = true;
psdOpt.embedColorProfile = true;
psdOpt.layers = true;
psdOpt.spotColors = true;
var flag = textFile.open("r");
if (!flag){
alert("ファイルが読み込めません");
return;
}
app.open(psdFile);
var s = (new Date()).getTime();
while(!textFile.eof){
var text = textFile.readln(); // 1行読み込む
var layObj = app.activeDocument.layers[0]; // 一番上のレイヤーを複製
layObj.textItem.contents = text;
var x1 = layObj.bounds[0].value;
var x2 = layObj.bounds[2].value;
var d = x2 - x1;
if (d >= maxSize){ // オーバーフローしている
$.writeln("d="+maxSize / d);
layObj.textItem.horizontalScale = 100 * (maxSize / d);
}
layObj.duplicate();
}
layObj.remove();
var e = (new Date()).getTime();
$.writeln((e-s)/1000+"秒かかりました");
activeDocument.saveAs(saveFile, psdOpt, true, Extension.LOWERCASE);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
})();

DVサイズではなくFullHDサイズにする場合は、以下のように数値を変更してください。4Kサイズでも同様に、以下の行の数値さえ変更すれば対応させることができます。文字の間隔などもあるので、実際にはより小さい値を指定した方がよいでしょう。

var maxSize = 720; // 最大ピクセル数
　↓
var maxSize = 1920; // 最大ピクセル数


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

飯田線の卑怯駅じゃなくて秘境駅といわれる「中井侍駅（なかいさむらいえき）」「為栗駅（してぐりえき）」に行ってきました。秘境駅のランクでは割と上の方と本に書いてあったけど......長野県だと普通の駅というか......。どこも山だから、山の中に駅があっても当然というか。どこが秘境なんだか不明。と思ったら、為栗駅で電車から大量の人がぞろぞろと40人以上下りてくるじゃありませんか。秘境駅って人気なんだな〜と実感。

・長野県のSoftBankの回線速度（とりあえず木曽方面の駅付近）
< http://www.openspc2.org/network/speed/
>

・jQuery Mobile 1.0RC2例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0RC2/
>

・CSS3（スタイルシート Level 3）例文辞典
< http://www.openspc2.org/reibun/CSS3/
>

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184
>

・毎度おなじみASCII.jpの連載
「CSS3でFlash並みアニメが作れるSencha Animator」
< http://ascii.jp/elem/000/000/646/646400/
>

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

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

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの［番外］
伝える技術 〜クレーム対応を例に〜

森　和恵
< https://bn.dgcr.com/archives/20111107140100.html
>
───────────────────────────────────
こんにちは。森和恵です。のびのびになっていましたが、9月に行われた金沢イベントWDFで担当したセッション"伝える技術"...コミュニケーションの3つのポイントをお話しします。
　｜WDF < http://wdf.jp/vol02/
>

●"伝える"で必要なこと

私は、ショールームの説明員、初心者向けパソコンスクール講師、Web制作者、Web系スクール講師...と、どの仕事をしている時も接客業をメインにしてきました。そんな中で、人とのコミュニケーション、伝えることの大切さを痛感しました。伝える時のポイントは3つあると考えています。

1・相手の"状況"を理解する
2・伝えることの"知識"を得る
3・役割にあった"好印象"をかもしだす

この3つのポイントは、どんなコミュニケーションの時も使えます。
今回はWDFで一番反響のあった「クレーム対応」を例にお話しします。

●クレーム対応での伝え方

ショールームの説明員だったときに、毎日のようにクレームに対応していました。製品がうまく使えない...という状況で来られたお客さまは、基本怒っていらっしゃることが多くて、最初は怖い思いをしていました。初対面の人に怒鳴られるところから始まるのですから、当然といえば当然ですね。

...が、ある時気がつきました。お客さまは誰もが何かして欲しいことをお持ちで、どうやったらその要望が伝えられるか不安を抱えているのだと。そう考えるようになってから、対応が怖くなくなりました。どんな理不尽な要求でも相手の話をじっくり伺い、相手の心を気遣いながら、自社のルールに則ってアナウンスする...。たったそれだけのことだったのです。

　｜状況を例えるなら、アニメのナウシカとテトのファーストシーンの
　｜「怖くない...」のシーンを思い浮かべてみてください。(^^ゞ

私がいたのがプリンターメーカーでしたので、年賀状シーズンのクレームが本当に多くありました。いまでも記憶しているのが、プリンターにインクをつけずに「印刷できない！！」というクレームでした。

以前の私なら、「そんなん当たり前やん...」と相手の話もろくに聞こうとせず、すぐにクローズに入ろうとしたでしょう。でも、それではうまくいきませんでした。「インクなんか入ってなかった！」とか、「そんなん知らんかったわ！」とか、逆ギレされることもありました。たとえ、誤解から生じたトラブルだとしても、正論を言われただけではお客さまの怒りが収まらないからです。

メーカーとして愛されるためには、邪険に扱わず、まず相手の話を終わりまで聞き、製品の欠陥ではないにせよ「インクを付けること」へのアナウンスが足りなかったことを詫び（どんなスキルの方が利用するとしても、それがわかるようにしておくことが大切だと考えます）、お客さまが今後困ることがないように、何故インクが必要なのか？　の製品構造から、インクの付け方など最低限の製品知識を丁寧にレクチャーする...といった、相手を下に置かず、メーカーとしての毅然とした姿勢も保ち、きめの細かい対応をすることが必要でした。それが次に繋がるクレーム対応だと思います。

3つのポイントになぞらえれば、

○"状況"を確認──話をとことん聞くことで、相手の要求とそうなってしまった原因を確認する。この時、途中で相手の話を遮ることはせず、相手から言葉がこぼれなくなるまでとことん聞き続けることが大切。聞いている時に「ことが起こった原因」・「お客さまの要望」・「自社のルールと対応方法」を頭で組み立てておく。

○"知識"を確認──自社のルール（製品やサービスの知識、契約内容、対応パターン）をきちんと理解する。そもそも、対応基準となる自社の方針を理解しておかなければ、判断をすることが出来ません。日頃から知識を蓄えておきましょう。

　｜個人的な意見ですが、私はあまりイレギュラー対応というのが好きではあ
　｜りません。お客さまを"えこひいき"で不平等に扱っているだけなのでは？
　｜と思うからです。
　｜「文句いったものが勝ち」的な対応は、対応者の怠慢でしかありませんよ
　｜ね。あくまでも基本はルールに則って対応すべきです。

○"好印象"を与える──接客の基本は"笑顔"なのですが、クレーム対応ではそうは行きません。かといって、怒られている子供のような表情もよくありません。相手に対して迷惑をかけてしまったという気持ちと、会社の代表として毅然とした態度を取りつつ、相手を怖がらせない安心感を出せるように、状況に合わせて表情と口調を変化させる必要があります。

●クレーム対応を嫌がらず恐れずに

今回は、クレーム対応を例にコミュニケーションの3つのポイントをお話しました。こんな風に文章に書くのは簡単ですが、実践するのは難しいと思います。うまくなるためには、場数を踏むことが肝心です。対応を嫌がらず・恐れずにどんどんチャレンジしてください。また、終わった後にレポートをつけて自己反省をすると馴れるのもはやいと思います。

　｜WDFでは、他に「プレゼンテーションでの伝え方」と「セミナーでの伝え
　｜方」を例に挙げました。もし、聞いてみたい！　という方がいらっしゃっ
　｜たら、ご意見フォームからお寄せ下さい。< http://bit.ly/gIHFfu
>

...ということで、今回の報告は終わりです。

さて、次回は、12月のイベントのからみもあるので、jQuery Mobileに関して
ちょっと濃い話をしようかと思います。Theme Roller とか面白い動きもあっ
たようですので。

ではまた次回。（＾θ＾）
　｜Theme Roller < http://jquerymobile.com/themeroller/
>

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu
>

前回の記事にお二人から感想を頂きました。読んで頂けてるんだなぁ...という感動と、自分の意識がさらに深まった気がします。メルマガに書くってこういうことなんですね。考えが派生し繋がっていくって素晴らしいことです。情報共有の目的で、頂いたご意見をちょっとだけご紹介しますね。

　｜前回の記事は、"Webアドバイザーになりたい"
　｜ < https://bn.dgcr.com/archives/20111017140100.html
>

Iさん（ウェブプロデューサー）：お金をくれるはクライアントだけれど、その源泉はサービスを利用するエンドユーザー。だからこそ、エンドユーザーの思いをクライアントに届け、仲立ちするのが第三者としてのディレクターの役割と感じます。

　｜Iさん、ご意見ありがとうございます。まさに現場の意見という感じで勉
　｜強になります。クライアントの利益も守りつつ、エンドユーザーの要望を
　｜くみ取る思索が必要ですね。難しいですが、やりがいのあるポジションだ
　｜と思います。

Mさん（Web制作＆Web系IT講師）：あるサイトリニューアルで、制作会社の選定から交渉などのディレクションをしました。制作会社と発注元企業との橋渡しをしたわけです。双方から話がスムーズに進んで喜ばれました。こういったお仕事「Webアドバイザー」的な仕事も付け加えていきたいと思いますが、果たしてお金を頂ける仕事になるのか？　が悩み所です...。

　｜Mさん、いつも読んでいただいてありがとうございます。近い立場ですね。(^^)
　｜また、今回の案件お疲れさまでした。
　｜自分が直接動かない案件は、もどかしくて大変だったのでは？と推察しま
　｜す。お答えになるかわかりませんが、個人的な意見を述べさせて頂くと、
　｜お金を頂けるのか...ではなく、頂けるように働きかけることが大切です。
　｜自分が動き相手に利益を与えたならば、対価を要求するのはごく自然なこ
　｜です。最初から話をしておくこと、かどがたたない進め方をすればOKかな
　｜と思います。

【森和恵 r360studio 〜 Web系インストラクター 〜 】
<site: http://r360studio.com
>　<twitter: http://twitter.com/r360studio
>
<mail: r360studio@gmail.com >
<サイト制作の教科書 r360study: http://www.facebook.com/r360study
>

近況報告：
12月4日、大阪で開催される「CSS Nite in OSAKA, Vol.28」に登壇します。タイトルは「jQuery Mobileで、ちゃっちゃと作ろう！スマホサイト」。デジクリで何回か記事を書かせて頂いたご縁で登壇することになりました。今回はDreamweaverの枠を超えて、パワーアップした内容でお届けします！
< http://osaka.cssnite.jp/vol28/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（11/07）

・とうとう壊れたキヤノンのプリンター。今まで使ってきたプリンターはHP、HP、キヤノン、キヤノンの4台でいちおう中級機だった。これらのプリンターは動かなくなっても外見は美しかったので、処分するのがいやな気分だった。近所の量販店に行ってプリンターをチェックしたら、あまりの安さに拍子抜け。ローエンド機で4,000円台から、複合機でさえ5,000円台からある。ハイテクな工業製品をこんな値段で売っていいのか。本体はうんと安く、インクはうんと高く売る、いわゆる「インク商法」ってやつだろう。ほぼインク代で本体が買えてしまう。しかもインクがついているのだから、本体はただ同然だ。じつに安い買い物だが、インクを交換するときに高い買い物だなと思うのは間違いない。キヤノンとエプソンの格安複合機はそれぞれコンパクトでスタイリッシュで、仕上げもきれいなので、中高級機ではなくても、もうこれで充分じゃないかと思う。選択のポイントはインクで、キヤノンのカラー一体型か、エプソンの各色独立型か。どちらが経済的かを考えると独立型が有利なような気がするが、プリンターの使用状況を考えるとあまり差は出ないような気もする。あとはキヤノンかエプソンか、好みの問題になる。この程度の金額なら、どっちを選択しても結果に差はないのだが、どっちを選ぶかで、日本の未来が大きく変わるのがTPPである。共同通信の全国電話世論調査では、「参加した方がよい」は38.7％、「参加しない方がよい」は36.1％と拮抗している。参加した場合の影響を政府が十分説明していないとの回答が78.2％に上った。こんな状況でも、やみくもにTPP参加に突っ走ろうとしている愚かな野田首相だが、正しい選択はTPP参加見送りと国内経済の立て直ししかないのだ。堅実な日米関係は、日米とも民主党後の政権が担えばいい。（柴田）

・Siri。ムービーで予習していたので、「Call ○○」をやってみたが、○○が日本人の名前だと無理だった。ナオミやヨーコならいけるかもしれないが試していない。で、次に「Set the timer for 1 minute」にトライ。と、すぐに反応してくれて感動。「Set timer 1 minute」でもOK。そういえばアドレス帳のふりがなのところをアルファベットにしてなかったわ。これを変更すれば？　ニックネームフィールドを追加し、日本語独特名のアルファベット化をしても、別の単語と認識され誤動作。で、ニックネームに英語名を入れて試したら、うまく動作したわ。香港人の気分。電話をかけそうな相手に、LisaやJohnってつけていくか？　誰がLisaやらJohnやら忘れそうだ。日本語英語だからとイギリス英語にしていたら男性ボイス。アメリカ英語だと女性。本体登録時の性別でSiriの性別が決まるのかと思ったよ。日本語版のナビは攻殻機動隊・草薙素子役の田中敦子さんがいいな。数種から選ばせてくれるとなお良し。日本語版はその方が流行りそう〜。／Senaのマグネットフリッパー。3GSのものだが、4Sに使えた。カメラ位置が微妙にずれていて、少しかぶるのだけれど。あとは調光用窓と。しばらくはこれでしのげそう。液晶保護はパワーサポートのクリスタル。3GSに貼っていたアンチグレアの滑り具合が好き。でも4Sのきれいな文字を見てたら、クリスタルにしたくなっちゃったさ。（hammer.mule）
< http://www.apple.com/iphone/features/siri.html
> 　Siri
< > 　この声
< http://www.pawasapo.co.jp/products/iphone/phk01.php
>
クリスタル。一見高そうだが計3枚なのでそうでもない。