Embed Size (px)
Citation preview
エンジニアからデザイナーに贈る プロトタイピングのすすめ山田 直樹 - @wakamsha 株式会社リクルートマーケティングパートナーズ 2015.05.30
春のフロントエンド祭り 2015
1. 自己紹介 2. これまでの Web 制作現場あるある 3. Adobe MAX 2014 4. デザイナーのこれからあるべき姿とは 5. プロトタイピングの必要性 6. おわりに
Agenda
1.自己紹介
俺の名前を言ってみろ
自己紹介
山田直樹 (ヤマダナオキ) - @wakamsha 株式会社リクルートマーケティングパートナーズ フロントエンドエンジニア
HTML, CSS, JavaScript, UI / UX, SCSS, TypeScript, AngularJS, Ruby on Rails, etc…
2.これまでの
Web 制作現場あるある
デザインカンプ パーツ Webページ
よくあるであろう一般的な Web 系制作の流れ
≠
≠コレジャナイ (́・ω・`)
デザインカンプにある意図全てを他者が汲み取るのはとても困難
反対に全てのデザイン意図を 漏れ無く & わかりやすく盛り込むのも非現実的
いかに早い段階から実際に動くものをいかに作り、 そして課題を見つけて作りなおすというサイクルを沢山回せるかがキモ
分業ではなく一人で複数のタスクをこなす スピードを上げるには大人数よりも少人数
設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの
(́・ω・｀) …
具体的にどうすりゃいいのさ？
3.Adobe MAX 2014 に 参加してきました
2014.10.6 - 2014.10.8
経費！経費！
What’s Adobe MAX ?
What’s Adobe MAX ?
アドビシステムズ社最大の技術カンファレンス アドビ製品の最新情報を発表
各種 Tech Talk
現地ならびに世界中から集まるトップレベルの技術者たちとの直接交流の場
What’s Adobe MAX ?
クリエイティブ業界のリーダー、デザイナー、Webディベロッパーなど
世界中から毎年5,000人以上が参加
デジタルコンテンツを作成する上で必須となる 最新のテクニックやテクノロジーを習得する
絶好の機会
231Sessions & Labs
207Speakers
デザイナーが Web 業界で 更にその価値を高めるにはどうするべきかを
製品と共に提案
Adobe MAX 2014
色々と収穫の多いイベントでした
今年もまた行きたい
4.これからのデザイナーの
あるべき姿とは？
『グラフィックについて勉強してきました』
『デッサン力に自信あります』
Designer
……?
『グラフィックについて勉強してきました』
『デッサン力に自信あります』
Animation Layer Transition
Animation Layer Transition
これらすべてを 機能としてデザインすることが不可欠
設計まで含めて総合的にデザインできる人
Web 制作現場で求められているもの
プロトタイピングの 必要性
5.
プロトタイピングの必要性
デザイナーの存在意義は UI を意識してプロトタイピングし続けること
職種問わずプロトタイピング出来る人は 希少価値
プロトタイピングが捗る Adobe のツール
Edge Animate CC
Edge Animate CC
画像・テキスト・図形をコードを一切書かずにアニメーションさせることが出来る
HTML5 アニメーション作成ツール
Edge Animate CC
最終的に HTML, CSS, JavaScript ファイルとして出力される
UI は Flash と殆ど同じで タイムラインでアニメーションを制御
DEMO
Edge Animate CC
Adobe Muse CC
Adobe Muse CC
HTML
コードを一行も書くことなく 最新のWeb標準に準拠した Web サイトが作れる
グラフィックデザイナーのための Web サイト作成ツール
Adobe Muse CC
HTML
最終的に HTML, CSS, JavaScript ファイルとして出力される
InDesign に似た UI だが、 フォトショ・イラレ感覚で操作可能
DEMO
Adobe Muse CC
6.おわりに
- プロダクトをリードする存在になろう -
HTMLMaterial Design は装飾的なデザインは殆ど無ければ
トーンマナーもまだまだ地味目な印象だが、 アニメーションが非常に繊細かつダイナミックなのが特徴
まさに動きそのものをデザインしていると言える
UI 設計 ビジュアルデザイン
インタラクションデザイン プロトタイピング
Designer
プロトタイピングは設計 設計まで含めて総合的にデザイン
|| プロダクトをリードする存在
Designer
Thank you.
ご清聴有難うございます
