HACKDESIGN Lesson 10

Lesson 10はラピッドプロトタイピングについて。

Design Better And Faster With Rapid Prototyping

プロトタイプのFIDELITY(忠実性)には3つの側面がある。
システムの複雑さや要求によって使い分けが必要。経験上クライアントワークだと作り込み過ぎだったり、自社サービスだとぬるくなりがちだったりする。早い段階でグラフィックを作り込み過ぎると後で融通が利かなくなってしまったり、本来は機能に漏れがないかチェックするためのプロトタイプなのにグラフィックの善し悪しを議論してしまったりするので、段階に応じて適切なものを選ばなければならない。

The Aardvark Theory of Product: Fake It Till You Make It

Ardvarkのプロダクトは最初の9ヶ月間を人力で運用して、その間に自動化するための人員を雇ったとのこと。キーボードしか無かった時代にマウスのデモをした時、実際には手の動きに合わせて人がカーソルを動かしていた話を思い出す。ユーザーの反応を見ることでサービスなりプロダクトが本当に作る価値があるのかどうかを判断するにはとてもいい試みだと思う。自動化までのロードマップが設定されているのも大事。

Creating Interactive Prototypes With Keynote

KeynoteでiPhoneアプリケーションのプロトタイプを21分で作るデモ映像がある。

Fake It. Trash It. Build It.

UI/UXデザイナーがまずやりたいことを盛り込んだプロトタイプを作り、それをエンジニアが構築したい方法やフレームワークの上で作り直し、最終調整をする。デザインは可能性のビジョンを示すものだから、アイディアを捨てることになっても時間の無駄ではない。それらのアイディアはたいていまたどこかで使えるようになる。

Rapid Prototyping Tools

プロトタイピングツールの紹介。WebZap良さそう。

HACKDESIGN Lesson9

HACKDESIGNという興味深いサイトがあって、最初はタイポグラフィとかデザインの基礎的な話題が中心だったんだけど、Month 3がUser Experience、Month 4はUser Interfaceということで、感想などをまとめてみる。冒頭でUXデザイナーの平均給与が高いとあるけど、これは限られた人しか就けず、母数が少ないポストだからなんじゃないかと思う。

Review: The Design of Everyday Things

日本では「誰のためのデザイン?」というタイトルで売ってる本のレビューで、いくつかの印象的な話が紹介されてる。もともとは1988年に"The Psychology of Everyday Things"というタイトルで出版されていたのだけど、その後PsychologyからDesignに変わったらしい。

課題は「よりよいユーザー体験よりも、デザイナーが楽をするために安易な選択をした事例を探そう」で、ヒントとして家電やリモコンを見てみようとある。

僕がいつもイライラするのはモバイルルータ。ボタンを長押しすると接続設定をマニュアルかオートに切り替えられるんだけど、マニュアル時は同じボタンを短く押すことでネットワーク接続を開始する。なのでなかなか反応がない場合に、よく誤って長く押してしまって意図せずオートに切り替わってしまう。元に戻すのにまた長押しして、今度は切り替わらないように気をつかって短く押すんだけど、未だにちょうどいい具合の押し方がわからない。

First Principles of Interaction Design

良くまとまっていると思った。Efficiency of the Userの項で、電子レンジで水を温める場合、1分10秒を指定する(1、1、0とボタンを押す)より1分11秒の方が速いというのはちょっと面白かった。0を探すのに1秒以上かかると、1分11秒間温めるのを待つよりも遅くなるという話。

Researching User Experience

ユーザー体験を調査する際にどの手法をいつ使うかという話。The Attitudinal vs. Behavioral Dimensionが面白くて、僕もよくTwitterやAppstoreなどでサービスについて言われていることを読んだりするし実際に意見を取り入れたりもするんだけど、正直「騒いでいるのは少数派」だなと感じることも少なくない。色々悪く言われてるように感じたとしても、定量データと照らし合わせることが必要。

