【課題付き】独学でWebデザイナーを目指すロードマップVol.2

こんにちは！まきすずきです。

前回に引き続き、未経験からWebデザイナーになりたい人に向けた、学習ロードマップをご紹介いたします！

私は普段、「MENTA」というサービスを通じて、多くのスクール卒業生の方や、子育てはじまったばかりのママ、主婦の方などに対して、メンターをさせていただいております！

その中で感じた「学習中のメンティーさまたちのリアルな声」を反映し、1人でもできるだけ実践しやすい形にまとめたものが、本記事でご紹介するロードマップです。

子育て中のママや主婦の方、そして副業でWebデザイナーを目指したいという方、スクールに通うよりも経済的なこちらのロードマップをぜひ活用してみてくださいね！

こちらの記事は、Vol.2ということで続きから記載しております。

ロードマップ目次

A4サイズで作っていますので、ダウンロードしていただくことも可能です！

＼ ダウンロードして壁に貼ってね！ ／

STEP03：LPデザインをつくろう

STEP 03 – 01：LPデザイン模写【課題】

Vol.1のページでは、バナーデザインの練習に取り組んでいただいたかと思います。

まずは、クラウドソーシングなどでもよくある案件であるLP制作からスタートしていきます。

LPとは？

ランディングページ（Landing Page）のことで、「（サイトに訪れた人が）初めに着地するページ」です。 近年、LPはリンクやWeb広告、検索エンジンなどから訪れたユーザーが最初に辿り着くページとして、キャンペーンや商品説明が詳しく描かれた構成となっており、そのほとんどは1ページで作られているものが主流です。これらを「LP」という名称で呼んでいます。

LPデザインは「1ページのみの案件」である場合がほとんどなので、短期間で高単価が狙いやすく、特に副業や子育て中のママにとっておすすめの制作案件です！

まずは、バナーでも行なったデザインの模写から練習してみてください。

LPデザインの模写をすることで、LPデザインの流れや、制作する上での工夫、制作時間だったりがイメージできてくると思います。

ちなみに、LPはボリュームにもよりますが、コンテンツが多いものだと仕上げるのに2日〜3日かかったりもするので、高単価の案件も獲得しやすいです！

LPデザイン模写のおすすめLPデザイン紹介

LPデザインの模写におすすめのデザインを集めました！よろしければ、こちらから練習デザイン選びの参考にしてみてください！

随時アップデートしておくので、細かくチェックしてみてくださいね！

＼ ぜひ挑戦してみてね！ ／

STEP 03 – 02：LPデザインをしよう

ここからは本格的に実践形式！LPの課題を用意しましたので、よろしければ挑戦してみてください。

note（ノート）

Webデザイナー向け【LPデザイン課題】Vol.02｜まきすず＊デザイナー まきすず（@makisu_design）です！（←Instagramが開きます） Instagramではwebデザイナーを目指す方にデザインの基本をバナーから学ぶを発信をしています！ ブログではWeb...

STEP 03 – 03：LPデザインをコーディングしよう

「STEP 03 – 02：LPデザインをしよう」で制作したご自身のデザインを、コーディングしてみましょう。

クラウドソーシングなどで仕事を受注する場合、デザインだけの案件ももちろんありますが、コーディングまでできると獲得できる案件の幅が広がるため、案件獲得のチャンスが増えます！

STEP 03 – 04：サーバーアップ方法を知ってLPデザインを公開

サーバーという言葉を聞いたことはあるでしょうか？

Webサイトを見るためには、サーバーに作ったファイルをアップしなければなりません（ファイルを設置するための「箱」のようなものと考えると、わかりやすいと思います）。

最近は、様々な技術が出てきており、自分のサーバーを所有しなくてもサイトを公開することも可能ですが、やっぱり基礎知識としてWebデザイナーになるならば知っておきたいところ！

詳しくはこちらの記事を確認いただいて、挑戦していただけたらと思います。

LPができたら、ポートフォリオに掲載したい・・・けど、今のこのデザインで大丈夫か不安・・・
そんな方の為に、ロードマップ用のメンタリングプランを用意しています！

STEP 04：スマホサイト基礎学習

STEP 04 – 01：スマホのデザイン練習

LP作りに慣れたところで、スマホデザインも練習していきましょう。

今はスマホでWebサイトを閲覧するユーザーの方が多いので、スマホの方が大切ではあり、スクールによってはスマホから作るいわゆるスマホファーストと言われているかもしれません。

