Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

なめらかな開発をするためにデザイナーも知っておきたい開発知識

f:id:life-is-bitter:20181213215521j:plain

デザイナーとエンジニアがお互いに深くコミュニケーションを取ってスムーズに開発できている状態を「なめらか」と呼んでいるのですが(さっき考えました)、そんななめらかな開発をするために必要な開発知識っていろいろあるよなと思います。

今回は1年ほどサービス開発をしてきた中でこんな知識があるとエンジニアとのコミュニケーションコストが下がって良い!となったものを自分のノウハウ棚卸しがてらまとめてみました。

前提としてはWEBプラットフォームで、駆け出しデザイナーというよりかはある程度戦いをこなしてきたデザイナーに向けてです。

margin/padding

CSSでのレイアウトを司る要素のひとつなので知識としては絶対必要。というかある程度戦いをこなしてきたデザイナーにとっては常識ですかね。

flexbox関連

最近はCSS Gridも流行ってきてますが、未だにCSSレイアウトの主流はflexですしflexコンテナとflexアイテムそれぞれに適用されるプロパティくらいは知っとくべきではないでしょうか。そこらへんを抑えておくことでデザインによってはflexでもそれは表現できないよということがなくなります。

ブロックの意識

SketchやXDでデザインデータを作るにしてもマークアップされる際にどうブロックが積まれるか意識があるだけでエンジニアへスムーズに連携できます。逆にその意識がないと実装する人がこれどう実装すべきなのか見えず、ここってどういう意図のデザインであるかの確認が一々挟まれてしまいます。

f:id:life-is-bitter:20181213211642g:plain

上のGIFはブロック意識がない場合のデザインデータですが、ただのオブジェクトの羅列になっておりこれではどうマークアップすべきかわかりづらく不親切です。

f:id:life-is-bitter:20181213211820g:plain

上のGIFではどうブロックとして切り出したらいいか透明なrectangleを配置しており、マークアップがしやすい状態になっています。この一手間でお互いが気持ちよく開発を進められるならこれくらいやっておきたいよね、というものでした。

JavaScriptのイベントハンドラ

これは単純にJSでどういうイベントが扱えるのか知っておくべきかなと思いました。具体的な例でいうと、Google Analyticsで今回リリースした機能が使われているかイベントトラッキングしたいな〜というときにそもそもこんな動作(クリックしたときやフォーカスが当たったとき)はイベントとして取れるんだっけ?という疑問にぶち当たるかと思いますがそういうときに役立ちます。

HTML5の各種API・仕様

HTML5の各種API・仕様ではWEBでどういうことができるのか、みたいなのがざっくりとまとまっています。人間は自分の中にある知識でしかアイデア創造ができないので純粋にWEBにおける体験を考える上で参考になります。逆にこれWEBでできるでしょ(過信)みたいな状況をなくすことができ、ちゃんと各種APIや仕様を知っていればWEBではできない動きの体験や一応できるけどめちゃくちゃ工数がかかるコスパの悪い体験であるかの判断ができるようになります。

日本語ドキュメントで参考になるのは以下でしょうか。

HTTPステータスコード

404とか403とか500とかいろいろありますが、割とそれらのデザインをどうするかであったり挙動としてどういうときに404などが出るべきだっけというのを考えなくちゃいけなくなるので必要な知識です。

データ型の概念

この変数はstring(文字列)ですよ〜とかnumber(数値)ですよ〜とか宣言することでエラーとかを防げて良き〜というのが型なのですが、型定義がどうなっているか読めるとデザインでも「じゃあここ文字じゃなくて数字しか使えなくな〜い?」みたいなことがわかります。型定義がこうだからデザインこうじゃないと無理です、影響範囲もデカイので実装の方は変えられませんみたいな事態を防げたりします。

テーブル設計

データベースのテーブル設計がわかると、いきなりその設計をぶち壊すようなユーザーデータの追加とか無茶苦茶を言わなくなります。将来的にこんな機能やデザインの追加も考えているのでテーブル設計こうだといいな〜なんてコミュニケーションができたら最高ですよね。そして理想のデザインを追い求めてもテーブルにそんなカラム追加できないぞ!何でもかんでもできるわけじゃないぞ!ということは覚えておきたいですね(自戒)。

SQL全般

SQLが叩けるとデータベースからユーザーの動向を掴めて自分のデザインが定量指標から評価することができるようになって良きです。ここに関しては私もまだちゃんとクエリを書けるわけではないので伸ばしていきたいところ。

理想はRedashにて自分でクエリ書いて見たいデータを自分で見るようにしたい...。

Git・GitHub

文言修正くらい自分でPR出せるといいよね。詳しくは前に書いた入門記事でも見てください。

最後に

上で挙げたもの全てを完全に理解するのは果てしなく時間がかかるのですが、ちょっと知っておくだけでもだいぶエンジニアとのコミュニケーションコストは下がるなあというのがこの1年での学びです。

今回はWEBに限りましたがまあネイティブアプリとかになると抑えておくべきところは違ってくるんですかね〜。