デザイナーズハッカソンで改めてデザイナーとして感じたこと

東広島にあるSHARPさんの事業所、というか自然に囲まれたビルの一室で行われたAndroidアプリ開発イベント(ハッカソン)に2日間かけて行って参りました。
ハッカソンとは開発をされているプログラマーさんが、限られた時間の中でアイデアを出し、アプリを作るイベントなんですが、デザイナーには全く疎遠なイメージがあります。
(個々がどう思うかはさておき、一般的にそういった意識が多いのは事実です)
しかし今回はSHARPさんや運営に携わっているブリリアントサービスさんのアイデアで、デザイナーもハッカソンに入ってもらい、一緒にアプリを開発してみよう、という試みということで参加させていただきました。
当日朝早く新幹線に乗って東広島駅へ、そこからみんなでタクシーに乗ってSHARPさんの施設に向かったわけですが、空気がうまい。
ホント、いいところでした。
今回は、SHARPさんにはAndroid2011年夏モデル端末も用意していただき、5つのチームにそれぞれ色んな実機が貸し出されました。
チームで朝11時30分からアイデア出しを行い、どんなアプリを作るか話し合いが始まりました。
ただここで重要だったな、と思うのが、「メインとなるテーマを先に決めてしまおう」というところ。
闇雲にどんなものを作るか考えると、メンバー4人、個々の考えも違うのでなかなかまとまりにくいパターンに陥るケースがよくあります。
今回はまず、「夏」というテーマに限定。
ここで色々出てきます。
海、山、キャンプ、水着、クラゲ、スイカ…
で、決まったのは、そうめん流し。
アプリのアイコンはこれ。
icon.png
(流しそうめんという人もいる、ちなみにこちら参照 http://www.freeml.com/wefree/say/noodles/
さてさて、ここで面白い実験をしてそうめん流しアプリを作ろうということで、
・複数台の端末を縦に並べる。
・1番目のデバイスをタップしたら、そうめんが流される。
・2番目のデバイスに1番目のそうめんが流れてくる。
・3番目のデバイスに2番目で取りそこねたそうめんが流れてくる。
・3番目で取りそこねたら4番目のデバイスに…
といったように、流れてきたそうめんを取る(箸ですくう)ゲームなんですが、
何台も実機をつなげられる所がポイントで、通信手段はBluetoothを使ったものです。
スクリーンショット(2011-07-25 13.19.27).png
プログラムの仕組みとしては最初の「親」となる実機の次の「子」が2番目になり、3番目の実機から見れば、2番目の実機が「親」となる認識方法で数珠つなぎが構成されます。
そうして、あるデバイスが「最後の子(つまり一番最後)」であると認識したら、画面の下に「受けザル」を表示して、最後でなかったら、そうめんを流す竹を上から下まで表示させるというものです。
いきなりですが完成はこちら、動画は英吉さん(@)撮影。

下記の写真は同じメンバー「AndroidSDK開発のレシピ」の著者の@gabuさん提供です。
【6台つなげてデモした写真】
【ちょっと拡大】
と、思ったら、gabuさんのブログ、その名も「gabuchanの日記」にてそのレポが紹介されています。
そんなわけで、USTREAMでもその様子が公開されています、
下記URLは、制作発表のものです。
(僕の発表は30:30くらいからです)
僕が主にチームの発表をスピーチさせていただきました。
普段はたまにソースコードも書きますが、「今回は一切ソースコードは書かず、デザインに専念します」と宣言した経緯もあって、チーム内、開発者3名、そしてデザイナーは僕1人という構成でした。
チーム名が「デラリアル」と言いまして、「デラ」は名古屋弁で「超」とか「すごい」という意味です、つまり「超リアル」。
まあ、リアルにそうめんが流れたらいいな、という想い、、、だったんでしょうね。
今回はAndroidのキャラクタ、ドロイドくんを、デラリアルにしました。
スタートアップの画面で活き活きとしたイメージの実写版(?)ドロイドくんが一生懸命そうめんをすくっている印象を与えたかったので。
(gabuさんのブログに画像が載ってます。)
そんな楽しくワクワクさせるデザインというのは、とても大事です。

開発にとってデザイナーの必要性

アプリはデザインによって売れ行きが変わるということは、色々とアプリを作られた方から聞きます。
僕の周りにはWebデザイナーというデザイナー職の方が多いのですが、どうもこういったデザインの目的には着目されにくいな、と感じています。
人間中心としたWebサイトの設計、ユーザエクスペリエンスなど、セミナーでは色々取り上げられます。
それはとても大事なのですが、アプリの開発という分野のみならず、デザインで人を「おおっ」と驚かせることが必要な場面だってあるわけだし、そこにはアナログな感性(アナログという言葉は正確ではないにせよ、そこは汲みとってください)が要求されるものだから、自分の感覚をとんがらせておかないとダメだと思うのです。
そういった表現で人の心を動かせるデザインが売上につながるのであれば、そこにその場面においては全力を注げるデザイナーでありたい、だってそれで僕はお金をもらって仕事してるわけだし。

あくまでデザインは人に評価される、機械と仕事をしてるわけじゃない

自分で作ったスタートアップの画面

アプリのスタートアップの画面は、購入を考えているユーザへの大きなアピール(勝負)の場。
ドロイドくんがそうめんを一生懸命つかんで食べてやるぜ!というサマを演出したく、デザインにとりかかりました。

概ねデザインは好評をいただきました。

今回、実はこだわった目的は「リアル」ではなく、ただひとつ、それは、、、

「これを見た人が有料でも買いたくなるアイコンとスタートアップのデザイン」

今回はこれにつきます。

つまり、デザインに理論づける人はいるし、それは分かるけどもっと大事なことは、自分が客観的目線で見て、そのデザインで人を引きつけられる感性を養って、表現するチカラがあるか?ということ。

その判断力と表現力は理論では片付けられない。

なぜなら今までの経験で案件ごと内容は全く違う、そのプロセス数は無限大でした。
これは20年間デザインという仕事をやって、ようやく今になってなんとなくわかりつつあります。

もちろん、自分に自信があって言ってるわけではありません。

本当に売れているアプリやインターフェイスのデザインを見ると、自分のは、まだまだ作っては疑い、作っては疑い、の繰り返しだと思ってやみません。

自分のチカラというのは、いつになっても色んな意味で完成しません。
常にまだまだな状態だな、ということを改めて気づきました。

さて、まとめ。
ハッカソンですが、名前の印象からどうしても僕らデザイナーさんは敬遠しがちです。
そういう意味では大変意義のあるイベントだったと思います。
開発者の方とのやり取りが学べるいい機会だったわけですが、いざ始まると時間が足りず、自分の作業だけで精一杯なことがあります。
これは「一日でマスターできる◯◯講座」とかあるけど、僕から言わせたら「一日でマスターできる講座なんてあるわけがない!」というのと一緒。
デザインは一日にしてならず、なんです。
デザイナーとデベロッパーのフローをどうやって理解するか、これは何回でも積み重ね、可能な限り参加して経験していくことで、徐々に「こういったケースだとこうしよう」がわかってくるもの。
例えばアイデアに対し、自分の出せる引き出しの少なさが原因じゃなかったか?
デザインのトライアンドエラーを繰り返す際、仕方がない(やってみないと本当にわからない)ケースと、事前に察知して余計なトライは回避できるケースもあると考えています。
両方ともとっさの判断が要求されるとき、人は経験によって乗り越えられる場合と無駄足を踏んでしまう場合があります。
僕はこの仕事を20年やってきた今でもデザイナーとしてのエラーを経験して、少しでも効率の良いワークフローを実現できるようになりたいと考えています。
(効率、というのは、よくあるツールに頼るとかそんなのではありません、もっと自分の脳を鍛えるという意味が近いです。)
色々と今の自分の実力を再認識できた2日間でした、
SHARPの方、Androidの会の方、参加されたみなさん、勉強になりました。
ありがとうございました!!

Macの「Font Book」更新時、Adobe製品で反映されない時の対処

fontworks_lets.jpg

FONTWORKSの「フォントワークス LETS」を購入しました。

複数台のマシンにフォントをインストールする時、ライセンスとしては1台に1ライセンスなことがあるので購入したのです。
そのとき「あれ?」と気づいたこと。
フォントの使用/不使用を管理しているアプリケーション「Font Book」でも使用の状態なのですが、IllustratorとPhotoshop上では、新しく購入して正規にインストールしたはずのフォントが全く出てこなかったんです。
新しいフォントが出ないのは非常に残念ですよね、おかしいのはAdobe製品だけ。
他のアプリケーションでは、ちゃんと新しくインストールしたフォントが表示されて使えます。
どうやら、Adobe製品はフォントリストを独自にキャッシュしているようです。
つまり、起動を早めるとか何かの理由で、別ファイルにて、今使っている使用フォントリストのファイルが存在します。
これを削除することで、初めてAdobe製品では新しいフォントが表示され、使えるようになる、というケースは間違いなく存在します。
このあたりAdobe製品はやっかいです、対処方法は広く知れ渡ってないはずです。
フォントってそう滅多に購入することもないので、知ってないとちょっとパニックですね。
削除するファイルは
/Library/Application Support/Adobe/TypeSpt/
の中にある「AdobeFnt.lst」と「AdobeFnt○○.lst」(○○は数字)を捨てます。
AdobeFnt.jpg
そうしたら一度システムごと再起動しましょう。アプリケーションを再起動したって無駄のようです。
僕のMacでは、システム再起動後、Illustratorを立ち上げたら、めちゃくちゃフォントが少なくなってビックリしましたが、
その後Illustratorがクラッシュしました。
ああ、こりゃだめだ、と思ってもう一度Illustratorを立ち上げたら何とビックリ、今度は成功。
しっかりフォントのリストに新しくインストールしたフォントが連なってました、よかった。
下図のフォントはロダン、初めてDTPやり始めた1990年位からお世話になってるフォント。
変な主張の少ないところが、新ゴシックよりちょっと好きかも。
rodin.jpg

画像をモノクロ変化するjquery.monochromer.jsをアップデート

以前ブログにも書きましたjQuery用のプラグイン、jquery.monochromer.jsですが、ある件でこのプラグインを紹介してくださるらしく、ちょっと改良しました。

<img>画像マウスオーバーでモノクローム変化するjQueryプラグイン「jquery.monochromer.js」

色を指定できるデモとソースのダウンロードはこちらでお願いします。

どういったものかというと、img要素にこれを適用すると画像がモノクロになるというものです。
適用方法は簡単で、jQueryを読み込んだ後このプラグインを設置し、指定するだけです。

facebookプロフェッショナルガイド

一番シンプルなカタチ。
monochromerをデフォルトの状態で与えてください。
img要素がグレースケール化します。
本の画像にマウスを乗せるとカラーになります。

今回はイヤラシく、僕も執筆に参加した宣伝も兼ねて「Facebookページ プロフェッショナルガイド」のサムネイルを使います、ゴメンナサイ。


$(".demo01 img").monochromer();

改良点ですが、HTML5のcanvasを使っています。
IE8までは、「なにもしないプラグイン」というように、内部でブラウザ判定をしてます。
つまりIE6などでは、画像が表示されるだけなので、必要最低限の表示は出来ます。
新しいブラウザは機能が増え、古いブラウザはそのままで、、という感じでしょうか?

facebookプロフェッショナルガイド

今度はカラーを指定します。
monochromerのcolorパラメータに、16進数のCSSカラー値を指定します。
この例は#f00、もちろん#ff0000でもOKです。


$(".demo02 img").monochromer({color: "#f00"});

facebookプロフェッショナルガイド

しかし、いきなりページが表示されて画像がモノクロになるとおかしいですね。
通常はカラーのまま、マウスオーバーでモノクロ、という流れにしたいときには、typeパラメータを”false”にしたらOKです。


$(".demo03 img").monochromer({color: "#f00", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

今度は二つ並べました。
こういったレイアウトをするときは、imgに親要素で囲ってください。
今回はli要素で囲み、liをfloat: leftしてます。
monochromerの指定はcolorパラメータに”sepia”と”blue”を指定しました。


$(".demo04 li:first-child img").monochromer({color: "sepia", type: false});
$(".demo04 li:nth-of-type(2) img").monochromer({color: "blue", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

ここでaタグを付けないと指マークにならないのですが、Webアプリケーションを制作していると、どうしてもa要素ナシでマウスを指マークにしたいことがあったとしましょう。
この時、実はプラグインの内部的な都合で、CSSでimgに「cursor: pointer;」としても指マークにならないので、パラメータをひとつ追加しました。
それがCSSのcursorプロパティの名前、そのもので、以下のように追記します。
これでマウスを乗せてください、マウスの形が変わると思います。


$(".demo05 li:first-child img").monochromer({color: "sepia", type: false, cursor: "pointer"});
$(".demo05 li:nth-of-type(2) img").monochromer({color: "blue", type: false, cursor: "crosshair"});

実はcanvas要素を生成して、span要素でラップ

span.monochrome-wrapのDOM構造

内部的にcanvas要素を生成して、img要素のピクセルをcanvasに取り込み、変色させています。
img要素とcanvas要素はCSSのpositionで重ねて、その親にspan.monochrome-wrapという要素を生成しています。

レイアウトをするとき、img要素にmarginとpaddingとborderとfloatを指定すると、span.monochrome-wrapに適用します。
しかし他のCSS設定は無視されますので、例えばtransformとかで、マウスオーバーでscaleによって大きくしたり、とかが出来ません。
なので、内部的に生成されたspan.monochrome-wrapに対してCSSを当てるといいです、以下のようなCSS設定でマウスを載せると大きく見せられます。

facebookプロフェッショナルガイド

.demo06 span.monochrome-wrap {
-webkit-transition: .3s;
}

.demo06 span.monochrome-wrap:hover {
-webkit-transform: scale(1.2);
}

将来的には、img要素に指定したCSSプロパティを全部span.monochrome-wrapに適用させたいところ。
実は試したのですが、クロスブラウザの作業でどうしてもうまくいきませんでした。
ぜひ改良したいなあ、と思います。

あと大事なことなんですが、canvasの仕様でドメインの違う画像のピクセルを操作することは出来ないことに鳴っているようです。なので、同じドメイン内の画像だけにおいて使うとよいでしょう。


やっぱりIE9でもキャッシュ有効時のimg要素はonloadを無視する件

ie9.png

今さら書くことでもないのですが、IE6〜8に引き続き、IE9でも同じような仕様なので、自分用にメモ。
JavaScriptで画像(<img>)の読み込みの完了を待ってから処理を実行する時に、キャッシュ対策としてよくやってる

var img = $(this); // <img>を指す
img.src = 画像のパス + "?" + new Date().getTime();
img.onload = function () { //読み込み完了後の処理

でもでも、、今回はちょっと違うケースで、
もう既にHTMLに書かれている以下のようなimg要素のロード完了を待つ場合、src属性の値はもう決まっているから、キャッシュ対策っていうものでもないのです。

<img src="image01.jpg" alt>

IE9の場合では、もう既に画像がキャッシュによって読み込みが完了している場合、
onloadイベントハンドラを実行しないでスルーしちゃうので、読み込み後の処理が全くされない状態でした。
ただしこれはIEだけの問題で他のブラウザは素直に処理してくれるので、
ブラウザ判定をして、「IEで見てる、なおかつ、画像の幅が0ではない」事を条件として、ロード完了後の処理を行う、
さもなくば、他のブラウザと同様の処理としてonloadを使って、読み込み完了を待つ、という処理で対応してみる。

//jQuery使用です
var img = $(this); // <img>を指す
var ua = $.browser;
if(ua.msie && img.width() !=0) {
imageLoaded();
}else{
img.load(imageLoaded);
}
function imageLoaded (){ //読み込み完了後の処理

画像が読み込まれないと、後で処理などをするときに困るので、
画像読み込みとIE9仕様の対策はこれから要るのかな?と。

TwitterのタイムラインをPHPとJSを使ってIllustratorに自動組版のデモ

IMG_1944.jpg
〜DTP Booster 028 @ アップルストア銀座に出演しました〜
もう少しかかるかもしれませんが、Illustratorの書籍を執筆中で、夏の終わりか秋口にリリースされる予定の「Illustrator 10倍ラクする仕事術」の出版記念イベントが東京のアップルストア銀座で開催されたので出演してきました。
アップルストア銀座には2度目の登壇になるんですが、DTP系のイベント出演で東京はAdobeさんのイベントで一度出させていただいたっきり久しぶりだったと思います。
この日、アップルストア銀座3Fシアター会場は超満員!
立ち見(座り見)の方も出たくらいでした、参加された方ありがとうございました。
このイベントで僕は、IllustratorをJavaScriptで自動化するというデモをさせていただきました。
もちろん、書籍にも執筆しているトピックです。
このサンプルは、CSV形式に保存された各社員の名前、肩書き、メール、画像のファイル名を、JavaScriptが読み取り、解析してIllustratorに全社員分の名刺を作成/配置するということを想定したデモです。
この内容は本に載りますのでここでは書きません、ぜひ本を買ってね!
ちょっと面白そうだと思い立って、前日になって考えたネタなのですが、
Twitterにあるハッシュタグ付きでつぶやかれたそのツイートのアイコン画像と本文をIllustratorで名刺にしちゃおうという実験をしようと思いました。
あらかじめFacebookで友達に声をかけて協力してもらったりしましたが、
会場にいた方にもこの実験に参加してもらいました。
結果は見事成功!
ただ、プロセスを言いますと、ローカル内のCSVファイルを読み込むことはできるんですが、
外部ドメインやリモートサーバ上のファイル(http://で始まる)を読んだりするのは色々挑戦してみたんですが、どうしてもエラーが起きて取れません。
なのでこうしました。
1. Mac内でローカルサーバを立てる(今回はMAMP)
2. ローカルサーバ内でPHPを起動、Twitterのタイムラインを取得
3. PHPによりローカル内にTwitterアイコンをダウンロード保存させる
4. PHPによりローカル内にTwitterタイムライン内のデータをjsonファイルとして保存する
5. JavaScriptでjsonをパース、Illustratorに画像と本文を自動配置
これでいけました!
ひとつハマったのが、アイコン画像の破損リンクと拡張子。
どうも間違ったり適当な拡張子をファイル名に付けてしまうと、Illustratorがエラーを吐き出して処理を中断します。
このため、PHP内部で行った対策。
1. 画像サイズが存在しないと判断された場合、処理をスキップする
2. 拡張子はimage_type_to_extension関数で調べて得た本来の拡張子を適用し、jsonにも反映させる
 (これをしないとIllustratorが受け付けない事がある)
さて、JavaScript側ですが、アイコン画像はサイズがバラバラです、大きい方の画像を取得したので。
これをそのままIllustratorに配置するとみっともないので、対策は主に2つあります。
・PHP側で画像の幅を指定して作り直し、保存する
・JavaScript側で、規定の横幅÷画像の幅でそれを拡大縮小させて合わせる、縦にはみ出た部分はクリッピングマスクする
で、後者を選びました。
そのソースがこんな感じです。

var imageFile = File(imagePath);
var imageObj = maskItem.placedItems.add(); // -----(1)
imageObj.file = imageFile; // -----(2)
var scales = 50/imageObj.width; // -----(3)
imageObj.resize(scales*100,scales*100); // -----(4)

上記のスクリプトでいうと、マスクアイテム内に取得した画像を配置します(1)
imageFileに代入された画像のパスを指定してロードします(2)
(3)は画像を50ptの横幅に統一させたいので、まずは50÷画像サイズで拡大縮小率が出ます。
resize()関数を使えば、拡大縮小ツールを使うのと同じです、ただし、100%が原寸として考えるので、100を掛けます。
これによって画像は全て同じ横幅にリサイズされて表示されます。
さてこれだと、正方形なら縦も50ptになるはずなんですが、画像の縦横比もバラバラ。
ここでは正方形のパスをマスクする側として使います。
マスクオブジェクトを最初に用意しておきます。
マスクのgroupItems[0]で、グループ内の重ね順で一番上のグループ化されたオブジェクトを取得できます。
その中ですでにクリッピングマスク処理された四角形を入れておき、この中に画像を配置してマスクさせるという方法です。
さて、セッション中ナマ実演だったので、うまくいくかドキドキでした。
アップルストアの電波を借りたのですが、やっぱりちょっと遅くて、読み込みから処理まで時間がかかりましたが、
何とか成功しました、下図はその結果です。
49人分のTwitter名刺をIllustratorで自動生成しました。
もっと多かったんですが、なぜか最初につぶやいてくれたひと、入ってません、ゴメンナサイ!!
あとPHPの制作は最終的にCarpalの宮澤さんにお願いしました、ありがとう!
セッションで使ったスライドはこちらです。
セッション中で紹介しました、Illustrator用のJavaScriptリファレンスは
で見れます、英語ですが。。。
ライブデモでできたTwitter名刺 ▼
applestore_demo.jpg