スタッフブログSTAFF BLOG

Blog

3月に参加した、CSS Nite LP33「UI/UX」

＠ベルサール九段　イベントホール

CSS Nite LP33「UI/UX」 13:15〜19:40の長丁場。デザイン設計とかあれこれ、たくさん吸収して帰ります☻ pic.twitter.com/zyywU25V09

— Chitose Watanabe (@biscomjp) 2014, 3月 29

自分用の備忘録としてまとめます。（ようやく）

そもそも、UI/UXとは、
UI

ユーザに対する情報の表示様式や、ユーザのデータ入力方式を規定する、
コンピュータシステムの「操作感」。
（引用：IT用語辞典）

ある製品やサービスを利用したり、消費した時に得られる体験の総体。
個別の機能や使いやすさのみならず、ユーザが真にやりたいことを楽しく、心地よく実現できるかどうかを重視した概念。
（引用：IT用語辞典）

いまのWeb（UI/UX）の流れも知ることができ、いろいろと刺激を受けるセミナー参加となりました。
これからも質の高いWebサイトを提供できるよう反映していきたいと思います。(˘︶˘)

当日のセッションは、とにかく豪華な登壇者のみなさんでした！

[session 1]

ブリッジビルダー (Bridge Builder)
坂本貴史（ネットイヤー）

CSS Nite LP33 UI/UX "Bridge Builder" from Takashi Sakamoto

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-1.html

あらためて、カスタマージャーニーマップを取り入れた提案なんかもできたらいいなと（まだ妄想）。
ジャーニーマップを作るのが仕事になってしまいそうな感じも「大」ですが…さくっと作ってクライアントさまへの要求整理・共有なんかができれば。（とても理想的）

坂本「「ウェブサイトを作っています」という人の中には、「流入を考えています」という人もいれば、「マークアップしています」という人もいます。では最終的には何を作っているのでしょうか？」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

坂本「最終的に作っているのは「プロダクトデザイン」（サイトやアプリ、広告）か、「サービスデザイン」（ステークホルダーマップ、ジャーニーマップ）」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

今やってるのはPX（プロダクトエクスペリエンス）。けど会社としてはSX（サービスエクスペリエンス）を目指したいと思っているし、将来的なことを考えるとSXに転換していかないとだめだと思う。 #cssnite_lp33

— Mari Takahashi (@M_Rdesign) 2014, 3月 29

2時間で作るカスタマージャーニーマップ――実例とともに考える新しい「おもてなし」のカタチ | Web担当者Forum http://t.co/uxtnp1yJP5 @webtanforumさんから　#cssnite_lp33

— Mari Takahashi (@M_Rdesign) 2014, 3月 29

ジャーニーマップに関してはぜひこちらも。→なぜなに？ユーザエクスペリエンスマップ（概要編） http://t.co/k2cW5YuBMC #cssnite_lp33

— Sumito Miyauchi (@necoze) 2014, 3月 29

坂本さんが実際にUX診断した
→UXのプロがアドバイス「Web担のサイトはこう変えるべし」――やってみました「UX診断」
http://web-tan.forum.impressrd.jp/e/2014/05/28/17255

[session 2]

UIデザインのパターン化と効果的な実践方法
池田拓司（クックパッド）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-2.html

主婦御用達「クックパッド」全体のサイト設計やデザインに関わる池田さんのお話。
「UIデザインのパターン化はUIデザインをする上での１つの切り口であり、ユーザーに分かりやすく伝わりやすいデザインをするためのベーススキル。さらに、感動して、愛着もって使ってもらうサービスを作るには、サービスの特徴やサービス提供者の得意な部分を活かして磨きをかけなければいけない。」

クックパッドのデザイナーさんは「ヒューマンインターフェースガイドラインは全員必読、というように知識を共有されているとのこと。 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

iOS Human Interface GUideline
Android Design

UIデザインのパターンを紹介
http://www.mobilemozaic.com/
http://androidniceties.tumblr.com/

Androidオフィシャルのアイコンデータ
https://developer.android.com/design/downloads/index.html

[PR session]

スマホの検証が10倍はかどる！Remote TestKitの紹介
北岡恵子（NTTレゾナント）

リモートアクセスによるAndroid、iPhone、タブレットの実機レンタルサービス
http://appkitbox.com/testkit/
200機種以上の実機での検証が可能。こういうサービスを使っていかないと、とても実機での検証はついていけません..（増え続ける新規端末..アンドロイド端末はすでに1万1千機種とか..）

[session 3]

アプリケーションのイディオムデザイン
上野学（ソシオメディア）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-3.html

なんと、ソシオメディアさんは90年代後半の、Apple Japan の Webサイトを構築されていたことのこと。

な、なつかしい！その初代iMacがばーんとあったサイトの時に、デザイナー人生スタートしたんだよなあ。そのデザイナーにお会いできるとはうれしい。　#cssnite_lp33