ただ、わたしがPCから練習という流れにしたのは、PCの方がデザインする領域が大きく、デザインの基礎の練習としても最適、と考えているためです。

スマホのデザイン時のサイズはどうするか？

サイズについては、案件の概要に記載があったり、クライアントから指定があったりすることもありますが、「スマホの画面サイズのシェアを確認する」という方法も覚えておくと良いと思います。

StatCounterというツールで、現在のスマホ画面サイズのシェアを確認すると、「390×844」の画面サイズが20%と、最も高くなっています。（2023年7月）

スマホは「Retinaディスプレイ」により、解像度がより細かく鮮明になっているので、2倍のサイズで作成する必要があります。そのため、

390px（ディスプレイの横幅サイズ) × 2倍（Retinaディスプレイ）= 780px

780pxで横幅を作成します。

課題1：LPのデザインをスマホデザインにしましょう

「STEP 03 – 02：LPデザインをしよう」で作成したLPのデザインをスマホ用にも作り込んでみてください。

PCデザインができていれば、そこからスマホ化するのは比較的かんたんな作業になるかなと思います。

課題2：スマホファーストで課題にトライ

こちらではスマホのみのデザインで問題ないので、課題を用意いたしました。ぜひこちらの課題にも挑戦してみてください。

note（ノート）

Webデザイナー向け【LPデザイン課題】Vol.03｜まきすず＊デザイナー まきすず（@makisu_design）です！ Instagramでは、webデザイナーを目指す方にデザインの基本をバナーでお届けしています！ Webデザイナーになりたい人のためのロードマッ...

STEP 04 – 02：レスポンシブデザインの学習

レスポンシブデザインとは、ユーザーが使用しているデバイスの画面サイズに応じて、表示を最適化するデザインのことを言います。

現在、パソコンにタブレット、スマホと様々なサイズのデバイスがありますね。

その見ている人（ユーザー）にとって見やすいサイト表示に自動で最適化してくれるように実装することが必要です。

スマホでサイトを見ているのに、PCの画面のままだと見づらいという経験をお持ちの方も一昔前はいたかと思いますが、まさにこれは最適化されていない状態。

それが「スマートフォン表示に切り替えます」とすると文字サイズなど含め、見やすくなったという方もいるのではないでしょうか？（この切り替えの動作は正確にはレスポンシブ対応とは言いません）

レスポンシブ対応する場合は、Webサイトを開いた時点で、自動でデバイスに合った表示サイズにしてくれるようにコーディングする必要があります。

ここではまた再度デザインからコーディングまで、今度はレスポンシブにしたデザインに挑戦していただければと思います！

レスポンシブデザインの学習方法

レスポンシブデザインを学ぶには、Progateだと有料会員になる必要があるのですが、レスポンシブデザインは必須項目なので、ここでは課金をしてでもしっかりと取り組むことが大切です！

Progate「HTML & CSS 上級編」

レスポンシブデザイン課題

レスポンシブの学習が進んだら、早速実践です。

「STEP 03 – 02：LPデザインをしよう」「STEP 04 – 01：スマホのデザイン練習」で作成したLPデザインを、レスポンシブデザインにてコーディングしてみましょう！

STEP 04 – 03：jQueryの基本学習

いよいよここからjQueryのことについても触れていきたいと思います。

jQueryとは？

JavaScriptをのプログラムを、よりシンプルに簡潔に書けるようにした言語です。JavaScriptでは複雑な記述で数十行必要だった動きの実装が、jQueryによって数行程度で済むようになります。

JavaScriptの知識を得るのは一苦労ですが、jQueryによって簡単に動きをつけられるWebサイトができるようになりました！

jQueryの基礎的な学習方法としては、ProgateやUdemyがおすすめです。じっくりと基礎学習をしてみてください。

その後に、自分のサイトに挑戦してみると知識の定着が早いと思います！

まとめ

以上、ここまでがWebデザイナーとして基礎的なスキル習得のための学習の流れでした。

まずは本ページの内容までできると、副業でWebデザインの案件も獲得しやすくなりますし、子育て中のママとしては、「ママWebデザイナー」として十分なスキルと言えます！

次のページからは、どんどんサイトを作っていくようなイメージとなり、また案件獲得に必要な最低限のスキルになります。

続きは以下のVol.3に記載していますので、本記事の内容が完了された方は、ぜひ先に進んでみてください。

「最初に戻ってやり直したい」という方はVol.1から確認くださいね！