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
220
ワンランク上のデザイナーになる コーディングことはじめ
西東京Web勉強会(仮)「デザイナーLT大会&交流会」に登壇したときの資料です
firecolor
January 25, 2020
Tweet
Share
More Decks by firecolor
See All by firecolor
WordPressテーマ作成入門
firecolor
0
200
お気軽にチャレンジ モダンフロントエンド
firecolor
0
400
ゲームで学ぶUI/UX
firecolor
0
420
やろうぜ!プロトタイピング
firecolor
1
300
UXを考えたら問い合わせが倍増した話
firecolor
2
510
Other Decks in Design
See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
190
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
440
portfolio.pdf
onof003
0
180
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
490
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
150
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
640
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
Featured
See All Featured
A better future with KSS
kneath
239
17k
Facilitating Awesome Meetings
lara
56
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualization
eitanlees
148
16k
Designing for Performance
lara
610
69k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Designing Experiences People Love
moore
142
24k
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もやってしまえ) さらにもう一歩
まとめ
これからはデザイナーも コーディングするのが吉