ともに作る。ともに育てる。

コーディングベースでデザインすること

2024.1.2 - Tue

NF-Dsgnではコーディングベースでのデザイン制作を取り入れています。クライアントから特に指定のない場合、この手法でWebサイト制作を行うことがあります。

コーディングベースのデザイン制作とは?

一般的にWeb制作会社では、PhotoshopやIllustratorなどのグラフィックデザインツールを使い、まずデザインだけを制作します。その後クライアントに確認を取り、デザインが確定するとコーディング実装に移ります。サイトのすべてのページでデザインとコーディングをそれぞれ制作するため、相応の工数が発生します。

コーディングベースのデザイン制作では、開発者が直接コードを書いてデザインを構築します。コードで表現できないようなオブジェクトや画像などを除き、グラフィックデザインツールの工程を省くことができます。

後からのデザイン修正はできるのか?

コードで直接制作を行うので、後からデザインを修正出来ないのではないかと思われるかもしれません。しかし大抵の場合、デザインの修正を行う部分というのは、使用する写真や画像であることが多いです。そういった部分は、いずれにしてもグラフィックデザインツールを使用して制作しますので、後からでも差し替えることが可能です。
また、コーディングベースのデザイン制作では、コンポーネントやモジュールを再利用することが容易であるため、一貫性が維持され、開発者は同じデザイン要素を繰り返し実装する手間を省くことができます。一箇所を修正することで全体を修正することができるため、効率的に後からの修正を行うことが可能になります。
なお、デザインはいきなり制作するわけではありません。制作の前段階では、ワイヤーフレームを用いた打ち合わせを行います。その時点で、実装したい機能や、参考にしたいデザインについて認識合わせします。このフェーズを丁寧に行うことにより、クライアントとの認識のズレを未然に防止します。

コーディングベースでデザインすることのメリット

・工数が少ない

グラフィックデザインツールを用いた制作フェーズを省略することができるため、その分、制作にかかる費用を抑え、納期を短くすることができます。

・レスポンシブを意識したサイト制作

最初からHTMLやCSSで構築するため、グラフィックデザインツールで作成したものを元にする場合よりもレイアウトに無理が生じにくくなります。どんな画面幅でも綺麗に表示されるWebサイトを意識しやすい制作法であると言えます。

・プロジェクトの一貫性の確保

コーディングベースデザインでは、一貫性が保たれやすくなります。デザインとコードが密接に結びついているため、デザインスタイルやパターンがプロジェクト全体で一致しやすくなります。

まとめ

コーディングベースのデザイン制作は、プロジェクトの効率と品質を向上させる優れた手法です。シームレスな作業フローとリアルタイムな修正・フィードバックが、効果的で一貫性のあるデザイン実装を可能にします。