2. Webとスマホとデザインと
- 地方から広がるつながるデザイナーのお仕事 -
CSS Nite in FUKUI, Vol.6 2013.02.23
山森美穂

3. 自己紹介
福井県在住のデザイナー
ふたりの女の子のおかあさん CSS Nite LT 16:10
似顔絵を描くのが大好き
グラフィック・Webデザインを経て、
アプリのUIデザインをやってハマる
山森美穂
昨年のCSS Nite in FUKUI に登壇！ mihoYamamori

4. 自己紹介
江市めがね会館にある
株式会社jig.jpに就職したペーペー CSS Nite LT 16:10
もちろん！ へ
ん
ら
こ
お仕事は、デザイナー こ
アプリのUIデザインをしています
めがね会館

5. Agenda
Webデザインとアプリデザイン
デザイナーからみたエンジニア文化
Fukui
福 井 、マッシュア プ！
ッ

6. Webデザインとアプリデザイン

7. 違
対象 CSS Nite LT 16:10
Webデザイン 操作性
素材
アプリデザイン
組み方

8. Webデザイン
対象 アプリデザイン
各ブラウザ対応 CSS Nite LT 16:10
IE Firefox Chrome...
iOS / Android
WindowsPhone....
PC画面
最近ではタブレット＆スマホも
対応の対象に
スマホ画面
iOSはiPhone/iPad数種
Androidはサイズ多様

9. Webデザイン
操作性 アプリデザイン
マウスで選択＆クリック CSS Nite LT 16:10
マウスで細かく選択
ロールオーバーがある
指でタップ＆フリック
指の大きさで選択
AppleやGoogleでの
ガイドライン
Microsoftも…

10. ユーザーが 使うか決まるUI
歩きながらや、
CSS Nite LT 16:10
CSS Nite LT 16:25
片手しか使えないときでも
タップしたときに反応
＋
ロールオーバーがないので、
直感で押せる、押したくなる
押したのが分かるボタン
指の大きさを考慮した
大きさと配置

11. Webデザイン
素材 アプリデザイン
全体のデザイン CSS Nite LT 16:10
サイトデザインは比較的固定で、
コンテンツを作り上げる事が中心
全体のデザイン
・コンテンツ全ページ
・ファビコン 全体をデザインしても、
・Flash
アイコンやボタンが多い…
各画面、操作性を考えながら
iOS/Androidそれぞれで…
・ホームアイコン
・通知アイコン
・ステータスアイコン
・iTunesストア用/GooglePlay用

12. アイコンはアプリの 顔
むげんメモ
CSS Nite LT 16:10
３日間話し合いながら作成
melocy<メロシー>
ロゴとアイコンだけで
検討の期間ふくめ１ヶ月くらいかけて決定

13. Webデザイン
組み方 アプリデザイン
HTML CSS Nite LT 16:10
CSS 主にエンジニアサイド
Flash
ネイティブ
JavaScript 各OSの専用のツール
専用の言語で作られていく
デザイナーで完結できる
HTML
JavaScript

14. 同
tool
主にPhotoshopやFireworksを使用
UX
ユーザーが、いかに使いやすく分かりやすいか、
いつ見て、どのように使うのかを考えながら作る
branding
デザイナーの役割を活かし全体をブランディング

15. デザイナーからみたエンジニア文化

16. CSS Nite LT 16:10
BtoCのアプリ開発
企画∼開発∼運営までを一貫して
行っている
エンジニアと社内デザイナーが
チームで開発

17. 今年１月 「教えて！おと ちゃん」 リース
う をリ ！

18. 今年１月 「教えて！おと ちゃん」 リース
う をリ ！

19. デザイナーからみた
エンジニア文化
アジャイル＜スクラム＞での開発 CSS Nite LT 16:10
言葉の違いやミーティングの時間
エンジニアさんはマニアック！

