webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
TRANSCRIPT
Webとスマホとデザインと- 地方から広がるつながるデザイナーのお仕事 -
CSS Nite in FUKUI, Vol.6 2013.02.23
山 森 美 穂
CSS Nite LT 16:10
福井県在住のデザイナーふたりの女の子のおかあさん
似顔絵を描くのが大好き
山 森 美 穂昨年のCSS Nite in FUKUI に登壇!
グラフィック・Webデザインを経て、アプリのUIデザインをやってハマる
自己紹介
mihoYamamori
CSS Nite LT 16:10
もちろん!お仕事は、デザイナーアプリのUIデザインをしています
め が ね 会 館
鯖江市めがね会館にある株式会社jig.jpに就職したペーペー
自己紹介
ここらへん
Webデザインとアプリデザイン
デザイナーからみたエンジニア文化
福井、マッシュアップ!Fukui
Agenda
Webデザインとアプリデザイン
CSS Nite LT 16:10
Webデザイン
アプリデザイン
操作性
素 材
対 象
組み方
違
CSS Nite LT 16:10 各ブラウザ対応
iOS / AndroidIE Firefox Chrome...
PC画面
スマホ画面
最近ではタブレット&スマホも対応の対象に
iOSはiPhone/iPad数種Androidはサイズ多様
WindowsPhone....
対 象Webデザイン アプリデザイン
CSS Nite LT 16:10 マウスで選択&クリック
指でタップ&フリック
マウスで細かく選択
指の大きさで選択
AppleやGoogleでのガイドライン
Microsoftも…
操作性Webデザイン アプリデザイン
ロールオーバーがある
ロールオーバーがないので、直感で押せる、押したくなる押したのが分かるボタン
CSS Nite LT 16:10
ユーザーが使うか決まるUI
CSS Nite LT 16:25
歩きながらや、片手しか使えないときでもタップしたときに反応
+
指の大きさを考慮した大きさと配置
CSS Nite LT 16:10 全体のデザイン
全体のデザイン・コンテンツ全ページ・ファビコン・Flash
・ホームアイコン・通知アイコン・ステータスアイコン・iTunesストア用/GooglePlay用
iOS/Androidそれぞれで…
全体をデザインしても、アイコンやボタンが多い…各画面、操作性を考えながら
サイトデザインは比較的固定で、コンテンツを作り上げる事が中心
素 材Webデザイン アプリデザイン
むげんメモ
melocy<メロシー>
3日間話し合いながら作成
ロゴとアイコンだけで検討の期間ふくめ1ヶ月くらいかけて決定
アイコンはアプリの顔
CSS Nite LT 16:10
CSS Nite LT 16:10
ネイティブ各OSの専用のツール専用の言語で作られていく
HTMLJavaScript
HTMLCSSFlashJavaScript
主にエンジニアサイド
デザイナーで完結できる
組み方Webデザイン アプリデザイン
主にPhotoshopやFireworksを使用
ユーザーが、いかに使いやすく分かりやすいか、いつ見て、どのように使うのかを考えながら作る
デザイナーの役割を活かし全体をブランディング
同tool
UX
branding
デザイナーからみたエンジニア文化
CSS Nite LT 16:10
BtoCのアプリ開発
企画~開発~運営までを一貫して行っている
エンジニアと社内デザイナーがチームで開発
「教えて!おとうちゃん」をリリース!今年1月
「教えて!おとうちゃん」をリリース!今年1月
CSS Nite LT 16:10 アジャイル<スクラム>での開発
言葉の違いやミーティングの時間
デザイナーからみたエンジニア文化
エンジニアさんはマニアック!
CSS Nite LT 16:10
Web制作ではよくありがちな
ウォーターフォール
開発者の間で一般的になってきている
アジャイル
アジャイル<スクラム>での開発
デザイナーからみたエンジニア文化
アジャイル?
教えて!おとうちゃん!アジャイル?
考えるな!感じろ!
考えるな!感じろ!
おとうちゃん、アジャイルってなに?
CSS Nite LT 16:10
CSS Nite LT 16:10
ですよね…おとうちゃん
ということで、実際に体験してみた
CSS Nite LT 16:10
短い期間で区切って、設計→開発→テストを繰り返し、軌道修正しながら完成を目指す計画の最後には、レビューとふりかえりを毎回行う
ウォーターフォールディレクション→制作→チェックのように一直線に行程を流す
アジャイルとは
スプリント#1
スプリント#2
スプリント#3
1week
1week
1week
アジャイル
スクラムは一種の手法
CSS Nite LT 16:10
プロダクトオーナー スクラムマスター
チーム
役 割
何をどんな順番で作るかを決める人。
プロダクトオーナー
プロダクトオーナーからの要望をチーム内で割り当てたり計画・進捗の管理をする人。
スクラムマスター
割り当てられた作業の実行。成果物を生み出す人。
チーム
CSS Nite LT 16:10 短期間のスパンで、できることできないことや優先順位が明確に
✔ 短期間でフィードバックで改善✔ 1日1日の作業目標を持つ✔ 常に成果物がある
✔ お互いの専門用語意味の違いの改善✔ コミュニケーションで目的を同じに
デザイナーからみたエンジニア文化
アジャイルのスクラム!
01
チームでMTGを重ねて、意識の共有とコミュニケーション02
CSS Nite LT 16:10
ミーティング時間が長いので複数プロジェクト掛け持ちが苦しい
はじめの設計がかなり重要であり最初に決めたコンセプトを、全員で毎回共有することが大切
マニアックなエンジニアとのコミュニケーションと理解する能力がとても重要!
アジャイルの感想
やってよかったね!
福井、マッシュアップ!
Fukui
マッシュアップとは
いろいろ種類があるので一概には言えないですが…
すでにある2つ以上のモノや、人、情報等を混ぜ合わせたり組合わせたりして新しいモノを作り出すこと
×
昨年はmelocy<メロシー>は2位でした!Mashup Awards 8
福井勢の応募&健闘がめざましく、全国でも応募数5位・受賞率2位という結果
ふくい産業支援センター
佐藤さん
めがね会館にある
福井のWebコミュニティ
WCAF
福井の開発者コミュニティ
FITEA
MAの運営
Web制作に関わる人の
CSS Nite
盛り上がっている
ご当地アプリ博 鯖江から広がる
オープンデータ
エンジニアとデザイナーと情報のMashupもっとエンジニアさんとデザイナーで話をしてほしい。
お互いに持っている能力を出して、もっと楽しいモノづくりを。
アプリ開発には、デザイン重要!と言われながらも
デザイナー不足らしいですよ?
地方からでも 発信できる!
ハッカソン&アプリ初心者デザイナーさんWelcome!※今回は少々甘口です。
おやつツキ
ハッカソンします!
まとめ
CSS Nite LT 16:10
地方、いいよ!
地方にいながら発信&人のマッシュアップができる
Fukui
とにかく手を動かして作り、発信することで地方からでも世界に発信できる
コミュニケーション力は重要身近なところから始めよう
CSS Nite LT 16:10
Webデザイナーは、アプリ開発でも活躍できる
デザイナーの役割フル活用でよりよいモノづくり
デザイナー不足と言われている今がチャンス
作るだけでなくプロジェクトを良い方向へと導く役割も
ありがとうございました。
CSS Nite in FUKUI, Vol.6 2013.02.23