テクニカルなセミナーでテクニカルじゃないことを話します

画像:セミナー告知サイトのスクリーンショット

日本Webデザイナーズ協会株式会社インヴォーグが主催するセミナーに登壇することになりました。

開催は2/2(土)に大阪、2/23(土)に東京です。
無料なので空いてる方はぜひどうぞ、詳細はこちら!
ちなみにインヴォーグは私がテクニカルアドバイザーでありCTOとして就任しているWeb制作会社です。
主にチームのワークフロー改善や技術研究などで参加しています。
私のセッションタイトルは「HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道」と題しました。
これだけWebブラウザでできることが増える中で、エンジニアではなくデザイナーがどう考えて技術と向き合っていくべきか?について、テクニカルアドバイザーとして逆に学んだことを交えてお話ししたいと思います。
対象は学生さん、Webデザイナーさん、非エンジニアの方でWeb制作に関わる方という割と入門的なレベルで、テクニカルな知識はなく、HTML5などについてあまりよくわからないという方に来ていただけたらと思います。
あと、別セッションのFlashデベロッパの荒井さんとAdobe AIRでつくった海遊館アプリ「Ikesu」の苦労話についてもちょっとお話するかもしれません。(これは時間があればです)
というわけで結局セミナー告知になってしまいますが、以下のような内容をキーノートにしたいと考えています、ご参考にまで。

デザイナーとHTML5技術の向き合い方

HTML5は従来のHTMLとくらべてよりアプリのようなことができると言われていますが、そういうと「どうせJavaScriptとかエンジニア向けのスキルが要るんでしょ?」と思われるんですが、そうではありません。
このセッションがこれからの案件で関わることになるだろうブラウザの新しいHTML5という技術をどう使い、ユーザに届けるデザインを考えるか?
というテーマでプログラミングスキルがない方に参考になればと思います。
実際にあった「比較的簡単」なHTML5案件を経験に、カタチを変えて紹介していきたいと思います。

デザイナーの定義を考え直そう

コーディングスキルや支援ツール、CSSプリプロセッサによる効率化やグラフィック制作のためのアプリケーションスキルは私は大事だと考えています。
今の制作現場がどうしてもそのあたりを強調し必要としているように思えますので、やはりこれからデザイナーを目指す方はそういった方向ばかり向きがちなのですが、カタチの見えない「ユーザ行動のデザイン」をどう考えるか?について、あるサンプルを用いて考えてもらおうと思います。
実はデザイナーとして第一に必要なスキルなんだということで。

無駄な時間ばかり過ぎる社内勉強会の参考になれば

制作会社のアドバイザーをやっているとこういうシーンを見かけます。
言語の違うディレクターやデザイナーやエンジニアがそれぞれの言語で社内勉強会をやってナレッジを共有しようとしていますが、これはほとんど意味がありません。
あるエンジニアがソースコードを見せて仕様の解説をデザイナーの前でやったり、あるデザイナーが海外のデザインの流行を紹介するがそのメリットに触れないということは、ちょっとした知識の仕入れにはなるかもしれませんが、それだけでは費用対効果を理由に社内勉強会は持続できないところが多いようです。
なぜか?という理由を考えればわかります。
目的はチームの強化なのに、強化しないことに時間と労力を使う意味がないからです。
なのでこのセッションでは「ブラウザにこんな機能が付くとして、どんなWebサイトを提案しますか?」といった考えで色々な立場の人が意見を出し合うという方法を制作現場に提案したいと思います。

JavaScriptはデザインによる解決法のひとつ

「デザインとは見た目ではなく、設計だ」と言う人が増えてますが、私はJavaScriptの実装というのはユーザ行動をデザインするうえでの解決方法の一つ、つまりこれもデザインと考えています。
ユーザの欲求に対しインターフェイスはデータを提供します。
視覚的にわかりやすいレイアウトにするデザインの解決法があるとしたら、制御(JavaScript)によるデザインの解決方法もあります。
ではデザイナーはJavaScriptを覚えるべきか?と聞かれます。
しかし「デザイナーが何を目指すか?」が重要なので、そういう意味でのスキルは必須ではないと考えています。
チームで作り上げられるため、その目的に見合い、デザイナー自身が無理のないスキルアップを目指すということはエンジニアのマネをするのではなくエンジニアと協業できるスキルを覚えるということが特にこれからは大事と考えています。
と、色々書きましたが興味ある方はどなたでもどうぞ!