20. デザイナーからみた
エンジニア文化
アジャイル＜スクラム＞での開発 CSS Nite LT 16:10
Web制作ではよくありがちな
ウォーターフォール
開発者の間で一般的になってきている
アジャイル
アジャイル？
アジャイル？
教えて！おとうちゃん！

21. CSS Nite LT 16:10
おとうちゃん、
アジャイルってなに？
考えるな！感じろ！
考えるな！感じろ！

22. CSS Nite LT 16:10
ですよね…おとうちゃん
ということで、実際に体験してみた

23. アジャイルとは
ウォーターフォール
CSS Nite LT 16:10
ディレクション→制作→チェック
のように一直線に行程を流す スクラムは一種の手法
スプリント #1
1week
アジャイル スプリント #2
短い期間で区切って、 1week
設計→開発→テストを繰り返し、 スプリント #3
軌道修正しながら完成を目指す
1week
計画の最後には、レビューと
ふりかえりを毎回行う

24. 役割
プロダクトオーナー
何をどんな順番で作るかを
CSS Nite LT 16:10
決める人。
スクラムマスター
プロダクトオーナーからの
要望をチーム内で割り当てたり
計画・進 の管理をする人。
プロダクトオーナー スクラムマスター
チーム
割り当てられた作業の実行。
成果物を生み出す人。
チーム

25. デザイナーからみた
エンジニア文化
短期間のスパンで、できること
01 できないことや優先順位が明確に
CSS Nite LT 16:10
✔ 短期間でフィードバックで改善
✔ １日１日の作業目標を持つ
✔ 常に成果物がある
02
チームでMTGを重ねて、 アジャイル の
意識の共有とコミュニケーション
スクラム！
✔ お互いの専門用語意味の違いの改善
✔ コミュニケーションで目的を同じに

26. アジャイルの感想
ミーティング時間が長いので
複数プロジェクト掛け持ちが苦しい
CSS Nite LT 16:10
はじめの設計がかなり重要であり
最初に決めたコンセプトを、
全員で毎回共有することが大切
マニアックなエンジニアとの
コミュニケーションと理解する能力が
とても重要！
やってよかったね！

27. Fukui
福 井 、マッシュア プ！
ッ

28. マッシュア プとは
ッ
いろいろ種類があるので一概には言えないですが…
すでにある２つ以上のモノや、人、情報等を
混ぜ合わせたり組合わせたりして
新しいモノを作り出すこと
×

29. Mashup Awards 8
昨年はmelocy＜メロシー＞は２位でした！

30. 福井勢の応募＆健闘がめざましく、
全国でも応募数５位・受賞率２位という結果

31. めがね会館にある MAの運営
福井のWebコミュニティ
Web制作に関わる人の
WCAF ふくい産業支援センター
CSS Nite
佐藤さん
盛り上がっている 福井の開発者コミュニティ
ご当地アプリ博 江から広がる FITEA
オープンデータ

32. 地方からでも 発信できる！
エンジニアとデザイナーと情報のMashup
もっとエンジニアさんとデザイナーで話をしてほしい。
お互いに持っている能力を出して、もっと楽しいモノづくりを。
アプリ開発には、デザイン重要！と言われながらも
デザイナー不足らしいですよ？

33. ハッカソンします！
おやつツキ
ハッカソン＆アプリ初心者
デザイナーさんWelcome!
※今回は少々甘口です。

34. まとめ

35. 地方にいながら発信＆人の
マッシュアップができる
CSS Nite LT 16:10
コミュニケーション力は重要
身近なところから始めよう
地方、いいよ！
とにかく手を動かして作り、
発信することで地方からでも
世界に発信できる Fukui

36. デザイナーの役割フル活用で
よりよいモノづくり
CSS Nite LT 16:10
作るだけでなくプロジェクトを Webデザイナーは、
良い方向へと導く役割も アプリ開発でも
活躍できる
デザイナー不足と
言われている今がチャンス

37. ありがとうございました。
CSS Nite in FUKUI, Vol.6 2013.02.23