このあいだも、Googleのハッカソンに呼ばれて東京に行って思ったんですが、「知識が豊富なエンジニア達の中にデザイナーを投入してハッカソンを行おう」と、最近そんなことを企画するところが増えだしたな、という気がします。

しかし、企画側の理想は分かるんですが、今までのハッカソンの感覚でやるとまったく意味がないと感じています。
むしろデザイナーを投入するだけ時間の無駄とも言えます。
エンジニアの会話というのは、エンジニア同士でないとなかなか伝わりません。
だから、その場にデザイナーが入り込むと誰とも会話が出来なくなります。

ただし、アプリ全体の完成度を考えると、デザイナーという分野の力は欠かせません。
なぜなら、単に動くだけでは、コンシューマにとって魅力を感じないからです。

デザイナーを交えてハッカソンを行おうとするすべての企画側の人へ

まず、アイデアソン（アイデアを話し合う）に完成のイメージを明確にしないとデザインは出来ません。
つまり、そのフェーズを踏まない以上、「デザイナーハッカソンは不可能」と考えて下さい。

では、そのアイデアソンのフェーズなんですが

• 主なターゲット層を明確に（性別／趣味／年齢層／職業など）
• UIやビジュアルデザインのイメージを明確に（上記のターゲット層が決定した後だと決めやすい）
• 画面の手書きラフ（遷移図などを思いついたまま、だんだん清書していく）

さらに、「これは守りましょう」というルールを設けるのもいいでしょう。
・アイデアが出来ないうちに、誰かひとりでもコードを書き始めるとNG（多少の検証はしょうがないとして）
・エンジニアもチーム内すべてが、デザイン面のアイデアソンに加わること

実際の仕事（案件）でも最低限これだけはないと、デザイナーが動けません。

むしろ、将来の私達の業界は、手を動かす人（デザインする人だろうがコードを書く人だろうが）すべてプロジェクトのゴールを明確に見据えるために、発案から参加するスタイルがどんどん必要とされています。
すでにシリコンバレーなど、先進的なITの現場では、このスタイルを導入しています。
「指示が降ってくる」なんて言葉は過去の言葉になるのでしょう。

つまり、この流れを実際にハッカソンで行う事が、私達の制作現場の将来のスタイルを想定しているわけで、私達が5年後、10年後、もっと周囲からの評価が高い仕事を続けていくためには、いまからこのコミュニケーションという難題に触れ、経験し、可能であればその問題解決のすべを自分なりの方法で得なければなりません。

簡単に考えている人は、やってみるときっと頭を打たれるほどの難しさを肌で感じる事でしょう。
とてもシンプルなWebアプリケーションを作るだけでも、リリースまで想定するのであればなんらかの「設計上のデバッグ」が必要となります。

当初のやりとりでうまくいくと想定しても、一つの仕様変更で次々と連鎖的にやり直しとなるでしょう。
でも、ここで見つかったバグをつぶさないと進めてはいけないので、とても進まない事にジレンマを感じます。

デザインのアイデアから設計にいたるまで、チーム全員が参加する必要があるのはそういった理由があるからです。
徹底すると質の高いイベントとなるでしょう。

こうなったらデザイナーハッカソンを自分で立ち上げてみました

実はハッカソンに参加したデザイナーの力作が、アプリに反映出来なかったらとても残念な気持ちになり、その気持ちがチームのみんなに伝わらないのは余計つらいんです。
こういった経緯があって、「じゃあ、自分達で企画しよう」ということになりました。

先日和歌山の和歌浦アートキューブに泊まりがけで合宿を行ってきたんですが、これがとても良かったです。

一日目はとにかく誰も実装ベースの作業は禁止！
ペンと紙と会話で「完成を想定する」ことで精一杯です。

アプリは「勤怠アプリ」にしました。私達クリエイターにとっては少々くだらないと思えるアイデアも、一般の人にはモチベーションが上がるようなものもあります。
単にアルバイトのスケジュール帳ではなく、稼ぐ毎にアバターが成長／変身していくというもの。

iPhoneのSafariで動くことを想定したWebアプリです。最終的にはAndroidでも使えるようにしたいと考えています。

【アプリの概要】
・アルバイトのスケジュールをカレンダーに記帳できる。
・複数のバイト先を新規登録／管理でき、次からスケジュールを記帳しやすいようにする。
・アルバイト先の職種（力仕事やコンパニオンなど）を勤務先単位で登録する。
・職種ごとにアバターが成長していく

