Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ワンランク上のデザイナーになる コーディングことはじめ

9e3a9b57a1ef86c7636c9f80f4a9555d?s=47 firecolor
January 25, 2020

ワンランク上のデザイナーになる コーディングことはじめ

西東京Web勉強会(仮)「デザイナーLT大会&交流会」に登壇したときの資料です

9e3a9b57a1ef86c7636c9f80f4a9555d?s=128

firecolor

January 25, 2020
Tweet

More Decks by firecolor

Other Decks in Design

Transcript

  1. None
  2. • 自 己 紹介 • デ ザ イナ ー の

    仕 事 範 囲 • ど う やっ て 学 ぼ う か • コ ー ディ ン グ で き た ほうがいい? • コ ー ディ ン グ し て い くために • デ ザ イン か ら コ ー ド を考える • さ ら にも う 一 歩 • ま と めと 告 知 本日話すこと
  3. 小泉 誠(コイズミ マコト) Webデザイナー・UI/UXデザイナー フロントエンドエンジニア 講師、ITコンサルタント etc. フリーランスとして活動中。 屋号は「Studio FireColor」。

    ウェブ制作会社、システム会社、SEO系の会社などを 経て独立。 Webデザイナーに始まりフロントエンド全般、SEO、 マーケティング、システム開発、社内のIT化のコンサ ルティングなど。 現在は「本人も職種がわからない…」といった感じで、 ゼネラリスト道を邁進中。 自己紹介
  4. デザイナーの仕事範囲 デザイナーの仕事範囲

  5. デザイン UI/UX HTML・CSS JavaScript ライティング イラスト PHP etc DB サーバー

    SEO マーケティング ディレクション 動画 アニメーション デザイナー フロントエンド バックエンド この辺までできるといいな
  6. コーディングできた方がいい? コーディングできた方がいい?

  7. いろんな意見はあるけれど できた方がいいと思う コーディングできた方がいい ※ 今 回 の コ ー デ

    ィ ン グ は 主 に H T M L と CS S あ た り の こ と で す
  8. • 仕事の幅が広がる • コミュニケーションがしやすくなる • 視野が広がり、よりユーザー目線で考え られる • 単価が上がる •

    思い通りのものが作れる コーディングできた方がいい
  9. どうやって学ぼうか

  10. • オンライン講座などの活用 • 模写 • スタイルガイドなどを作る • コミュニティや勉強会 どうやって学ぼうか

  11. • OS: Win10Pro • エディタ: Visual Studio Code • デザイン:

    Photoshop、Illustrator、AdobeXD • CSS: SCSS • JS: Vanilla、Vue、jQuer y、etc • ビルドとか: Webpack4 • サーバー:自宅サーバー・NAS どうやって学ぼうか
  12. コーディングしていくために

  13. 使いやすさを考える コ ー デ ィ ン グ し て い

    くために
  14. 使いやすさを考える コーディングしていくために 使う人 Googleなどの機械 見る人

  15. セマンティックなコード コ ー デ ィ ン グ し て い

    くために
  16. セマンティックなコード コーディングしていくために 意味づけ セマンティック

  17. • コンピュータに理解しやすくなる • アクセシビリティの向上も図れる • 制作サイドの意思の疎通がしやすい セマンティックなコード コーディングしていくために

  18. Schema.org https://schema.org/ WAI-ARIA https://www.w3.org/TR/wai-aria-1.1/ セマンティックなコード コーディングしていくために

  19. プロジェクト内でのルールを考える コ ー デ ィ ン グ し て い

    くために
  20. • コーディグルール • 命名規則 • ファイル構成やツール選定 • できるだけ冗長にならないように、コン ポーネント化を考える ※ただしコンポーネントだけでは対応できないことも

    プロジェクト内でのルールを考える コーディングしていくために
  21. デザインからコードを考える

  22. • 画像の倍書き出しためのデザイン • 画面の様々な状態が考慮されていない • 動きが考えられていない • イレギュラーなパターンが考えられてな い •

    カーニングきつきつ デザインからコードを考える
  23. さらにもう一歩

  24. • Emmet、Pug、Sass • JavaScript中心のフロントエンドの技術に 触れる • WordPressのテーマが作れると仕事がウ ハウハ(PHPもやってしまえ) さらにもう一歩

  25. まとめ

  26. これからはデザイナーも コーディングするのが吉