日中が暖かくなってきましたね。皆様いかがお過ごしでしょうか。採用の棚橋です。

デザインチームと交えて「どのようなデザインであればコーディングしやすいか？」を議題に話し合った社内勉強会の、その2を書いてみます。

前回の記事はこちらですので、ぜひ合わせて見ていただければ幸いです。
https://www.wantedly.com/companies/eilsystem/post_articles/375138

■ 1. 各画面の導線が明確化されている

これはUIデザイン独特の観点で、一般的な平面デザインにはあまり語られないと思います。

Adobe XD であれば、プロトタイプモードに切り替えることでリンクを付けることができます。

「そのボタンを押下するとどうなるか？」「そのテキストリンクを押下するとどうなるか？」と常に考えながらデザインされたものは、コーディングのフェーズに移っても進めやすいです。

「どうなるかわからないけどプログラマーから言われたからボタンを置きました」ではいけません。

■ 2. グリットデザインであること

これはデザインの方向性やブランディングにもよりますが、「レスポンシブデザイン」を基本としたデザインであれば、グリットが明確なものである方が望ましいです。

Bootstrap であれば12等分のグリットデザインが元となっており、それに沿うことで開発工数が大きく削減できます。

つまりはその分、他のデザインのこだわり部分のコーディングに時間を割けるということですので、最終的な完成度は高くなります。

もちろんあえてこのグリッドを意識せず、UXに重きを置いたものを作る場合はこれに限りません。

■ 3. 表記揺れがない

これはデザインに限った話ではありませんが、「表記揺れがない」という基本的なことが守られていることは、開発において非常に大きいです。

例えば、Aという画面では「お知らせ」、Bという画面では「NEWS」、Cという画面では「インフォメーション」となっていると、コーディングに移った際に混乱します。

明確に何か意図があって文言を使い分けているのであれば別ですが、大抵は開発の妨害にしかならないので、デザインにしても画面仕様にしても表記揺れがないことが重要です。

なかなか奥が深い部分ですが、業種の垣根を超えて全員でより良くしています。

そんなエイルシステムですが、まだまだ募集は続けていますので、ぜひ以下などよりご応募ください。

https://www.wantedly.com/projects/856951
https://www.wantedly.com/projects/842815

[素材]

• https://www.irasutoya.com/2018/08/blog-post_78.html
• https://www.irasutoya.com/2020/07/blog-post_94.html
• https://www.irasutoya.com/2014/09/blog-post_744.html
• https://www.irasutoya.com/2018/08/approvedrejected.html