<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>ポエムです。<a href="https://qiita.com/advent-calendar/2021/design-code" target="_blank" rel="nofollow noopener noreferrer">エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar 2021</a>に参加しています。</p>
</div></aside>
<h1 id="%E7%B5%90%E8%AB%96">
<a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h1>
<ul>
<li>デザインとプログラミングを両方学ぶと、変化があるのは主にデザイン側で、生産性が上がるのは主にプログラミング側</li>
<li>なぜなら、デザイン→プログラミングという流れだから</li>
</ul>
<h1 id="%E3%81%A8%E3%81%82%E3%82%8B%E6%97%A5%E3%81%AE%E3%82%B5%E3%83%BC%E3%82%AF%E3%83%AB%E3%81%A7%E3%81%AE%E5%87%BA%E6%9D%A5%E4%BA%8B">
<a class="header-anchor-link" href="#%E3%81%A8%E3%81%82%E3%82%8B%E6%97%A5%E3%81%AE%E3%82%B5%E3%83%BC%E3%82%AF%E3%83%AB%E3%81%A7%E3%81%AE%E5%87%BA%E6%9D%A5%E4%BA%8B" aria-hidden="true"></a> とある日のサークルでの出来事</h1>
<p>サークルで新しくInstagramのアカウントを創設するということで、1年生の子がアイコンに使う画像の案を3つ持ってきてくれました。</p>
<p>彼女が提出してくれたのは、大きな正方形の画像3枚でした。どれも上手にデザインされてはいるものの、Instagram上でのアイコンの見え方は「非常に小さい円形の画像」です。大きな正方形の画像3枚の状態で良し悪しを決めることもできなくはないですが、自分には後で「なんか違うな...」となる未来が見えました。</p>
<p>そこで自分は「実際にアプリ上でアイコンとしてはめてみて、その状態を見比べるようにしないか」と提案し、その1年生は快く行ってくれました。すると実際に画像の見え方が想定とは大きく異なり、最初に用意した3案は一旦取りやめて最適な画像を新しく作ることになりました。</p>
<h1 id="%E7%94%9F%E7%94%A3%E6%80%A7%E3%81%AE%E9%8D%B5%E3%81%AF%E2%80%9D%E6%9C%80%E7%B5%82%E6%88%90%E6%9E%9C%E7%89%A9%E3%82%92%E3%81%A9%E3%82%8C%E3%81%A0%E3%81%91%E6%84%8F%E8%AD%98%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E2%80%9D">
<a class="header-anchor-link" href="#%E7%94%9F%E7%94%A3%E6%80%A7%E3%81%AE%E9%8D%B5%E3%81%AF%E2%80%9D%E6%9C%80%E7%B5%82%E6%88%90%E6%9E%9C%E7%89%A9%E3%82%92%E3%81%A9%E3%82%8C%E3%81%A0%E3%81%91%E6%84%8F%E8%AD%98%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E2%80%9D" aria-hidden="true"></a> 生産性の鍵は”最終成果物をどれだけ意識できているか”</h1>
<p>何でこんな話をするかというと、この件が生産性の本質に関わる出来事のように感じたからです。</p>
<p>つまり、「生産性の鍵は”最終成果物をどれだけ意識できているか”ではないか」といいたいのです。なぜなら彼女が最初から最終成果物（インスタ上での見え方）を意識して画像を用意できていれば、余計な手戻りは防げたはずだからです。</p>
<p>「これを出しときゃいいだろ」みたいな感じになって申し訳ないのですが、「イシューの解像度を高く持て」的な話です。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0295abde3d62b" src="https://embed.zenn.studio/card#zenn-embedded__0295abde3d62b" data-content="https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00MTL340G%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.amazon.co.jp/dp/B00MTL340G/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.amazon.co.jp/dp/B00MTL340G/</a></p>
<h1 id="%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%92%E6%84%8F%E8%AD%98%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AF%E7%94%9F%E7%94%A3%E6%80%A7%E3%82%92%E4%B8%8A%E3%81%92%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%92%E6%84%8F%E8%AD%98%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AF%E7%94%9F%E7%94%A3%E6%80%A7%E3%82%92%E4%B8%8A%E3%81%92%E3%82%8B" aria-hidden="true"></a> エンジニアリングを意識できているデザインは生産性を上げる</h1>
<p>デザイン×エンジニアリングでもこのような考え方は当てはまると思います。つまり、最終成果物（プログラミングでどう書かれてどう動くか）を意識して作られたデザインは生産性を上げるということです。</p>
<p>例えば、自分はReactでの</p>
<ul>
<li>コンポーネントの分け方</li>
<li>命名規則</li>
<li>propsの渡し方</li>
</ul>
<p>などをある程度理解しているので、Figmaでデザインをするときに</p>
<ul>
<li>Reactコンポーネントの粒度に合わせてFigmaコンポーネントを作る</li>
<li>コード上で実際につけられるであろう名前をFigmaコンポーネントにもつける（パスカルケースにしたりBEMを意識したり）</li>
<li>propsとして扱うであろう情報をFigmaコンポーネントにVariantとして渡す（逆にそれ以外は別々のコンポーネントとして作る）</li>
</ul>
<p>などといった工夫をして、次のプログラミングの工程の効率を上げる補助ができます。つまり、「プログラミングの知識があることで、デザイン側を工夫できてプログラミング側の生産性を上げられる」のです。</p>
<p>しかし、逆に「デザインの知識があることで、プログラミング側を工夫できてデザイン側の生産性を上げられる」というケースはなかなかないように思います。なぜかというと、プログラミングはデザインの後にくる工程だからです<sup class="footnote-ref"><a href="#fn-d623-1" id="fnref-d623-1">[1]</a></sup>。エンジニアリングを行う上で最終成果物を意識しても、デザインのためにプログラミングをどうこうしようと考えることはあまりないのです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/79ec42f86433-20211212.png" alt loading="lazy" class="md-img"></p>
<p>もちろん、FigmaやUXHubのように「エンジニアリングの力を持ってしてデザインの課題を解決する」というケースはざらにあると思うのですが、ここで筆者が言いたかったのは「隣接する工程の知識やスキルを持っていて強みとすることができるのは、より最終成果物に近い（＝「後ろ」の）工程」なのではないかということでした。</p>
<h1 id="%E6%88%A6%E7%95%A5%E7%9A%84%E3%81%AB%E3%80%8C%E5%BE%8C%E3%82%8D%E3%80%8D%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E5%AD%A6%E3%82%93%E3%81%A7%E3%81%8A%E3%81%8F">
<a class="header-anchor-link" href="#%E6%88%A6%E7%95%A5%E7%9A%84%E3%81%AB%E3%80%8C%E5%BE%8C%E3%82%8D%E3%80%8D%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E5%AD%A6%E3%82%93%E3%81%A7%E3%81%8A%E3%81%8F" aria-hidden="true"></a> 戦略的に「後ろ」のスキルを学んでおく</h1>
<p>これがわかって何が嬉しいかというと、「戦略的にスキルを身に着けたいときに指針の1つになる」と筆者は考えています。例えば「私はソフトウェアのUIデザインで戦っていきたいから、その後の工程であるプログラミングも学んでおこう」みたいなことです。</p>
<p>「じゃあエンジニアとして戦っていきたいときの”後ろ”はなんなのか」と問われたらなかなか思い浮かばないのですが、「ユーザー/ドメイン理解」なんかは該当するかも知れません。プログラミングの後には「ユーザーに使われる」という工程がありますから。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/24a91b867983-20211212.png" alt loading="lazy" class="md-img"></p>
<p>筆者は新卒ではソフトウェアエンジニアになるのですが、最終的にはPMとか事業家みたいなポジションで活躍したいと思っています。ですので、たとえばエンジニア→UXデザイナー→PMみたいな感じでステップを進めていけば、ジョブチェンジしたときにも「後ろ」の工程を意識しながらアウトプットを出して差別化していけるんじゃないかなあと考えたのでした<sup class="footnote-ref"><a href="#fn-d623-2" id="fnref-d623-2">[2]</a></sup>。</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-d623-1" class="footnote-item">
<p>デザインもプログラミングも継続的なサイクルであることは百も承知ですが、ここではあえて言い切らせてください <a href="#fnref-d623-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-d623-2" class="footnote-item">
<p>ここらへんのキャリアの進め方については色々考え方があると思っていて、ぜひ読者の皆さんのご意見をお伺いしたいです！ <a href="#fnref-d623-2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


隣接するスキルを学ぶと「後ろ」が楽になる

とある日のサークルでの出来事

生産性の鍵は”最終成果物をどれだけ意識できているか”

エンジニアリングを意識できているデザインは生産性を上げる

Discussion