デザインとコーディングどちらを先に勉強するか

2022/10/10スキル習得のための勉強法

• • Webデザイナーの勉強は、デザインとコーディングどっちが先？
  • 効率的に勉強する順番はあるの？

結論としては、デザインとコーディングはどちらから勉強を始めても大丈夫です！

ただし、Webサイトを作る順番やそれぞれの特徴は知っておいた方が効率的に取り組めます。

Webサイトを作る工程を知る

Webデザイナーになるためにデザインやコーディングの勉強を始める上で、まずはWebサイトを作る順番を簡単に把握しておきましょう。

基本的な流れとしては、デザインしたWebサイトの絵をもとにして、HTMLやCSSを使ってコーディングしていくという順番になります。

その順番通りに勉強をする必要はありませんが、最低限この順番だけは理解した上で勉強を進めていきましょう。

Webサイトの詳しい制作工程については、また別の記事でご紹介します。

デザインは紙とペンがあれば始められる

デザインは紙とペンさえあればすぐにでも始められます。

まずは頭の中にあるイメージを、ワイヤーフレームと呼ばれるWebサイトの骨組みとして紙に手書きで書きます。

ワイヤーフレームが完成したら、次はそこにロゴや写真のような画像を配置し、文章を表示させるエリアと組み合わせた上で、全体的な配色をしていきます。

このあたりの作業からはパソコンのソフトを使ってデザインする方が現実的です。

今ではCanvaのような無料アプリでも簡単にデザインができるような時代になりました。

ただし、プロのWebデザイナーとして働くことを考えるのであれば、他の人とのデータ共有や引き継ぎなどもあるので、まだまだAdobeのPhotoshopやIllustratorといった有料ソフトは外せないでしょう。

【関連記事】

パソコンで取り組みやすいのはコーディング

次はデザインした絵をパソコンやスマホから閲覧できるWebサイトとして組み立てていきます。

デザインした絵から、必要なパーツを画像として切り出し、見出しや本文等のテキストと組み合わせて、HTMLという言語でコードを書いていきます。

コーディング自体は、パソコンに始めから入っているテキストエディター（メモ帳アプリ）があれば、とにかく簡単に始めることができます。

最初のうちはテキストエディターだけで十分ですし、現場でもテキストエディターだけでコーディングをしている人も多くいます。

コーディングに使用するソフトは、Windows向けのソフトやMac向けのソフト、そしてどちらでも使えるソフトがいくつかあります。

どのソフトを使っても、作られたデータ（HTMLファイル）は基本的に同じものになりますので、自分に合うソフトを見つけていけば良いと思います。

私の場合は、より効率的にコーディングをするため、AdobeのDreamweaverというソフトを使っています。

AdobeのCreative Cloudというパッケージなら、デザインで使用するPhotoshopやIllustrator、動画編集で使用するPremiumも全て含まれています。

多くのデザイン会社や企業ではこちらを導入しているケースが多いので、その場合はそのままどのソフトも使えるはずです。

最初は少しでも興味を持った方からでOK

デザインもコーディングも、始めようと思えば結構簡単に始められます。

最初は自分が少しでも興味を持った方から始めるのが良いでしょう。

それぞれ最低限勉強しておくべき内容についても、また別の記事でご紹介したいと思います。

Webデザイナーと言っても、コーディングが得意な人（コーダー）もいれば、デザインが得意な人（デザイナー）もいます。

私はこれまで、コーディングの方が得意だなと思ってコードばかり書いていた時期や、デザインこそWebデザイナーの仕事だと思ってとにかくデザインばかり作っていた時期がありました。

結局今ではコーディングもデザインもバランス良くやるタイプに落ち着きました。

コーディングもデザインも両方できるということは、一人で制作できる範囲が広くなるため、どちらか一つしかできない人と比べた場合の強みになります。

その一方で、とてつもなくコードを書くのが早いコーダーと呼ばれる人や、ペンタブレット等を駆使してイラストやオリジナルキャラクターを作れてしまうようなデザイナーのように、どちらかに特化して突き詰めていった人にはとても敵わないとも感じています。

人にはそれぞれ得意不得意があります。

あなたもこれからWebデザイナーの勉強をしていく中で、あるいはWebデザイナーとして実務経験を積んでいく中で、自分に合ったやり方やスタンスを見つけていってください。