こんにちは。クオンカレッジ運営チームのたきです。

これからWEBクリエイターになりたい方や、学んでいるけど、これからどう進めば良いか迷われている方が、たくさんいらっしゃると、お伺いしました。そこで、これまでの経験と今の時代背景をすべて考えた上で、最高のロードマップを1つ、作ることにしました。

今回、僕たちが作ったロードマップ通りに学ぶことで、最短距離で目標を実現できるだけでなく、これから来る新時代でも10年以上、安心して生き延びられるクリエイターになれるはずです。

それは、一部のスクールにしかできない人材育成であり、10年研究を重ねてきた私たちだから、語れることでもありますぜひ最後まで、読み進めてみてください。

STEP0. 大前提として

これからWEBクリエイターを目指すのであれば「1つの専門」と「広い知識・知見」が必要になります。かつてのクリエイターは1つの専門に特化していれば良いという考え方がありましたが、今は少し状況が異なってきました。

近年、STEAM教育という教育手法が有名になりました。STEAM教育とは、下記5つの分野を学び、それらを組み合わせて問題を解決する能力を養うことです。

• S: 科学（Science）
• T: 技術（Technology）
• E: エンジニアリング（Engineering）
• A: 芸術（Arts）
• M: 数学（Mathematics）

例えば、新しい橋を設計する場合、エンジニアリングの知識だけでなく、科学や数学の知識も必要です。また、その橋が美しく見えるようにするためには芸術の知識も必要です。技術を使って橋の設計をコンピュータで描くこともあります。STEAM教育は、科学や技術、エンジニアリング、芸術、数学の各分野を組み合わせて、創造的で問題解決のスキルを身につけることを目指しています。

なぜこのような教育手法が有名になったかというと「新しい価値を生み出すため」です。例えばマーケターがプログラミングの手法を知っていれば、プログラミングでデータを集計して戦略を立てたり、マーケティング自体を自動化できるかもしれません。

デザイナーが営業について知っていれば、営業が顧客と対話する時のストーリーをそのまま、WEBデザインに落とし込んで、成果の出るWEBサイトが生み出せるかもしれません。

このように、他分野の知識や知見を取り入れることで、その分野になかった発想を生み出せますよね。

1人で完結せず、専門家同士で話あうこともできますが、これもまた、互いの業界についての知識を知っていなければ、そもそも相手の考えていることが本質的に理解できません。

例えばマーケターが「今は事業のテスト段階だから、あまり工数と予算をかけず、ささっとサイトを作って、試しながらクオリティを上げたい」という要望を出したとります。しかしクリエイターは「そんな雑な仕事はしたくない」と反論するわけです。逆にマーケターはクリエイターの職人気質を知らないので「ささっと」なんて言葉を使ってしまうわけです。

互いの文化や仕事を両方とも知っていれば、もっとコミュニケーションがうまくいきますよね。結局、みんなが幅広く学んでいた方が仕事がうまくいくのです。

このようにコミュニケーションの面でも発想の面でも、個々が広く学んでいる方が円滑に、かつ大胆にプロジェクトを遂行できます。もっと詳しく前提条件を知りたい方は「今後のWEBクリエイターに必須の視点。STEAM教育とは何か。」の記事を読んでみてください。

STEP1. WEBディレクションを学ぶ

では、いよいよ前提条件を踏まえた上で、新時代でも10年以上生き残る、WEBクリエイターになるためのロードマップについてお話ししていきます。

みなさんは、小学生の時、学校の運動会や学芸会の準備に参加したことがありますか？ そこには、ポスターを作ったり、お芝居を練習したり、音楽を選んだりする人がいます。そして、その全てを管理する役割の人が、今回でいうディレクターです。

Webサイトを作るのもそれと似ています。デザインやコード、文章や画像など、いろんなものをまとめて、みんなが心地よく使えるサイトを作るのが「Webディレクター」です。運動会実行委員会の委員長みたいな人です。

Webディレクターは、クライアントや、その先にいるお客さん、みんながどんなサイトを使いやすく思うか、何が必要かを考えて、それを作る人たちと一緒に素敵なサイトを作り上げます。その仕事そのものをWEBディレクションと呼びます。

また、Webディレクターはクライアントの話をよく聞くことも大切です。どんなサイトを望んでいるかクライアントに聞いて、サイトに反映させるのです。学芸会を取り仕切るディレクターが、みんなの意見を聞くのと同じですね。

なぜ最初にWEBディレクションを学ぶかというと、WEBサイト制作の全体像を知るためです。細かい技術より先にまず、大枠の流れを知ってから技術を学べば、どういうタイミングで、なんの必要があってその技術が使われるのか、どんな役割が期待されるのか、理解しやすくなりますよね。だからこそ、まずWEBディレクションを学ぶのが良いのです。

