デザイナーが開発チームの一員としてcommitしていくための知識(インブラウザデザイン編)

こんにちは、むろです。

未経験から人類やってる駆け出しホモサピエンスです。

で、今回わたしはデザイナーが開発チームの一員としてcommitしていくための知識(インブラウザデザイン編)として、普段インブラウザでデザインしている様子を動画にとったのでみなさんに見てもらえたらなと思います。

あくまで、ブラウザ上でデザインを試行錯誤する様子をお伝えすることに注力しているので、HTMLとCSSは適当です。

CSS警察のみなさんからの「僕(わたし)ならこう書く」などのマウントをお待ちしています〜

普段、仕事でやる場合はちゃんと書いてます…というか、今回のやつだとdisplay: flex; でもう少しいい感じに書くと思います…

XD, Sketch, Figma などのデザインツールを使わず、ブラウザ上でCSSを書きながらデザインをする手法です。

デザインの作成とコーディングが同時に行えるので、工数削減が出来て便利ですが、HTMLとCSSの事前知識がある程度必要になります。

今回は適当にさらさら書いていますが、普段はCSSのプロパティをぐぐりながら書いてます。

※: すべてのデザイン作業をインブラウザでやっているわけではありません。わたしの場合の使い分けは後で記述しますね。

まずはこちらをご覧ください。

動画初めてなので編集を全然していないのと、ゆるふわなので少し長くなってます。すみません。。

bosyu.me から、2019/12/15現在、TOPページに置かれているHTMLとCSSをダウンロードしてきたものをソースとして使い、SlimとScssで書いています(なので、SlimもScssも実際のコードとは別物なので中の人、安心してください！！！！)。

今回は、bosyu.meのヘッダーに検索窓をつけてみるデザインをやってみています。

という感じです。

途中で黒い画面とGitを使っていますが、こちらについてはすでに記事にしているのであわせて読んでもらえると嬉しいです。

こらちは@hanachin_さんから教えていただきました！ありがとうございます！！！！！

実装のエンジニアとCSSコーダーで分業する際に注意していること（作業スコープって実際きれいに分けられるもの？など)
- CSSコーダーというかマークアップエンジニアさんの役割を担ってる感じなので、作業の切りわけについては機能の規模や、わたしがアサインされるタイミング、エンジニアさんのスキル(フロントエンドスキル)によって変わってくるので、作業前に確認します。大体はわたしが「HTMLとCSSしか書かない」と決めているので、Railsなどの場合はだいたいきれいに分けられるのですが、フロントエンドがSPAだったりする場合は事前に相談してからやってます。
毎回このようにdevToolで直接デザイン＆コーディングしていくかたちなのか？
- 開発する機能の規模によります。今回のようにインタラクションがシンプルな場合はインブラウザでやりますが、複数のインタラクションが生じるUIデザインの場合はデザインツールでプロトタイプを作って、PMさんに確認してもらってからコーディングに入ります。あと、1画面だったとしてもイラストが必要な場合もデザインツールでイラストのテイストや配置などを見てもらってからコーディングします。