【WEBデザインのイロハニホヘト】 個人投資家のFIREへの旅路 第164夜
副業が一般化してきたことで、何かスキルを見つけたいと言う方が増えています。
そんな時に、人気なのが「WEBデザイナー」というお仕事です。
「なんだかかっこいい！オシャレ！なイメージだけど、どうやったら成れるのか？」
「資格が必要なの？」
「何を勉強したらいいの？」
など、疑問がたくさん出てきて、興味はあるけど何をやったらいいかわからないと、悩んでおられる方が多いのではないでしょうか？
私も、同じような疑問を持って、悩みながら、一人でネットで検索しまくった一人です。。笑
この記事では、そんな無駄な時間を削って、サクッと「WEBデザイナー」と言う仕事の全体像を把握できるようにまとめました。
大切なのは、「行動」です！
この記事で、あなたが私のように何もわからずに調べることに時間を浪費することなく、早く一歩を踏み出せるようなれば嬉しいです！
【WEBデザインってなんだ？】
まずは、WEBデザインとは何かということから。
WEBデザインとは、WEBサイトを訪れた人のユーザビリティを考えてレイアウトを設計することです。
私たちが、普段見ているWEBサイトは、
「どうしたら使いやすいか」
「どうしたら見やすいか」
ということを考えてデザインされています。
これは、WEBサイトだけでなく、スマホのアプリなどでも同じです。
Amazonがあれだけ業績を拡大させた要因の一つは、ワンクリックで商品が買えるという仕組み、デザインがあったからです。2017年までAmazonが特許を持つ機能でした。
それくらいに、使いやすいデザイン＝ユーザビリティが高いデザインには価値があるということですね。
そういったデザインをWEBサイト上で設計するのが、WEBデザインです。
【なぜWEBデザインが必要？？】
Amazonの例のように、デザインで、会社の売上が左右されることもあります。それは、つまり、ユーザーを満足させたかどうかの違いとも言えますね。
そのために、WEBデザインが必要になります。
ユーザーの満足とは、使いやすさ、見やすさというところです。これがユーザビリティとなります。
WEBデザイナーは、自分が良いと思うデザインをするだけではなく、使う人が気持ちいいという視点を持ってデザインをする必要があるということですね。
ユーザビリティという概念と一緒によく登場するのが、「UI」・「UX」という言葉です。こちらも併せて知っておきましょう。
＜！POINT！＞ UI : ユーザーインターフェース の略。WEBサイトに配置される文字、画像なの、サイズ、フォント、色などといったユーザーが目にするもの、ボタンなどユーザーが操作するもののこと。
＜！POINT！＞ UX : ユーザーエクスペリエンス の略。WEBサイトにおいては、見やすさ、操作のしやすさといった、ユーザーの体験を指す言葉。
【WEBデザインの頻出ワード ９選】
このように、WEBデザインには、さまざまな用語が出てきて、挫折しそうになりますよね。私もそうでした。笑
「こんなん覚えられへんで」と思っていた一人です。
ここでのポイントは、覚えなくていいということです！ なぜなら答えは、あなたがデザインしようとしているWEBにあるからです。
しかし、それを調べるには、「知っている」ことが必要です。
「こんな言葉あったな〜。なんやっけ？」 → 検索！
これを繰り返すうちに、覚えます。なので、暗記は不要です。
なんとなく知っている状態にすることが大切です。
では、見ていきましょう！！
１、＜サーバー＞
インターネットを利用する際に、聞いたころありますね。
サーバーと言う言葉を考えると、身近なところにウォーターサーバーという言葉がありますが、あれは、水を供給するものですよね。水が保管してあって、飲みたい時に、操作すると、水が出てくる。
インターネットでも、同じ仕組みとなります。サーバーに情報が保管してあって、情報を見たい時に、操作すると、情報を出してくれます。
ウォーターサーバーと、インターネットのサーバー対比はこうです、
保管しているもの → 水：情報(WEBサイト)
操作するもの → ボタン：スマホ、PC
供給（serve）されるもの → 水：情報(WEBサイト)
２、＜ブラウザ＞
サーバーから、情報が供給されることがわかりましたが、
この情報を人間に見やすいように、表示してくれるのが、ブラウザの役割です。
世界のブラウザのシェアは、Google Chromeが約35％で1位です。
このほか、iPhoneを使っているいる人は、Safariを使っている方も多いでしょう。
また、WindowsのPCを使っている方は、Edgeを使っておられるかもしれません。
WEBデザイナーを目指す上では、やはりGoogle Chromeがオススメです！シェアが物語る通り、拡張機能などの便利機能が豊富です。
WEBに関連するお仕事は、やはりGoogle先生の力を利用した方が、断然、効率が良いです！
＜！POINT！＞ ブラウザのシェアNo.１はGoogle Chrome 。WEBデザインをする上でも拡張機能などが豊富
３、＜言語＞
サーバーから情報が供給されて、ブラウザで人間が見やすいように変換されることがわかりました。
つまり、サーバーにある情報は、コンピューターが理解できる形の言語です。
この辺りは、掘れば掘るほど、底無しにハマっていくので、表面を理解しましょう！
言語には、大きく分けると、２種類の言語があります。
サーバーサイドの言語、フロントエンドの言語です。
WEBデザインの分野で扱うのは、フロントエンドの言語がメインとなります。
＜！POINT！＞ フロントエンド ：ユーザーが見ている画面のデザイン
サーバーサイド ： サーバーでプログラムの実行・管理
４、＜HTML・CSS＞
（必要度10 難易度4）
フロントエンドの言語の一つです。
WEBデザイナーに求められるスキルの一つです。
この言語を書くことを、コーディングと呼び、コーディングと、デザインを分けている場合もあります。
その場合は、WEBデザイナーとコーダーという職種に分かれます。
HTML：WEBサイトの見た目を作る言語です。マークアップ言語と呼びます。厳密にはプログラミング言語ではありません。
CSS：HTMLで作った見た目を、装飾するための言語です。文字の色、画像のサイズ、レイアウトを指定することができます。
５、＜JavaScript＞
（必要度5 難易度8）
フロントエンド、バックエンド共に使用される言語です。
フロントエンドではWEBサイトに動きをつける言語として使用することが多いです。
例えば、WEBサイトのトップページで、画像がスライドしてるのを見たことがありませんか？ あの動きは、JavaScriptで作られています。
HTMLと違い、プログラミング言語となりますので、HTMLと比べると難易度が高いです。 私は挫折しましたね！笑
しかし、JavaScriptには、JavaScriptの0から書けなくて、その機能が簡単に使えるライブラリ、フレームワークと呼ばれるものがあります。
これは、使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたものです。
つまり、JavaScriptを1から書くのは、プラモデルを1から組み立てる作業ですが、ライブラリとは、完成品フィギュアを買っちゃうっていうイメージです。しかも、JavaScriptのライブラリは無料で使えるものがほとんどです。
６、＜WordPress＞
（必要度8 難易度6）
WordPressはCMSと呼ばれるブログを簡単に作れるシステムでした。現在では、ブログに限らず、会社のホームページなどがWordPressを使って作られています。
世界中のWEBサイトの41％がWordPressで作られています。すごい数字ですね。
CMSとはContents Management System：コンテンツ・マネジメント・システムの略です。WordPressにはテーマという既存のWEBサイトのテンプレートのようなものがたくさんあります。このテンプレートをベースにカスタマイズすることで、前述のような言語を理解しなくても、WEBサイトをマネジメント（管理）できるシステムです。
しかし、実際の、WEBデザインの現場では、テーマを使用した制作ではなく、オリジナルのテーマを作ることが仕事になります。
オリジナルテーマを作るには、HTML、CSS、JavaScriptが必要です。さらに、WordPressはPHPというプログラミング言語をベースに設計されているので、この基本知識も必要です。
とはいえ、
世界で41％ものシェアを誇るサービスですから、ネットにはたくさんの情報があります。PHPについても、検索すれば答えは出ます！
情報の多さはシェアの高いCMSを利用するメリットの一つです。
＜！POINT！＞ WordPressでの実装ができるかどうかは、案件獲得の確率に大きく影響します。就活でも非常に強みになります。
７、＜コードエディタ＞
上記のような、言語のコードを書くために必要なのがこれです。
おすすめは、 Visual Studio Codeです。
拡張機能を利用したカスタマイズが簡単にできます。例えば、コードの何文字をかを入力すると、予測が出るので、めちゃめちゃ効率が上がります。日本語変換パックとも簡単に設定できるので、使いやすいです。
また、ユーザー数も多いため、ググれば、いろんな記事がヒットしますので、トラブルが起きても安心です。
とはいえ、エディタは好みの物を使えば良いと思います！下記に貼りましたが、Atomもおすすめです。カワイイから覗いてみてください。デザイン出来にはAtomが好きです。
８、＜Adobe Photoshop＞
WEBデザインにおいては、画像の編集やWEBデザインカンプを作るために使用されます。
WEBデザイナーと、コーダーが分業になっている場合には、WEBデザイナーのお仕事は、このデザインカンプを作ることがメインとなります。
WEBサイトの構成には、基本があるので、その骨組みに沿って、画像や文字の配置をしたり、そのサイズや、間隔を設定したりして、WEBサイトの全体をデザインしてく作業になります。
あなたの個性を発揮しつつ、UI 、UXを意識した構成が求められます！
WEBデザインという観点から考えると、ここが楽しいやりがいポイントではないでしょうか！
Illustratorも、聞いたことがあると思いますが、こちらは、アイコンや、ロゴなどのパーツを作るものになります。
＜！POINT！＞ Photoshopはサイトの全体のデザインをするツール。Illustratorはパーツを作成するツール。
９、＜Adobe XD＞
Photoshopよりも多くの機能を備えているのが、Adobe XDです。
Photoshopと同じように、サイト全体のデザインを作るツールですが、Photoshopの場合は、1枚の絵を描くイメージです。
XDの場合には、プロトタイプという機能があり、デザインしたページの画像をクリックすると、そのリンク先となるページに移動するなど、実際のWEBサイトを使っている感覚で、操作ができる機能があります。
つまり、UI、UXはどうかを感覚でテストしながら、デザインができるということです！
コーディングをしないと、動かせなかったものが、その前にテストできるので、作業効率はアップします。
＜！POINT！＞ Adobe XDなどのデザインツールは、制作会社によって何を使うのかは様々。
【WEBデザイナーに必要な物】
まずは、絶対に、PCが必要です。コーディングの場合は、WindowsでもMacでも、あまり差がないと思います。
デザインという点では、Macの方が良いでしょう！
理由は簡単。使いやすいからです。
私もMacBookを使っていますが、使っていて気持ちいいし、デザインもいい！これも、実は、Appleの追求するUI 、UX を意識したデザインの成果です。
まぁ、私がApple信者であることも理由にありますが・・！
【WEBデザイナーになるための学習法】
次に、どのように学習すれば良いかを解説します。
＜学習ツール＞
学習のためのツールは、様々あります。
①書籍 オススメ度3 ☆☆☆★★
書籍といっても、様々なものがあるので、一概には言えませんが、辞書的な物よりも、なにか制作物を作っていく書籍の方がオススメです。
知識は必要ですが、やはり、実際に手を動かす事が大切だからです。
Photoshopで何かを作りながら、学んでいくような書籍が良いでしょう！
また、デザインを学ぶとなると、それは、実装する技術の前に、概念を知る必要があると思いますので、こちらは、読んで知識を入れる書籍での学習が良いと思います。
デザイン関連では、こちらの書籍が有名です。私もただいま読んでいます。
※アフィリはやってませんよ〜！
②動画 オススメ度5 ☆☆☆☆☆
デザインもコーディングも、Photoshopの画面、コードエディタの画面で実際に作業されている様子を見るのが一番わかりやすいので、動画での学習は非常にオススメです！
ブログ、書籍の文章では、なかなか読み解けないこともあるので、実際に見るのが一番速いです。
百聞は一見にしかずとはまさにこれですね。
オススメは、YouTubeで無料でやっちゃう！ですね。十分に学べます！
オススメのチャンネルはこれ！ この玉袋さんの解説がおもろいです。もはや、楽しみながら学習できる最高の動画です。おそらくファンになりますよ！笑 特に後半からおもろさが加速します。
有料の場合は、ドットインストール、Udemyなどのサービスがあります。
Udemyは、正直セール以外では、買いたくないですね。通常価格が３万円近い設定の動画もあるのですが、定期的にセールがあり、その際には、２千円未満で購入できます。僕の場合は、セールの時に、何本かまとめ買いをして、ゆっくりと学習しました。
＜独学vsスクール メリットとデメリット＞
WEBデザイナーの学習方法は大きく２つあります。
① 独学
② スクールを利用する
この２つですね。結論から言うと、どちらでもオッケー！
自分に合う方法は人それぞれだからですね。
とはいえ、どっちが自分に合っているのかが、わかりませんよね。
それぞれの特徴を見てどちらがいいか、考えてみましょう！
＜①独学＞
私の場合は、基本的に独学でした。YouTubeや、Udemyなどで動画観ながら手を動かすことで、基礎の基礎を学びました。
コーディングに関して言うなら、
一番効果的な学習方法は、「模写コーディング」です。
模写コーディングとは、実際のWEBサイトを見ながら、全く同じになるようにコーディングしていく学習方法です。
動画や本での学習は、「練習」です。
模写コーディングは、「試合」って感じです。
例えば、泳ぎ方をいくら動画や本で学んでも、泳げるようになりません。泳ぎたいなら、まず、プールに入ることです！！
模写コーディングでは、正直、わからないことがたくさん出てきます。ここでとにかくググる！その日に、コーディングできたことは、その後もきっと忘れません。次からは、「あれね」と、すぐにコーディングできるようになります。
私のオススメの学習コースは、
基礎を動画で学び、その後は、模写コーディングで、とにかくコードをかくかくかく！
このように、独学の場合は、自分一人で、答えが出るまで、ググることができる人が向いていると言えます。ここで掴んだ答えは、確実に自分のモノになり、実践的なスキルがつきます。しかし、答えが出るまでに、時間がかかる場合もありますし、どうしても答えに辿り着けないこともあります。この時に、挫折するリスクもありますね。
<!POINT!> 独学のメリット：自分で調べるクセがつき、より実践的なスキルが身に付きやすい。
<!POINT!> 独学のデメリット：わからないことが出ると、答えに辿り着くまでに、時間がかかることがある。わからないことが続くと、挫折する確率も高くなる。
＜②スクールを利用する＞
スクールを利用すれば、確実にスキルをアップさせる事ができます。
やはり、講師や、メンターに質問ができる事が一番のメリットでしょう。
挫折の原因は、わからないことが解決しなくて、「向いてない」と思ってしまうことです。そんな時に、ピンポイントで問題を解決できることは、継続的な学習の担保が取れるという事でもあります。
わからないと悩む時間、それを調べる時間を、授業料を支払って買うという考え方です。
時間はお金を支払っても、増やせない資産です。なので、スクールで時間を短縮ことで、相対的に時間を増やしていることになります。費用対効果は抜群です！
<!POINT!> スクールのメリット：講師への質問ができるため、問題解決のための時間が削減できる。挫折の可能性も低い。
<!POINT!> スクールのデメリット：料金がかかる。
＜WEBデザイン 挫折しそうな時の対処法！＞
挫折する可能性のある人は、全員です！！
特に、しっかりと学びたい。しっかりとスキルをつけたい。このように志が高い人は、逆に挫折しやすいかもしれません。
あなたは漫画を読みますか？
ある漫画を読んでいて、10巻あたりで、もう一度、1巻から読み直したくなって、１巻を見ると、
「あれ？ なんか 絵が変だ」
と、なった経験ありませんか？
これなんです。
漫画家さんはプロとして、連載がスタートした訳で、１巻の時点での自分のベストを出して発表しています。
さらに経験を積み重ね、10巻まで描き上げていくと、よりスキルアップし、表現方法が変わったり、表情の描き方のバリエーションが増えたりするわけです。
それは、10巻の時点での自分のベストです。
また、20巻の頃には、10巻の絵よりもさらに上達し、20巻の時点でのベストが生まれます。
このような感じで、プロであっても、プロになってからも成長するわけです。
ということは、プロではない、私たちが、全然うまくいかないといって悲観する必要など全くないわけというわけです！
行動している時点で、あなたは、すでにしていない人の先を行っています。
そういう気持ちで取り組めば、挫折との距離は遠くなりますね！
【まとめ】
WEBデザインについて、全体像を解説しました。
必要なものは、PCのみです。
専門用語がたくさんありますが、覚える必要はありません。
わかなければググりましょう！
自分で、答えを見つける、「検索力」を見つけましょう！
学習のツールや、学習の方法は、様々なサービス、書籍、動画が揃っています。
無料のコンテンツでも十分に学ぶことができる時代です。
一番大切なのは、継続！ これのみですね。
どんなやり方でも、いいので、辞めないことが成功への道です。