STEP2. Figmaの使い方を学ぶ

Figmaはデザインツールです。WEB制作業界で最も有名な、絵を描くツールのようなものだと思ってください。でも、ただの絵を描くツールよりもっとすごいです。Figmaを使えば、ウェブサイトやアプリのデザインを作ったり、アイデアを具体化したりすることができます。

それだけではありません。Figmaの一番特別な点は、「共同作業」ができることです。つまり、あなたとあなたの仲間が同時に同じデザインに取り組むことができ、リアルタイムで一緒に作業できるのです。それはまるで、みんなで同じ巨大な紙に絵を描いているかのような感覚です。

また、Figmaはインターネット上で動作するので、特別なソフトをダウンロードする必要もなく、どのコンピューターからでもアクセスできます。これにより、学校でも家でも公共の場所でも、あなたのデザインを作ったり、友達と共有したりすることが可能です。

Figmaはデザインツールですが、ディレクターがWEBサイトの設計図を作ったり、できあがったデザインにコメントを入れたり、実際のWEBサイトのように動かしたりできます。なので、デザイナーだけが使うものではなく、チーム全員が使えることで、仕事が一気に効率化します。業種に関わらず、パワーポイントと同じくらいのツールとして、みんなが習得した方が良いでしょう。

STEP3. WEBデザインを学ぶ

ウェブデザインとは、ウェブサイトの見た目や使いやすさを考えることです。あなたがよく買う商品や企業、映画やドラマのウェブサイトを思い浮かべてみてください。それらのウェブサイトがどのようなデザインか、どこに何の情報があるか、どうやって情報を見つけるかなど、すべてがウェブデザインの一部です。

もう少し詳しく説明すると、ウェブデザインは大きく2つの部分に分けられます。

1つ目は「ビジュアルデザイン」です。これはウェブサイトがどのように見えるかについて考える部分です。色の選択、文字の大きさや種類、写真やイラストの配置などが含まれます。これにより、ウェブサイトが楽しく見えたり、情報が読みやすくなったりします。

2つ目は「ユーザーインターフェース（UI）デザイン」です。これはウェブサイトがどのように使われるかについて考える部分です。どこに何があるか、どのボタンを押せば何が起こるかなど、使いやすさを重視してデザインします。

ウェブデザインの目的は、ウェブサイトを見る人々が情報を簡単に見つけ、理解でき、また楽しんでサイトを利用できるようにすることです。

あなたが自分のウェブサイトを作るとしたら、どんな色を使いますか？どんな写真やイラストを使いますか？どこに何を置きますか？これら全てがウェブデザインの一部となります。

STEP4. HTML×CSSを学ぶ

HTMLは「HyperText Markup Language」の略で、ウェブページを作るための言語の一つです。HTMLは本や雑誌と同じく、文章の構成を決めます。タイトルがどこにあるか、段落はどう分けられているか、写真はどこにあるか、などをHTMLで指定します。

例えば、HTMLで作られたウェブページは、まるで家の骨組みのようなものです。ドアがどこにあるか、窓はどこにあるか、部屋はどう配置されているか、といったことを決めています。

CSSは「Cascading Style Sheets」の略で、これもウェブページを作るための言語の一つです。でもCSSの役割はHTMLとは違って、ウェブページの「見た目」を美しくするためのものです。

CSSを使うと、文字の色を変えたり、大きさを変えたり、背景に模様をつけたりできます。また、写真を丸くしたり、ボタンに影をつけたり、ボックスを角ばった形から丸い形にしたりもできます。

CSSの役割は、家の骨組みが決まったら、その上にペンキを塗ったり、カーテンをつけたり、家具を置いたりするインテリアデザイナーのようなものです。

HTMLとCSSは、ウェブページを作るときに一緒に使います。HTMLがウェブページの骨組みを作り、その上にCSSが色や形を加えて、見た目を美しくします。

HTMLとCSSは、まるで建築家とインテリアデザイナーのような関係です。建築家が家の骨組みを作り、その上でインテリアデザイナーが色や家具を加えて、家を美しく、快適にします。

このように、HTMLとCSSはウェブページを作るためには必要不可欠な、お互いを補完する存在です。

STEP5. JavaScriptを学ぶ

JavaScriptは、ウェブページを作るときに使う言語の一つです。先ほどの説明の通り、HTMLやCSSといった言語がありますが、それぞれがウェブページを作るためには欠かせない役割を持っています。HTMLはウェブページの骨組みを作るために、CSSはその骨組みをきれいに装飾するために、JavaScriptはウェブページに動きをつけるために使われます。

例えば、あなたがボタンをクリックしたときに何かアクションやイベントが起こるようにしたい場合、それはJavaScriptが担当する部分です。また、動く画像や、時間によって変わる情報なども、JavaScriptが動かしているんです。