スマホサイトの機能比較表はどうデザインするか?

モバイルの画面に収まりきらない横にも縦にも長い製品スペック比較表 

▲モバイルの画面に収まりきらない横にも縦にも長い製品スペック比較表

家電メーカーサイトなどに多く見られる製品の性能比較表。
項目の多い比較表を狭いモバイルの画面でどう見せるか?について考えてみました。
 
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。
しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。
フリックで横スライドしても狭い画面だとわかりにくい図
指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応/非対応」の場所などは、何が「対応/非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
(矢印アイコン http://yajidesign.com/

ユーザは何を調べたいのか?を考え直す

priority_elements.jpg

▲ユーザが天秤にかけやすい項目を調査する

冗長なスペック表を並べられても、すべてを見たいユーザは少ないはずです。

「自分の気になる性能はカメラの画素数です」
という人にはカメラ画素数だけで比較させたほうが、ユーザが調べたい欲求を解決させる近道になる場合もあります。

PCサイトの慣習を一旦捨て、ユーザ行動の本質を根本から考え直す

sort.jpg
例えばカメラの項目で使われる「○○万画素」というものは、通常生活で馴染みが薄い「画素」という単語に対してはその基準がいまいちつかめません。
このような数字が並べられてもユーザは戸惑うことがあります。
それであればモバイルサイトで横に冗長な表より、製品比較フィルター機能にしてしまったほうが目的が達成されやすい場合もあります。
つまり「カメラ画素数」が気になる人には、まずカメラ画素数の高い順にソートができ、「スクリーンサイズ」が気になる人はスクリーンサイズの高い順にソートし直す機能を提供したほうが、少なくとも横や縦に長い比較表より「ユーザの目的を達成しやすい」という意味では有効かもしれません。

現実的な実装はどうするか?

JSONなどで商品スペック情報を管理してPC版とスマホ版で共通して使い回すための図解

ここではJSONなどで、商品スペック情報を管理して、PC版の比較表とスマホ版での並び替え機能を共通して使い回すと運用もある程度楽になるかもしれません。 
ここでは簡単なデモサンプルをつくってみました。PCで見られている方はブラウザサイズを狭くしてみてください、スマホ用に切り替わります。
ブレイクポイントは横幅767pxでPC用とモバイル用に切り替えています。(内容は簡略化しています)
【テスト用のデモ】(若干挙動がおかしい部分はご容赦を)
【デモのスクリーンショット】
demo.jpg
 

製品のサジェストまで考える

狭い画面なりに比較項目に絞ってソートさせて機能比較ができたとして、もう少しユーザの欲求というものを割って考えてみます。

主に3つの特徴に分類してみました。 
・数値で比較できる要素(並び替えが可能)
・はいorいいえの要素(順位付けが不可能) 
・ビジュアルで判断される要素(順位付けが不可能)
user.jpg
色、外観のデザインを比較したい場合、比較そのものがユーザの好みによるのでこちらで順位付けができません。
よって上図のように、それぞれの特徴でユーザが比較したいカテゴリに分類して、短い表やビジュアルにまとめることも場合によっては検討しなくてはいけません。
「あなたにぴったりの製品をおすすめしますよ!」という意志が込められた製品比較表であっても良いでしょう。 
わかりにくい機能比較表は、購買検討しているユーザにとっては非常に残念な存在です。
比較表は決して「サジェスト」を主な目的としているわけではないにせよ、購入を悩んでいる顧客に「あなたにお似合いです」と言われたほうが顧客も嬉しいと思われるケースがあります。 
ただ機能比較表をつくりたいのであれば、ただ横に長く列挙するのではなく、「ユーザは何を知りたいのか?」の本質を考えてモバイルを前提にしたデザインをその都度考えることが大事です。 
モバイルサイトのデザインは制約があるがゆえ、ユーザが求めている本質を考えさせられる良い勉強になります。
今回の例が必ずしも正しいパターンとなるかはわかりませんが、レイアウトや技術で解決するデザインより、ユーザの欲求を知るということの方が先決かもしれません。

人のデザインを私たちはどう評価し学ぶべきか

画像:ユニクロの電車内広告

先日ユニクロの電車内中吊り広告や新聞広告のデザインが話題になりました。
文字だらけのレイアウト、赤をベース、黒と黄色という昔のスーパーのチラシ風のテイストで、「不快感しか感じられない」「センスを疑う」といった、どちらかというと批判的な意見のほうが目立ったようにも思えます。
またそんな声の主が、デザイン関係あるいはライターなど、私と近い業界にいる人の声が多かったことも気になりました。
さらにNAVERにまでまとめられたようです。
どうしたユニクロ!?ひどすぎる新聞広告に心配の声まで!まとめ
今回は広告デザインをどの視点から自分なりに評価するべきかを考えてみたいと思います。

デザインの先には必ずユーザがいる

広告をつくる仕事に携わる広告業界の人だけでなければクライアントでもなく、私たちがデザインしてつくるものには必ずユーザがいます。
電車内広告デザイン、Webデザイン、プロダクトデザイン、種類は違えどその先にユーザがいることに例外はありません。

もしもデザインを勉強している人だったら、「なぜこうなった?」をまず自分なりに考察するチカラを養うために考えてみたいことです。

「あんたはウチのお客さんが見えてるのか?」と言われて…

私は過去にデザインの事例や潮流などが紹介されている書籍を見ては、流行のデザインや基礎などそれなりに研究したつもりですが、そのような書籍のほとんどは「この広告デザインによって得た成功効果」というデータまでは載っていません。
つまりデザインの潮流を学習するだけでその先のユーザがどう行動したかを理解するのは難しい、ということです。
20年ほど前、私が駆け出しの頃に海外の事例を学んでクライアントに見せた自分のデザインに対し「あんたはウチのお客さんが見えてるのか?」と言われたことを思い出しました。
私は当時、東急線の窓上ポスター(車額とも言われていた)を売っていて、自分で電話営業して契約を決めクライアントと折衝してデザインを仕上げ印刷入稿、電鉄会社に納品ということを一人で全部やっていたので、クライアントのそういった声を聞けたのです。
当時の社内ポスターは規格によって色々な料金設定がありますが、私が売っていたのは1車両に1枚、250車両分に付けられていたハーフ(半分サイズ)ポスターで月額30万円。
路線図のとなりに掲載されるため注目度の高さと網棚に隠れないというメリットはレギュラーポスターと比べると有利な特徴はありますが、当時はバブル崩壊して間もない時期、中小零細にとって月額30万円の交通広告費は必死ものです。
クライアントの社長さんや院長さん、学長さんが顧客にどう響かせるかを一緒に考えたものでした。
私も携わった電車内広告で、あえて文字だけの広告を「仕掛け」たことはあります。
ただしそういう「仕掛け」の場合、いつまでもそのままということはせず掲載期間を区切って意匠替えをしたり、特別なイベントの時期だけ数週間のみ掲載することが多かったように記憶しています。
このユニクロの場合もそれなりの予算を投じて行っただろうし、それなりの「仕掛け」があったのかもしれません。
少なくともユーザに向けて、どうアプローチしたかったのかを学ぶことができると思います。

■デザインとは表面上の視覚ではなく背景にいる人の行動を予測して設計するもの

色やレイアウト、メタファなどは私たちで確認できる表面的な要素に対し、それを見たユーザの動向は私たちに見えにくい位置にあります。
このユーザ動向を背面的な要素としたら、背面的な要素に存在するユーザにどうアプローチしているのかを考えることがデザインの本当の評価につながるのだと私は思っています。
画像:デザインにおける第三者が評価しやすい領域と見えにくい領域
表面的要素を見て「不快感」と思う人は思うし、そう感じないユーザもいないとは限りません。
大事なことは、その不快感と感じないユーザがクライアントの事業とどう関係性を持っているかを考えることが大事で、自分の考えばかりをデザインに取り入れるべきではないということです。
少なくとも表面上得られるヒントから「なんでこんなデザインにしたんだろう?」を考えることも必要なトレーニングだと思っています。

自分の経験でしか感想は語れないから正しいかどうかなんてわからない

この業界を経験している多くの人、そのほとんどの経歴なんて10〜20年程度です。
自分ができるモノに対する評価とは、自分が過ごしてきた時間の中で得た経験の中から初めて評価できます。
「好き」とか「嫌い」とか「カッコいい」とか「ダサい」とか、その多くは自分の経験でしか得られなかったことと言えるでしょう。
もっと多くの年齢層か感受するシチュエーションを考えてみると私にはとても難しい話です、しかし考えることをやめてはいけないように思えます。
もう表面的にしか見えない評価、それはデザインの評価ではないと思うんです。
「人のデザインには何らかの因果性がある」ということをもっと人から学ぶとするか。と。

Safari for iOS 6で写真撮影が可能に、将来の「スマホ対応デザイン」について思う

2012-09-23 23.57.29.jpg

iOS6がリリースとなり、Safariも内部的に色々なAPIを実装しました。

私は2012年5月のCSS Nite in OSAKA, Vol.30をはじめ、色々なセミナーにてブラウザから直接写真を撮影できて、そのままサーバに送信するデモを行ってきて、サービスに貢献できそうなアイデアなどもお話する機会をいただきました。
当時はAndroid 3から4のみが標準ブラウザがサポートしていました。(Android 2.xはFirefoxがサポート)
この仕様はHTMLのinput要素でカメラにアクセスすることが可能なわけですが、意外と早くiOSの標準ブラウザ、Safariにもサポートされたのは正直ちょっと驚いています。
またひとつWebアプリがネイティブアプリに近づく可能性を感じます。
シンタックスは非常にシンプルで、
<input type=file accept=”image/*”>
のように書きます。
実際のHTMLは以下の通りに書いてテストしてみました。
JavaScriptなどは一切使っていません。
<body>
<form action=”post.php” enctype=”multipart/form-data” method=”post”>
<input type=”file” name=”photo” accept=”image/*; capture=camera”><br>
<input type=”submit” value=”送信確認”>
</form>
</body>
これでpost.phpに写真が送られるので、簡単なPHPを書いてみます。
<?php
$data = $_FILES[“photo”];
move_uploaded_file( $data[“tmp_name”], “img/”.date(U).$data[“name”] );
echo(“<img src='”.”img/”.date(U).$data[“name”].”‘ alt=”>”);
?>
これだけで、写真投稿サイトが完成です。(というのは言い過ぎです、エラーやセキュリティチェックなどをしましょう)
しかも対応ブラウザがiOS6とAndroid3〜とだんだん増えてきています。
これだけのコードでiPhone4Sで行ったデモを動画にしました。

iOS6 Safari MediaCaputure API from Hideki Akiba on Vimeo.

サービスへの可能性とWeb企画制作の将来

いままでこういったスマートフォンで写真を撮影するという手段はネイティブアプリに委ねられていました。
しかし意外と早くiOS6が対応することで、案件ベースでもWebアプリへの実用化が早まりそうです。
例えば、もしも期間限定のWebによる写真投稿型キャンペーンイベントがあるとしたら、非常にタイムリーな開発期間を求められることが想定されるとしましょう。
そのためにわざわざリジェクト覚悟でネイティブアプリを開発することが現実的でしょうか?
むしろ納期の事情、プロモーション期間の都合などでスピード開発が求められる所で言えばWebアプリのほうがこのようなケースは理にかなっています。
大げさと考える人がいるかもしれませんが、私達のような経験のあるユーザではなく、コンシュマーユーザの立場を考えるとわかります。
操作を極力シンプルにし目的の行動に導線を引くには、ホーム画面に戻らせてカメラアプリを起動させて撮影させ、アルバムから写真を選ばせ、送信ボタンを押させるより、場合によってはWebサイトに撮影ボタンが付いていたほうが操作に慣れていないユーザは助かるわけです。
こうなると、デバイスの特性を活かすという意味では、将来の「スマホ対応サイト」の考え方は現在の幅広い一般の考え方と多少変わってくると私は考えています。
今までのシステム開発、ソフトウェア開発と比べると、Webアプリの本当の利点のひとつとして「小機能アプリ」を開発しやすくなる期待が持てます。
多くのWebデザイナーを含め活動のフィールドが広がるはずなんです。
これを成功させるには技術(エンジニアやデザイナー)とサービス、マーケティングの専門家が同じテーブルでアイデアを出し合うことが数年先のWeb制作のトレンドになることは間違いないでしょう。というよりむしろ今からそれを模索する必要があると考えています。
このあたりのWeb制作に関わる担当者レベルでのコミュニケーションについて色々問題が多いと感じている部分についてはまた別の記事として書いていきたいと思います。
少なくとも、コンテンツに重きを置いた上でのWebのサービスとテクノロジーとの関わり合いを、私達デザイナーとしても避けて通れなくなる時代は、ますます近づいてきたのではないかと感じてきます。
facebookscreenshot.png
FacebookのiOSアプリとSafariの画面、現在Safariの方では写真投稿が不可能だが将来のスマートフォン対応サイトではこの問題も解決されるだろう

質感を意識したiconデザインにチャレンジ

ちょっと前に「リアル感を追求した、クリエイティブな素敵iOSデザインアイコン46個まとめ」がいいねって言ってる友達がいて、私もこういったお仕事をさせてもらったことがあるので、やってみたい方へ。

今回つくるのはこれです。
book_image.jpg
写真ではなく、すべて一からつくったものです。
写真にするとどうしてもリアルになりすぎてアイコンっぽく見えなくなりがち。
なので写真から起こす場合でも、あくまで下絵にして書き直すくらいの気持ちがいいと思います。

革の質感を出すには

今回は主にPhotoshopを使いましたが、どうしてもそれだけでは革の質感をたっぷり出すことができなかったので、CGソフトでマッピングしました。
まず原型をモデリングして、素材の革の写真などJPEG画像など貼付けて「それっぽく」してみます。
貼付けただけを見てみましょう。

img01.jpg
img02.jpg

左が簡単にモデリングしたもの、右がマッピングだけしたもの。
これだけだと質感があまり感じられません、なぜかというと、光と影の凹凸感がないからです。
こういった場合、ソフトのほうで「凹凸用のマッピング」の機能を使います。

b_tex_bump.jpg
img03.jpg

左がバンプマップと呼ばれる画像で、Photoshopで白黒にして加工します。
右を見れば分かりますが、マップで黒ければ黒いほど沈んだ感じに見せられ、立体感がでます。
しかし、これでもちょっと物足りないので今回は光沢を付けてみましょう。
質感を決めるマッピングは他にもあって、次は、「光沢マッピング(ソフトによって言い方がちがうけど意味は一緒)」これもマッピングを使ってみましょう。

b_tex_speculer.jpg
img04.jpg

左が光沢マップ、白い部分が反射しやすいようになる、と憶えておきましょう。
ちょっとだけ光沢がつきました、あとはPhotoshopで加工しましょう。

手帳の中身の紙を表現する

キレイに整っている手帳より、「バサバサ」と整っていない感じを出してみたいと思います。
これを適当に手書きするとなんだか不自然になりがちなので、「モデル」となるものが欲しいところ。
ここで、バサバサした書類の写真を大体似たアングルで撮ります。
それを先ほどつくった手帳にPhotoshopで合成してみましょう。
これを元に次は手で描いていきます。

photo.jpg
add_photo.jpg

Photoshop上で撮影した画像を自由変形させて手帳の形と合わせ、トレースして紙を描く

Photoshopのペンツールで紙を一枚一枚トレースするような感じで描いていきましょう。
あまり細かい所を気にしないで一気に描きあげるのがポイントです。
ちょっとはみ出した緑色の付箋を演出してみました、これはちょっとグラデーションがかかってますね。
これも単純にレイヤー効果のグラデーションオーバーレイを使っているだけです。
封筒の質感もあまりリアルにしないほうがいいでしょう。
写真のものをコントラストをあげて使おうと思ったんですが、全体がアイコン風なのでテイスト的に違和感があります、よって封筒も手で(ペンツールで)描き起こしましょう。
fuutou01.jpg
fuutou02.jpg
写真の封筒を使うより、右の手書きのほうが自然ですよね。
表示カバーを見ると、まっすぐ平面な感じですが、ちょっと膨らんでいる感じを出しましょう。
ブラシツールで黒をフチに塗って適当にぼかします。
同じく白のブラシも別のレイヤーに塗って光沢と陰影を出すとこんな感じになります。
rittai01.jpg
rittai02.jpg
右が白と黒のブラシを表示のフチにつけたものです。
ちょっと膨らんだ感じになりましたね。
ただし、フチが革のままってのもちょっと変なので、ベージュ色のフチを入れてあげましょう。
選択範囲をフチの部分だけとって、ベージュ色でベタぬりしたあとに、以下のようなレイヤー効果をかけました。
fuchi.jpg

まとめ

complete.jpg
アイコンなので、もうちょっと色が映えた方がいい場合もあるので、この場合カバー部分にレベル補正をして明るくしました。
さて、本来のアイコンはもうちょっと小さいですね、なので、小さくしてもその形がわかるようにしておきましょう。
あと、今回は手帳をモチーフとしたアイコンなのでこの手順ですが、臨機応変に制作方法はたくさんあるということを憶えておきましょう。
ツールに惑わされないようにしましょう、私達の仕事はクリエイティブなことなので、ツールありきで考えるとつまらないものしかできないことがあります。
私達のつくりたいものを先にツールがある、というイメージで楽しいデザインをこころがけましょう。

iPhone実機にアプリインストール失敗のときに

adhock.jpg

ipaファイルをiTunesからiPhone実機に転送するときに、実機でアラートが出て「○○のインストールに失敗しました」と言われて何度も試してだめ。
アドホックする場合のプロビジョニングプロファイルは、Provisioning > Distributionで登録してダウンロードすること。
たったこんだけのことでも初心者は大変なんです。
自分メモです。

Grad3の背景色を変えられるようにしました

grad3_bgchange.jpg

2012年3月にリリースしたHTMLベースでつくられたWebデザインのためのWebアプリケーションであるGrad3 – Easy CSS3 gradient editor -(http://grad3.ecoloniq.jp/)ですが、色々と使ってくれてありがとう、を言いたいわけでもあるんだけど、こんな要望がありました。
  • 背景色を黒でわかりにくいので白にできるようにしてほしい
  • ベンダープリフィックスを追加するブラウザボタンを一括解除できるようにしてほしい
という声にお応えして、改善しました。
背景色の件はつまり、背景が黒いとつくりたいWebサイトの背景が白い場合に色の差が大きくて、プレビューしながらつくり込んでも参考にならないことがあると思い、これは私もちょっといかんな、と思っていました。
ある程度の決め打ちの背景色を用意しましたので、アナタのつくりたいWebサイトの背景色にあわせてGrad3を使って自然なCSS3のボタンをつくってください。
あともうひとつ、ベンダープリフィックスボタンですが、altキーを押しながらクリックしてみてください。
クリックされたベンダープリフィックス以外は解除になります。
Photoshopのレイヤーのaltクリックと同じ機能を採用しました。
今後はボタンサンプルを増やしたいと思います。
それではこれからもどうぞ、素敵なデザインを!

CSS Nite in OSAKA, Vol.32に出演しました(補足記事)

cnio32photo.jpg
撮影:岡田陽一さん(ふわっと)

8/18に大阪のリクルートエージェントさんの会議室で開催されたCSS Nite in OSAKAでちょっとデモをしました。

参加された方、どうも長時間お疲れさまでした。
HTML5やWeb標準技術に対するこれからの心づもりの話だったんですが、最後のデモはFlashからAIRアプリという手段もあるとアイデアも含めてデモを行いました。
File APIを使ってドラッグアンドドロップを実現することを前提にデザインを考えるのもいいですね。
位置情報は誤差があるにせよ、案件次第ではスマートフォンサイトから実践できます。
Firefox for Androidの最新版ならAndroid 2.xでも、ブラウザで写真が撮れます。
さらにAndroid 4.xでは標準ブラウザ(Chromeと「ブラウザ」両方)でもう写真が撮れますので数年後にはAndroid対応のWebサイトに撮影ボタンが付くかもしれませんね、場合によりますので全てというわけにはいきませんが。
まとめとして、
HTML5は本当にクロスプラットフォームでクロスブラウザを実現するにはもっと時間がかかるけど、スマートフォンなど幅広く標準ブラウザが実装している機能は使うことも検討したうえでデザイン設計を心がけるがいいですね、という内容がひとつ。
もうひとつ、Flashはもっと強力なレンダリングの可能性が高い開発環境なので、表示にパフォーマンスが求められる3Dゲームなどに活躍の場が広がるのと、ネイティブアプリ開発の期待も持てますので以下のようなことが言えると考えられます。

スマートフォンでの3DレンダリングにはFlash/AIRの選択肢も

penguin.JPG
もしもスマートフォンのブラウザ上で、プロダクトとなる3Dモデルをグリグリ回しながら見てもらうようなビューワーをつくるには最新のブラウザでもさすがに厳しい状況です。
そういった場合はネイティブアプリ化を提案するという手もあります。
参加された方にはスクリーンでしっかり見れなかったと思うので動画にしました。

Air for Android , 3DModel DEMO from Hideki Akiba on Vimeo.

このデモはFlashでつくったもので、3DソフトでモデリングされたペンギンをAway3Dというライブラリで読み込み、レンダリングをしています。
Away3D自体がGPUのパワーを使うStage3Dに対応しているので、非常に高速に描画処理されます。
実際フレームレートはほとんど落ちていません。
(ペンギンはこのサイトよりダウンロードしました。http://www.turbosquid.com/3d-models/rigged-penguin-3d-model/431413
「誰に対し何を提供するか」においては、どの技術を使うかは大して意味がなく、そのときそのときで一番適切な技術を使いましょう。
最近もFlashをDisると感じられた記事をどこかで見ましたが、私はどちらも大切な技術として向き合っていきたいと思います。

様々な人間模様を後部座席に乗せて走る大阪のタクシー運ちゃん、今日もゆく

room.jpg

6/29と30のセミナーに両日登壇させてもらうため大阪に滞在し、6/30にマンションを解約して東京都民になります。

大阪では色んな人にお世話になったり、だまされたり、と、人間的に大きな経験ってやつをさせてもらいました。
大阪で最後に笑ってしまった話をふたつほど。
私はスーパー銭湯にいくのが好きです、週に1回は行っています。
29日の夜、セミナーが終わったあとに行くと決めていたスーパー銭湯へ行こうとタクシーを捕まえ、運ちゃんとの会話。
私:「鶴橋の先にパチンコ123があってその先にあるスーパー銭湯まで」
運ちゃん:「はいはい…あ?風呂行くんかぃな」
私:(ええやろ別に、プライベートやんか)
私:「運転手さん、大阪って最近寒くなかったですか?」
運ちゃん:「そうやなあ、そういえばそうやったなあ、お兄ちゃんたちどこの人なん?」
私:「いや、今まで大阪に住んでたんですけど仕事で東京に転勤なんですよ、ここちょっとだけ留守にしてて」
運ちゃん:「おおお!!!ホンマか!?東京か?どこに住むん?」
私:「東中野です」
運ちゃん:「ああ…知らんな」
私:(ズルっ)
運ちゃん:「それは東京のどの辺なんかい?」
私:「新宿から2駅目なんですよ」
運ちゃん:「ああ…わからんなあ」
私:(笑…だったら聞くなよ)
運ちゃん:「いや、銀座の近くとか六本木の近くとかって言ってくれたらわかるねんけどなあ〜」
私:「東京で他に知っているとこ、ありますか?」
運ちゃん:「知らんな」(私:多分説明しても分からんだろうなあ)
〜 鶴橋駅前渋滞中 〜
運ちゃん:「ちっ!あ〜おっちゃんもうこんな渋滞待ってられへん!割増代で運賃見たる(値引く)から遠回りさせてな」
(お、おいおい〜ハンドルをぐるぐる…客に了解を得る前に運ちゃん勝手に進路変更!)
〜 それから運ちゃんと世間話、この運ちゃん、どうやら一度夜逃げをしたことがあるらしい 〜
この人みたいに長い人生における苦い経験をされると、時として他人の気持ちくらい簡単に見透かすことなんて簡単なのかもしれません。
確かにそのまま客の言う通り決められた道を無難に渋滞を待ち続けるのではなく、こうしたら結果を得られるだろう、と客を自らリードするくらいの度量と判断力が結果的に仕事の質を上げるんだ、と。
これは私達の仕事でも同じで、クライアントが赤が好きだから赤に従うんじゃなくて、自分の答えが結果的に幸せだということを理解させる行動をとるべきで、理由なく従うだけならプロの仕事とは言えないわけです。
もちろんさじ加減も必要で、経験が浅いと時として望まない結果を客に与えてしまうだろう。
でもこんなブレない生き方ってありだね。
次の日もタクシーに乗った。
今度は朝のさわやかな天気の下、運ちゃんは多分60代くらいの男性。
運ちゃん:「このあたりは色んな人が乗ってくるんですけどね」(場所は大阪ミナミ)
運ちゃん:「私ね、こないだ乗車された女性のお客さんに口説かれたんですよ、でもね、お年が90歳くらいの女性だったんですよ。」
私:「…そ、それはまたお元気ですね(まさか、アンタ…)」
運ちゃん:「男性がいないとダメらしいんです、最近長年連れ添った旦那さんが亡くなられたというのですよ。」
運ちゃん:「でも、嬉しいですよ、それでも女性に好かれるなんて。」
私:「そうですね、わかります(で、どうしたん、そのあと)」
運ちゃん:「さすがに私もお断りしましたよ、やはり相手を本当に好きでないと愛するというのは難しいことなんです」
私:(断ったか…)
運ちゃん:「私ね、酸いも甘いも知り尽くした人が好きなんですよ、そんな人にね裸のままエプロン姿がですねえ…」
私:「そ、それは男性としてまあ、分からなくもないですね」(コラああああーーーーーっ!)
自分をコレでもか?とさらけ出す気性というか。
特にこんな街では、タクシーの運ちゃんとは人間のどこまでも非常識な素っ裸の内面を後部座席に乗せて走る職業。
いろんな人間を見てるだろうなあ、私が触れてきた色んな人間以上に多彩な趣味趣向や人生観などを持った人たちを。
だから運ちゃんって少々のことでは動じないもんなんですね、そんな身の上話も平気で話す大阪の運ちゃん。
本当に人に自分を知ってもらうということは、どれだけさらけ出せるかということだろうが、大抵の人は初対面だと格好付けてしまう。
どう捉えられるかは別として、さらけ出すとはっきりした自分が相手に映るかも。
やはりそんな風に映ってしまいがちな大阪の街や人、結構好きです。
10年間どうもありがとう、またちょくちょく遊びに(仕事に)いきます。

あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?

abcvideo.png

東京大学で開催された、「ABC2012Spring(Webトラック)」で発表した
「あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?」
の映像です。

実際デザイナーは、どんなツールを使い、どんな考え方を持ってユーザにアプリを提供するのか?
という自分なりの考え方を発表し、後半はWebデザイナーにとってあまり馴染みのない3Dグラフィックのライブデモをやりました。
使ったソフトはLightwave。ドロイドくんをつくるデモです。