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
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
390
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
220
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
120
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
630
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
The Spectacular Lies of Maps
axbom
PRO
1
300
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why Our Code Smells
bkeepers
PRO
339
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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もやってしまえ) さらにもう一歩
まとめ
これからはデザイナーも コーディングするのが吉