Sketching User Experience

これくらい綺麗なワイヤーフレームを作ったり見たりしたいものだと思う。

Measuring User Experience

少ないサンプル数のユーザーの振る舞いから全体を予測する方法。意思決定に統計的な手法を取り入れる場面は今後も増えていくと思うし、そうしていきたい。

TEE PARTY

夏はもう終わってしまいましたが、縁あってTEE PARTYにレーベルオーナーとして参加することになりました。
ざっくり言うとネットでTシャツが買えるシステムです。

注文が入ってから印刷に入るモスバーガーみたいなシステムで在庫を持たなくていいので、僕らはただひたすらグラフィックを作りまくって送りまくれば良い訳です。毎日大量にアップされていくので普通に埋もれてしまいますが、ちょっと考え方を変えて、ディグるのではなく(ディグってもいいですが)開いたとこでぱっと見て気に入ったら即買うみたいな気持ちで臨めばネットショッピング感覚的に新しい何かが生まれると思います。
いずれプログラムで自動生成したもので毎日更新シリーズを作ろうと思っていますが、現状手作業でアップロードされているので様子を伺っています(地のTシャツの皺とかひとつひとつ違うの気づきましたか？僕は気づきませんでした!)。

最初にお誘いいただいてからどのように展開していくか色々悩んだ結果、答えは出ずに時間だけが過ぎていったのでそのまま持ってる能力や人脈を最大限活かしてやっていくことにしました。
なので会社でお世話になっているMARVELOUS DESIGNさん、恩師であるJames Gibsonさんに参加してもらっています。
他にも関わりがある人で、今のTEE PARTYにはちょっとないテイストの人に声をかけています。

お、思い出横丁情報科学芸術アカデミーのTeeもよろしくお願いいたします。

レイヤーカンプからWeb用のJPEGに書き出すJavaScript

Webデザイン(ワイヤーフレームから絵を起こす作業)はPhotoshopで常人の理解を超える数のレイヤーを駆使して行われます。そしてそれをコーダーと呼ばれる人達に渡してブラウザで動くようにしてもらったり、クライアントに対してこのデザインでいいですかという確認をとるために、マウスオーバーでこうなって、ボタンを押すこうなる、みたいな流れがわかるようにJPEGでスクリーンショット的な画像を書き出します。このような場合に「レイヤーカンプ」という機能を使い、それぞれのシーンを作っておくと便利です。

で、いつもJPEGに書き出す際に「Webおよびデバイスに保存...」をしてるのですが、数が増えてくると面倒(一度本当に嫌な思いをしました)なので、レイヤーカンプから自動でシーン毎のJPEGを書き出してくれるスクリプトを書きました(その時に書けば良かったです)。
「別名で保存」と同じようなものは既にファイルメニューにありますが、Webおよび...のやつがなかったので(少し変えればPNGなどにも書き出せます)。
exportLayerComp.jsx

使い方:
1.上の.jsxファイルをどこでもいいので保存して下さい。
2.Macの場合はホーム(デスクトップではありません。家のアイコンの場所)に、Windows場合はC:直下にlayercompsという名前のフォルダを作ります。ここに画像ファイルが書き出されます。
3.Photoshopのメニューからファイル>スクリプト>参照...を選びます。
保存したexportLayerComp.jsxを「読み込み」でレイヤーカンプにつけた名前の通りのjpgが書き出されます。
ファイル名はレイヤーカンプと同じ名前になります。日本語だったり長過ぎるとうまくいかないかも知れないです。書き出されるフォルダの位置や名前を変えたい場合は、任意のテキストエディタでexportLayerComp.jsxを開き、

filePath = ""

の二重引用符内を好きなフォルダのパスに置き換えて下さい。
Windowsの場合は\(または¥)に注意して下さい。一つだと次の文字が特殊文字として扱われてしまうので、階層の区切りには2つ入ることになります。

デフォルトでの書き出しの設定は普通にWebおよび...をした時と同じにしてあります。
画質を変更したい場合は、

