UIデザイナーがコーディングを学んでみて感じたメリット

当社では、デザインとコーディングの作業はそれぞれ別の方が担当することが多く、普段私はUIデザインを担当しています。

入社当時、UIデザインの経験もコーディングの知識もほとんどなく、四苦八苦していたので、コーディングを学ぶ必要性を強く感じていました。

現在、ありがたいことに実務としてコーディングを担当する機会があり、先輩からご指導いただきながら勉強している身ですが、デザイナーの立場からコーディングを学ぶメリットを今までの失敗を交えて紹介したいと思います。

1. コミュニケーションコストが省ける

コーディング完了後、デザイナーが作成したプレビュー通りに再現できているか確認を行うのですが、調整してほしい箇所があった場合、説明するにはコーディングについて知らないと非常に難しいです。特に私の場合リモートでの確認でしたので、ビジュアル表現の調整についてうまく言葉で説明できず、複数回やり取りが発生することがしばしばありました。

コーディングを経験すると、単純にそれに関する知識量が増えかつHTMLやCSSの構造が理解できるようになったため、コーダーとのコミュニケーションが取りやすくなりました。アメリカの方と英語で話すのと同じように、共通言語で話せるようになった感覚です。

調整してほしい箇所を伝える時、要素をより具体的に指定できたり、そのページの記述ルールに則った言葉で的確に指示できるようになったので、不要なやり取りが減り調整がスムーズになったように感じます。

コミュニケーションに手間と時間がかからなくなれば、当然工数が削減できてコストカットにもなります。

2. 実現可能なデザインができる

デザインをする際にもコーディングの経験は役立ちます。

例えばこのような形状のボタン。コーディングに関する基礎知識がまだほとんどない頃、デザインだけ見ればそこまで複雑なものではないので問題ないと思いデザインした形です…。

しかし、コーディング段階で実際にHTML/CSSで再現をしようとすると、いくつか複雑になってしまう箇所が出てきます。 指定が複雑化すると、単に四角いボタンを設置するよりも数段手間がかかります。さして重要でないボタンの開発のためにコストがかかり、その分予算の回収に時間がかかることになってしまうのです。

そこまでしてやる必要があるデザインじゃないよね、ということでこちらのボタンが採用されました。web上で再現するためにどんなプロセスを踏むのか理解していなかったために、デザインを変更する必要が生まれてしまった事例です。

コーディングを学べば、予算や実現性などを総合的に考慮してデザインできるようになります。またコーダーがより理解しやすいデザインデータが作成できるようになることも、メリットの1つです。

このようなボタンの形状を再現したい場合、以前の私なら赤枠の図形でデザインデータを提出していたことでしょう。

しかし、画像で書き出さずCSSで再現する場合は、以下のような形をそのまま作るわけではなく四角形と三角形の形を組み合わせてデザイン通り再現します。

上記はシンプルな作りなのでどのコーダーも悩まないかもしれませんが、より複雑化してくるとデザイン時もCSSでどのように再現するか想定してデータ作りをすることが必要になってくると思います。コーダーにとってやさしいデザインデータは、効率UPにも直結します。

3. 情報を整理する能力が鍛えられる

デザインする上でも、その他の仕事でも、プライベートでも必要な、「情報を整理する能力」ですが、こちらもコーディングで鍛えることができると思います。

ディレクトリが複数あるような複雑なサイトであるほど、情報のまとまりを理解し、分類、仕分けできなければコーディングはできません。これだけの情報量が詰まったサイトを整理しているなんて…と、コードを見てはいつも頭が下がる思いです。

また、多くの場合は1つのサイトに複数のコーダーが手を入れるので、次にコーディングを担当する方が理解しやすいようにするために、より分かりやすい記述・設計が重要になるはずです。コーディングと情報を整理する能力は切っても切り離せないものなのです。

最後に

UIデザイナーがコーディングを学ぶことにおいて様々な考えがありますが、今回は私が感じたメリットを紹介しました。デザインとコーディングどちらもできるようになったらカッコいい！勉強に励みます。