初めまして！
本年度4月に入社しました、Webサイト構築事業部の山本です。
入社から約3ヶ月半が経ち、プロジェクトへの知見も貯まってきましたので、今回はデザインからコーディングまでの工程について書いていきたいと思います。
早速ですが、『デザインツールも使えるプログラマは強い！』について7本の柱に沿ってご説明させていただきます。
目次
プロジェクトに感じた違和感とその原因
まず初めに、私のシーズでの経験についてお話しします。
現在私はフロントエンドプログラマとして配属されておりますが、入社当初はバックエンドプログラマとして配属されており、デザイン面に携わることもあまりなく、システムは全てデザイナーさんがデザインされているものだと思っておりました。その為、お客様によっては「管理画面のデザインは無しで、（プログラマさんに）お任せでお願いします」といったご依頼が少なくないことに驚きました。
この場合はデザイナーさんやフロントエンドプログラマさんを通すことなく、バックエンドプログラマである自分たちが画面設計をし、デザインを考えつつコーディングをしていくことになります。
私の経験不足も多分にあるかとは思いますが、個人的にはこの部分がかなり無駄や手戻りの多い作業だと感じました。
その理由としては主に以下の3つが挙げられます。
- ボールペン等で書いたラフを誰かに依頼する場合、サイズ感が伝わりにくいこと
- 伝わりにくい部分を読み取ろうとすると時間がかかること
- 出来上がった画面に「やっぱりイメージと違う」とリテイクがかかる可能性があること
それぞれ書いてある通りなのですが、よくある伝わりにくい部分は
- サイズ感 ＝ 余白のpx数
- サイズ感 ＝ 各コンポーネントのサイズ比
上記あたりかと思います。
これらのサイズ感が少しずつ異なっていると最終的に「やっぱりイメージと違う」といった感覚が生まれるのかな、とよく考えておりました。
プログラマもデザインツールを使えると強い！
この項では前述の問題の解決策として、プログラマもデザインツールを使えると良いかもしれないというお話をしたいと思います。
ただこれは私個人の考えでして、社内からは「バックエンドプログラマがフレームワークを使ってフロントをモックとして作るのが最強」といった声もありました。
私としては「柔軟に対応出来るよう、両方の選択肢を状況に合わせて選べる状況をつくっておくことが一番良いのかな」といったスタンスで書いていきますね。
また、シーズのフロントエンド環境ではFigmaを使用しておりますので、今回はFigma想定で書いていきます。
デザインツールの利点はたくさんありますが、プログラマが描くラフをFigmaに置き換えると便利になる点に焦点を絞っていくつか挙げると…
- 定規を使わなくても真っ直ぐな線が引ける
- ボタンやフォーム等のサイズを全て任意の大きさで作れる
- 余白のサイズもpx数入力で簡単に指定できる
- 文字サイズの指定も簡単
- 作成したコンポーネントをショートカット1つで複製できる
- 画面ごと複製でヘッダーやサイドバーなど共通部分を描く回数が減る
- わかりにくい部分などにコメントを付けられる
- 実寸サイズでの作成で「やっぱりイメージと違う」がなくなる
- 作成したデザインからcssをコピーできる
- 招待リンク共有でメンバー間の情報共有も簡単
以上10つだけでもどうでしょうか、かなり便利に思いませんか？
そしてデザインツールの一番の利点は
“自分の考えている画面やコンポーネントを具体的に、明確に他人に伝えられること”だと私は考えます。
これはかなり大きなことで、間違った方向に制作を進めることが無い分、時間の無駄や手戻りが防げると考えています。
また、管理画面でよくある仕様の変更や削除, 追加があった際も画面のデザイン一覧があれば「じゃあこの機能はこの部分に追加, 削除, 移動しよう」とイメージが付きやすく、作業にも取り掛かりやすいのではないでしょうか？
個人で「こういった画面にしたい」というイメージがある場合、ある程度確かな表現力を持って明確にメンバーにも共有, 提示する術や表現の幅を持ち合わせているプログラマはかなり強いですよね。
アナログ, デジタルそれぞれの利点
これまでは主にFigma（デジタル）について書きましたが、もちろんアナログにも良い点はあります。
一言で言ってしまうと“アナログは早い。デジタルは正確。”です。
どちらか一方だけを良いとするのではなく、その場面場面によって両方で対応出来ると凄く良いと思います。
デザインとコーディングの作業時間はトレードオフ
前項で「アナログとデジタル、両方で対応出来ると良い」と書いたのには理由があります。
それは、デザインとコーディングの作業時間はトレードオフの関係にあるからです。
デザインはアナログのラフにして時間を短縮すればコーディング者自体が考え, 読み取る必要があり、結果的にコーディング段階でかかる時間が増えます。
一方で、デザインをFigma等のデザインツールでしっかりと固めてしまう場合はデザイン段階に時間がかかる分コーディング者が悩む時間が減ります。
これらがトレードオフの関係にある以上、プロジェクトメンバーの誰かの作業量が多く、誰かの作業量が少ないという事態が起こり得る為、メンバーの作業量を鑑みつつ、その時その状況で良い方法（アナログ, デジタルの選択）をとっていけたら、プロジェクトにとってもメンバーにとっても一番良いのではないでしょうか。
テレワーク前提だと状況は一変する
さて、これまでプログラマがデザインツールを使えることについてのメリットを書いてきましたが、ここからはそれをもう一押しするお話です。
昨今、新型コロナウィルスによる影響でテレワーク（或いはリモートワーク）になった方が増えたかと思いますが、それによる弊害として「情報の共有がしづらい」という問題があるかと思います。この問題が強く影響を及ぼすのが前述のアナログのデザインです。
以前まではプロジェクトメンバー同士やオフィスの隣の席同士でアナログのデザインを覗き込みつつ機能の確認や相談をしていましたが、テレワークでは同じように出来ません。
私はこの問題を解決する術もFigmaにあると考えております。
Figmaで作成したデザインはハイパーリンク形式で共有が可能です。
その為、あらかじめプロジェクトメンバーにデザインを共有しておき、備考や修正案はFigmaのコメント機能を利用して該当の箇所に記載します。それだけでもプロジェクトメンバー間での情報共有は可能ですが、オンライン会議も併用することにより同じデザインを見ながら意見交換が可能な為、テレワーク以前の状態と近いものをつくることが可能です。
Figmaが神過ぎた
この項ではそれでもFigmaの利用に足踏みしているあなたへ猛pushします。
- Figmaは無料で使用可能！
- 機能がわからずつまずいた時, 困った時に解決に導けるような情報リソースが多い！
つまり導入と学習コストの低さも兼ね備えています。
（特に社内のプログラマさんにはおすすめしていきたいですね…！）
Figmaの良さはシーズのデザイナーである河野さんが過去ブログにて紹介してくださいましたので、こちらも併せてご一読ください！
まとめ
最後になりましたが、伝えたいことをまとめておきます。
- アナログ, デジタル共に利点はあります。
但し、状況に応じて使い分けていけたらプロジェクトとしてより柔軟な対応が出来て良いのではないでしょうか。 - デザインとコーディングの作業時間はトレードオフの関係にあります。
その時その状況により、作業量や時間に余裕があるメンバーが作業を受け持てるよう、お互いに（アナログ, デジタル）ツールの選択肢があると良いのではないでしょうか。
ここまでお付き合いいただき誠にありがとうございました。
それではまた次回のブログでお会いしましょう、シーズ フロントエンドエンジニアの山本でした。