exp.quality = 70;

の値を0から100の範囲で指定して下さい。

exp.format = SaveDocumentType.JPEG;

のJPEGのところを変更すればCOMPUSERVEGIF, PNG-8, PNG-24, BMPで書き出しできます。ファイルの拡張子を追加している".jpg"のところも合わせて変えるのを忘れずに。

細かい設定などはAdobe Photoshop CS3/スクリプティングガイドフォルダ内にPhotoshop CS3 JavaScript Ref.pdfというのがあるので参照して下さい(106ページ)。ここからダウンロードもできます。

下記のサイトを参考にしました。
Adobe Photoshop CS3自動化作戦
PhotoShop JavaScript(ExtendScript):Note - ホコホコ hoko-hoko

書き出すファイルや画質の設定をGUIでできるようにしたいのだけど、それはまた次。
こういう感じで社内のワークフローを楽にしてくれる専門の人っていないのかな。

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する2

JSONというのが何なのかというのが今回の話題。

詳しくは公式ドキュメントなりwikipediaなりを読むとして、とりあえずはXMLなどのようなデータフォーマットの一種であると。JavaScript Object Notationが正式名称だけど、JavaScriptのオブジェクトの表記をベースにしているというだけで、JavaScript以外でも使える。
"キー":値というシンプルな形。入れ子にもできる。
例:

{
  "name":"hayashi", 
  "age":26, 
  "occupation":[
    {"main":"designer"},
    {"sub":"programmer"}
  ]
}

前回のプログラムで、loaderから読み取ったデータをそのまま出力してみる(loader.dataをtraceする)と、このような形式の文字列が出力されているはず。

で、あとはXMLと同じようにドットとキーで欲しい値にアクセスする。
前回のソースの27行目を下のように一旦オブジェクト型の変数に格納する形にして、
var o:Object = JSON.decode(loader.data);

o.tokensで何てキーワードで検索したかとか、o.totalで何件ひっかかったとかが取得できる。

o.resultsはリクエストに合致した記事のデータがそれぞれ配列になっていて、o.results[0].titleで1件目の記事のタイトルを取得したり、o.results[2].bylineで3件目の記事の筆者を取得したりできる。o.results.lengthで結果の総数を得てfor文と一緒に使うケースが多いと思う。

この辺のキーの与え方に関しては返ってきたデータ(loader.dataでtraceした結果)を見ながらの作業になる。

視覚化の方法についてはまた次回。

20080721

本当はデザインに時間は関係ない。

sonic typeface src

minimで任意の波形テーブルを作るのはすごく簡単で、AudioSignalインターフェースを実装すればいい。exampleにあるので、参考に。

generate()メソッドに渡されるsamp[]の中に-1から1の値を突っ込む。
512サンプルの波形テーブルにするため、512ピクセルの画像を用意して、上から下、左から右にスキャン。

解説というか、自分でちゃんとわかってるか確認のためメモ(下のリンク先にあるソース参照)。
まずピクセル全てに番号を振る。

色が閾値以下の値を持っている場合(元画像を黒で作ってあるので、適当に赤成分が50以下、としました)、その番号。それ以外は0にして、sndArrayに入れる。

sndArrayの中で最大値と最小値を出す。最小値は0が最初に0でない数値を受け取ったときの値になるはず。boolean型の変数startで判別。

0の数はoffsetという変数に入れて最終的に振幅をそんだけ分持ち上げる。

次のif文でまずsndArray内に0でない値が入っているか(描画すべきピクセルがあるか)を判別し、
x%2==1が真のときに下のエッジ(highとlowの差+offset)、偽のときに上のエッジ(offset)をプロット。
(10/10訂正:上下が逆だったので直しました。)

あとはmap関数に任せれば、0から1の間で適当に補完してくれる。lowを1に、highを0にすることで、元画像と書き出された波形を一致させることができた。

