50代の方でもウェブデザインを気軽に学べるツールとして、Progateというプログラミング学習サービスがあります。どのようなウェブデザインを学べるのか気になっている方もいるでしょう。今回はProgateで学べるウェブデザインの概要をはじめ、具体的なコースの内容について解説します。

結論：ProgateでHTML/CSS/JavaScriptによる基礎を学び、コーディング学習サイトで実践的に学べ！

Progateでは、HTML/CSSやJavaScriptなどを基礎として学習できますが、案件獲得のためには、インプットだけでなく、アウトプットも必要になってきます。アウトプットの練習としておすすめなのが、Codestepや模写奉行などのコーディング学習サイトです。 与えられたデザインカンプを元に実際にコーディングを行うと、自分の足りない知識や不明点にぶつかります。自分で調べたり、専門家のサポートをもらい、壁を越えていく経験を積むことで案件を受ける訓練になり、自信もつくのでオススメです。

案件獲得のためには、クライアントに信頼してもらうためのポートフォリオの作成も必須ですので、併せて取り組むのを忘れないようにしてください。

Progateで学べるウェブデザイン*

Progateは、ブラウザ上でコードを書いてプログラミングを習得できる学習サービスです。

Progateでは、HTML/CSSやJavaScriptといったホームページ言語のコースが用意されており、ウェブデザインを学べます*。

HTMLでは、タグ（<>）という記号を使ってウェブデザインとして文字や画像を表示させます。CSSによって文字の位置を調整したり、色を装飾したりすることも可能です。

また、JavaScriptを学ぶことでウェブデザインに動きを加えられます。たとえば、ボタンにカーソルを合わせるとへこむような動的なデザインも演出できます。

なお、Progateではあくまでプログラミング言語でウェブサイトの骨格を作り、デザインを調整するためのスキルを学びます。

*厳密にはウェブデザイナーがデザインしたデザインカンプ（設計図）を元に、HTML/CSS/JavaScriptでコーディングして組み立てる内容の学習となりますので、ウェブコーディングと呼ぶのが正確な表現となります。

デザインカンプやパーツを作るデザインコースがProgate上は用意されていない点は把握しておきましょう。（2023年6月現在）

Progateでウェブデザインが学べるHTML＆CSSコースの詳細

ウェブデザインの基礎となるプログラミング言語がHTML＆CSSです。ProgateのHTML＆CSSコースでは、どのような内容を学習できるのでしょうか？

HTML＆CSSコースは、初級編・中級編・上級編・Flexbox編,Progate journeyに分かれています。

それぞれの学習内容について確認してみましょう。

なお、HTML＆CSSコースに関連するコンテンツとして、ウェブデザインの基礎を学べるProgate journeyも紹介するので、あわせてチェックしてみてください。

初級編

Progate：HTML & CSSコース

初級編では、HTMLやCSSの役割が理解できるようなカリキュラムになっています。

たとえば、タグで囲むことでウェブデザインを構築するHTMLの仕組みや、文字の色を変化させるCSSの仕組みなどをコーディングしながら確認できます。

コーディングの量も少なく初歩的な内容なので、ウェブデザインが初めての50代やITに不慣れな50代の方でも挫折する心配はないでしょう。

カリキュラムの学習目安時間は3時間50分です。

中級編

中級編では、見栄えを意識したウェブデザインを実現できるようなカリキュラムになっています。

たとえば、ヘッダーやフッターなどを意識したウェブデザインができるように、<header>と<footer>などのタグについて使い方を学習します。

カリキュラムの学習目安時間は4時間30分です。

上級編

上級編では、中級編で制作したウェブデザインにレスポンシブデザインを適用するカリキュラムになっています。

具体的には、パソコン以外のデザインに対応させるためのデザイン技術を習得可能です。レッスンでは、簡単なボタン操作でタブレットやスマートフォン別の表示結果を切り替えて確認するところから始まるので、学習内容のイメージが湧きやすくなっています。

カリキュラムの学習目安時間は2時間です。

FlexBox

FlexBox編は、CSSを用いたレイアウト方法の1つであるFlexBoxを学べるカリキュラムになっています。

たとえば、縦にカラフルに並んだ色を、横に並び替える方法を習得可能です。そのほか、並び向きを指定するだけでなく、折り返しを指定する方法にも触れられています。

便利なウェブデザインの表現を習得したい場合におすすめのコースです。

カリキュラムの学習目安時間は1時間です。

Progate journey

Progate：Webページを作ろう

Progate journeyでは、簡単なオリジナルのウェブデザインをローカル環境で作成し、インターネットに公開するまでの流れを体系的に学べます。

ウェブの仕組みをはじめ、HTML & CSSの意味やエディターの必要性、便利な開発検証ツールなどを解説しています。インターネットの基礎やコーディングに不安がある50代の方でも、ウェブデザインを始める意欲が湧いてくるでしょう。

Progateでウェブデザインを学習したあとのステップ

progateでウェブデザインを学習しただけでは実務経験を積めません。50代の方がポートフォリオや実績なしに案件の獲得を達成するのは、現実として難しいといえます。

自分の目的を達成できるよう、Progateでウェブデザインを学習したあとのステップについても確認してみましょう。

ステップ1．自分で開発できる環境を整える

Progateではサイト上でウェブデザインを行いますが、実務でそのままサイトを利用してコーディングをするわけにはいきません。自分のパソコンでProgateを使わずに開発できる環境を整えましょう。

具体的に必要な準備は下記の通りです。

・利用したいテキストエディタ（VSCodeがオススメ）とブラウザ（Google Chromeがオススメ）を選んでインストールする

