アプリを生み出す現場でUI/UXデザイナーが意識するべきこと：RoomClip

アプリを生み出す現場で
UI/UXデザイナーが意識するべきこと
2016.01.25 Tunnel株式会社高橋彩

ー自己紹介
高橋彩
Tunnel株式会社デザイナー
「RoomClip」に関わるデザイン全般取り扱い中
制作会社でweb受注とフォトブックアプリの
デザイナーとして７年勤務。
2014年１月にTunnel社に参加。
観葉植物と盆栽が楽しくて次はアクアリウムやりたい。

RoomClipとデザイン設計について
組織の中でのデザイナーの立ち位置
1
2
エンジニアとのコミュニケーションを
円滑にするために実践したこと
3
ー今日お話ししたいこと

RoomClipとデザイン設計について
1

『日常の創造性を応援する』
部屋の写真を投稿するインテリア専門SNS

Web（PC・SP）／ iOS ／ Android
ーサービスの展開

MAU 月間PV累計写真投稿数
トレンドに敏感で消費活動が活発な2〜30代が中心
77%が女性ユーザー
130万人 100万枚 8000万
ーサービスの状況

デザイナーフロントエンド
エンジニア
バックエンド
エンジニア
８人
ー開発チーム

Photoshop
Illustrator
イラスト
HTML・CSS
JS
サーバー知識
アプリ開発環境全般
典型的な「機能実装はやらない見た目デザイナー」
まかせて！
まかせて！
描けるよ！
イケル
書けません
微妙
ほぼわかりません
ーデザイナースキル

・webサイト(PC/SP)
・iOSアプリ
・Androidアプリ
・ロゴ
ー業務で作ったもの
・名刺
・フライヤー／チラシ
・店頭スタンドPOP
・公式グッズ
（バッジ・ステッカーなど）

・アプリのアップデートと機能改善
・webからの登録率向上施策
→新規の実装や既存ページ構成の見直し
→登録経路のABテスト
・通常運用
→イベント開催の画像作成／管理
ーデザイナーの現在の任務

ー開発環境
業務のほぼすべてをPhotoshopで完結させてます

ー開発環境
正直Sketch気になってます

ー開発までのデザインの流れ
Photoshopでモックを作成
エンジニアからのフィードバック
社内プレビュー
実装スタート

エンジニアとのコミュニケーションを
円滑にするために実践したこと
2

Episode1. 開発のためのデザイン準備
Episode2. 作ったデザインの本質を理解してもらう
Episode3. 早めのフィードバック

作り始める前に、
アプリやwebが何でできているのか理解する
Episode1.
開発のためのデザイン準備

iOS ヒューマンインターフェース
ガイドライン
Android マテリアルデザイン
ガイドライン
ーガイドライン

全然違います！
Webの画面設計アプリの画面設計

アプリの設計はガイドラインなしには作れません
※ゲームはまた事情がちょっと違うかと思いますが

●エンジニアの人たちが何を作っているのか
きちんと理解した上で、理由付けのできるデザインを
作れるようになる
●コードが書けるようになる必要はない
（※書けるに越したことはない）

実装する人にデザインの解釈をわかりやすく伝える
Episode2.
作ったデザインの本質を
理解してもらう

10pxずれてる！
指示してないBold
色が違う
線が太い
フォント小さい？
角丸の具合が
バラバラ
影が濃すぎ
ー開発実装後…
マージンおかしい

よくありました
（ダメです）

[原因]
デザイナーが何を考えて作ったか
きちんと伝えられてない
基本、デザイナーが悪い

デザインパターンとパーツに名前をつけて共通言語化
例）
ー RoomClipで実践したこと

・解釈を相手任せにしなくなったことで
パーツのブレがなくなった
・コミュニケーションコストが大幅に減った
・エンジニア主体で、デザイナーを介さずにクオリティの
担保されたページの増産が可能になった
・エンジニア、デザイナ双方で試行錯誤の回り道が減った
・デザイナーがページの量産に工数を吸い取られなく
なったので、ブラッシュアップに専念できるようになった
ー結果

