副業で毎月の収入を少しでもアップさせたい！中高年の皆様。
WebデザインやWeb制作をやってみようかな？ と考えたことありませんか？
私、のりっぺOTは実際にWebスキルを勉強してみて、中高年の副業に「Webデザイン・Web制作」をおすすめしています。
ここで詳しく書いています↓
「【40代・50代の副業】中高年のためのプログラミングの始め方｜Web制作からがオススメの理由」
Webスキルの勉強を始める前に、獲得するべき全体像を知っておくことが大切ですね。
さっそく始めてみたけど、思っていたのと違っていたら残念ですし、
自分に合っている仕事かどうか早い段階で判断したい。
ですよね。
- これからWebスキルで副業を始めたい！
- WebデザインやWeb制作スキルって自分が出来そうか内容を知りたい！
- そもそもどんな勉強をしたら良いのか知りたい！
これからWebデザイン・Web制作を始めたい方、
どんな勉強をしていくのか内容を知りたい方へ、
勉強すべきスキルとロードマップ、独学で勉強できるサイトを紹介します。
Webデザインに必要なスキル
- Webデザイン（デザインの基本、ソフト操作adobe photoshop,Illustrator,XDなど）
- Webコーディング（html,css,JavaScript）
- CMSについて WordPressなど（PHP、テーマの使用など）
- サーバーについて（サーバーアップ方法、FTP操作など）
これらを勉強していく必要がありますが、
Webデザインの仕事内容によって必ずしも必要ではないものもありますので、
自分がどんな仕事をしていくのかをある程度決めてから勉強を始めると良いです。
この記事ではWebデザイン・Web制作に必要なスキル全体を網羅できるように、学習できるサイトを紹介します。
おすすめロードマップ
- progateやドットインストールでhtml,cssのイメージをつかむ
- VScodeなどプログラムを書くソフトを使ってみる
- 簡単なWebサイトを作る（模写など）
- JavaScript、jQueryを勉強、自分の作ったWebサイトに使用する
- WordPressを使用してみる（ローカル環境でも可能）
- WordPressのテーマの中でカスタマイズする
- PHPを使ってWordPressに自分のサイトをテーマに入れる（投稿できるようにする）
- デザインの勉強
- ポートフォリオ（自己紹介サイト）を作成
- サーバー契約、サーバーへアップ
ざっくりとしたロードマップです。
一つのWebサイトを制作するための必須内容です。
デザインのみの仕事の場合は「８．デザインの勉強〜」を中心に見て下さい。
ロードマップの流れに沿って、参考サイトを紹介します。
それでは、まずWebデザインスキルの全体像を確認しましょう。
Webデザインスキルを知っておこう
はじめに書きましたが、Webデザインに必要なスキルは
- Webデザイン（デザインの基本、ソフト操作adobe photoshop,Illustrator,XDなど）
- Webコーディング（html,css,JavaScript）
- CMSについて WordPressなど（PHP、テーマの使用など）
- サーバーについて（サーバーアップ方法、FTP操作など）
大きく分けて、Webデザイン、Webコーディング、WordPress、サーバーアップの、４つになります。
その他、Webサイトを制作する際に、「ライティング」「キャッチコピー」を求められることがありますが、少し幅が広くなり過ぎてしまうことと、クライアント様側で文章は用意している場合も多くあるので、ここでは割愛させてもらいます。
また、デザインを作成する前に、クライアント様との「ヒアリング」が非常に重要になります。Webスキルのイメージで、部屋で黙々とPCを触っているというイメージを持たれがちですが、実はコミュニケーションが上手くないとクライアント様の求めているデザインを作成できません。
コミュニケーションスキルはとても重要です。コミュニケーションスキルについてもここでは割愛しますが、普段からメールの返信をできるだけ早く返すなど、レスポンスを意識するなど、コミュニケーションスキルを身につけていきましょう。
それではWebデザインについて、参考になるサイトを紹介します。
Webデザイン
Webデザインってセンスが必要だと思われがちですが、芸術とデザインは似ていて別物と言われています。センスとかではなく、デザインは知識と技術でできるスキルなのです。
デザインには基本の考え方がありますので、まずはデザインの基礎の勉強をしてみましょう。
Webデザインの４つの原則
- 近接
- 整列
- 反復
- 対比
これらのデザインについて勉強したい方はこちらがおすすめです。
→chot. design-毎日ちょっとずつデザインを学ぼう
ここでは、デザインを仕事にする際には知っておいた方が良い、AdobeのPhotoshopやIllustrator、XD（最近はFigmaかも）などの使い方も学べます。
ぜひこのサイトを一通り勉強しておきましょう。
Web制作ではなく、デザイナーを目指す方へ参考になるサイトはコチラ
デザイナーでも色々種類があることが分かりますし、参考サイトの紹介もありデザイナーだけでなくWeb制作にも役に立つ情報が一杯です。
仕事を始める前にポートフォリオ（自己紹介サイト）を作る必要があるんですが、いざ一からサイトをデザインするとなると中々難しいものです。
そこで、自分の好きなデザインのサイトを参考にして自分なりにアレンジしていくことをおすすめします。そんな時にデザインを集めたサイトがあるんです。
こちらもおすすめです。
また、Webサイトのメインカラーやアクセントカラーなど基本３色を使用して作成していきますが、Webサイトのイメージにあったカラーの色見本で参考になるサイトです。
→ColorーTrends＋Palettes::COLOURlovers
→カテゴリー別配色アイデア100｜Webクリエイターボックス
カラーを選択していくときに比較検討していく際にAdobeのカラーホイールページもよく使用します。例えば、メインカラーがある程度決まっていて、アクセントカラーなどを決める時など重宝します。
→Adobe Color｜カラーホイール、カラーパレットジェネレーター
Webコーディング
WebコーディングではHTMLで文字や項目セクションなどの構成を作成し、CSSで装飾していきます。さらにJavaScriptで動的な動きを構成していきます。
まずは基本的なHTMLやCSS、可能であればJavaScriptまで学習できるとWebサイトの幅が広がります。
基本が学習できるサイトは下記が有名です。
しっかりと学習するには多少お金がかかりますが、書籍を購入するのと同じ感覚で多少の出費は必要です。有料コースもやっておきましょう。コースはHTML./CSS、JavaScriptはやっておく必要があります。
WordPressを勉強していくとPHPを扱いますが、JavaScriptが分かれば、PHPも理解できるはずですので、PHPは後からでも大丈夫でしょう。
上記から更にレベルアップを目指して、より実践的な内容を学習できるサイトがコチラ
Udemyは様々な動画が販売しています。セール時に購入すると数千円でしっかりとした教材が手に入るので、セール期間を待って購入しましょう。
→Zero Plus Media おすすめです
Zero Plus Mediaでは無料で、ほぼ実践レベルの内容が用意してあります。中でもWeb制作スキルロードマップはステップ１〜５まであって、HTML/CSS、Javascript、Wordpress、デザインまでほぼ網羅した内容が学習順に並んでいます。有料レベルの内容ですが、無料です！
初めからこのサイトの内容が理解できるなら、ここだけで副業レベルのスキルが獲得できます。
Zero Plus Gate 完全無料30日で副業レベルのWebスキル
たった30日で副業スキルを獲得。先着30名まで！
WordPress
WordPressはテーマやプラグインを使用することで、誰でも簡単にサイトを作成・編集・投稿ができるCMS（ネット上のアプリみたいなもの）です。
テーマを使ったデザインの範囲内でのWeb制作であれば、コーディングスキルは必要ありません。
プラグインと言って、色々な機能を追加することで、お問合せページが簡単に作成できたり、写真をスライドすることもできます。
WordPressは世界で多くの使用者がおり、ネット上で検索することで大抵のことは分かります。
簡単なカスタマイズ程度であれば、ネット上にある情報をコピー＆ペーストでもできてしまいます。
でも、HTML/CSSのスキルがあればサクサクとカスタマイズできますね。
WordPressの学習サイトのおすすめは
その他分からないことはネット検索してみましょう。
→Udemy（ユーデミー）でもWordpressの教材たくさんありますね。
サーバーアップ
サーバーアップする際の全体的なイメージを持つためにはコチラのサイトはいかがでしょう。
自分のPCからサーバーへファイルをアップロードする流れがわかるかと思います。
→LISKUL｜【初心者必見！】ホームページ公開の流れと公開前に準備しておきたいこと
また、FTPと言って、自分のPCのデータをサーバーにアップロードするソフトがあります。
そのFTPについてのサイトです。無料のおすすめFTPなど紹介してあって参考になります。
→ホームページファイルをサーバーにアップロードしよう（FTP)
私、のりっぺOTはサーバーをconoha Wingを利用していて、conohaへログインすると、そのサイトからファイルに直接アクセスできるので、FTPソフト無しでアップロードできます。
ただ、管理するサイトが多くなるとFTPソフトで管理するとサバーを切り替える工程が少なくなって楽になると思います。
のりっぺOTはFileZillaというFTPソフトを使用しています。
→FIleZilla 左のダウンロードから自分のPCのOSにあったバージョンをダウンロードしましょう。（自動でOSを判別してくれるみたいですね）
ロードマップに沿った参考サイト
Webデザイン・Web制作スキル全体を習得するには多くの内容を効率よく学習していく必要があります。
勉強を始めたばかりの時はモチベーションは高いので、どんどん勉強しようとして、あれこれ目移りしてしまって、同時に色々な勉強を始めてしまいがちです。
モチベーションが高いのは良いことなのですが、いっぺんに色々始めてしまうと結果的に習得が遅くなります。
更に、一つ一つが中途半端になりやすく、後半になるとモチベーションの維持が大変です。
自分なりに段階を作ってステップアップするような学習方法がおすすめです。
のりっぺおすすめのロードマップ案です。勉強を進めていきながら自分なりにアレンジしてステップアップしてみて下さい。
おすすめロードマップ
- progateやドットインストールでhtml,cssのイメージをつかむ
- VScodeなどプログラムを書くソフトを使ってみる
- 簡単なWebサイトを作る（模写など）
- JavaScript、jQueryを勉強、自分の作ったWebサイトに使用する
- WordPressを使用してみる（ローカル環境でも可能）
- WordPressのテーマの中でカスタマイズする
- PHPを使ってWordPressに自分のサイトをテーマに入れる（投稿できるようにする）
- デザインの勉強
- ポートフォリオ（自己紹介サイト）を作成
- サーバー契約、サーバーへアップ
１．progateやドットインストールでhtml,cssのイメージをつかむ
まずはWeb制作の基本となるHTML/CSSを勉強しましょう。
数千円の出費は必要経費、自分への投資としてサクサク勉強を進めていきましょう。悩んでいると時間がもったいないです。のりっぺは課金をしばらく悩んで、結局は書籍を購入したりして出費してました。
この２サイトは有名ですね。サクサクこなして一通りやってしまいましょう。
当時のりっぺはこのコードプレップは知りませんでしたが、調べたところやってみる価値ありそうです。
まずは基本を知っていれば良いです。コードを覚える必要は無くて、こんなコードがあるんだ位で良いです。実際にWebサイト制作時はネット検索しながら制作します。ざっくりとしか覚えていなくても大丈夫です。まずは全体を把握することが大切なんです。
２．VScodeなどプログラムを書くソフトを使ってみる
Progateではサイト上でコードを記述しながら学習できるので、VScodeのようなエディタをインストールせずに勉強できますが、
自分のPCで実際にWeb制作環境を構築してみましょう。
ドットインストールの準備編で、インストールや設定など説明してありますので、準備編からしっかりやっておくと良いです。
→VScodeエディタをダウンロードしよう（WindowsOS編）
VScodeのダウンロードページはコチラです
自分のPCのOSにあった物をクリックしてダウンロードしてインストールしましょう。
３．簡単なWebサイトを作る（模写など）
HTML/CSSの基本を一通り終えたら、すぐにWebサイトを作ってみることをおすすめします。
どんなに簡単なサイトでも一度やってみると世界が広がります。
初めの一歩が大変ですが、ネットで検索しながらでも、コードを移してでもまずは一度制作してみましょう。模写修行というサイトがおすすめです。
デザインのみ配布の教材であれば自分の制作実績に使用出来るそうなので、挑戦してみてはいかがでしょう。
副業を始めるときにポートフォリオは必要で、更に実績まであると安心です。
→模写修行
模写修行のサイトデザインとコーディングは実案件レベルです。
高度なコーディングを学習できます。
４．JavaScript、jQueryを勉強、自分の作ったWebサイトに使用する
いわゆるプログラミングと言われるものです。
ここでつまずく人が多くなるかと思います。のりっぺはProgateで学習しましたが、結局使い方が分からず一旦プログラミングは諦めていましたが、スクールに入ってから簡単なコードであれば使えるようになりました。
理解さえできれば決して難しくないので、独学でも可能かと思います。
ただ、JavaScriptが使えなくてもWebサイトは制作できるんです。より高度なサイトを作りたい方や、副業としてスキルを学習するなら基本は覚えて、簡単な実装はできるようになる必要があります。
このサイトで一旦どんなものか学習してみましょう。挑戦してみて分からない場合は諦めず、スクールへ飛び込んでしまうことをおすすめします。
40代・50代の中高年になるとスクールも限られてきます。入校はできても皆20代で30代はおじさん・おばさんの世界です。
中高年を対象としたスクールもできているようですし、中高年の卒業生が実際に活躍しているスクールもあるので、調べてみましょう。
中高年の卒業した実績があるスクールを調べてみました。
紹介記事はこちら↓
５．WordPressを使用してみる
WordPressはコーディングが出来なくてもテーマを使用することでデザインを変更したり、投稿できるネット上にあるソフト（アプリみたいなもの）です。
ここまで学習してきたコーディングから少し離れて、Wordpressがどういうものか使ってみることをおすすめします。
この段階でなくても、もっと早い段階で使ってみても良いです。
コーディングとは違ったWebサイトの運営方法などのスキルも学習範囲に入ってきます。
可能であれば、サーバー契約して自分のブログを作ってみるのが一番早いです。
テーマってこんな感じで使うんだ・・・
投稿って出来るけど、固定ページとは別なんだ・・・
とか
Web制作する上で、Wordpressの仕様というか、そのままで出来ること・出来ないことなどが分かります。ここが分かると、案件を受ける時にどの程度のスキルが必要な案件なのか？がなんとなく分かるようになります。
サーバー契約までは今はまだ不安って方は、ローカルでサイトを構築できる方法がありますので、このソフトを使用して試してみることも可能です。
Localをダウンロードしてインストールして設定しましょう。環境構築の参考サイトのリンクを貼っておきます。
→【画像付き】Localを使ってサクッとWordPressの環境構築をしよう｜Zero Plus Media
ローカル環境で作業する場合はWordPressの設定の中の表示設定にある、検索エンジンでの表示をしないようにチェックを入れておきましょう。
検索にインデックスされないよう、設定でチェック入れておきましょう。
６．WordPressのテーマの中でカスタマイズする
WordPressのインストールが出来たら、無料のテーマで良いので色々デザイン変更したり、テキストを変更したりいじり倒しましょう！
オリジナルテーマをアップロードするには、PHPのコードを記述しないと表示されないので、まずは無料テーマを使用してのカスタマイズがおすすめです。
そこでカスタムする方法を覚えていきます。
HTML/CSSで学習した、Class名を付けて、CSSの装飾を追加してみると、サイトでは変更できていることが分かります。
→【コピペでデキる】WordPress基本カスタマイズ〜入門編〜｜カゴヤのサーバー研究室
PHPの説明も入っているので少しレベル高め？かもしれませんが、知っておくべき内容ですので読んでみてください。コピぺできるようになっているのでそのままコードが使えます。
Webサイトを見るブラウザは Google Chromeを使用しましょうね。
サイト上で右クリックして「検証」を選ぶと、サイトのHTMLデータが確認できるようになります。その中のClass名を確認して、カスタムCSS上で変更しても装飾を変更できます。
７．PHPを使ってWordPressに自分のサイトをテーマに入れる（投稿できるようにする）
いよいよ自分で作ったHTML/CSSやJavaScriptなどデータファイルをWordPress上に表示できようにPHPのコードを入れていく作業になります。
HTMLをパーツ（ヘッダー、メイン、フッターなど）に分けて、それぞれのページ毎で呼び出して表示するというイメージです。
PHPで記述する内容はほぼプログラミングです。
JavaScriptで既にプログラミングはダメーって拒絶している人は、大変かもしれません。
WordPressに変更する場合は、内容はよく分かっていなくてもルール通りに記述できればほぼOKです。JavaScriptの基本学習を乗り越えてきたなら出来るはずです。挑戦してみましょう。
WordPress化が出来るようになると、クラウドソーシングなどでの案件の幅が広がります。ぜひ習得しておきたいスキルです。
PHPが分からない・・・WordPressを使わない方法はないの？
という方は、
→LPのような追加で投稿する必要がないサイトの場合は、VScodeで書いたHTML/CSSコードのファイルをサーバーへアップロードする方法もあります。
その場合、ちょっとテキストを変更する場合でも直接HTMLやCSSなどを書き換える必要があります。
WordPressのカスタマイズやカスタム投稿のスキルを持つと副業案件の幅が拡がります。
８．デザインの勉強
Webデザイン・サーバーアップについては、上記に紹介してあります。重複した内容ですので、必要ない方は読み飛ばしてください。
Webデザインってセンスが必要だと思われがちですが、芸術とデザインは似ていて別物と言われています。センスとかではなく、デザインは知識と技術でできるスキルなのです。
デザインには基本の考え方がありますので、まずはデザインの基礎の勉強をしてみましょう。
Webデザインの４つの原則
- 近接
- 整列
- 反復
- 対比
これらのデザインについて勉強したい方はこちらがおすすめです。
→chot. design-毎日ちょっとずつデザインを学ぼう
ここでは、デザインを仕事にする際には知っておいた方が良い、AdobeのPhotoshopやIllustrator、XD（最近はFigmaかも）などの使い方も学べます。
ぜひこのサイトを一通り勉強しておきましょう。
Web制作ではなく、デザイナーを目指す方へ参考になるサイトはコチラ
デザイナーでも色々種類があることが分かりますし、参考サイトの紹介もありデザイナーだけでなくWeb制作にも役に立つ情報が一杯です。
仕事を始める前にポートフォリオ（自己紹介サイト）を作る必要があるんですが、いざ一からサイトをデザインするとなると中々難しいものです。
そこで、自分の好きなデザインのサイトを参考にして自分なりにアレンジしていくことをおすすめします。そんな時にデザインを集めたサイトがあるんです。
こちらもおすすめです。
また、Webサイトのメインカラーやアクセントカラーなど基本３色を使用して作成していきますが、Webサイトのイメージにあったカラーの色見本で参考になるサイトです。
→ColorーTrends＋Palettes::COLOURlovers
→カテゴリー別配色アイデア100｜Webクリエイターボックス
カラーを選択していくときに比較検討していく際にAdobeのカラーホイールページもよく使用します。例えば、メインカラーがある程度決まっていて、アクセントカラーなどを決める時など重宝します。
→Adobe Color｜カラーホイール、カラーパレットジェネレーター
デザインの勉強は時間がかかります、基本を守りながら経験を積んでいき学習を継続しましょう。
SEO（Search Engine Optimization「検索エンジン最適化」)やUI（ユーザーインターフェイス）デザインなど、さまざまな要因を加味して考えていくことになります。
少しずつデザインについて深めていきましょう。
９．ポートフォリオ（自己紹介サイト）を作成
Webスキルを獲得して、いざ仕事を取ろうとする時（いわゆる営業）に必ず必要になるのが、ポートフォリオ（自己紹介サイト）です。
Webスキルには明確な技術レベルを図れる数値がありません。
ですので、仕事を依頼する側からすると、
- どの程度の技術を持っているのか？
- 経験はあるのか？
ということを確認したいですよね。
それを伝えるためのポートフォリオ（自己紹介サイト）なのです。
ポートフォリオは自己紹介サイトだけでなく、過去に制作したサイト（ショップサイトでもコーポレートサイトでもなんでも）をまとめて紹介して、自分のスキルを視覚的に伝える物です。
出来るだけスキルを駆使して作成しましょう。
本来は実案件で制作したWebサイトが望ましいのですが、これから案件獲得の営業を始める場合は無いですので、架空の案件を形にしてポートレートに乗せても良いです。
架空の案件でも、しっかりとした案件定義をしてサイトのコンセプトなど説明できるような内容にしましょう。
デザインから作成するのが難しい場合は「模写修行」のデザインのみのデータのコーディングであれば実績に載せてもOKとのことなので挑戦してみてはどうでしょう。（著作権などホームページを確認してください）
色々な人のポートフォリオを見てみたいですよね
ピンタレストで「ポートフォリオ」で検索すると出てきます。
参考にしてみてください。
スクールの多くはカリキュラムの中で最終的にポートフォリオを作成するところまでフォローしています。
自分への投資と思ってスクールへ入ることも検討しましょう。短期間にスキル獲得してポートフォリオという実績を作ることができます。
おすすめスクール→Zero Plus（フリーランス特化型スクール）
10．サーバー契約、サーバーへアップ
サーバー契約・サーバーアップに関する内容はスキル別で紹介した内容と重複します。必要ない方は読み飛ばしてください。
サーバーアップする際の全体的なイメージを持つためにはコチラのサイトはいかがでしょう。
自分のPCからサーバーへファイルをアップロードする流れがわかるかと思います。
→LISKUL｜【初心者必見！】ホームページ公開の流れと公開前に準備しておきたいこと
また、FTPと言って、自分のPCのデータをサーバーにアップロードするソフトがあります。
そのFTPについてのサイトです。無料のおすすめFTPなど紹介してあって参考になります。
→ホームページファイルをサーバーにアップロードしよう（FTP)
私、のりっぺOTはサーバーをconoha Wingを利用していて、conohaへログインすると、そのサイトからファイルに直接アクセスできるので、FTPソフト無しでアップロードできます。
ただ、管理するサイトが多くなるとFTPソフトで管理するとサバーを切り替える工程が少なくなって楽になると思います。
のりっぺOTはFileZillaというFTPソフトを使用しています。
→FIleZilla 左のダウンロードから自分のPCのOSにあったバージョンをダウンロードしましょう。（自動でOSを判別してくれるみたいですね）
ブログをスタートする際にサーバー契約して、WordPressも同時にインストール。
ブログ記事を投稿することなどの経験がスキル学習に役立ちます。
私はWebスキル学習前に趣味のブログを始めてみました。その経験があると学習するときにイメージしやすいです。
まとめ
Webデザイン・Web制作に必要なスキルとそれを習得するためのロードマップを紹介し、それぞれの参考になるサイトを紹介しました。
Webサイトを一から制作できるスキルを想定してロードマップを作りました。
並べてみると多くのことを学習する必要があるように感じますが、覚えることはあまり無く、仕組みを理解しておくことでその都度検索して調べてなんとかできるスキルです。
覚えなくても良いので、記憶力に自信が無い中高年にはおすすめのスキルだと思います。
ぜひ挑戦してみましょう。
Webデザイン・Web制作スキル
- Webデザイン（デザインの基本、ソフト操作adobe photoshop,Illustrator,XDなど）
- Webコーディング（html,css,JavaScript）
- CMSについて WordPressなど（PHP、テーマの使用など）
- サーバーについて（サーバーアップ方法、FTP操作など）
おすすめロードマップ
- progateやドットインストールでhtml,cssのイメージをつかむ
- VScodeなどプログラムを書くソフトを使ってみる
- 簡単なWebサイトを作る（模写など）
- JavaScript、jQueryを勉強、自分の作ったWebサイトに使用する
- WordPressを使用してみる（ローカル環境でも可能）
- WordPressのテーマの中でカスタマイズする
- PHPを使ってWordPressに自分のサイトをテーマに入れる（投稿できるようにする）
- デザインの勉強
- ポートフォリオ（自己紹介サイト）を作成
- サーバー契約、サーバーへアップ
最後までありがとうございました。
