Rainbow U

1. ノートに下書き
2. 表示領域のサイズの確認
3. 配色を決める
4. 描画ソフトでイメージを描く
5. コーディングする

適当に必要な機能を書きだして、必要ないものを削っていく。アプリの価値から遠いものは、ガシガシ削る。
機能を削るとデザインがすっきりして、ユーザーの行動の選択肢が減ってわかりやすくなる。ボタンが多いと、それだけで気が滅入る。ライトユーザーは顕著。
というか、機能を削ると、実装と保守が楽になる。多くの場合、作ったところでどうせ当たるわけないんだから、「シンプル」を言い訳に楽して核の部分だけを作り、必要があればテコ入れしたらいいと思う。

mixiアプリなら、横760で、縦は自由。縦600がスクロールなしで綺麗に見れる範囲。
iPhoneは、横320*縦480。
facebookアプリは、Zinga pokerを確認したら、横は760だった。縦は収まりきらない感じでつくっていたが、どういう方針なんだろうか。
単位はpx。
これにあわせて作らないと、あとでデザインを1から作り直さなければなくなる。
表示サイズと、通信周りのコケやすい部分(クロスドメイン系)だけ簡単に実装することでリスクを減らし、どんどん「あとは馬鹿でもできる状態」に持っていくイメージで作業する。
例えるなら、大富豪。手札に合わせて最終型(その状態になれば馬鹿でも勝てる状態)をイメージして、そこから逆算してカードを減らす要領。
リスクを抱えながら進むと、そのリスクが顕在化したときに手戻りのおそれがある。どうせやるなら、楽になる順番でやる。
デザインに限らないが、スピードを犠牲にしてでも、本番環境で早めに一度動かした方がいい場合が多いと思う。

このサイトを使う。左側のボックスにキーワードを入れると、それに合った配色を提案してくれる。
☆の数が人気を示す(?)。☆4つにしておけばとりえあず間違いないと思われる。
はっきりした色の面積を増やすと目がチカチカするから、暗い色、淡い色、くすんだ色を背景とかに持って行って、強調部分とかにはっきりした色を持っていく。

実際に動くアプリと寸分違わぬ形で描く。「あとは馬鹿でもできる状態」に近づけることが手戻りを減らしてくれる。
レイヤーを使って分割すると、修正が簡単になる。特に位置の修正が楽になる。あとは、レイヤーの情報をそのままつかってコーディングすることができるので、楽。
ボタンは、なるべく画像を使わないで、css3の角丸で対応するようにがんばる。画像は重くて表示に時間かかるし作るのがめんどくさい。
htmlコーディングしながらデザインするのは、コーディング→ブラウザ確認→デザイン修正案を考える(→コーディング)と手間がかかるが、
描画ソフトなら、直接的かつ直感的にデザインを修正できるので、楽。俺はSeashoreを使っている。軽くて速い。
ここで聞いた。

描画ソフトで描いたイメージに忠実に書く。
htmlとcssを完全に分離して、デザインにとりかかるときは、cssのみをいじるような状態にする。
javascript等であとで埋める部分は、とりあえず適当にhtmlに直接埋めておく(?)。
サイズや位置は、大外の枠以外は、相対的な位置、相対的な値を指定する(％を使う)。