「スマホUI勉強会 -実装×UI/UX×ガイドライン-」に参加しました

2013-11-20 20-50-09 Image

スマホUI勉強会 -実装×UI/UX×ガイドライン-

こんにちは、星影(@unsoluble_sugar)です。

18bafaadbc194d60ab5d80fecaf69d8f 2

11月20日に開催された「スマホUI勉強会 -実装×UI/UX×ガイドライン-」に参加してきました。

【増席】スマホUI勉強会 -実装×UI/UX×ガイドライン- : ATND

定員160名のところ、200名以上もの参加希望者が集まるという大盛況ぶり。UI/UXへの関心の高さが伺えますね。

会場

会場は渋谷にある「シナジーカフェ GMO Yours」さん。

GMOインターネットグループ シナジーカフェ GMO Yours

毎度お世話になっています。

発表内容

※講演資料はアップされ次第、追加予定です(チラッチラッ

UIデザイナー 征矢 裕之
『ユーザーファーストってなんやねん』インタビューとか簡易ユーザーテストとか

ユーザーファーストのお話。革新的なプロダクトを生み出すには、ユーザを良く知ることが重要。

d06fec8493238a243fa429ea6e18d61c

ところどころゆるい絵が差し込まれており、ほほえましい感じで聞けました(笑)作る側の思い込みで空回りって話はよくあるので、ユーザーの生の声を聞くことはやっぱり大事だなと。

2013-11-20 19-50-22 Image

このサイクルをぐるぐる回す。頭では理解できるのですが、実践するのはなかなか難しいですよね…

GMOメディア株式会社 デザイナー 伊藤 麻紀子
コミュニティアプリのUIリニューアルから学ぶ、iOSとAndroidのUIお作法(仮)

GMOメディアで作っているコミュニティアプリ「コーデスナップ」のリニューアルを事例に、UIデザインで気をつけていきたいことなどのお話。

2013-11-20 20-15-10 Image

活動の連続性を検討。

2013-11-20 20-08-14 Image

3ddaf9184554c1e5a405cd9531617a37

他のコミュニティアプリを研究。

518d3b75d203373440fc96e786a5c387

UXのためのUIデザイン。これくらいやらないとダメなんですね。

2013-11-20 20-16-38 Image

株式会社リブセンス フロントエンドエンジニア 植村健太
smartphoneのsass導入フレームワーク化について

CSSを効率良く記述するために拡張されたメタ言語「Sass」を導入。フレームワーク化してみたというお話。

2013-11-20 20-22-37 Image

始終やる気のない感じで進められていましたが、発表内容は大変素晴らしいモノでした。

2013-11-20 20-24-26 Image

リブセンスではデザイナーがワイヤーフレームを作成。

2013-11-20 20-25-03 Image.1

見出しは見出し、ボタンはボタンなど、同じパーツ同士を集めて本当に必要なものかどうか検討。Twitter BootstrapやWordPressのCSSを真似したりしたとのこと。

2013-11-20 20-26-34 Image

設計思想を前もって共有。これ大事ですね。

2013-11-20 20-30-20 Image.1

セレクタ名の話も参考になりました。これも最初が肝心…

2013-11-20 20-32-33 Image.1

「CSS整理するのも家の中整理するのも一緒」という名言が出ました。

2013-11-20 20-40-44 Image

デザイナーとエンジニアのコミュニケーション大事。

GMOインターネット株式会社 次世代システム研究室シニアクリエイター 稲守 貴久
ガイドラインから考察するスマホ/タブレットUIデザインパターンとGMOの取組み(仮)

UIデザインパターンを、各スマホOSのガイドラインや人気タイトルから考察。成功事例をもとにメリット・デメリットを考えて作っていきましょう、というありがたいお話。

2013-11-20 20-52-04 Image.1

各スマホOSのガイドラインを見たり、人気タイトルをサンプリング/パターン化する。やっぱりどこもやってるんですねぇ…

2013-11-20 20-55-55 Image

事例紹介クイズは新しかった(笑)

株式会社リブセンス デザイン制作部 デザイナー 古澤 彩
デザインデータと実装の間でギャップが起こるので、いまさらだけどピクセルパーフェクトとかそこら辺について調べてみた@転職会議flameworkDesign

転職会議」のスマホビューサイトのフレームワーク化検討にあたり、デザインデータと実装の間で起こるギャップについてのお話。

2013-11-20 21-14-31 Image

意図したジャイアンと意図しないジャイアンを例に説明(笑)

2013-11-20 21-16-01 Image.1

デザインと実装の間で起こるギャップ。

2013-11-20 21-17-32 Image

2013-11-20 21-21-39 Image

dpi、dipの違い。

2013-11-20 21-23-46 Image.2

検証端末。

2013-11-20 21-27-23 Image

やっぱりコミュニケーション大事。

2013-11-20 21-28-03 Image

ギャップを埋める、実機に合わせる。

2013-11-20 21-28-56 Image

Togetter

当日のつぶやきをまとめました。

スマホUI勉強会 -実装×UI/UX×ガイドライン- まとめ #UiCamp - Togetter

参加してみて

僕はエンジニア側の人間なので、デザイナーさん中心の勉強会というのはとても新鮮でした。デザインと実装のギャップというのは避けられないものなんだな…と、改めて感じました。

エンジニアとデザイナー、お互い思っていることはきちんと形にして共有しないとダメで、コミュニケーションを密に行わないと仕上がりのイメージに近付けることはできません。ユーザーのことを理解したり、他のサービスを研究したり、頭では分かっていても実践できていないことが多かったです。

いずれの作業も最終的には「ユーザーのために」という一点に集約されます。

一方で「これらを個人レベルで実現するのはなかなか難しい…」という方が多いのも現状ではないかと思いました。まずは現場で意識共有するというのが第一歩ですが、UI/UXデザインの重要性を考えると、現場だけにとどまらず会社全体で取り組んでいくべき課題なのかもしれません。

モバイルデザインパターン― ユーザーインタフェースのためのパターン集