未経験からWebデザイナーを始める際の学習環境
Webデザインを独学で習得するにあたり、さまざまな学習ツールにアクセスしやすくなり、いい時代になったと言われます。インターネット上の学習サイトでは、ドットインストール、Progate、Udemy が有名所でしょうか。一方で、「ゼロからWebデザイナーを目指す人」にとっては、学習サイトだけではカバーしきれない範囲の知識があります。
未経験採用でSESに当たる率の高さ
今の時代、Webデザイナーも未経験OKの採用情報を探していると、SES がかなり含まれるのではないでしょうか？（SESという単語を避けていることも）未経験でSESがダメというわけではありません。学習支援があると謳っていても、メンター制度があるところは稀で、上記のような学習サイトが使えるだけだったりします。
その場合、身につくのはコーディングとグラフィックソフトのスキルに偏ります。出向先でその先の知識を仕入れることはできると思います（出向先ガチャとも言われますが）。
たまたま 出向先 が 制作会社 だったり、先輩デザイナーに教えを請える環境なら、それ以外の基礎知識は出向先で教わるのでも問題ありません。しかし、例えば Vue.js が少し使えるから 小規模の上流開発にアサイン されて、デザインの基礎的なことを 気軽に教われない状況になる ことも全然あり得ます。
新人の自走力の問題にされがちですが、IT人材不足の時代において、人材管理側がWebデザイナーのスコープを把握していないことも問題あると思います。なので、SES企業へ新卒入社したデザイナーの方は、あまり自責せずに、「管理側はなんでも知ってるわけじゃないな！」くらいの認識で、ご自身で情報収集することを心がけてくださいね。
一人一人のロードマップが必要
Webデザイナーに必要な知識は、その人の今いるチームによってかなり違います。（目標によってもですが）その人に最適化したロードマップというものがあるはずですので、ぜひ色々調べてご自身の学習ロードマップを立ててみてください。
Webデザイナーに必要な基礎知識
Webデザイナーに必要な基礎知識は、以下のように分類できるかと思います。☆で示しているものは最低限どんなチームでも把握していて間違いないという意味です。
- グラフィックソフトの知識 ☆☆★★★
- コーディングの知識 ☆☆☆★★
※ここまでは学習ツールによくある
- デザインそのものの知識 ☆☆☆★★
- Webサーバーとアクセスの仕組み ☆☆☆★★
- ユーザーが見る端末と環境 ☆☆☆★★
※ここまでは出向前に少しおさえておくとGOOD
- Webサービスとネイティブアプリの違い（開発側） ☆☆★★★
- セマンティックな記述、SEO、Sass等の実務的なコーディング ☆☆☆☆★
- Gitの知識 ☆★★★★
- サーバーサイドの知識 ☆★★★★
- CMSの知識（WrodPressカスタマイズ） ☆☆★★★
※基礎の範囲ですが、アサインする先によって必要度が変わる
Webデザイナーにおすすめで検索すると出てくるこちらの本、ざっと試し読みだけ見ましたが、いい具合に「デザインの基礎知識」「ユーザー端末の知識」などにもやさしく触れられています。初学者は学習サイトとは別に、こういった入門書を一冊読んで全体像を把握するのが良いと思います。
グラフィックソフトの知識 ☆☆★★★
言わずと知れた Adobe の Photoshop、Illustrator、XD や、Figma、Sketch 等、グラフィックデザインやワイヤーフレームを作成するソフトウェアを”使う”知識です。「脱Adobe」と言われている記事を目にすることもあるかと思います。だからといって勉強しなくていい知識というわけではありません。最低でも Photoshop はマストです。ただ、これらは道具に過ぎないので、「デザイン力 = グラフィックソフトを使う力」ではありません。
▼▼▼ 下記はグラフィックソフトを使い分ける一例です ▼▼▼
Illustrator は Webカンプ に合わないのか？と聞かれますが、正確にはデータの”作り手”と”受け取り手”のコミュニケーションコスト（＋学習コスト）がかかるため、これまでは Photoshop がご指名になりがちでした。
Web制作は概ね分業になるので、コミュニケーションコストは馬鹿にできません。もっといえば、上流開発 の場合はサイクルが早いので、Photoshop だけだと心許ない時もあります。
できれば、XD や Figma もお勧めしておきたいです。カンプ制作やチームへの共有にも適しており、Illustratorの使用感に似ているところもあります。Figma は無料で始められます。もし XD のために自費で AdobeCC に入るか迷っているのであれば断然 Figma がいいと思います。
Canva などの非デザイナー向けソフトですが、使えるならそれはそれで重宝されると思うので積極的にアピールしましょう。ただ、やはり最低限 Photoshop が使えて＋αのスキルとしての評価になると思います。
コーディングの知識 ☆☆☆★★
HTML、CSS、javascriptの基礎で、１ページのサイトを作れるところまでは、学習サイトで最低限やっておいたほうが良いです。ですが、あまり座学を深掘りせず、基礎や応用ぐらいまでを学んだら実践しながら習得していきましょう。実務では使わないなという記述も必ずあるためです。
それと、「こんなにたくさんのことを実務でやるのか？」「やることが多すぎて続ける自身がない」と、先行きが心配になるかもしれません。実際は、プロジェクト単位ではWebデザインとコーディングを全部一人でやることはあまりないはずです。ちょっとくらい苦手があっても得意な人に任せたり、逆に引き受けたりします。また、コーディングを実務でやらないとしても、Webデザイナーがコーディングを知っていることに意味があるのです。
とはいえ、「コーディングばかりアサインされて、Webデザインが全く回ってこない」なんてこともありますよね。その場合ポートフォリオを充実させたり、SESのエージェントに相談したりといったことになると思います。下記のような、デザインそのものの知識に関して再確認してみるのもいいかもしれません。
デザインそのものの知識 ☆☆★★★
デザインそのものとは、配色・フォント・写真・構図のセオリーや、目的や文脈においての優れたデザインとは？といった考え方を知ること（インプット）。さらには自分が作ったデザインの意図を非デザイナーに説明できる（アウトプット）ことです。
『デザイン』は、一般的には美しく装飾することを指しますが、そもそも設計するような意味で、○○デザイナーという仕事はビジュアルデザインに限りません。「目的・課題」があり、「どう実現するか」というプロセスがデザインの本質です。デザインに意図をこめられていますか？また、それを言語化するとなると難しいものです。ちょっと怖そうなタイトルですが、下記の本は実際のフィードバックによってデザインの思考プロセスを知ることができる一冊です。
Webデザインとして優れているということ
Webデザインとしては、実装可能か（コーディングで容易に実現できるか）を考慮したデザインを求められます。しかしだからと言って「実装の容易さ」を優先し過ぎて、「ユーザーの使いやすさ」が二の次になってもいけません。UX的な目線では、目的に対して「効果があるか」が判断の基準になったりもします。
UX的な話まで出てくると、基礎ではなくリードデザイナーレベルかもしれません。ですが、デザインは掘り下げるとまだまだあるのです。基礎を学んだ後、UX、UI、HCD … ＋αどれを学ぼうか、好奇心が広がりますね。
☆が少なめなのは、駆け出しの時はまだわからなくてもいいよという現場もあるからです。もちろん初めからグラフィックデザインに強いデザイナーがいたらそれだけで武器になります。前職でパワーポイントの装飾に凝っていたとか、カメラの趣味があるとか、売りになるエピソードを持っていればアピールに使ったほうが良いです。
ユーザーが見る端末と環境 ☆☆☆★★
Webサービスやネイティブアプリの開発・運用に携わる際、「ユーザーにどう見えているか」を気にする必要があります。色々ありますが、「通信環境」と「端末（デバイス）」「ブラウザ」をどこまでカバーするのかは重要ですよね。
「今は5G環境が整いつつあるので、外でスマホでも動画広告が止まらず十分機能するだろう（通信環境）」とか。「レガシーブラウザにどこまで対応するか」。「社内システムでWindows環境が圧倒的多数だからSafariはサポート外にしませんか？」とか。「デザインカンプより小型のスマホだったときにカラムを落とすのか？」とか。
要件定義書に指示がなくても、デザイナーも考えるべきところです。時には臨機応変に対処しなくてはなりません。制作側にとって、ブラウザのサポート範囲を後で変えられると大ごとですが、ビジネスサイドはそれなりの理由をもって変更指示をしているかもしれません。ヒアリングして落とし所を一緒に考えることもあるでしょう。
例えば、Google検索で「ブラウザ シェア率」と検索した際に記事が出てくると思います。（ツールの期間指定で検索するとより直近に絞れます）さらに記事の出展元サイトで2022年12月を表示して見ました。
Browser Market Share Japan | Statcounter Global Stats
- Chrome 49.15%
- Safari 28.12%
- Edge 13.97%
- FireFox 4.57%
- Samsung INternet 1%
- IE 0.83%
- Opera 0.65%
- Android 0.63%
- UC Browser 0.2%
やっとIEが１%以下になってコーダー歓喜ですね。こういった情報には、時代が変わってもご自身でアンテナを貼っておくべきこととして認識しておいてくださいね。
Webサービスとネイティブアプリの違い（開発側） ☆☆★★★
フリーランス向けの求人を見ていると、「Webサービス」、「Webアプリケーション」、「ネイティブアプリ」などの表記を見かけます。これは必ずしも表記揺れというわけではありません。
インターネットは”ブラウザ”というソフトウェア（EdgeやSafariやChrome）を介して、Webページを表示しています。
LINE などのアプリは、スマホまたはPCにアプリをインストールすることによってサービスを利用できます。端末に直接インストールするのが ネイティブアプリ です。（2023年1月現在Chrome拡張を使えばブラウザ版LINEもあるそうです）
一方、ブラウザ上で閲覧したり利用できるサービス全般をWebサービスと言い、中でもユーザー側が起こしたアクションによって、何らかのプログラムが動作して帰ってくるものをWebアプリケーションと呼びます。簡単な企業紹介サイトのような、ユーザーが置いてある情報を読むだけのサービスに対して、あまり「Webアプリケーション」とは呼びません。「Webアプリケーション」とわざわざ表記していたら、「SNSとかチャットとか物件検索のような機能がついてるんだな」という理解でいいと思います。
ネイティブアプリ と Webアプリケーション は、企画サイドに混同されると、非常にやっかいです。
制作側の視点だと言語が違いますし、デザイナー視点だと適用フォントや素材の規約事情が変わるかもしれない。UX視点では、カスタマージャーニーマップやユーザーストーリーが変わるでしょう（プログラムの設計も変わる）。Webサービスができあがっていても、それをネイティブアプリに展開するにはそれなりに予算がかかるのです。上流工程でWebアプリケーション制作の際、後からネイティブアプリに展開しそうかを要確認です。
自分への戒め
下記記事だとAmazonのアプリが、部分的にWebビューを使ってうまくやっていますね。商品詳細画面がWebビューで読み込んでおり、それ以外がネイティブアプリの機能のようです。
セマンティックな記述、SEO、Sass等の実務的なコーディング ☆☆☆☆★
機械が読み取りやすいマークアップ
セマンティックな記述とは、コンピュータが読みやすいことです。セマンティックなコードを記述すると何がいいのか？見た目は変わらないからこそ、上流開発では緊急度が低く見逃されがちですが、運用フェーズでは重視されることかと思います。
例えばコンテンツレイアウトを全部 <div> で作っても見た目は変わらないですが、HTML5の <article> や <section> や <p> を使うと機械が意味を理解します。<img> タグにalt属性 をつけて読み上げ可能にすることも大事です。タグの入れ子ルール も調べて見てください。あとはスタイルシート（CSS）に学習サイトの手本のまま「h3」「h3.classname」とセレクタに要素を指定すると、リファクタリング（見た目を変えずコードを整理すること）で手間が増えるので「.classname」のようにクラスセレクタを使う（例外として<ul><li>などの親子関係が確立している時は要素を指定することもあります）。他にも、人が書いたコードをたくさん見ることで、共通していそうなことが見えてくると思います。（当記事はコードを打ってないので結構雑です）
Sassやフレームワークでコーディングを短縮する
CSS、JavaScriptを使用する際、実務では同じような記述をまとめた「ライブラリ」や「フレームワーク」、拡張言語の「Sass」などを使用して、人の手で打ち込む手間を省いたりするのが一般的です。
有名どころで、「CSSフレームワーク」で使うのがBootstrap。「JavaScriptライブラリ」で 開発系に多いのがVue.js、React、運用系ではまだ手軽に使える jQuery が多いのではないでしょうか。
Gitの知識 ☆★★★★
苦手な範囲になってきました（笑）
Git とは「分散型バージョン管理システム」のことです。なんのこっちゃですね。ファイルを更新したりアップデートした際に、その履歴を管理できることが、バージョンを管理できるということらしいです。で、履歴を管理できるとは、間違って誰かがサーバー上で上書きしても、前の履歴のここの部分に戻せるということです。
複数人でデータを触っている際、いつ誰がどんな記述に直したのかを遡れます。分岐点を作れるので、他の人の作業と分岐したうえで作業を進められます。
出向先が開発系だとマストになってくるかと思いますが、Webデザイナーとして出向するなら誰かしらに教われると思います。ただ、世の中的にリモート中心になってきていることを思うと、早めに触ってみるほうがいいのかもしれません。とりあえず動画で流し見するだけでもいいかもしれませんね。
サーバーサイドの知識 ☆★★★★
そもそも自分がコーディングしたものを、インターネットの向こうのユーザーにどうして見えているのか？というとサーバーというものを介しているのですが、意外とここがすっぽり学習から抜けてる時もあるので注意が必要かなと思いました。しかし、Webデザイナーの初学者がサーバーサイドの対応をできないといけないかというと、そうでもないので、必要になったときに勉強を始めればいいと思います。
あるいは、コーディングは習ったけど、どうやって公開までもっていくのか知りたいと思ったタイミングで一度座学で調べるのがいいかと思います。
レンタルサーバーを借りる
実際に手を動かしてみるには、レンタルサーバーを借りて自分のサイトを立ち上げてみるのがいいと思います。方法は、Web上の記事で調べられます。Udemyでもありますし、頻繁に開催される割引期間に購入して、空き時間に動画で学習するもいいでしょう。レンタルサーバーはそこまで高いものでもないですし、あまり構えずに気軽に借りれるかと思います。勉強期間だけ借りてみるのもありかと思います。
ローカル開発環境を用意する
ローカル開発環境（ローカルサーバー）とは、個人のPCに構築する開発環境です。すでに学習サイトでHTMLなどを学習済みであれば、PCブラウザ上でプログラミングできるサービスを利用しているのではないでしょうか？それでもいいのですが、一度ローカル開発環境を整えると勉強になると思います。まだ感覚的に理解できるのは、MAMP（Mac用）やXAMPP（Windows用）をインストールする方法かなと思いますが、出向先が Node の http-server だったりするならそのやり方を周りに聞くのもありかもしれません。（私は Node.js 未履修です）
ローカル開発環境の構築は、慣れるまでそれなりに時間がかかると思います。Macならターミナルを使ったり、ちょっと難しそうなのですが、Web制作でコーディングのほうにも軸足を置いていくには、必要な作業スペースとなるので、時間を設けてじっくり試してみてください。
「自分のサイトを作ろう」と思ったときの手順
- ドメインとレンタルサーバーを借りるところを決める
- 公開予定日が決まってるなら１〜２週間余裕を持って申し込む
- 独自ドメインはお好みで
- レンタルサーバーの中で、今回使うサイト用のディレクトリ（フォルダ）を作って独自ドメインを適用する（一つのレンタルした場所を切り分けて、２つ以上の別々のサイトを公開したい場合）
- デザイン制作する
- ローカルサーバー上でコーディング実装する
- レンタルサーバーに実装したデータを上げる（仕事のときは前にステージング環境を作ったりする）
- 必要ならBasic認証などのセキュリティをかける
独自ドメインは、なければレンタルサーバーのドメインになります。極論、ローカルサーバーがなくても始められます。
ただ、レンタルサーバーは他の人と共同のものを切り分けて部分的に借りているものになります。倫理的に問題あると思うので、実装してプログラムのエラーを確認するのは自分のPCで確認してからにしましょう。
初学者は必要になってから学ぶでもOK。個人サイトを作るのがお勧め。コーディングを仕事にするなら、ローカルサーバーの構築は時間を設けてできるようになろう。
CMSの知識（WordPressカスタマイズ） ☆☆★★★
今回はSESのWebデザイナー初学者向けなので、出向先次第です。制作会社に出向した場合は、WordPressは出てくると思いますが、開発系だとあまり出てこないかもしれないので、そのあたりでご判断いただければと思います。
WordPressは、CMSというシステムの一つです。CMSとはContents Management System（コンテンツ・マネジメント・システム）の略で、Webサイトのコンテンツをコードを書かなくても（または簡易的にコードも使用しつつ）だれでも簡単に更新できるようにするシステムです。
WordPressは、数あるCMSの中で最も利用されているのですが、基本的にはブログ機能をつけたいときに使用することが多いです。というと、狭義の日記的なブログを想像されるかもしれませんが、広義のブログとはWeb上で写真と文章で構成された、いわゆる記事情報を定期的に”更新する”ためのものです。会社のホームページのお知らせで使われたり、商品の紹介に使われたりもします。もちろん静的ページも作れます。ECサイトも作れますが、EC特化の別のCMSのほうが機能とセキュリティ面で良いとの意見をよく目にします。
WordPressは、テーマと呼ばれるデザインフォーマットや、プラグインと呼ばれる機能の拡張ができ、有償のテーマを使うとかなりデザイン度の高いWebサイトを作ることができます。
ですが、WebデザイナーがWordPressを使うとなると、テーマをそのまま使うことはあまりないと思います。Webサイト制作受注の場合、クライアントからしたら、自分でもできることですから。中には、忙しすぎて『手間賃を払ってでも任せたいからテーマ使用でいい』というクライアントもいるかもしれませんが、通常Webデザイナーに回ってくる時は”プロに任せるのだから”という付加価値を期待されます。そこで、WordPressのオリジナルテーマ化という作業や、カスタムフィールドをつけて付加価値をつけることが多いのです。そうなるとWordPress独自の記述方法を学んだりする学習コストがでてきます。
というわけで、初学者の方は無理にWordPressの勉強を始めるより、デザインの基礎やコーディング知識に時間を割いた方が良いかと思います。
あるいは、Webデザインの勉強から入ったけど、マーケティングや運用のほうにすでに興味が傾いている方は、WordPressでご自身のブログを始められるのもいいかもしれません。
CMSは誰でも簡単にWebサイトを更新できるシステム。WordPressは広義のブログ。Webデザイナーに求められるWordPressは付加価値がいる。初学者は必要になったときに学べばOK。