タイポグラフィの専門用語で言うところのカウンター(counter)、文字の中の閉じられて中空になっている部分とか、入り組んだ部分、つまりhighとlowの間に0が入ってるところは潰されてしまう。描画の密度に差を持たせれば擬似的に空間を見せることは可能かもしれない。miujunさんのは多分そういう感じ。

今のところ画像読み込んでるだけだけど、テキスト編集する感じで音に直結できればいいなと。カーニングとか、長体とか、フォントを変えることによって音が変化する。それでプログラミングができて、さらにその音の解析からまたコードが生成されて、フィードバックする。

sourceの方はprocessingで実行してクリックすると画像と音を書き出します。色々試してみて下さい。minimライブラリが必要です。
applet
source(zip file)

sonic typeface

先日衝撃を受けたオシロスコープに猫及びポルノ画像。

これはtex/tspの音響生成エンジンに使えるのではと思い試してみた。とりあえず文字の画像データを用意して、そいつを2値化して振幅に変換。とりあえず読めるレベルにはなってるのではないだろうか。詳しい解説はまた後で公開します。このアルゴリズムは多分最終成果物にはしない感じなので...。
Helvetica Neue 75 Boldを240ptで使用。



オシロスコープで出したいなー。

元画像。コード書き換えて反転なしでできるようにしよう。



processingではこんな画像ができる。



音はこんな感じ。ご家庭の波形エディタなどで読めるかどうか試してみて下さい。
ktkr.wav

sketch20070926

itunesのlibraryの一部を視覚化。綺麗に見せる方法はもっと考える必要あり。
この辺参考に。
Yahoo! Design Innovation Team
QQ!'s photosets on Flickr

centering, fade in

webのintro用にロゴ画像をfade inさせる。
javascript + cssで画像をウィンドウ上下左右の中央にしてfade in。
flashでやれよ、て感じだけど。
intro

参考にしたのは、やっぱりbrazil社長。
戦争 - 上下左右中央の件、改善、補足

今回はたまたまcssで上下センタリングの方法探してたら見つかった。考える事が似てるのかな。元々brazilさんのblogを発見したのは、capsuleがだせーけど好きとかそう言うので検索してたんだと思う。田舎の人が考える都会的イメージとかクラブ行かない人のクラブ的イメージとか。テクノちゃんと聴いてない(どういうこと?)人のテクノ的イメージとか。

にしてもバッドノウハウかー。
僕はjavascript使ってクライアント側のウィンドウサイズ取得してるんだけど、それもよくないのかも。しかもcssを外部読み込みにしないとうまく上下センタリングされない。
javascriptでcssの表示位置を制御するのはこの本のサンプルから。
標準Webデザイン講座｜サンプルファイルダウンロード

fade inで参考にした(というか不要なとこ消してそのまま使ってる)のはここ。
Cross-browser BlendTrans Filter JavaScript, Fade in/out

翻弄されちゃうよどうも。

get images from blogger

Bloggerのページから画像を抜き出すbookmarkletを作りました。
getbloggerimgてやつ。最近こればっかだな。
letsbookmark

そもそもはjudge a bookという最高にかっこいい本の表紙がアップされてるサイトの画像を全部ダウンロードしたいなーと思ったからで、単純にlinkのurlを取得して、拡張子がjpgになってるやつをdocument.writeでimg要素に突っ込んで表示してみたら成功したってだけです。
そのままだといくつか取れないのがあって、全部調べた訳ではないのですが、リンク先がs1600-hてなってるのが問題みたい。ってことで、if文で分岐させて、ffffound!でやったみたいに-hを取ってやって、ついでにgifの場合も表示することにした。

bibliodysseyとかmutantsoundsででっかくてレアで怪しい感じの画像がどっさりとれて嬉しい。ちょっと改変すれば色んなとこで使えそうだし。なるほどね。今まで暮らしに役立つプログラミングってしてこなかったけど、こういうことか。たれの工夫で献立10倍か。

