Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ワンランク上のデザイナーになる コーディングことはじめ
Search
firecolor
January 25, 2020
Design
0
160
ワンランク上のデザイナーになる コーディングことはじめ
西東京Web勉強会(仮)「デザイナーLT大会&交流会」に登壇したときの資料です
firecolor
January 25, 2020
Tweet
Share
More Decks by firecolor
See All by firecolor
WordPressテーマ作成入門
firecolor
0
160
お気軽にチャレンジ モダンフロントエンド
firecolor
0
330
ゲームで学ぶUI/UX
firecolor
0
360
やろうぜ!プロトタイピング
firecolor
1
240
UXを考えたら問い合わせが倍増した話
firecolor
2
400
Other Decks in Design
See All in Design
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
230
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
280
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
Jeremy's First Day
myates3
1
130
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
Installing and Running decksh/pdfdeck
ajstarks
1
490
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
630
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
514
39k
A Tale of Four Properties
chriscoyier
151
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Visualization
eitanlees
136
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Faster Mobile Websites
deanohume
299
30k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Code Review Best Practice
trishagee
55
15k
GraphQLとの向き合い方2022年版
quramy
32
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Transcript
None
• 自 己 紹介 • デ ザ イナ ー の
仕 事 範 囲 • ど う やっ て 学 ぼ う か • コ ー ディ ン グ で き た ほうがいい? • コ ー ディ ン グ し て い くために • デ ザ イン か ら コ ー ド を考える • さ ら にも う 一 歩 • ま と めと 告 知 本日話すこと
小泉 誠(コイズミ マコト) Webデザイナー・UI/UXデザイナー フロントエンドエンジニア 講師、ITコンサルタント etc. フリーランスとして活動中。 屋号は「Studio FireColor」。
ウェブ制作会社、システム会社、SEO系の会社などを 経て独立。 Webデザイナーに始まりフロントエンド全般、SEO、 マーケティング、システム開発、社内のIT化のコンサ ルティングなど。 現在は「本人も職種がわからない…」といった感じで、 ゼネラリスト道を邁進中。 自己紹介
デザイナーの仕事範囲 デザイナーの仕事範囲
デザイン UI/UX HTML・CSS JavaScript ライティング イラスト PHP etc DB サーバー
SEO マーケティング ディレクション 動画 アニメーション デザイナー フロントエンド バックエンド この辺までできるといいな
コーディングできた方がいい? コーディングできた方がいい?
いろんな意見はあるけれど できた方がいいと思う コーディングできた方がいい ※ 今 回 の コ ー デ
ィ ン グ は 主 に H T M L と CS S あ た り の こ と で す
• 仕事の幅が広がる • コミュニケーションがしやすくなる • 視野が広がり、よりユーザー目線で考え られる • 単価が上がる •
思い通りのものが作れる コーディングできた方がいい
どうやって学ぼうか
• オンライン講座などの活用 • 模写 • スタイルガイドなどを作る • コミュニティや勉強会 どうやって学ぼうか
• OS: Win10Pro • エディタ: Visual Studio Code • デザイン:
Photoshop、Illustrator、AdobeXD • CSS: SCSS • JS: Vanilla、Vue、jQuer y、etc • ビルドとか: Webpack4 • サーバー:自宅サーバー・NAS どうやって学ぼうか
コーディングしていくために
使いやすさを考える コ ー デ ィ ン グ し て い
くために
使いやすさを考える コーディングしていくために 使う人 Googleなどの機械 見る人
セマンティックなコード コ ー デ ィ ン グ し て い
くために
セマンティックなコード コーディングしていくために 意味づけ セマンティック
• コンピュータに理解しやすくなる • アクセシビリティの向上も図れる • 制作サイドの意思の疎通がしやすい セマンティックなコード コーディングしていくために
Schema.org https://schema.org/ WAI-ARIA https://www.w3.org/TR/wai-aria-1.1/ セマンティックなコード コーディングしていくために
プロジェクト内でのルールを考える コ ー デ ィ ン グ し て い
くために
• コーディグルール • 命名規則 • ファイル構成やツール選定 • できるだけ冗長にならないように、コン ポーネント化を考える ※ただしコンポーネントだけでは対応できないことも
プロジェクト内でのルールを考える コーディングしていくために
デザインからコードを考える
• 画像の倍書き出しためのデザイン • 画面の様々な状態が考慮されていない • 動きが考えられていない • イレギュラーなパターンが考えられてな い •
カーニングきつきつ デザインからコードを考える
さらにもう一歩
• Emmet、Pug、Sass • JavaScript中心のフロントエンドの技術に 触れる • WordPressのテーマが作れると仕事がウ ハウハ(PHPもやってしまえ) さらにもう一歩
まとめ
これからはデザイナーも コーディングするのが吉