●デザイナーは最初のフレームワークをしっかりきめる
●作ったデザインをただ仕様書として投げない
●デザインの意味を理解してもらうことで、
お互い同じ目線での画面作りができるようになる
ーまとめ

Episode3.
はやめのフィードバックを
こころがける
お互いの仕様にズレが無いか確認しながら進める

・描画ソフト使えない人からすると、
正直何してるかわからない
・進捗が見えづらい。
・はかどってるのか遅れてるのかいまいち判断つかない。
ーデザイナーがどう見られているか
デザイナーの作業は不透明になりやすい

ゴールが同じでも見てるものが異なる
ーデザイナーとエンジニアの目線

ズレが無いよう確かめならがすすめないと怪我の元に

ひどい時はどちらもあさっての方に迷走することがあります

煮詰まってきたら
全社プレビュー

ー RoomClipであった全社プレビュー
とあるボタンの実装で起きたエピソード

開発チームと他の人の意見が全く違った

アプリを見すぎた開発チームよりも
ユーザーの目線に近いので、
新しい視点で見えてくるものがある

●デザイナーが高めたい完成度と、
エンジニアが必要としている仕様はズレることがある
都度確かめながら進むべし
●エンジニアとデザイナーだけで判断せず、
最後は他の人を巻き込んでレビューしてもらうべし
ーまとめ

組織の中でのデザイナーの立ち位置
3

突然ですが、デザイナーとして
こんな悩みを抱えたことはありますか？
Q

・発言する機会が少ない。
決定事項をいわれた通りの形にするだけになってる
・スケジュール含めて決定事項だから改善を提案する余地がない
しかしリリース後のツッコミはデザイナーに来る
・工数が不透明で理解してもらえない
「１ページだしちゃちゃっと１日でやれる範囲でできない？」
・細かい差し込みに追われて便利屋状態
サービス主軸の作業がどんどん押していく
わりとありがちなデザイナーの悩み
ーわりとありがちなデザイナーの悩み

なんだか仕事がすべて
受け身になってしまっている

（※『そんなことで悩んだことないよ！？』
という方は、ここから先
こういう奴もいるんだな程度にお聞きください）

悩んだことある方！
（私はあります）

現状をロジカルに捉えられていない
デザイナーがこういった悩みを
持ってしまう理由

・お化粧屋さんになっていませんか？
・見た目をキレイにするだけが仕事じゃない！
ユーザーの体験までデザインすることが求められている
・受け身のデザイナーを喜ぶ組織などいない
本来デザイナーだって
自発的にどんどん提案していくべき！

「提案」ってなにさ？
「手段」を実行したらどうなるかの仮説

この仮説を立てるために根拠となる数値や、
プロダクトの課題、問題点を把握する必要がある

（やや偏見ですが）
多くのデザイナーはこのへんに苦手意識を持ちがち
・日頃、根拠となる情報を追って無い
・数値とか言われると単純に毛嫌い

デザイナー以外は…
デザイナーは…
ロジックありきの仕事だから
そこから逃げちゃだめ
常にプロダクトの状態を自覚する
常にデザイナーに情報をオープンに

●デザイナーだってどんどん提案して行っていい
●肩書きに基づいて自分の範囲を限定してはダメ！
自分もサービスを良くするためのメンバーだと
きちんと自覚すべし
●サービスの状況が理解できていれば、
中身のない無茶振りなのか・本当に急ぎで必要なのか
理解できるようになる
ーまとめ

●受け身にならない！
●サービスに対して
影響力のあるデザイナーになろう
ーまとめ

●デザイナーはプロジェクトの起点になるが、
全てを取り仕切るトップダウンではない
●エンジニアは全てを見透かして完璧に組み上げて
くれる魔法使いではない
●コミュニケーション大事！
●ユーザー第一！

おわり
ご静聴ありがとうございました

Tunnel社では、一緒にRoomClipをより良くしてくれる
仲間を募集しております。
募集職種：エンジニア／デザイナー／他
http://www.tunn-el.com

アプリを生み出す現場でUI/UXデザイナーが意識するべきこと：RoomClip

More Related Content

アプリを生み出す現場でUI/UXデザイナーが意識するべきこと：RoomClip