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
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
660
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
450
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
350
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
590
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
650
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.1k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
450
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
200
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.6k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
29
4k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Code Reviewing Like a Champion
maltzj
526
40k
How STYLIGHT went responsive
nonsquared
100
5.9k
The Language of Interfaces
destraynor
162
25k
Balancing Empowerment & Direction
lara
5
700
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Done Done
chrislema
185
16k
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もやってしまえ) さらにもう一歩
まとめ
これからはデザイナーも コーディングするのが吉