・HTMLファイルとCSSファイルをまとめる作業フォルダを作成する

テキストエディタから作業フォルダにHTMLファイルとCSSファイルを作成して、HTMLファイルをブラウザで読み込ませるとウェブデザインを表示させられます。

ステップ2．サンプルコードを活用してウェブデザインを作る

Progateで取り扱ったサンプルコードを活用してオリジナルのウェブデザインを作成してみましょう。

具体的には、演習中に表示されたコードをマウスでドラックして選択してコピーし、用意したエディタに貼り付けて活用します。

貼り付けたあとは部分的にコードを調整して、色やサイズ、位置などを変更してみましょう。

ステップ3.   コーディング学習サイトで学習する

１）Codestep​​

https://code-step.com/

複数の練習サイトが用意されており、自分のレベルに合わせて、練習が可能です。デモやソースコードも見やすく、解説も準備されています。練習課題から見ていくと、手順や進め方なども理解しやすく、取り組みやすいでしょう。

２) 模写修行

https://moshashugyo.com/

デザインデータとして、FigmaとXDが用意してあり、どちらのツールでも対応が可能です。
実践に則した形で、スタイルガイドや指示書も用意してある。実際に依頼をされている想定で、スタイルガイドを確認をしながら、作り始めることができます。解説もしっかりとしており、必要なキーワードや学ぶべきことをしっかりと説明してくれています。

ステップ4．ポートフォリオを作成する

オリジナルのウェブデザインを作成するだけでは、趣味のレベルにとどまってしまいます。
ウェブデザインの仕事を獲得したいのであれば、スキルを証明するためのポートフォリオを作成しておきましょう。

基本的には自分が作成したいテーマでポートフォリオを作成してもよいです。ただ、会社から仕事を受注したいのであれば、業界に関するウェブデザインのポートフォリオを作成すると、活躍してもらえるイメージを持ってもらえるでしょう。

サイトを模写する場合には、著作権に注意しましょう。画像や文章などをそのまま使用する場合には、著作権に違反する場合がございます。練習サイトなどを利用し、サイトを作成する場合にも注意事項などで、著作権についてはご確認ください。

参照元：

https://liginc.co.jp/456044

https://morilynblog.com/inexperienced-coder-portfolio/

ステップ5．メンターを見つけてアドバイスを受ける

ポートフォリオを作成して企業やクライアントにアピールしても、実務の視点が欠けてしまうと内定や案件を獲得できない場合があります。

必要に応じてウェブデザインの現役エンジニアにアドバイスを受けることも大切です。実務の視点をふまえてポートフォリオを改善すれば、企業やクライアントに興味を持ってもらえる可能性が高くなるでしょう。

1.  MENTA
2. Coconala

1）MENTA（メンタ）

https://menta.work/

MENTA（メンタ）は、個別指導などのスキルシェアサービスを提供する人気のウェブサイトです。エンジニアやデザイナーなどの専門家に直接相談できるだけでなく、プログラミング学習・ポートフォリオ・エラー解決方法などスキルに関する質問に答えるメンターを探すこともできます。4,000名以上のメンターが登録している大規模シェアサービスサイトになります。

2）Coconala（ココナラ）

https://coconala.com/

Coconala（ココナラ）は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできる日本最大級のスキルマーケットです。デザイン、動画・サイト制作、お悩み相談など、プロや専門家に依頼できるサービスが整っています。個別指導サービスも複数提供されており、プログラミング学習についても金額・期間・サービスの提供形式など豊富な情報をもとに、比較検討しながら依頼できる人気のスキルマーケットです。

ステップ6   クラウドワークスのコーディング案件に応募する

初心者が副業でホームページ制作を請け負うなら、クラウドワークスといったクラウドソーシングサイトがおすすめです。案件が多く、比較的難易度が低く、作業量が少ない案件も存在してます。

案件を受注するには、ポートフォリオの提出を求められます。先に述べたポートフォリを作成し、何ができるかをクライアントに理解してもらい、お願いしたくなる相手になりましょう。依頼の案件や業界が似ていれば、クライアントに安心感を与えます。
最初は、案件に応募してもなかなか案件を獲得できません。案件獲得できなくても継続して応募し続けてください。継続できることこそがフリーランスで活躍できる条件なのです。

まとめ

Progateでは、プログラミング言語でウェブデザインを構築する方法を学習できます。サイトで気軽にコーディングできるので、50代の方でもスムーズにウェブデザインの学習に踏み出せます。

ただ、内定や案件を獲得できるスキルを習得するのは難しいです。Progateを利用したあとに実用的なウェブデザインを学びたいのであれば、現役エンジニアにサポートしてもらうために、プログラミングスクールに通うことも検討してみましょう。

ウェブデザインに必要なプログラミングを学習するならTechGardenSchoolがオススメ！

次に読みたい

未経験＆ポートフォリオ作品がない状態から50代初心者がウェブデザインやプログラミングを副業にするには？

受験と異なり、仕事は単に勉強をしただけで得られるものではありません。採用する側はこれまでの経験を重…

次に読みたい

50代からクラウドワークスで稼ぐ方法 ｜ポイントと注意点を解説

将来を見据えて、50代から副業で稼ぐ方法を確立しようと考える人は増えています。しかし、いきなり個人…

次に読みたい

未経験からでも大丈夫！50代からウェブデザインの勉強をはじめよう

これからの時代は副業や複業によって収入の柱を複数持つことが求められていくといわれています。しかしな…

セカンドキャリアに役立つ無料コンテンツもあります！