もし学校の絵画の授業で、絵の具で絵を描くとすると、HTMLはあなたの描く絵の構図（例えば、山や川、家や木）を決め、CSSはその絵に色をつける（青い空や緑の木など）役割を果たします。そしてJavaScriptはその絵に動きをつける、例えば風で揺れる木や、川が流れるようなアニメーションを追加する役割を果たします。

だから、JavaScriptがなければ、ウェブページはただの静止した絵のようなもので、クリックしても何も起こらない、ちょっと退屈なものになってしまいます。でもJavaScriptがあるおかげで、ウェブページは動きがあり、もっと楽しく、もっと使いやすくなるんです。

STEP6. WordPressを学ぶ

WordPressとは、更新できるウェブサイトやブログを作るためのツールです。普通のウェブサイトはHTMLとCSSというプログラミング言語を使って作られますが、それは少し難しく、変更するのもコードを直接触る必要があるので大変です。

WordPressは更新を簡単にします。まず、HTMLとCSSで作ったウェブサイトを、「テーマ」として登録することができます。テーマとは、ウェブサイトのテンプレートのようなものです。このテーマをWordPress用にカスタマイズすることで、自分だけのウェブサイトを作ることができます。

WordPressの良いところは、ウェブサイトの更新が簡単になるところです。新しい記事を書く、写真を追加する、情報を変更するといったことが、プログラミング知識がなくてもできます。だから、誰でも自分のウェブサイトを、管理しやすくなるのです。

WordPressの特徴の一つが「プラグイン」です。プラグインとは、追加のツールや機能をウェブサイトに付け加えるためのプログラムのことを指します。これを使うことで、ウェブサイトに新しい機能を追加したり、既存の機能を改善したりすることが可能です。

例えば、写真のスライドショーを表示するプラグインや、お問い合わせフォームを作るプラグイン、SEO（検索エンジン最適化）を助けるプラグインなど、色々な種類のプラグインがあります。それぞれのプラグインは特定の機能を提供し、ウェブサイトをさらに便利にします。

プラグインの導入は非常に簡単で、ほとんどの場合、プログラミングの知識がなくてもインストールと設定が可能です。これにより、初心者でも簡単にウェブサイトをカスタマイズすることができます。

WordPressを習得することで、仕事の幅を一気に広げることができます。

STEP7. マーケティングを学ぶ

お店を開くことをイメージしてください。たくさんの商品や店員さん、建物を用意する必要があります。WEBサイトも同じで、商品はウェブサイトのコンテンツ（記事や写真、動画など）、店員さんはウェブサイトを操作するシステム、お店の建物はウェブサイトそのものということになります。

でも、たくさんの商品を並べて、素敵なお店を作ったとしても、お客さんが来なければ意味がありませんよね。だから、お店の存在をたくさんの人に知ってもらうために、看板を立てたり、チラシを配ったりします。これが「マーケティング」の役割です。WEBマーケティングも同じで、ウェブサイトの存在を多くの人に知ってもらうための活動を行います。

WEBマーケティングにはいくつかの重要なテーマがあります。

1. SEO（Search Engine Optimization）: これは、ウェブサイトをGoogleなどの検索エンジンで上位に表示させるための方法です。これがうまくいくと、人々が何かをインターネットで検索したときに、自分のウェブサイトが最初に見つかる可能性が高くなります。街でたくさんのお店がある中で、自分のお店を目立たせるための看板を立てるようなもの、と考えるとわかりやすいでしょう。
2. SNSマーケティング: これは、FacebookやTwitterなどのソーシャルネットワーキングサイトを使って、ウェブサイトの情報を広める方法です。友だちや家族にお店の情報を伝えてもらうようなもので、口コミのように広がっていきます。
3. コンテンツマーケティング: これは、ウェブサイトに、役立つ、面白い、または魅力的な情報を提供することで、人々が自然にウェブサイトを訪れるようにする方法です。お店で無料の試食を提供したり、特別なイベントを開催するようなものと思ってください。

これらのテーマは、ウェブサイトを成功させるために重要な役割を果たします。だからこそ、ウェブサイトを作るときには、ただ見た目が良いだけでなく、これらのマーケティングのテーマも考えることが大切なんです。

そしてWEBサイトを作るとき、どういうふうに売っていくか、マーケティング戦略はどういうものか、についても考慮しなければなりません。例えばSNSで伝えていることと、WEBサイトに書いてあることが異なれば、信頼感はなくなってしまいます。マーケティングの流れや戦略を考慮した上で、WEBサイトも設計する必要があるのです。

また、どうやれば売れるのか、マーケティング戦略も丸ごと考えられるクリエイターは、シンプルに需要があります。そもそもWEBサイトにおける大半の目的は、売上を上げることであって、WEBサイトそのものを作ることではありません。どういったマーケティング戦略を作り、その上でWEBサイトがどういう役割をするのかまで設計できれば、クライアントにとって、これほど嬉しいことはないのです。