【目的】
スケジュール帳として厳密なものではなく、ビジュアルで楽しめる、モチベーションが上がるアプリを目指す。「なんじゃこのアバター？」と思えるようなユルいキャラから変なキャラまで用意。

【メンバー】
・フロントエンドエンジニア...2名
・ビジュアル／UIデザイナー...1名
・キャラクターデザイナー......2名
・HTMLコーダー.....................4名（上記から3名が兼任）
・マネージャー.....................1名

というメンバーで、実はエンジニアがあと2人参加予定だったんですが、風邪と社員旅行で参加出来ず、タイムオーバーとなり、一部実装は持ち越し。

単純なアプリと思っていても、結構大変なコストがかかるという事に打ちのめされます。

あと数回の顔合わせをして完成するというスケジュールになります。

目指すところ

このプロジェクトを企画した目的は、僕らデザイナーが良いと思った色やレイアウトを、クライアントという「素人判断」に覆されないためにも、このチームで意図して出来上がったものの価値で、本当に良いものに理由を付けたいと思ったから。

「よいと思うものに言葉はいらない」という人もいるし、すごく分かるけど、ビジネスとしてお金をもらってデザインをする立場だったらそこには説得させる材料が必要。
僕らのハッカソンプロジェクトはそれを実現させて、参加したメンバーが将来本当の意味で良いデザイナーの仕事を続けられるように今から出来る事をしたい、そう思って作りました。

もう「上から仕様変更が...」といって、リリース前に中身のコードをツギハギにしてグチャグチャでも「なんとか動いた」の状態でリリースするような仕事をしなくてもいい将来を作りたいです。

システム設計ばりの「デザインの要件定義」をすること

「何案か見てみたい」...この最悪のケースを想定する

最悪のケースとは

相思相愛の関係で生まれる不思議なコンセンサス

クライアントにコンセンサスを得るまで手は動かさない

理想と現実

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

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

概ねデザインは好評をいただきました。
今回、実はこだわった目的は「リアル」ではなく、ただひとつ、それは、、、

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

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

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

もちろん、自分に自信があって言ってるわけではありません。
本当に売れているアプリやインターフェイスのデザインを見ると、自分のは、まだまだ作っては疑い、作っては疑い、の繰り返しだと思ってやみません。
自分のチカラというのは、いつになっても色んな意味で完成しません。
常にまだまだな状態だな、ということを改めて気づきました。

さて、まとめ。

ハッカソンですが、名前の印象からどうしても僕らデザイナーさんは敬遠しがちです。

そういう意味では大変意義のあるイベントだったと思います。

開発者の方とのやり取りが学べるいい機会だったわけですが、いざ始まると時間が足りず、自分の作業だけで精一杯なことがあります。

これは「一日でマスターできる◯◯講座」とかあるけど、僕から言わせたら「一日でマスターできる講座なんてあるわけがない！」というのと一緒。

デザインは一日にしてならず、なんです。

デザイナーとデベロッパーのフローをどうやって理解するか、これは何回でも積み重ね、可能な限り参加して経験していくことで、徐々に「こういったケースだとこうしよう」がわかってくるもの。

例えばアイデアに対し、自分の出せる引き出しの少なさが原因じゃなかったか？

デザインのトライアンドエラーを繰り返す際、仕方がない（やってみないと本当にわからない）ケースと、事前に察知して余計なトライは回避できるケースもあると考えています。

両方ともとっさの判断が要求されるとき、人は経験によって乗り越えられる場合と無駄足を踏んでしまう場合があります。

僕はこの仕事を20年やってきた今でもデザイナーとしてのエラーを経験して、少しでも効率の良いワークフローを実現できるようになりたいと考えています。

（効率、というのは、よくあるツールに頼るとかそんなのではありません、もっと自分の脳を鍛えるという意味が近いです。）

色々と今の自分の実力を再認識できた2日間でした、

SHARPの方、Androidの会の方、参加されたみなさん、勉強になりました。

ありがとうございました！！

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

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

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

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

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

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

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

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

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

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

Vanishing Pointを使った事例

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

しかし今回は校了まで手こずったな・・・
編集部の方、ご面倒おかけしました。
3ヶ月連続で記事を書かせていただきましたが勉強になりました！ありがとうございます。

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