【HTML/CSS/Photoshopより大事】独学でWebデザインを学ぶなら知っておきたい必要スキル
最近つくづく思うのが、WEBデザインの勉強って、回り道ばっかで泥沼だなあ、てことです。
HTML/CSSを学ぶ、PhotoshopやIllustratorの使い方を学ぶ、ということは必要なことではあるけれど、時間とお金をかけた割にWEB制作ができるようにならない、のです。
思い当たる原因を考えると、『WEBデザイナー』という単語ででこの業界の職業をひとくくりで表してしまうことにあるのだと思います。
本記事ではそんなWEBデザイナーに必要なスキルとはどのようなものか？そして、どうすれば回り道をせずに進むことができるのか？を書いてみたいと思います。
私のWEBデザイナーとしての活動
私のWEBデザイン歴は4年弱です。きっかけは30年続けた本業とは別のことを始めようとの思いたったとき、82歳でアプリhinadanを制作された若宮正子さんのことが話題になったことでした。じゃあ自分も何かアプリでも作ろうか、と思い立ったのです。
それからゲームが簡単にできると評判のUnityを書籍でかじり、プログラミングの勉強の必要性を感じてPHPを使ったWEBアプリケーションの制作を学び、さらにその過程でHTMLおよびCSSの必要性を感じ、やがてワードプレスにたどり着いたころには当初目論見のアプリ制作ではなくWEBデザインにはまっていました。
このブログでワードプレスを中心とした記事を書きながら、初心者の方に向けて使い方のレクチャーもする、という形でWEBデザインの世界に携わってきたものの、制作者としてはたいした実績があるわけではありません。
でも頼まれてワードプレスサイトを立ち上げたり、CSS、JavascriptやPHPでカスタマイズをする、といった制作ヘルプは何度もしてきました。そして最近はクリエイターが集まるコミュニティに属して、サイト制作やLP作成などのプロジェクトに参加しています。
そのコミュニティではWEBデザインチームと映像制作チームといった大きく２チームのクリエイターで構成されているものの垣根はあまり感じられず、それぞれ興味のある案件やプロジェクトに自由参加しています。スキルも駆け出し～プロで15年以上すでに活動中の方までさまざまです。
私もWEB制作だけでなく広告運用プロジェクトや、ある会社の新規売上アップのプロモーションをお手伝いするプロジェクト活動をしています。
WEBデザイナーに必要なスキルとは
そこで感じるのが、HTML/CSSやアドビ系ソフトの使い方といったスクールや書籍・動画等で習得できるスキルと実際の案件に必要なスキルのギャップ、です。
それはWEBサイトを作成プロセスに沿って必要なスキルを挙げてみればわかります。
A：顧客のニーズをくみ取り言語化するコミュニケーション能力
（営業力・交渉力・プレゼンテーション能力・ヒアリング＆インタビュースキル・コピー作成能力を駆使して顧客ニーズを言語化する。また具体的方式や環境の選定（例えばワードプレスを使うかどうかやサーバーやドメインの設定等）も行う）
B：言語化したことをワイヤーフレームに落とし込む設計・企画力
（サイトの目的達成のための機能や構成パーツ選定し、広告やSEO・SNSなどの外部連携も考えながら効果的なページ構成を具体化する。コピーやカスタマージャーニーを考慮しながらワイヤーフレーム化する。）
C：ワイヤーフレームを具体的デザインに落とし込むデザインスキル
（効果的な見せ方を具体化する。コピーやワイヤーフレームの意図をくみ取り、現在のデザイントレンドも考慮しながら適切なレイアウト配置・配色・フォントの選定とデザインを行う）
D：デザインをWEBページ化するコーディング能力
（デザインを具体的にWEBページ上に落とし込む。SEOやユーザービリティを考慮して、デザイン画像をそのまま貼り付ける、という行為はできる限り排除し、HTML・CSS・Jacvascriptによる表示を心がける）
E：出来上がったWEBサイトを運用して顧客ニーズとのギャップを埋めるPDCAスキル
（アナリティクスやGTM等のツールによる広告運用、SNS運用、SEOからの流入の計測、サーチコンソール等のツールを使ってSEO流入の最大化、ヒートマップを使ったページの要改善点の抽出と改善を繰り返し、WEBサイトの当初の目標を達成する）
HTML/CSSは上記のD：、アドビ系ソフトの使い方はC：の一部にあたります。
案件の大小にかかわらず、WEBサイトを受注して顧客へ納入したり、納入したWEBサイトの運用を任されたりするのがWEBデザイナーの仕事と定義するならば、上のA：～ E：はすべて必要なスキルといえるでしょう。WEBサイトを制作・運用するには総合力が必要なのです。
そんなの無理！と思いますか？私は正直言って無理ですね。多くの駆け出しのWEBデザイナーもそうだと思います。例えばこんな風に。
- デザインはできるけどコピーは書けない。コーディングは少しは・・・でもJSやPHPは無理かな。
- コーディングはできるけどデザインは苦手。なんならコピーも自信がない。（←私です）
- HTML・CSSとPhotoshopは使えるけど、そこから先に進めない
- ユーザーのヒアリングなんて、どうしたらいいかわからない
- 広告運用？SNSから集客？それともやっぱSEOかなあ・・・？
だから最初からフリーランスのWEBデザイナーなんざを目指すのではなく、会社組織に所属して仕事をするのが効率がよいし自然なのだと思います。なんせWEB制作は総合力なのだから。
でももしフリーランスで仕事をするならば、案件を丸ごと受注することを目指すのでなく、どこかの会社の下請けとしてデザインだけとかコーディングだけをする、といった働き方が現実的だし安定しますね。ただし、低価格にたたかれやすい、納期を自分で交渉・設定できない、というデメリットがあります。
そうでなければクリエイター仲間を作って、お互い得意なスキルを活用しあうのがよいでしょう。こっちの方が元請け・下請け、という関係じゃないので理想的かな。
まずは得意分野を作ろう
フリーランスのWEBデザイナーで生きていく場合は、どこかの下請けをするか仲間をつくって仕事をシェアするか、が妥当ですが、いずれにせよ自分の得意分野を作る必要があります。
制作スキルを磨く
制作スキル（C：デザイン、D：コーディング の部分）で勝負するならば、
『私はデザインが得意です』よりは
『食べ物をおいしく表現するデザインが得意』
『車やバイクをかっこよく見せるデザインが得意』
というように、あるジャンルに特化して強みをアピールできるようにしたいですね。
コーディングならば『HTML・CSSができます』じゃなくて、
『これくらいのLPならばデザインカンプから１日でコーディングできますよ』
『ブートストラップを使った爆速コーディングが得意です』
『ワードプレスのテーマ〇〇を使って、こんなサイトなら３日でできます』
と具体的なスキルレベルをアピールできないとダメですね。
こうした目標を設定するために、まず自分が何が得意なのか？あるいは何ならば継続して努力できるのか（好きかどうか）？を早期に見極めましょう。
私ならば
『ワードプレスでテーマLuxeritaやSWELL・ArkheそしてLightningを使ってこんな感じのサイトを作成できます。独自アニメーションの追加も提案したりご希望に沿って実装します。ブロックエディターもあなたの使い方に合わせてスタイルやパターンを追加しますよ。』
といったところかな（もう少し短くしないと聞いてもらえないか・・・）。
ディレクションや運用スキルを磨く
制作スキルではなく、最初からディレクション能力（A：コミュニケーション、B：企画）やE：運用 に特化する、という方法もありますが、これは独学は難しく、制作会社やクリエイターのコミュニティで実案件を経験しながら磨いていく必要がありそうですね。
それに、全く制作スキル（デザインやコーディング）を知らない人がディレクションや運用で成功する例は、非常にマレなのではないでしょうか。
だからまずは制作スキルを磨きましょう、ということになります。
まず何から始めたらいいか？と迷ったらワードプレス
このセクションでは、もし私がゼロからWEBデザインを学ぶとしたらどういった手順で進めるか、を紹介します。
磨く制作スキルを選択するにしても、これからWEBデザインを始めるので何が得意かわからない、という人はワードプレスから始めてみることをおすすめします。そしてできればブログサイトを自分で運用してみるとよいでしょう。簡易的ではありますが、先のA: ～ E:のプロセスをほとんど全て体験できるからです。
サーバーレンタルやドメイン取得・ワードプレスサイトの立ち上げ（環境設定）、サイト内ページの企画・構成（ワイヤーフレーム）、記事の投稿（ニーズの言語化）、ASPやGoogleアドセンスの登録・Googleアナリティクスやサーチコンソールを使った集客状況のモニタリング（運用）・・・とかなり多くのことを学ぶことができるでしょう。
D：コーディングやC：デザインは最初はテンプレ頼み（ワードプレスのテーマに依存）でもよいと思います。
こうしたワードプレスの基本的なことを学ぶならば拙著ではありますがこちらを読んで実践頂ければと思います。無料サーバーを使ってブログサイトをワードプレスで立ち上げ、最後にはSEOの基本知識やCSSを使った簡単なカスタマイズ事例も紹介しています。
そして慣れてきたら、ワードプレスのテーマを自分でカスタマイズするためにコーディング方法や画像の制作などのデザインスキルを学び実践するとよいでしょう。
デザインスキルの学び方については後述するデザインセンスを磨いておこうで具体的に紹介しますが、先にコーディングについて私のおすすめの学習方法を紹介します。
コーディングスキルの学び方
ワードプレスのテーマをカスタマイズするには、まずはHTML・CSSの知識が必要です。カスタマイズする内容が複雑になればJavaScriptやPHPの知識も必要となります。
HTMLやCSSについてはプロゲートの無料コースの範囲を一通りやってみて、HTML/CSSがどういうものかを概ね理解できれば、あとは実践あるのみです。わからないことはググりながら、自分のワードプレスサイトをカスタマイズしてみましょう。例えばテーマカスタマイザーでは指定できない箇所の色やフォントを変更する、といった簡単なところから始めてみるのがよいでしょう。先ほど紹介した私の書籍でも少しばかり解説しています。
JavaScriptを使って動きをつけるなど、ワンランク上のコーディングを学びたければ、UdemyのCodemafiaさんの講座『ガチで学びたい人のWEB開発実践入門（フロントエンド編）』がおすすめです。本来JavaScript自体は学べば範囲が広くて泥沼にはまりますが、この講座ではWEB制作に最低限必要なJavaScriptを厳選レクチャーした後、実際に制作に入るので本当に実践的です。ほかにもSASSを使ったCSSコーディングや３Dに関するCSSなども学ぶことができます。
ワードプレスのテーマ制作まで知りたい、ということでしたら、たにぐちまことさんの『ちゃんと学ぶ、WordPress開発講座』一択ですね。ワードプレス5.9以降に導入されたブロックテーマ（フルサイト編集）ではなく、それ以前のクラシックテーマの作成になりますが、現段階ではむしろこの方が実践的です。
ワードプレスのテーマ制作する方法を学ぶことは、ワードプレス自体のしくみを理解することなので、PHPを使ったカスタマイズができるようになる、という点で大変有意義です。なので一度はやってみることをおすすめしますが、ある程度しくみが理解できれば深追いする必要はありません。なぜなら実際にテーマを制作する、という機会は仕事においてはほとんどないからです。
あとワードプレスのカスタマイズや運用を仕事にするならば、他に不足している知識が若干あるので（ユーザーの使い勝手を向上するプラグインとかカスタムフィールドの利用したサイトづくりとか、マルチサイトの運営とか）、それを補う意味で次の書籍はおすすめです。私も実際に仕事でワードプレスサイトの作成依頼を受けるようになってから購入し、今でも何かと重宝しています。
最近はWEB制作の手法も変わりつつある
こうして自分の強みを作りながらも気にしておくべきことがあります。それはノンコード化とデザインツールの進化による最近のWEB制作の変化です。
すでに始まっているノンコード化
ノンコード化とはHTMLやCSSを使わなくともWEBページを表示できるようになるもので、ワードプレスを例にあげるならば、ブロックエディターの進化とフルサイト編集の導入です。
HTML・CSSを知らなくても段組みレイアウトやスライダー、アコーディオンなど様々なレイアウトが簡単に実現できるようになったり、PHPを知らなくても記事一覧やグローバルメニューを作成・編集できるようになりました。
先にあげたWEB制作プロセスをもう一度あげると
A：コミュニケーション（顧客のニーズをくみ取り言語化）
B：企画（言語化したことをワイヤーフレームに落とし込む）
C：デザイン（ワイヤーフレームを具体的にデザインに落とし込む）
D：コーディング（デザインをwebページ化する）
E：運用（ツールを使ってPDCAスキルを回し、サイト改善）
ですが、ノンコードデザイン化が進むことで
A：コミュニケーション（顧客のニーズをくみ取り言語化）
B：企画（言語化したことをワイヤーフレームに落とし込む）
C＆D：デザイン（ワイヤーフレームを具体的にWEBページ化する）
E：運用（ツールを使ってPDCAスキルを回し、サイト改善）
と変化してきています。
具体的にいえば、Photoshop等で作成したデザインカンプをコーディングによってWEBページに反映させる、という従来のプロセスでなく、先にデザインに適したワードプレスのテーマを選定してさっとWEBページを仮完成させ、必要に応じて編集する、という手法です。
これにより飛躍的にWEB制作プロセスが簡略化され、コスト的にも時間的にもメリットが出てきます。
ヘッダーや1stビューなどこだわりデザインの部分はカスタムHTMLを使ってコーディングする、という作業も一部残りますが、それも今後のブロックの進化によって減っていくでしょう。
さらにデザインとコーディングの自動化は進む
しかしまだまだ変化は止まりません。AI化の波がどっと押し寄せてきているからです。
代表例としてはStable Diffusion、MidjourneyといったAIとデザインツールの融合でしょう。呪文を唱えればデザインを出力してくれるわけで、自動化とそのスピードには目を見張るばかりです。写真が初めて発明されたときの衝撃以上ではないでしょうか。
そして従来のデザイン制作ソフトであるphotoshopやFigmaといったサービスとStable Diddusionを融合したプラグインも提案され始めました。
これにより、画像やイラストの制作・編集作業が飛躍的に変化するのは間違いありません。
コーディングにおいてもAIによる自動化が進み始めています。例えば日本語をHTML・CSSに変換してくれるAI Programmerです。いちいち日本語を入力するくらいなら自分でコーディングした方がまだまだ速い段階ではありますが、これがさらに進化して、デザインカンプを自動的にコーディングしてくれるようになれば、もはやコーダーとしての仕事はなくなってしまうでしょうね。
デザインセンスを磨いておこう
このようにD：コーディングとC：デザインツールを使うスキルによる仕事は、減っていくものと考えますが、一方で必ず残る部分は
『WEBサイトの目的を達成するためのデザインを企画・設計する』能力です。一般にデザインセンスと呼ばれています。
でもデザインセンスには自信がない・・・と感じておられるならば、１つおすすめの講座があります。私も受講したことのある、完全フリーデザイナーという講座です。
完全フリーデザイナーではAI云々という話以前に、自分が加工・制作した画像やバナーがどうもしっくりこない理由や、どう克服すればイケるデザインができるようになるのか？デザインスキルの正体を明かしながら教えてくれます。デザインセンスの正体とその磨き方のルールなど基本的なことは動画で学習しながら、主催者田中さん自身によるライブ添削の受講など様々なサポート特典があるのが魅力です。もちろんPhotoshopなどのツールの使い方も含まれています。
ちなみに田中さんは現役バリバリのグラフィックデザイナー兼WEBデザイナーです。この田中さんの紹介によって私は、本記事前半で書いたクリエイターの集うコミュニティに参加できた次第ですので、あなたも興味があればクリエイター仲間ができるかもしれません。
デザインセンスが必要スキルとして残る理由
なぜデザインセンスは必要スキルとして残るのか？それは、仕事として使えるものに仕上げるにはデザインセンスが欠かせないからです。
AIは確かに便利です。人ならばしないような別分野の組み合わせにより新しいデザインを出力する、という点で大いに期待できます。しかしAIが出したデザインに感じる『微妙』『なんか変』のままでは仕事に使えません。デザインセンスを身に付けた人ならばAIの出した新しさを損なうことなくうまく修正して仕上げることができるでしょう。
だから私は、
『デザインセンス
＝デザインの常識（ルール・パターン・型）を知り、あえて崩して新しいものを創造するスキル』
だと思っています。デザインの常識なんざ知らない方が新しいことを創造できるのでは？という考え方もあるでしょうが、アートでなく仕事としてのデザインの場合はそうではありません。
例えば、従来から存在するWEBサイトのレイアウトを全く無視したサイトを想像してみてください。
WEBサイトのヘッダー内やハンバーガーボタンにはナビゲーションメニューがある、といった暗黙のルールに慣れたユーザーが、それらが全くないWEBサイトを見たとき、どうやってサイト内を閲覧したらよいのか迷ってしまいますよね。
こういったユーザーの使い勝手を阻害する、ユーザービリティを無視したサイトを制作しても仕事として認められないわけです。
そうではなく、従来の型を使ってユーザービリティを守りながら型の一部を崩す、といった新しさに意味があり、それが次のデファクトスタンダードになっていく・・・これの繰り返しでデザインのトレンドが生まれていきます。WEB制作だけでなく服飾、絵画、車やスマートフォンといった工業デザイン全般に言えるでしょう。
ぜひWEBの制作スキルを学習する一方でデザインスキルも磨いておくことをおすすめします。この記事を書きながら私自身もう一度デザインスキルを学び直そうか、と強く思いました。
まとめ
- WEBデザインに必要なスキルはA：コミュニケーション、B：企画、C：デザイン、D：コーディング、E：運用 がある。
- A：コミュニケーション（およびB：企画）、E：運用は実案件を経験してみないと学べない。だからまずはC：デザイン、D：コーディング から自分の得意な制作スキルをつくることを目指す。
- 一方でデザインセンスも磨いておく。デザインの常識・型を守ることでユーザービリティを高め、あえて崩すことで斬新さを出す
- 制作スキル習得で何から学べばよいのかわからなければワードプレスでブログを運用してみる。簡易的だがA～Eまで一度は経験できる。
- 自分のワードプレスサイトをカスタマイズするために制作スキルを学んで実践してみると効率的
