デザイン勉強会の当日資料です

1. 第 38 回デザイン勉強会
これからはじめる
Webデザイン
〜Webデザイナーに必要なもの〜

2. テキスト

3. テキスト

4. テキスト

5. テキスト
V
3.23

6. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Webの技術
について
•htmlの現状
•cssの現状
•CMSの現状

7. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
HTML
について
デバイスごとに変化する要素
数値、カレンダーなどの入力項目
環境光、位置情報、加速度センサーなど

8. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
HTML5でできること
www.htmq.com/html5/input.shtml

9. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
CSS
について
角丸
マスク
グラデーション
シャドウ

10. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
CSS3でできる三角形
http://apps.eky.hk/css-triangle-generator/
CSS3でできる画像加工
http://cartman0.github.io/css3filterTest/

11. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
CMS
について
WordPressやConcrete5
目的に応じて使う
管理体制などを考慮する

12. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
CMSというシステムの現状
http://www.datanyze.com/market-share/cms/
グラフィカルな操作のConcrete5
http://concrete5-japan.org/
シェアNo.1のWordPress
http://ja.wordpress.org/

13. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
作れなくていい
何ができるか
知るのが大事。

14. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
環境やツール
について
•制作ツールの違い
•プロトタイプ制作
•管理や共有環境

15. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
ツール
について
脱Adobeの進行
クラウド環境の利用
最新バージョンの問題

16. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Adobe以外の制作ツール
http://www.sketchapp.com/

17. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
プロトタイプ
について
ワイヤーフレーム
インブラウザデザイン
ProttやAdobe XDの活用

18. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
ワイヤーフレームツール
https://cacoo.com/lang/ja/home
プロトタイプングツール
https://prottapp.com/ja/
https://blogs.adobe.com/creativestation/web-how-to-play-with-adobe-xd
https://www.flinto.com/ja/mac

19. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
管理
について
バージョン管理
進行管理
オンラインミーティング

20. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
バージョン管理ツール
https://github.com/
タスク管理
https://trello.com/
ミーティングやコミュニケーションツール
https://www.chatwork.com/
https://www.skype.com/ja/
https://hangouts.google.com/?hl=ja
http://www.backlog.jp/
https://www.sourcetreeapp.com/

21. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
新しいものが
どんどん出てくる
全部やる必要はない。

22. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Webデザイン
について
•デザインの流行
•レスポンシブの概念
•UI/UXの流行化

23. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
推奨デザイン
について
シンプル化
リアルの要素をイメージ
動きの問題

24. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
マテリアルデザインガイドライン
https://design.google.com/
Apple デザインガイドライン
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/
MobileHIG/BasicsPart/BasicsPart.html

25. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
レスポンシブ
について
デバイスの確認
向きや状況まで考慮する
あいまいさも必要

26. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
CSSフレームワーク
http://getbootstrap.com/
http://purecss.io/
http://foundation.zurb.com/
http://www.material-ui.com/

27. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
UI/UX
について
PCとスマホの垣根がなくなる
ユーザーが求めているもの
ウェアラブルなどの出現

28. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Appleのデザインガイドライン
https://developer.apple.com/jp/design/tips/
スマホ利用の現状
http://www.netratings.co.jp/news_release/2015/05/Newsrelease20150526.html

29. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
がんばればできる
予算と時間次第で。

30. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Webと印刷
概念の違い
•フォントやパーツ
•技術の範囲
•デザインTips

31. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
パーツ
について
Webフォントやアイコン
グラフィックデザイナーの得意分野
ピクセルでのポイント

32. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
Webで使われるアイコンフォント例
https://fortawesome.github.io/Font-Awesome/icons/
https://icomoon.io/
http://genericons.com/
http://zurb.com/playground/foundation-icon-fonts-3

33. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
技術
について
Webデザイナーの考え方
よくある失敗
コーディングや構築

34. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
フォントの選び方
ファーストビューやスクロール
SVGや画像の扱い
デザイン
Tips

35. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
必要なデザイン要素
指示書の書き方
動きの指示
デザイン
Tips2

36. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
・複数改行時のデザイン
・メニューや画像の増減
・404ページ
・No Image
・htmlエレメント
・画像配置
・キャプション
・SNSやファビコン
デザイン
Tips3

37. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
h1, h2, h3, h4, h5, h6,
ol, ul, ,dl, blockquote,
a, a:hover, a:active
table周り 、画像周り
HTML
エレメンツ

38. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
favicon（32 × 32px ）
Twitterアイコン（400 × 400px）
facebookOGP（1200 x 630 px ）
iPhoneタップアイコン（144 x 144px）
SNS周りの
標準サイズ

39. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
見えるもの以外のデザイン
普段から触るしかない。

40. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
全てをやらなくてもいい
まとめ
得意分野を持つ
技術はどんどん枝分かれしていく

41. 第38回デザイン勉強会「これからはじめるWEBデザイン〜WEBデザイナーに必要なもの〜」
助言
とにかくやってみる

42. THANK YOU