ffffound!画像ちっこくなったけど、新着の横に関連画像が表示されるようになって、再発見の機会が増えた。面白い。

sketch20070601

引き出しをモチーフにしたインタラクションデザイン。
シーソーみたいになってて片方に重心がかかると倒れて中の物がぶちまけられる。
上下の引き出しで片方が録音、もう片方が再生。

daniel eatock

「あいつ自分ではデザイナーって言ってるけど、どう考えてもアーティストだよな」
というところを目指しなさいと言われるのですが、そういう人。別に彼自身は自分のこと何者であるとか言ってない(と思う)けど。

Daniel Eatock

alarm danceが面白いんだけど、紙の上にマジック置いて描いた絵とか、素晴らしい。これをもうちょっとドローイングマシン寄りにしたやつを作りたい。

Begin with ideas.

心に留めとく。

manystuff

かっこいいー。誰にも教えたくないくらいかっこいい。誰にも教えないで僕だけセンスよくなりたい。ってかabouttheprocessでやられてるようなこと僕もやってたんだよなー。音楽室の壁みたいなあの穴の壁をグリッドにして、タイポ作るってやつ。全然クオリティが違うけど。一応アップしようと見返したら思ってたより悪かった。もうちょっとできてたと思ったけど...まぁ成長したのでしょう。

MANYSTUFF

c71123

最高。かっこいい。
女の子はかわいいと言う。僕のかっこいいは女の子のかわいいだ。
とにかく完成度が抜群。Sign Language Matchbooksとかびっくりした。ちゃんと手にみえてくるんだもんな。drawingも素敵だしcodingもできるみたい。Letterpress Business Cards & Postcardsはtex/tspのグラフィックの参考にしよう。目標とする人になりました。
c71123

moco.js

新しいマシンだとScriptographerのversion 2.0.023 for Illustrator CSが無事動いたのでこれから勉強しようと思う。何故動いたかは謎。問題とされてるはずの「プラグイン」は日本語のままだし。

p5とかで定番のマウスドラッグに合わせて円が大きくなったり小さくなったりするやつ。toolsフォルダに入れて、//のモード(tool 1)で使う。こいつらがパスで一括管理できるなんて素晴らしすぎる！

javascript載っけられなかったのでup。
moco.js

printing

jamesの手伝いで、大判プリント作業。
変な線が入ってしまったり、よくみるとジャギーが入ってたりとなかなか難しい。色の確認しようにも普段の作業場と大判プリントができる部屋ではモニタの色も違うし。変な線はプリンタの双方向印刷のチェックを外して単方向印刷にすればよかったのだけれど、綺麗な印刷を実現するにはソフト側で色々調整するより紙とプリンタの距離とかそういうとこがポイントになってくるそうだ。音もそうだけど、最終出力がアナログになると途端に理論だけでは説明のつかない世界に。
謎の汚れがついちゃったりね。大変。

web renewal

他にやることはあるだろって感じだし、エイプリルフールか？というようなレイアウトだし、おいおい、インターフェースデザインがどうとか偉そうなこと言ってたじゃんよ、とか言いたくなるかもしれないけど、久しぶりにwebページを変更しました。重なってる部分はdragして動かして下さい。制約の中でのデザインも勿論面白いし大切ですが、個人webに関してはvalidationとかもあんまし気にせず好き勝手できる実験の場にしようと思います。まだ大人しめだけど。別プロジェクトでかなり素敵な企画も考えてるんで、お楽しみに。

designing interface

デザイニング・インターフェース —パターンによる実践的インタラクションデザイン

