Webデザインの勉強はデザインとコーディングどっちが先？
Webデザイナーの勉強は、デザインとコーディングどっちが先？
効率的に勉強する順番はあるの？
デザインとコーディングは興味がある方からでOK！
Webデザイナーを目指すあなた、デザインとコーディング、どちらから勉強すればいいか迷っていませんか？
実は、デザインとコーディングはどちらから始めても大丈夫！
この記事では、Webサイト制作の流れとそれぞれの勉強方法をわかりやすく解説します。
さらに、10年以上のWebデザイナー歴を持つ私が、効率的にスキルアップするためのヒントもご紹介します。
まずは、Webサイト制作の流れを簡単に把握しましょう。
デザインとコーディング、どちらに興味がありますか？
デザインが好きなら、まずは紙とペンでワイヤーフレームを描いてみましょう。
コーディングに興味があるなら、HTML/CSSの基礎から学んで、簡単なサイトを作ってみるのもおすすめです。
どちらを選ぶにしても、最初は少しでも興味を持った方から始めるのが継続のコツです。
もちろん、両方同時に勉強することも可能です。
デザインとコーディング、両方のスキルを身につけることで、一人で制作できる範囲が広がり、Webデザイナーとしての可能性が広がります。
この記事では、効率的な勉強方法や役立つツールなども紹介していきます。
一緒に、Webデザイナーを目指しましょう！
全くの未経験から独学とスクールを経て一年後にWebデザイナーへ転職。現在はWebデザイナー・Webディレクターを兼務。IT業界歴10年以上。
Webサイトを作る工程を知る
まずはWebサイトを作る工程を簡単に把握しておきましょう。
- 企画と設計
- サイトの目的やターゲット層を明確にする
- サイトの構成やコンテンツを決める
- サイトのデザインの方向性を決める
- ワイヤーフレームの作成
- ページのレイアウトやコンテンツの配置を決める
- サイトの操作性や導線を検討する
- デザイン案の作成
- 色やフォント、画像などを使って、サイトのデザインを決める
- デザインの統一感を意識する
- コーディング
- デザイン案をHTMLやCSSなどのコードで表現する
- サイトの動作を確認する
- 公開と運用
- サイトをインターネット上に公開する
- サイトの更新やメンテナンスをする
勉強をする順番は、実際にWebサイトを作る工程通りである必要はありません。
ただし、大まかな流れだけでも理解した上で勉強を進めていく方がスムーズです。
デザインは紙とペンがあれば始められる
デザインは紙とペンさえあればすぐにでも始められます。
まずは頭の中にあるイメージを、ワイヤーフレームと呼ばれるWebサイトの骨組みとして紙に手書きで書いていきます。
そもそもイメージできるサイトが無いという場合、慣れるまではあなたが好きで普段よく見るサイトを真似して、少しだけアレンジするレベルとかでも大丈夫です。
ワイヤーフレームが完成したら、次はそこにロゴや写真のような画像を配置し、文章を表示させるエリアと組み合わせた上で、全体的な配色も決めていきます。
デザインはPhotoshopのスキルを身につけましょう
次は、パソコンのソフトを使って実際にデザインを作成します。
デザインは主にAdobeのPhotoshopで作成できるようになりましょう。
今ではCanvaのような無料アプリでも簡単にデザインができるような時代になりました。
ただし、プロのWebデザイナーとして働くことを考えるのであれば、現場で最も使われているソフトが使えるように勉強する必要があります。
他の人とのデータ共有や引き継ぎなどもあるので、まだまだAdobeのPhotoshopやIllustratorといった有料ソフトは外せないでしょう。
デザインはPhotoshopのスキルを磨きましょう！
【関連記事】
https://webdd.minibird.jp/sense/パソコンで取り組みやすいのはコーディング
次は、デザインしたビジュアルをパソコンやスマホから閲覧できるWebサイトとして組み立てていきます。
デザインしたビジュアルから、必要なパーツを画像として切り出し、見出しや本文等のテキストと組み合わせて、HTMLという言語でコードを書いていきます。
【関連記事】
コーディング自体は、パソコンに始めから入っているテキストエディター（メモ帳アプリ）があれば、とにかく簡単に始めることができます。
最初のうちはテキストエディターだけで十分ですし、現場でもテキストエディターだけでコーディングをしている人も多くいます。
コーディングに使用するソフトは、Windows向けのソフトやMac向けのソフト、そしてどちらでも使えるソフトがいくつかあります。
どのソフトを使っても、作られたデータ（HTMLファイル）は基本的に同じものになりますので、自分に合うソフトを見つけていけば大丈夫です。
コーディングはDreamweaverを使うと効率的です
コーディングはDreamweaverで効率的に！
私の場合は、より効率的にコーディングをするため、AdobeのDreamweaverというソフトを使っています。
Dreamweaverを使うメリットは、大きく分けて以下の3つです。
- デザインを見ながら編集できる
- コードを簡単に入力できる
- さまざまなデバイスに対応できる
デザインを見ながら編集できる
Dreamweaverを使えば、Webサイトのデザインをリアルタイムでプレビューできます。
コードを入力しながら、デザインがどのように変化するのかを確認しながら作業を進めることができます。
コードを簡単に入力できる
Dreamweaverには、HTMLやCSS、JavaScriptなどのコード入力を支援するさまざまな機能が用意されています。
コード入力の支援でプログラミングの知識がなくても、Webサイトを効率的に作成しながら言語を習得することができます。
さまざまなデバイスに対応できる
Dreamweaverを使えば、Webサイトをパソコン、スマートフォン、タブレットなど、さまざまなデバイスに対応させることができます。
さまざまなデバイスに対応することで、より多くのユーザーにWebサイトを閲覧してもらいやすくなります。
AdobeのCreative Cloudというパッケージなら、デザインで使用するPhotoshopやIllustrator、動画編集で使用するPremiumも全て含まれています。
多くの制作会社や事業会社でも、Adobe Creative Cloudを導入しているケースがほとんどです。
「Adobe Creative Cloud」には、Webサイトのデザイン・コーディングに必要なツールが揃っています。※通常価格 72,336 円/年 （税込）
例えば、デザインツールの「Photoshop」や「Illustrator」、コーディングツールの「Dreamweaver」などです。
これらのツールを組み合わせることで、Webサイトのデザインからコーディングまで、一貫したワークフローで作業することができます。
【アドバンスクールオンライン】
なら、Adobe Creative Cloudを39,980円/年（税込）の学割価格で購入できる上に、Adobeアプリに関連した11講座を1年間の質問サポート付きでお得に学べます。
最初は少しでも興味を持った方からでOK
デザインもコーディングも、始めようと思えば結構簡単に始められます。
最初は自分が少しでも興味を持った方から始めるのが良いでしょう。
Webデザイナーと言っても、コーディングが得意な人（コーダー）もいれば、デザインが得意な人（デザイナー）もいます。
私はこれまで、コーディングの方が得意だなと思ってコードばかり書いていた時期や、デザインこそWebデザイナーの仕事だと思ってとにかくデザインばかり作っていた時期がありました。
結局今ではコーディングもデザインもバランス良くやるタイプに落ち着きました。
コーディングもデザインも両方できるということは、一人で制作できる範囲が広くなるため、どちらか一つしかできない人と比べた場合の強みになります。
その一方で、とてつもなくコードを書くのが早いコーダーや、ペンタブレット等を駆使してイラストやオリジナルキャラクターを作れてしまうようなデザイナーのように、どちらかに特化して突き詰めていった人にはとても敵わないとも感じています。
人にはそれぞれ得意不得意があります。
あなたもこれからWebデザイナーの勉強をしていく中で、自分に合ったやり方やスタンスを見つけていってください。