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
210
ワンランク上のデザイナーになる コーディングことはじめ
西東京Web勉強会(仮)「デザイナーLT大会&交流会」に登壇したときの資料です
firecolor
January 25, 2020
Tweet
Share
More Decks by firecolor
See All by firecolor
WordPressテーマ作成入門
firecolor
0
190
お気軽にチャレンジ モダンフロントエンド
firecolor
0
390
ゲームで学ぶUI/UX
firecolor
0
420
やろうぜ!プロトタイピング
firecolor
1
290
UXを考えたら問い合わせが倍増した話
firecolor
2
500
Other Decks in Design
See All in Design
AI動画生成ガチャ紹介
piyo7
1
110
オープンデータを利用して色々なものを作った話
hjmkth
1
110
250131_product meetup
motokoishida
0
210
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
260
私とデザインの10年
iflection
0
130
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
320
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
140
harutaka Vision Deck
zenkigenforrecruit
0
130
Cards | Storyboards
giofortuna_story
0
270
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
How GitHub (no longer) Works
holman
314
140k
Bash Introduction
62gerente
614
210k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
44
3.4k
Practical Orchestrator
shlominoach
188
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
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もやってしまえ) さらにもう一歩
まとめ
これからはデザイナーも コーディングするのが吉