任天堂の岩田社長曰く、「生活に必要なものなら、説明書を読んで皆使おうとするけど、ゲームは娯楽だから、説明書を隅々まで読んで理解しようとはしてくれない。だから説明書を読まなくても遊べるようにデザインしなければならない。それができるっていうのは、実はすごいことなんですよね。」と。実際任天堂のあるゲームを中古で買ったら説明書がついてこなかったんだけど、はじめにチュートリアルというか、練習ステージがあって、必要な操作はそこで覚えられるようになってる。「修行」的なニュアンスでゲームのお話の中に取り込んであって、作業感を減らす工夫もしてある。中古で買う層を意識してこのステージがあるのでは思いたくなるような気の利きよう。やはりデザインに必要なのは人の行動をよく観察することだ。この本では非常に多くのパターンが網羅されていて、僕はそういうカテゴライズとかジャーゴンが結構好きなので(悪い癖)、興味深く読んでいる。ipodパターンは「1ウィンドウでのドリルダウン(one-window drilldown)」と言うそうだ。

インターフェースデザイン、という言葉はよく耳にする(もう先端分野では下火かも)が、単に表面のかっこよさとかアフォーダンスがどうとかだけでなく、シーケンスのデザインの重要性を考えさせられる。まず人は最初にどこを見て、何をするか、それに対してどのような選択肢を用意し、答えを返すのか。デザイナーが「これがいい」と思うものだけでなく、慣用的に使われているもの、異なる文化背景、異なる身体を考慮しなければならない。ビジュアルによるスケッチが時には考えが限定されてしまう可能性だってある。抽象的に考えられる力、分類する力を鍛えなければならない。

すごいことをするようになればなるほど普通になる、とはよく言われることだが、最近はそういう普通のすごいことに興味を持つようになった。今回結構悩みながらやっとprocessingでdrag & dropのデータ入れ替えに成功した。気づいてみれば簡単なことなんだけど、元々プログラミングの素養がない僕にとっては難しかった。かっこいいグラフィックや面白い動きをするコードはよくwebで公開されてるんだけど、こういう渋いやつはない。体験的には「普通」だし。dragで移す途中に半透明のデータを表示させるのもわざわざコーディングしたんだもんね。そう考えるとosとかってすげーなと。身の回りのものが全部誰かしらの手が加わってできているということを考えた時に感じるクラクラ感と同じ。多分、今のコードはアルゴリズム的に問題あったりするんだろうけど、例えばdrag & dropのもっと面白いエフェクトを試すとか、効果的なインタラクションを考えるラピッドプロトタイピングとか、使いようはあると思う。興味ある方どうぞ。

dragndrop

altitude

ALTITUDE – Contemporary Swiss Graphic Design
スイスのデザインブック。印刷とかwebとかのジャンルではなくGoing PublicとかExperimental Systemsとかテーマに分けて紹介してある。個人的に興味深かったのはExperimental Systemsなんだけど、Rafael KochとかJürg Lehniとかが評価されてるのは、それ自体では人の興味をひかないもの（機械の廃材とかスプレー缶、ホワイトボードなど）にテクノロジーを加えること、またはテクノロジーを通して表現することで面白い、魅力的なものに変化させてしまうところだということが分かった。他にもデータや情報の視覚化のヒントが詰まっている。あ、こんなことやっていいんだ、っていう。単にスタイリッシュなだけじゃなくてちゃんと背景や思想がありつつ、理屈抜きに見てもかっこいい、ってのが最高にかっこいい。

卓球のラリーの軌跡をグラフィックにしてたやつも面白かったな。pathとかpixelの濃淡で表したりとか。新聞で暴力的な話題を扱っている記事を赤く塗ったものも分かり易くメッセージ性を感じる。

infomation aestheticsってサイトがすげー好きなんだけど、そういう感じ。

jamesのdesign workshopでも日常的にあるものから色やグリッドを見つけて作品にするって課題をしたけど、当時はよくわかってなかったな。豆腐を切って、重みでできたずれをグリッドに使った人がいたんだけど、例えばそのグリッドで豆腐の本を作れば、たとえ文字組が変だったり、一般的なデザインでは「やってはいけないこと」だったりしてもそれ以外の大切なフィーリングが伝わることもある。ということ。it is messy, but works.