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

東広島にある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

Adobe station5で行われたDTP Booster 013に出演しました!

dtpbooster013_akiba_demo.png

スクリプトで1000個のシンボルを散布

_1080237.jpg
東京・表参道にあるAdobe station5ギャラリーで開催された「DTP Booster 013」に出演してきました。
平日のお忙しい中集まってくださった方、お疲れさまでした、ご清聴いただきありがとうございます。
USTREAMはこちらで配信されています。
http://www.ustream.tv/recorded/7390200
スライドをシェアさせていただきます。
スライド(5.7MB/pdf形式)

参加された方にはフォローアップメールでサンプルファイルを配布していただく予定です。

その中にJavaScriptファイル、aiファイルも含まれます。
「星を描く.jsx」は、星を1000個作りましたね、あれのカラフル版です。
「シンボルをちりばめる.jsx」は、aiファイルに登録されたシンボルの個数を配列で管理出来るので、for文で毎回ランダムにシンボルを取得して配置するスクリプトです。
かならず、シンボルを持っている書類をIllustratorで開いた状態にして実行してください。

ドキュメントに対して「symbols」というプロパティはシンボルの配列を返します。つまり、「symbols.length」とすると、シンボルの総数を取得出来るわけです、このあたりはイラストレータとか関係無しに、JavaScriptを理解されている方ならすぐにお分かりかと思います。

スライドを見ながらセッション内容を思い出していただけたらわかると思いますが、流れだけ。


↑上記で1個だけ、何かしらシンボルが配置されます

「変数items」はシンボルのオブジェクトで、top, left, resize(), rotate()などのプロパティやメソッドを持っています。
これらも乱数で当てていって配置します。

それでは是非試してみてください。

グローバルナビゲーションの「溝」を簡単にカッコよく作るTips.

1layer_mizo.jpg

最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。
で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。

今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。
シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。

ここで大事なのが、「溝」。だと感じました。
地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。

aa.jpg

新規レイヤーを作り、同じ大きさの「土台」を作ります、塗りはわかりやすく赤で、何でもいいんです。

bb.jpg

選択範囲を残したまま「レイヤーマスクを追加」で「土台」の外は黒くマスキングされます。

ピクチャ 7.png

レイヤースタイルでベベルとエンボスを設定。これだけでOKです。

ピクチャ 5.png

ペンツールに持ち替え、黒い線で1pxの線を「溝」となる縦線を1本引いてください。

ピクチャ 4.png

このレイヤーの「塗り」を0%へ。

ピクチャ 6.png

場合によっては溝がキツすぎる、ということもあるので、そういう場合は、「ベベルとエンボス」の「テクニック」を「ジゼルハード」へ。だいぶ自然な「切り込まれた溝」の質感が出来ました。

Photoshopネタを執筆しました。【web creators8月号】

Vanishing Point
Vanishing Pointを使った事例

web creators 2009年8月号

今までどうもFlashの話題で寄稿させてもらったんですが、今回はPhotoshopの補正テクニックについて紹介しています。
タイトルは『Vanidhing Pointで空間の奥行きを見せる』というもので、138ページに記載されているので、Photoshoperの人たち、そうでない人たちも、是非参考にしてみてください。
マニアックな機能だと思っていたのですが、撮影するとき構図を失敗したときなど、もしかしたら使えるテクニックで、意外と威力を発揮する場面に遭遇したので、そういった経験も基に記事に書かせていただきました。
これを使うと、スカスカの空間に奥行きを与える事が出来たり、ビルをもうちょっと高くする事も出来るんですが、結構慣れも必要なので、一度はコレをみて(笑)練習してみては?とおススメです。

しかし今回は校了まで手こずったな・・・
編集部の方、ご面倒おかけしました。

3ヶ月連続で記事を書かせていただきましたが勉強になりました!ありがとうございます。

タイトルバー、サイドメニューのボタンデザイン

サイドメニュー用ボタン

前回のアクアアイコンに習って、よくあるWEBデザインの「サイドメニュー」のボタンをデザインしてみました。jpgですので、良かったら使ってみて下さい。


特に使っていただけるにあたり、許可はいらないです、ただ、一言メールにてご一報下さい、これらの画像を使って起こりうる問題等には一切責任はおうけ出来ません、ご了承下さい。

iPhone風のアクアアイコンを作る。

アクアアイコン、iPhone風

前回アイコンを作った訳ですが、今回、ソフトバンクからiPhoneが発売されるというニュースを聞いて、コレはぜひ、iPhone風のアイコンを考えてみなければ・・・と思って色々挑戦した、条件は相変わらずPhotoshopレイヤーを2つまで。
iPod Touchユーザの僕としては勝手に使命感にかられる。

続きを読む iPhone風のアクアアイコンを作る。

Macの「システム終了」メニュー等が2つになる、Macが英語をしゃべる

メニューがダブる

マックが急に英語をしゃべり始め、ボタンに触れたら枠線が付いて、再起動、システム終了が2つになります。

続きを読む Macの「システム終了」メニュー等が2つになる、Macが英語をしゃべる

2レイヤーで作るアクアアイコン

ピクチャ 0.png

今回はアクアアイコンに挑戦、デザイナーの皆さんがよく使うPhotoshopをわずか2レイヤーで、立体感があり、ツヤめいているような、そんなボタン、アイコンを目指します。

ポイントは「レイヤー効果」のグラデーションと光彩(内側)だと思ってます。

続きを読む 2レイヤーで作るアクアアイコン

グローバルナビゲーション、押したくなりますか?

グローバルナビゲーション、押したくなりますか?

ボタンですね、これってサイトにとってはスゴく重要な位置づけで、ボタンの存在感だけで、見てもらえるページも見てもらえなくなる可能性も否めないと思います。
ここでは、自然にクリックしたくなる、そんなボタンを作ってみたいと思います。

続きを読む グローバルナビゲーション、押したくなりますか?