デザイナーが開発チームの一員としてcommitしていくための知識(インブラウザデザイン編)
こんにちは、むろです。
未経験から人類やってる駆け出しホモサピエンスです。
このエントリーはbosyuアドベントカレンダーの15日目のやつです。前日はluluさんの整数→クウェンヤ数字の変換を実装しながらRuby2.7のNumbered Parameters使ってみるで、明日はkoyoがなにかかきます。
で、今回わたしはデザイナーが開発チームの一員としてcommitしていくための知識(インブラウザデザイン編)として、 普段インブラウザでデザインしている様子を動画にとったのでみなさんに見てもらえたらなと思います。
どういう人に見てほしいか
- 駆け出しWebデザイナーさん
- 受託系から事業系(インハウスデザイナー)に転職したいなと思っているデザイナーさん
- デザイナーと仲良くなりたいなと思ってくれてるエンジニアさん
今回の動画でやっていないこと
- 正しいマークアップ
あくまで、ブラウザ上でデザインを試行錯誤する様子をお伝えすることに注力しているので、HTMLとCSSは適当です。
CSS警察のみなさんからの「僕(わたし)ならこう書く」などのマウントをお待ちしています〜
普段、仕事でやる場合はちゃんと書いてます…というか、今回のやつだとdisplay: flex; でもう少しいい感じに書くと思います…
インブラウザデザインとは
XD, Sketch, Figma などのデザインツールを使わず、ブラウザ上でCSSを書きながらデザインをする手法です。
デザインの作成とコーディングが同時に行えるので、工数削減が出来て便利ですが、HTMLとCSSの事前知識がある程度必要になります。
今回は適当にさらさら書いていますが、普段はCSSのプロパティをぐぐりながら書いてます。
※: すべてのデザイン作業をインブラウザでやっているわけではありません。わたしの場合の使い分けは後で記述しますね。
インブラウザデザインの様子
まずはこちらをご覧ください。
動画初めてなので編集を全然していないのと、ゆるふわなので少し長くなってます。すみません。。
https://drive.google.com/file/d/1QUfIBiLKDuy8aeryETRi0CrVP09eGHHO/view?usp=sharing
解説
bosyu.me から、2019/12/15現在、TOPページに置かれているHTMLとCSSをダウンロードしてきたものをソースとして使い、SlimとScssで書いています(なので、SlimもScssも実際のコードとは別物なので中の人、安心してください!!!!)。
今回は、bosyu.meのヘッダーに検索窓をつけてみるデザインをやってみています。
作業の流れ
動画になっていない部分
- Githubからブランチをもってくる
- ローカルでサーバーを起動する
動画になってる部分
- Chromeのdevtoolで見た目を確認しながらデザインをする
- SlimとScssを書く
- Gitでdiffを確認してcommitする
という感じです。
途中で黒い画面とGitを使っていますが、こちらについてはすでに記事にしているのであわせて読んでもらえると嬉しいです。
補足
- Devtoolで編集した分の差分はdevtool上で確認することもできます 方法はこちら
こらちは@hanachin_さんから教えていただきました!ありがとうございます!!!!!
いただいた質問
実装のエンジニアとCSSコーダーで分業する際に注意していること(作業スコープって実際きれいに分けられるもの?など)
- CSSコーダーというかマークアップエンジニアさんの役割を担ってる感じなので、作業の切りわけについては機能の規模や、わたしがアサインされるタイミング、エンジニアさんのスキル(フロントエンドスキル)によって変わってくるので、作業前に確認します。大体はわたしが「HTMLとCSSしか書かない」と決めているので、Railsなどの場合はだいたいきれいに分けられるのですが、フロントエンドがSPAだったりする場合は事前に相談してからやってます。
毎回このようにdevToolで直接デザイン&コーディングしていくかたちなのか?
以上です。
今回わたしはbosyu.meさんを使ってデザインしてみましたが、みなさんもいつも使っているWebサービス(Twitterだったり)で試しに遊んでみたりしてみてください!
ちなみに、bosyuをテーマにしたのでわたしがbosyuでもこういう作業をしているように思われたかと思うんですが、実はわたしはbosyuでUIデザインはほとんどやってません。なので、もしかしていつかbosyuに検索窓が現れたとしても、おそらくデザインは他の方がされたやつです…!!!!
PR
bosyuではデザイナーさんを募集していますよー!