webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

37

Upload: miho-yamamori

Post on 28-May-2015

827 views

Category:

Design


3 download

TRANSCRIPT

Page 1: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Page 2: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

Webとスマホとデザインと- 地方から広がるつながるデザイナーのお仕事 -

CSS Nite in FUKUI, Vol.6 2013.02.23

山 森 美 穂

Page 3: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

福井県在住のデザイナーふたりの女の子のおかあさん

似顔絵を描くのが大好き

山 森 美 穂昨年のCSS Nite in FUKUI に登壇!

グラフィック・Webデザインを経て、アプリのUIデザインをやってハマる

自己紹介

mihoYamamori

Page 4: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

もちろん!お仕事は、デザイナーアプリのUIデザインをしています

め が ね 会 館

鯖江市めがね会館にある株式会社jig.jpに就職したペーペー

自己紹介

ここらへん

Page 5: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

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

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

福井、マッシュアップ!Fukui

Agenda

Page 6: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

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

Page 7: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

Webデザイン

アプリデザイン

操作性

素 材

対 象

組み方

Page 8: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10 各ブラウザ対応

iOS / AndroidIE Firefox Chrome...

PC画面

スマホ画面

最近ではタブレット&スマホも対応の対象に

iOSはiPhone/iPad数種Androidはサイズ多様

WindowsPhone....

対 象Webデザイン アプリデザイン

Page 9: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10 マウスで選択&クリック

指でタップ&フリック

マウスで細かく選択

指の大きさで選択

AppleやGoogleでのガイドライン

Microsoftも…

操作性Webデザイン アプリデザイン

ロールオーバーがある

Page 10: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

ロールオーバーがないので、直感で押せる、押したくなる押したのが分かるボタン

CSS Nite LT 16:10

ユーザーが使うか決まるUI

CSS Nite LT 16:25

歩きながらや、片手しか使えないときでもタップしたときに反応

指の大きさを考慮した大きさと配置

Page 11: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10 全体のデザイン

全体のデザイン・コンテンツ全ページ・ファビコン・Flash

・ホームアイコン・通知アイコン・ステータスアイコン・iTunesストア用/GooglePlay用

iOS/Androidそれぞれで…

全体をデザインしても、アイコンやボタンが多い…各画面、操作性を考えながら

サイトデザインは比較的固定で、コンテンツを作り上げる事が中心

素 材Webデザイン アプリデザイン

Page 12: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

むげんメモ

melocy<メロシー>

3日間話し合いながら作成

ロゴとアイコンだけで検討の期間ふくめ1ヶ月くらいかけて決定

アイコンはアプリの顔

CSS Nite LT 16:10

Page 13: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

ネイティブ各OSの専用のツール専用の言語で作られていく

HTMLJavaScript

HTMLCSSFlashJavaScript

主にエンジニアサイド

デザイナーで完結できる

組み方Webデザイン アプリデザイン

Page 14: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

主にPhotoshopやFireworksを使用

ユーザーが、いかに使いやすく分かりやすいか、いつ見て、どのように使うのかを考えながら作る

デザイナーの役割を活かし全体をブランディング

同tool

UX

branding

Page 15: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

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

Page 16: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

BtoCのアプリ開発

企画~開発~運営までを一貫して行っている

エンジニアと社内デザイナーがチームで開発

Page 17: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

「教えて!おとうちゃん」をリリース!今年1月

Page 18: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

「教えて!おとうちゃん」をリリース!今年1月

Page 19: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10 アジャイル<スクラム>での開発

言葉の違いやミーティングの時間

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

エンジニアさんはマニアック!

Page 20: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

Web制作ではよくありがちな

ウォーターフォール

開発者の間で一般的になってきている

アジャイル

アジャイル<スクラム>での開発

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

アジャイル?

教えて!おとうちゃん!アジャイル?

Page 21: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

考えるな!感じろ!

考えるな!感じろ!

おとうちゃん、アジャイルってなに?

CSS Nite LT 16:10

Page 22: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

ですよね…おとうちゃん

ということで、実際に体験してみた

Page 23: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

短い期間で区切って、設計→開発→テストを繰り返し、軌道修正しながら完成を目指す計画の最後には、レビューとふりかえりを毎回行う

ウォーターフォールディレクション→制作→チェックのように一直線に行程を流す

アジャイルとは

スプリント#1

スプリント#2

スプリント#3

1week

1week

1week

アジャイル

スクラムは一種の手法

Page 24: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

プロダクトオーナー スクラムマスター

チーム

役 割

何をどんな順番で作るかを決める人。

プロダクトオーナー

プロダクトオーナーからの要望をチーム内で割り当てたり計画・進捗の管理をする人。

スクラムマスター

割り当てられた作業の実行。成果物を生み出す人。

チーム

Page 25: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10 短期間のスパンで、できることできないことや優先順位が明確に

✔ 短期間でフィードバックで改善✔ 1日1日の作業目標を持つ✔ 常に成果物がある

✔ お互いの専門用語意味の違いの改善✔ コミュニケーションで目的を同じに

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

アジャイルのスクラム!

01

チームでMTGを重ねて、意識の共有とコミュニケーション02

Page 26: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

ミーティング時間が長いので複数プロジェクト掛け持ちが苦しい

はじめの設計がかなり重要であり最初に決めたコンセプトを、全員で毎回共有することが大切

マニアックなエンジニアとのコミュニケーションと理解する能力がとても重要!

アジャイルの感想

やってよかったね!

Page 27: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

福井、マッシュアップ!

Fukui

Page 28: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

マッシュアップとは

いろいろ種類があるので一概には言えないですが…

すでにある2つ以上のモノや、人、情報等を混ぜ合わせたり組合わせたりして新しいモノを作り出すこと

×

Page 29: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

昨年はmelocy<メロシー>は2位でした!Mashup Awards 8

Page 30: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

福井勢の応募&健闘がめざましく、全国でも応募数5位・受賞率2位という結果

Page 31: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

ふくい産業支援センター

佐藤さん

めがね会館にある

福井のWebコミュニティ

WCAF

福井の開発者コミュニティ

FITEA

MAの運営

Web制作に関わる人の

CSS Nite

盛り上がっている

ご当地アプリ博 鯖江から広がる

オープンデータ

Page 32: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

エンジニアとデザイナーと情報のMashupもっとエンジニアさんとデザイナーで話をしてほしい。

お互いに持っている能力を出して、もっと楽しいモノづくりを。

アプリ開発には、デザイン重要!と言われながらも

デザイナー不足らしいですよ?

地方からでも 発信できる!

Page 33: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

ハッカソン&アプリ初心者デザイナーさんWelcome!※今回は少々甘口です。

おやつツキ

ハッカソンします!

Page 34: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

まとめ

Page 35: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

地方、いいよ!

地方にいながら発信&人のマッシュアップができる

Fukui

とにかく手を動かして作り、発信することで地方からでも世界に発信できる

コミュニケーション力は重要身近なところから始めよう

Page 36: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

CSS Nite LT 16:10

Webデザイナーは、アプリ開発でも活躍できる

デザイナーの役割フル活用でよりよいモノづくり

デザイナー不足と言われている今がチャンス

作るだけでなくプロジェクトを良い方向へと導く役割も

Page 37: Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -

ありがとうございました。

CSS Nite in FUKUI, Vol.6 2013.02.23