デザイナーがコーディングするときに最低限知っておくべき知識を教えてください！

回答

• asagiri2019/09/10 19:32

  エンジニアです。
  実体験からの参考までに、解答させていただきます。

  まず「知っておく」より「やっておく」事が大事です。

  デザインも同様かと思いますが、「知識」だけでは上達せず、手を動かして何度も失敗して少しずつ上達することが結局最短距離になるでしょう。

  まさに本サービスにあるHTML/CSSの知識は必須ですね。
  https://chot.design/html-css-beginner/

  後はドットインストールなどで効率よくHTML／CSS／jQueryの書き慣れだけもやっておきましょう。
  https://dotinstall.com/lessons/basic_html_v5
  https://dotinstall.com/lessons/basic_css_v5
  https://dotinstall.com/lessons/basic_flexbox
  https://dotinstall.com/lessons/basic_jquery_v2

  コードの基礎をある程度おさえたら

  Atomic Designの考え方を習得しましょう。100%の理解でなくても良いです。
  https://design.dena.com/design/atomic-design-を分かったつもりになる/

  大事なのは、「その要素の親要素と子要素は何なのか」「何と何が同じグループなのか」というデザイン設計の考え方です。

  デザインは単体で制作することが多いと思いますが、コーディングは協業が前提である事が多いですので、設計の「ルール、規約、プロセス」を重んじます。
  例えばマンション建設の時に同じ３階なのに部屋によって天井の高さが全く違う、などがあれば成り立たないでしょう。
  ある程度の共通ルールの元があった上で、いい感じにしていくのがコーディング上でのデザインです。

  慣れてくるといきなりブラウザ上でコードでデザインを行う「インブラウザデザイン」なども出来るようになります。

  もし今すでにSketchやPhotoshopのレイヤーに一貫したルールの命名や、一定ルールの元でシンボル化やオーバーライドなど行っているのであればすでに「設計、Atomic Design」は半分出来ています。

  ワイヤーフレームの時点で余白やレスポンシブの数値なども設計しておくと、ぐっとコーディングも早くなります。

  SketchやXDでは多分要素や余白の大きさも出ると思います。
  　

  ますは基礎の基礎をおさえて、次は自分が作ったワイヤーフレームやWebデザインをコードに落とし込む練習を何度もやりましょう。

  その上で「そうしてもこのデザインがコードで再現出来ない」などがあればまたこのコーナーに質問投げれば良いかと思います。

  参考になったかどうかわかりませんが間違いないのは、とにかく日々コードを書きましょう。
  がんばってください！！

  なるほど （2）
• マッキー2019/09/11 19:38

  フロントエンド（マークアップ）エンジニアなので、そういう視点からコメントしたいと思います。

  まず、HTML・CSS・JSの実装以前に、px単位でデザインが作成されていなかったり、
  px単位でデザインされていても何故か0.5px単位になっていたりするデザイナーさんがいます。

  大前提として、まず単位を合わせましょう。

  次にサイトやアプリの基準となる幅のサイズがあると思いますが、
  これがページによってまちまちで作成している人もいます。
  基準となる幅があるのであれば、どのページでもそれに従うか変則的な場合は事前に知らせるなど、
  次の工程のことを考えた振る舞いが必要です。

  デザインスキルがある人がコーディングする場合は、
  何も言わなくても巻き取ってくれたりしますが、そうでない場合の方も多いので、
  もらったデザインの通り作ればいいのか、そうではないのか判断出来ません。
  ご自身で作ったものはどういうルールで作ったか判断できますが、
  何も知らない人が見たとき、基本的に判断ができなくなるのでそのへんを抑えておく必要があります。

  これに近い問題として、ボタンなどの共通で仕様するパーツでスペースのとり方が場所によってまちまちになることが多いです。
  特にボタンに多いですが、文字に対してスペースを取っているのか、ボタンサイズがある程度決まっているのかなど、
  予め決まったルールがない状態で好き勝手にデザインを作ってしまうと、
  コーディングするときに似たようなボタンがたくさん出来てしまい困ってしまいます。

  コーディングスキル以前に、このようなところに気を配られてないデザインは、
  実装時に頭を悩ませるものになりやすいので、気をつけるとよいです。

  一番てっとり早いのは、自分でつくったデザインも自分でコーディングしてみることです。
  クライアントやプロダクション環境に出す必要はないので、あくまで学習の一貫として作成してみて、
  実際に経験してみるのがやはり一番手っ取り早いです。

  僕もコーディングができるようになる前は、
  デザインするときに知っておいたほうがいい実装の知識を教えてもらったりしていましたが、
  言葉で聞いても、実態の無いふわふわしたものを考えてるようでしっくりきませんでした。
  コーディングするようになってから言っている意味が理解できるようになったので、
  どんな形でもいいので経験してみることが大切です。

  これを経験できれば自分の工程の後のことを考えて動けるようになるため、
  プロジェクト全体がスムーズに進むようになり、円滑に作業が進んでいけるようになるので、
  ちょっとずつでいいのでコード書くことになれていくとよいと思います。

  なるほど （5）