Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
- 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 福 井 、マッシュア プ！ ッ
- 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. マッシュア プとは ッ いろいろ種類があるので一概には言えないですが… すでにある２つ以上のモノや、人、情報等を 混ぜ合わせたり組合わせたりして 新しいモノを作り出すこと ×
- 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