STEP8. 事業づくりを学ぶ

ビジネスをつくるとき、まず新しいアイデアを考え出すことを「0から1を生み出す」と言います。これはまだ存在していないものを生み出す挑戦です。それに対して、すでにあるアイデアを大きく広げていくことを「1から100を生み出す」と言います。これはマーケティングの役割です。

ウェブサイトも「0から1」を生み出す手段の一つです。新しい事業を始めるとき、売れそうかどうか確認したい時があります。そのために、まずは簡単なウェブサイトを作り、広告を出すことがあるのです。結果、たくさんの人がサイトを見たか、どれくらいの人が事前登録したかなど、人々の反応を見て、新しい事業が売れそうかどうかを確認することができます。これを「プロトタイプテスト」と呼びます。

新しい事業を作るには、たくさんのテクニックやスキルが必要です。どのように進めれば、より良い結果が得られるのか。大きな失敗を避け、小さな失敗から学んで、事業が成功する可能性を見つけるにはどうすればいいのか。これらの新規事業開発スキルを持つことで、新しいウェブサイトをどのように活用すればいいのか、提案するのが簡単になります。

新しい事業を作り、それを成長させるための知識や経験があれば、ウェブサイトを効果的に活用することができます。さらに、その知識を活用してウェブサイト制作を提供すれば、単なる作業者ではなく、クライアントのビジネス全体をサポートするパートナーになることができます。

STEP9. バックエンド言語を学ぶ

バックエンド言語を学ぶことで、WEBサイトをツールとして使うことができます。ここまで紹介した技術は、例えば会員登録をしたり、ログインして何か特別な機能などを使うことはできません。

WordPressはプラグインでそういった機能を実装できますが、自由度が高いわけでもありません。バックエンド言語を覚えることでWEBサイトをメルカリやamazon、progateやBASEのような「ツール」として機能を作り、提供することができるのです。

レストランを経営することを想像してみてください。

レストランの一部はお客さんが見ることができる部分、それが「フロントエンド」です。料理やデザート、飲み物のメニュー、テーブルの配置、内装など、お客さんが見て感じることができるもの全てです。これに対応するのがウェブサイトでいうところのHTML、CSS、JavaScriptなど、ウェブサイトのデザインやユーザーインターフェースを作るための技術です。

しかし、レストランはただ外見がきれいであるだけでは成り立ちません。キッチンで料理が作られ、注文が処理され、食材が管理される「裏側」の作業が必要です。これが「バックエンド」に相当します。

ウェブサイトでは、このバックエンドは、ユーザーがデータを入力した時にそれをどう処理するか、ユーザーが特定の情報を要求したときにそれをどう提供するかなど、ウェブサイトの「裏側」で行われる全ての処理を担当します。これを実現するのが、バックエンド言語（例えばPHP、Python、Javaなど）です。

結論として、フロントエンドだけでなくバックエンドのスキルも習得することで、ウェブクリエイターはWebサイトを単なる広告ではなく「ツール」として機能させ、会員登録やそれに伴う様々なサービスを提供するシステムとしてリリースすることができます。バックエンドを覚えると、一気に案件の幅も広がりますし、自分で月額課金制などのサービスを作って提供することもできます。

まとめ

ここまで覚えたら、もはや、なんでもできます。しかし、冒頭にもお話したように、すべてを完璧にマスターしなさい、というわけではありません。大事なのは「1つの専門分野」を持つことと「広い知識・知見」を持つことです。ここまでのスキルの中で、1つ、追求する分野を持ってください。もっとも自分にあっている、好きなスキルで良いです。

そして、他の分野は一通り扱えるくらい学んでください。そうすれば、チームでも個人でも圧倒的な成果を出し、上流から戦略的に事業に関わっていける、突き抜けたクリエイターになれます。逆に、横断的な知識・知見をもとに対応できる存在にならなければ、向こう10年の間に淘汰されてしまう可能性さえあります。

理由としてはAIをはじめとした世界の進化です。AIが生まれたことで、世界の変化はどんどん高速化していきますし、そのためには個人でも分野横断的な発想ができるクリエイティビティと、チームにおいても、同一認識の元にプロジェクトを進められるスピード感が必要です。

そして私たちクオンカレッジは、到来しつつある次の時代に向けて、それでもなお10年以上生存できる人材を育てる数少ないスクールです。様々な教育を取り入れた横断的なカリキュラムをご用意しております。もし、本気で今後10年以上、安心して生き延びられるWEBスキルを手に入れたい方は、ぜひクオンカレッジにご参加ください。他のスクールではなかなか手に入れることができない、研究を重ねた仕組みとカリキュラムで、みなさんが頭1つ抜けたクリエイターになる後押しをできるはずです。