CSSNite UIデザインのパターン化 に参加してきたよ!

20130404-230916.jpg

CSSNite UIデザインのパターン化に参加してきました。



講師は、輝けるクックパッドのUIデザイナー、池田 拓司さん。
いや、本当に私からはまぶしかったです。クックパッドはやっぱり憧れの企業。
つい先日本をご出版されたばかり CSSNite UIデザインのパターン化 に参加してきたよ! で、しかも私も買ったくせに直前まで気付かなかったのですw

20130404 230531 CSSNite UIデザインのパターン化 に参加してきたよ!
場所はコワーキングスペース茅場町。初めてお伺いしました。
こんなところにあるのね~~。
本当に、数十人やっと入れるくらい。あっという間にキャンセル待ちになったので参加できてラッキーでした。


アジェンダ

著書は事前に拝読の上、参加したのですが、やっぱり体系化してまとめるのがうまい方のプレゼンテーションは、
聞いてるだけでもすごくよく頭に入りますね。
また途中で簡単なグループディスカッションが合間に入ったため、飽きることもなく、
さらには雰囲気もとってもフレンドリーで楽しく最後までお話を聞くことができました。

さて、アジェンダ。(たぶんちょっと漏れてるかも)
・プラットフォームの流儀
・画面パターン
・UIコンポーネント
・情報のビジュアル化
・ガイドライン&ルール化


プラットフォームの流儀

iOS,Android,Smartphone websiteでは、それぞれ流儀がある。
たとえばヘッダのUIとか。
これに合わせるのか合わせないのか。たとえばFacebookアプリは各プラットフォームで統一している。(アイコンは異なる)

プラットフォームに合わせることのメリット

 1.ユーザーにとって親しみやすいUIになる
 2.プラットフォームで特徴的な機能が使える
 3.開発の分離ができる

プラットフォームに合わせないメリット

 1.開発コストを下げる
 2.メンテナンス性向上
 3.世界観の統一
 4.プラットフォームが変わっても、ユーザーに混乱がない


リソースが潤沢にあるならプラットフォームに合わせるか、すでにユーザーを獲得できているならば合わせずに統一する、
かなと個人的に思ってみたり。


画面パターン

大枠は下記の画面の繰り返しで構成される。

 1.導入画面 :スプラッシュなど
 2.TOP画面 :ただし各コンテンツへの誘導画面なので、一覧の画面と同列としても考えられる
 3.一覧画面 :検索結果、リスト、ギャラリーなど
 4.詳細画面 :最下層の画面。
 5.入力画面 :ユーザーがアクションを起こす画面


UIコンポーネント

画面が決まったら、画面内で使う要素を決めていく。

たとえば
<ヘッダ> → 構成される要素:タイトル・前画面へ戻るリンク・グローバルナビ
<通知>  → 構成される要素:モーダルメッセージ・モードレスメッセージ


私自身、モーダルとモードレスでのメッセージの違いがあんまりハッキリしてなかったのですが、

 行動を起こす「前」の確認 → モーダルメッセージを使う
 行動を起こした「後」のフィードバック → モードレスメッセージを使う

と言われた時には、目ウロコでしたよ。そうか!!
ただ、実際にはモーダルメッセージをやたら使うとかなりウザイ製品になるので、気をつけないといけないですけどね。
(よく仕事で言われます…)


情報のビジュアル化

ここでは具体的に2つを取り上げてお話いただきました。

レーティング

情報の質の格付け。
4つの例。Facebook型いいね/Youtube型いいね&よくないね/モーションアイコン方式/シンプル星レート方式
それぞれのゾーニング。使いやすさとユーザーの受け入れ度合いなどで分類。

アイコン

アイコンについては、10種類のアイコンを例に出し、皆で受け取る意味を考えてみました。
結構見慣れないのもあるよね。

20130404 233638 CSSNite UIデザインのパターン化 に参加してきたよ!
わかります?これ。

A:その他 → えーってなりましたw Androidだとこれが縦になり、ドロップダウンが出るようなUIがあるそうです
B:シェア → iOSの初めはウインドウの挙動を示していたらしいですが、今ではすっかりシェアを意味するようになりましたね
C:戻す → 更新じゃないとw 更新は時計回り。
D:削除、閉じる、キャンセル
E:調整・設定 → これはわからなかった…! Android独自のものだそうです。※4/6修正
F:保存 → これはねーw 未だにフロッピーでいいのかっていう… ああ皆同じこと思ってるのねーってホッとしましたよ
G:ごみ箱 → 削除ではなく、「要らないものを一時的に保管しておくところ」というニュアンスで使う
H:お気に入り・人気 → 人気あるコンテンツ、といった意味あいでも使う
I:グループ・アクティビティ → iOSではなんと「Most viewed」(最も見られたもの)という意味もあるそうです
J:リンク → これは想像通りAndroidでした。最初はブランチって意味かと思ったわぁ



ガイドライン・ルール化

クックパッドでの実践事例の紹介。
下記のルールとドキュメントを用意し、パターン&ルール化を実践しているそうです。

 1.UIルールデザインルール
 2.UI開発ルール
 3.CSS/Sassコーディングルール
 4.デザインフレームワーク

ルール化することで、開発エンジニアなどが画面設計しやすく、スピードも出るし問題が起きにくい。
ただし、パターン化しすぎてそれに囚われると新しいものが生まれにくい、という話もありました。
「一過性」「芸術性」「個性」にも目を向け、心惹かれるデザインをすることが大事!!


個人的に聞いてみた

Q.ルール化している状態で、ルールを書き換えることはあるのか?どのタイミングか?
A.問題が起きた時に更新していく。たとえばボタンなのかリンクなのか、またボタンデザインもバラバラになることがある。
それ以外は基本的には触らない。


とのことでした。もうちょっとお話したかった…!
いやー、あっという間でした。楽しかったです。
自分のやるべきことも見えてきた。
明日からまた頑張ろう。


2 comments

Leave Comment
  1. 池田

    池田です。先日は参加ありがとうございます。また、こんなに丁寧な記事ありがとうございます。1点アイコンの「E:調整・設定」ですが、これはAndroid独自のものであり、iOSでの言及はありません。うまく伝えられず申し訳ありません。設定のアイコンはいくつかのパターンが存在し、新しいこのアイコンが定着するのか、どうなりますかね。お互いデザイナーとして意識したいところですね。

  2. Wakana Matsumoto

    池田さん
    こちらこそ素晴らしいセミナーをありがとうございました。
    お気づきかと思いますが、終了後に少し質問をさせていただいた者です。名刺を切らしていて本当に残念でした…。
    内容へのご指摘ありがとうございます。記事は修正しました。
    個人的には、保存アイコンこそ議論して変えていきたいような気がします…。

    書籍の内容の方も読み返しましたが、アイコンについての考察の部分は、スマートフォンだけでなく他の部分でも本当に参考になっています。
    またセミナーを開催される場合には、ぜひ参加させていただきたいと思いますので、よろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>