— Mari Takahashi (@M_Rdesign) 2014, 3月 29

上野「イディオムデザインの基本手順は、まずデザインパターンを知っていること。その後にオブジェクスベースで作るか、タスクベースで作るかを考える。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

[session 4]

人間だからこそできる、気配りデザイン
秋葉ちひろ（ツクロア）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-4.html

どこかで「能書きのUI/UXはいらない」というコメントを見たことがあるのですが
大切なのは、こういうこと

秋葉「気配りデザインの3つの気配り：ユーザーの負担を省く気配り／操作を予測させる気配り／気持ちよく操作させる気配り」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

なんだと思う。

[session 5]

実例に学ぶ、“失敗しない”UIデザインのコツ
新免孝紀（ChatWork）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-5.html

こちらも利用されている方、多数のチャットワークさん。
デザイン部マネージャー新免さんのお話。

新免「実際のチャットワークの改善について（失敗談含めて）お話しします。開発フローについて／UIパーツのガイドライン化／ユーザーの声への対応」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

新免「プロトタイプを用いた開発フローで、早期に検証を行い、大きな手戻りを防ぐ。UIパーツのガイドライン化で、一貫性のあるデザインを提供。製品のコンセプトを明確にした上で機能追加は慎重に行う。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

全ての要望を全部全部入れていくとデザインが破綻する #cssnite_lp33

— emi moriya (@emim) 2014, 3月 29

…Yes.

[session 6]

ディレクター･デザイナーのためのプロトタイプ制作とシナリオ作り
土屋尚史（グッドパッチ）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-6.html

グッドパッチさんは Gunosy のアプリの UI を担当。（ただし、Ver 2.0 まで） #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

Gunosyの初期のUIを見たときから、グッドパッチさんに♡でしたので
今回、実際にお話が聞ける機会があってとても嬉しかったです。
おもにプロトタイプのお話でした。

土屋「プロトタイプを作る目的：1. 作ろうとしているサービスのニーズがあるのかどうか? 2. ユーザビリティと設計の問題点の洗い出し 3. 技術的な要件を固めるため」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

土屋「プロジェクトのフェーズによって、作るプロトタイプは変わる。サービス設計フェーズではペーパープロトタイピング、要件定義フェーズではワイヤーフレームモック、ビジュアルデザインフェーズではデザインプロトタイプ。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

POP　https://popapp.in/
紙に書いたペーパープロトタイピング画像に画面遷移のリンクを付けられるiPhoneアプリ

Flinto　https://www.flinto.com/
モックアップのURLが生成され、iOS上で動作確認が可能

Invision　http://www.invisionapp.com/
画像をドラッグ＆ドロップでプロトタイプを作成

Prott　https://prottapp.com/
グッドパッチ開発のモバイルアプリ向けプロトタイピングツール

土屋「プロトタイプ作成の上で最も重要なユーザーストーリー設計。全体のユーザーストーリーを考えてからプロトタイピング。ただ、カスタマージャーニーマップはハードルが高いので、ラフマップから作る。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

土屋「プロトタイプを作っては壊す中でサービスのクオリティは上がっていく。なので、「作って壊す」を多くやるためには、考える時間を多く取らずになるべく早く、動くプロトを作る。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

[session 7]

問題解決のためのプロトタイピング
深津貴之（ギルド）

（講演ログ）
http://www.andoh.org/2014/03/css-nite-lp33-7.html

深津「「プレス・ファースト」商品を作る前に、疑似プレスリリースを作る。作成した疑似プレスリリースをスタッフやユーザーに見せてどのような反応を見せるかで見極める。商品を作る前に商品の需要を計ることができる。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

深津「プロコンリストの長所と短所を比べて、セットで消し合えるものを消して行き、残る項目がどちらが多いかでやる・やらないを見極めて行く。この比較を行うのは、思い込みにブレーキをかけ、客観的評価の機会を作るため。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

#cssnite_lp33 プロコン・リスト。はてなキーワードでの説明などがありました。メリット・デメリットをリスト化したもの。 ●Pros Cons リストとは http://t.co/DiInIMvLJs

— you (@youtoy) 2014, 3月 29

深津「「フィッシュボーン図」ある物事に対して、問題と原因を網羅するツール。工場の製造工程管理とかに使われている。」 #cssnite_lp33

— CSS Nite (@cssnite) 2014, 3月 29

ラストの深津さんもおもにプロトタイプのお話だったのですが、とても共感する内容でした。
なにがって、上記のような特殊なスキルが無くてもできるものや、紙やペン、ポストイット、シール（星形シールをFavoriteボタンに）などのアナログツールを使った、今すぐマネできるペーパープロトタイピングの手法が盛りだくさん。（わりとアナログなひとなので（わたし））