エンジニアと仲良くなれるデザイナーになりたい話
こんにちは！きなこです。
この記事はOthloTech Advent Calendar 2019の1日目の記事です。
はじめに
今回の記事は「エンジニアさんと一緒に開発したことない…」「ハッカソンとか出てみたいけど、どうやったら役に立てるのかわからない…」というデザイナーさんに向けて書きました。
内容はほぼタイトルのままですが、基本的には自分が共同開発(主にハッカソン参加)してる時に「これ良いな」と思った・言ってもらえたことをちょこっと共有しようと思います。
これを読んで「なるほど〜…じゃあハッカソン出てみようかな！」「共同開発やったるぞ！」というデザイナーさんが増えたら超うれしいです。
エンジニアの手が空かないように「ざっくりしたプロトタイプを一緒に作る」
(モックアップとペーパープロトタイプ書き間違えちゃった…)
ハッカソンで作るものが決まった！さあ、あとは作るだけ！
そんな時、「FigmaやXDで綺麗なモックアップを作るぞ！」の前にエンジニアさんと一緒にプロトタイプを考えた方が良いです。
なぜならば、ボタンの配置や文字の表示位置などがざっくりと決まっていないと「ん…？クライアントサイドの実装ってどういう配置にすれば良いんだろう…？」とエンジニアさんが悩んでしまうからです。
また、実装後の手戻り防止にもなるので、やっておくと何かと良いことずくめです。
デザイナー以外のみんなも書き消し出来るホワイトボードかA4の白紙等に書いていくと良いでしょう🙆♀️
書き出す画像のサイズ・形式等は自分で調べた上で、必ずエンジニアさんに確認する
超絶かっこいいロゴが出来て嬉しい時とか、スーパー素敵なアプリアイコンが出来た時とか、めっちゃテンション上がりますよね。
「ひゃっほーそのまま書き出しちゃうぜ！」と書き出したら「縦横比違う…」「プロトタイプと実機でサイズ違うからはみ出た…」で作り直し…！
こんな悲しい事故を起こさない為にも、そしてサービスを早く作り上げる為にも、画像のデザイン作成前にエンジニアさんと作成画像の仕様を確認しておいた方が良いでしょう。
確認するものとしては、
・画像サイズ
・画像の形式( png, jpg, svgなど )
・実装するデバイスのサイズ( プロトタイプと実機のズレを防ぐため )
などでしょうか？
多分、デバイスのサイズに関しては自分でもある程度調べられると思うので( PCかタブレットかSPか等 )調べておきましょう。
そして、画像のサイズずれ( 実機に当てたら画像サイズがめっちゃ違う )は画像単体で作ってる時に起こりやすいので、手元で一旦プロトタイプに当て込み、再確認すると間違いないと思います。
また、決まっていない部分等は提案してみる等、柔軟に対応すると良さそうです。
CSSも書けるようにしておいた方が良い
これは必須ではありませんが、CSSも書けると良いでしょう。
Webサービス作るぞ！デザイン作った！CSS書かなきゃ！
そんな時、エンジニアさんにCSSをお願いするのももちろんアリです。
ですが、「デザイン出来ました！CSSもやっちゃいますね！」とデザイン全てを自分で作り上げるといくつか良いことがあります。
1つはエンジニアさんに喜ばれます。笑
先日、ハッカソンでウェブアプリを作った時に「自分の作った素のHTMLがこんなに綺麗になるなんて…！」とエンジニアさんが喜んでくれてめちゃめちゃ嬉しかった覚えがあります。
実際に、エンジニアさんの工数も減るし、実装に集中してもらえるため、より完成度の高いサービスを作ることが出来るはずです。
ハッカソンでは「デザイン出来た！サービスの概要紹介するスライド作ったけど、機能がどこまで実装出来るかわからないから完成させられない…手が空いた…」って時にササっと作業出来るというメリットもあります。
もう1つのメリットはデザインのクオリティを短期間で高めることが出来ることです。
もちろん、エンジニアさんにCSSを実装してもらっても綺麗なデザインは仕上がります。
しかし、「ん…？ここの余白、もう少し広げたい…」「修正を頼みたいけど、工数かかるしなぁ…」こんな風に思ったことはありませんか？
自分でCSSを書くことができれば「自分でこだわりのCSSを書いて、エンジニアさんの工数を増やさずに、めちゃめちゃ素敵なデザインにする」ことが出来ちゃいます。
ちなみに、私は最初サルワカというウェブサイトでCSSを勉強しました。
可愛らしいイラストと初心者にもわかりやすい解説でとてもオススメです。
さいごに
色々思い返してみたのですが、「デザイナーとして」やって良かったなと思うことはこれくらいでした。
あとは「他の人と何かをするとき」に「人間として」気をつけたいことや、気を遣った方が良いと思うことをしたら良かったなあって感じでした…(意見を言いやすい雰囲気作り、相手への気遣い等)
私もまだまだ未熟なので、「これも気をつけた方が良いよ！」とかあったらコメント等で教えてもらえるととても嬉しいです。
また、こちらの記事がめちゃめちゃ参考になるので、この記事を見て「もっと深く知りたいよ！」と思った方はぜひ読んでみてください。
最後まで読んで頂きありがとうございました！
それでは、良いデザイナーライフを！
いただいたサポートはプロダクト開発関連の書籍購入に充てようと思います🙏