この記事を読んでほしい方
- Web制作業務で、どの業務に興味があるかを知りたい方
- デザインとコーディングの違いを知りたい方
以前、この記事に「制作の流れ」を書きました。
この「制作の流れ」に、デザイン、コーディングという作業がありますが、
「デザインとコーディングって一緒じゃないの？」という疑問をたまに耳にします。
答えとしては、違った作業です。
作業する上で使うツールも違いますし、何をやるか？も違います。
どういう部分が違うのか、なぜ作業が別れているのか、記事を書いていこうと思います。
今、就職・転職でWeb制作をやってみたい方は、
自分の向き不向きややってみたいことを探す上での参考になると思いますので、ぜひ読んでいただきたいです！
デザインは「見た目を1から作っていく作業」
デザインの概要
そのまんまですみません。デザインは見た目を作っていく作業です。
作業内容を具体的にすると
- 写真や画像の加工、バナー作成
- 一サイトの全体の見た目を作成
他にもあるんですが、主に上記の作業を行うことが多いかと思います。
使うツールはAdobeのツールが多いかなと。代表的なものだと
- XD
- Photoshop
- Illustrator
こんな感じです。（他にもツールはありますが。）
具体的には
（写真の加工だったり、フォントの調整だったり）それぞれのツールで向き不向きがあって、
それぞれ目的にあったツールを使っていくイメージですね。
複数のツールを使って作業して、一つのサイトデザインを作り上げることもあります。
ちなみに、加工前の写真や画像のことを「素材」と言ったりします。
この「素材」は、Webサイトの発注があったお客さんから頂くこともあれば、
Webサイト上からダウンロードすることもあります。（pixtaやAdobe Stockなど）
ディレクターが素材を手配して、デザイナーが素材を加工していく流れが多いかなと。
そして、加工した画像やディレクターが手配したテキスト情報をもとに、
一サイト全体の見た目を整えていきます。
フォントの大きさや見た目で差をつけたり、サイトに色味をつけたりします。
また、「ボタンにカーソルを置いたときの動き」とかもデザインとして落とし込むこともします。
コーディングは「Webサイトとして反映させていく作業」
コーディングの概要
デザインをもとに、Webサイトとして作りあげるのが、コーディングの作業になります。
作業内容を具体的にすると
- デザインをコードに置き換えて、制作
- サーバーにアップロードして、サイトとして反映
- 機能の実装
主に上記の作業を行うことが多いかと思います。
使うツールは色々ありますが、主に
- コードエディタ
- FTPツール
- コードの管理ツール
こんな感じです。
具体的には
コードエディタでHTMLやCSSを書いていきます。
デザイン要素以外のところで言えば、SEOを意識したHTMLの組み方があったりしますね。
また、「今後の修正にそなえたCSS」を組むことも大事です。
HTMLやCSSを使ったコーディングだと、デザインツールを扱うように、直感的に組むことが難しかったりします。
例えば、パーツの位置を入れ替えたい場合、
デザインツールだとパーツをそのまま動かすことで見た目の変更が容易だったりしますが、
コーディング上で入れ替えると、レイアウトの崩れだったりがでたりします。
また、Javascriptを用いてサイトに動きをつける際は、
動きをつけることができるようにHTMLやCSSを組む必要があります。
（ちなみに、レイアウト崩れをなるべく防いだり、動きをつけやすくするためにコーディング設計があります。）
そういった部分に対して、なるべく工数がかからないように、効率的にコードを組むことがコーダー・フロントエンドの役割の一つです。
あとはサーバーにアップロードして、全体的な崩れがないか、
ブラウザごとで見た目の違いがないかを確認して修正します。
また、チームでコーディング作業を行うときには、コードの管理ツールであるgitなどを用いて作業します。
gitとは、ざっくりいいますと、それぞれが書いたコードをまとめて最新版に保つためのツール、といったイメージです。
同じHTMLファイルを複数人で書いたときに、最新版に保つ、といった感じですね。
なぜ作業が分かれているのか
作業が分かれている理由
デザインとコーディング、それぞれの作業内容に違いについてまとめました。
それでは、なぜ作業が分かれているのか。
色々な見解があると思いますし、正直、必要な画像だけ揃えて、デザインを作成せずにコーディングすることも可能といえば可能です。
僕なりに、デザインとコーディングが分かれている理由を説明すると
- デザイン段階で共通パーツを作りつつ、サイト全体のデザインを固めておけばコーディングは効率的になる。
- コーディングはサイトに反映させるために作業として必須。
- デザインとコーディングでは、考え方が違うので、結果的に分けた方が作業しやすい。
このあたりになってくるかなと思います。
もう少し深堀りすると…
デザイン・コーディングの両方をやってみたことがありますが、
デザインはサイト全体のバランスが重要な要素の一つかと思います。
一つパーツが変わるだけで、全体の雰囲気に影響したりします。
そういったことがなるべく発生しないようにサイト全体の雰囲気を固めておけば、コーディング段階でわざわざ組み直す必要がなくなってきます。
場合によっては、一つのパーツに変更が入るとともに、他の要素を調整しないといけなくなってきます。
また、デザイン段階でサイト内の共通パーツをつくっておくことで、コードを効率的に組むことができます。
具体的にはCSSを組み直す必要がなくなったり、HTMLの流用がしやすくなったり。
コーディングは、デザインに対してどう組んでいくのが効率的なのか、
どういった設計を用いるべきなのかを考える必要があります。
また、今後修正や更新が入るとき、なるべく手間を取らないようにするにはどうすればよいのか、
コードの管理はどうするのか、などが重点的な要素になってくるかなと。
そんなところです。それでは！
