写真の撮り方、キレイに加工する方法を配信するサイト

完全未経験からWebデザイナーまでの道のり【実体験4ステップ】

How to ... Study

Webデザインやってみたい人

・場所を選ばず仕事ができるWebデザインをやってみたい
・何から勉強したらいいんだろう?
・自分にもできるかな?
・勉強はしてるけどデザイナーって名乗るのには気が引ける…

本記事ではこんな気持ちや疑問を持っている方に向けて、独学のステップをお伝えいたします。実際に私が未経験からWebデザイナーと名乗るようになった道のりです。

こんにちは、よこ です。

2020年5月から学習を始め、今ではフリーランスでWebデザイナーとしてお仕事をさせていただいています。

学習し始めのころはパン屋をやっていました。Web系の学習をしようと思ったこともなかった私です。

こんな私が学習開始〜案件を受けるまでにやっていたことをまとめました。

正直、座学は少ないです。

無駄な学習は最小限にしたいですよね。とにかく実際に手を動かして身につけていきましょう。

そして、「私はWebデザイナーです」と胸をはって言えるようになりましょう٩( ’ω’ )و

補足:Webデザインは、バナー制作、サムネイル制作、ホームページ制作、ランディングページ制作ととてもいろいろなお仕事がありますが、その中でもホームページ制作に絞ってロードマップを作りました。

完全未経験からWebデザイナーまでの道のり【実体験】

HTML/CSSを知る

ホームページ制作のお仕事をするうえで、必ずやっておきたい学習になります。

一般の方が手軽に作れるホームページとの差別化ができる大きなポイントになるからです。

しかし、ここはプログラミング自体がはじめての方はちょっと抵抗のあるところかもしれないです。黒い画面にアルファベットがビッシリ書いてある、そんな作業がメインになります。

まずはどんなもんか、下記の無料サービスをつかって軽い気持ちで慣れていきましょう。

  • YouTube
  • Progate(無料)

両方やらなくても、どちらか好きなのを選んでサクッとやってみるのが良いと思います。どちらも基礎なのでほぼ同じ内容です。

YouTube

私はの場合は下記のYouTube動画プレイリスト2本を見ました。

①はじめてのHTML

②はじめてのCSS

8時間×3日くらいでじっくりやっちゃいましたが、もうちょっとサクッとやってもよかったなと言うのが感想です。じっくりやっているつもりでも、このあとにやるWebサイトを作っていく学習になったときに、座学では何も身についてなかったなぁと感じたからです。

Progate

Progate(プロゲート)

Progate » HTML & CSS 初級編

ゲーム感覚でプログラミングを学ぶWebサービスです。
とっつきにくさがほぼゼロに近いので、ここでプログラミングに馴染んでいく方も多いです。

第1ステップとしては、なんとなくわかったら次の章へ行くのが良いと思います。HTML/CSSを覚えるためにくり返し動画を見たりProgateをやっても効率が悪いからです。

学習した先で、躓いていた部分の理解が追いつくことはよくありました。

Webデザイン独学学習した人

質問できる環境でHTML/CSSの実践しよう

HTML/CSSがなんとなくわかったら、即実践がよいです。手を動かしていきましょう!

ここから少しお金を出して、有料教材を使います。
Udemyの講座です。

いきなり本を買って読みながら進めるより、動画で説明を受けることですんなり入ってきます。わからないところの質問ができるというのも大きなメリットですね。

注意:Udemyは月に2〜3回、約90%OFFのめっちゃお得なセールをやるので、ぜひそのタイミングで購入してくださいね。

Udemyで最初にやりたい教材

特に、たにぐちまことさんのUdemyはめちゃくちゃ丁寧です。

コードを書くための内容はもちろんのこと、これからの学習に必須になってくる下記のことにまで解説してくれています。

・Udemyでの学習の仕方
・コードを書き込むエディタ設定
・ブラウザの選定

これから学習をスタートする方にぴったりです。

float、Bootstrap、JavaScriptは「ふむふむ、こんなことができるのね」という程度に理解するのが良いと思います。100%理解しなくても大丈夫です。

Webデザイン独学学習した人

実際にサイトが作れる教材

実際にページを制作の一通りが学習できます。2021年の最新版になっているところもありがたいですね。

・画面幅によってレイアウトが変わるレスポンシブ

・CSSが有効になる書き方と優先順位

については理解しておくことをおすすめします。お仕事でめっちゃ使います。

Webデザイン独学学習した人

ディベロッパーツールの使い方を知る

ウェブブラウザには、そのページを作っているコードを見れるツールが備え付けられてます。これの使い方を知っておくと、気になったページがどんな風に作られているのかがまるっと見えちゃいます。

コードを正しく書いているつもりなのに「あれ?反映されない。。」ってときにもめっちゃ使います。

使いかたはこちらを見ておくとよいです。

しまぶーさんのIT大学YouTubeはHTML/CSSの説明がとてもわかりやすいです。こちらの動画の他に、これまで躓いていた部分を復習してみると理解が深まるかもしれません。

Webデザイン独学学習した人

サーバーを開設(契約)してみる

さて、学習がひと通り済んだら、作ったページを公開するための準備をしましょう。

自分のドメインとサーバーを持っておくと、デモサイトの制作でとても使えるので便利です。実務にはいるとお客さんのサーバーの設定や管理をすることが多いので、あらかじめサーバー操作に慣れておくとスムーズですね。

まずは自分で開設(契約)してみて、サーバーってどんなもんなの?みたいなのを知っておきましょ。契約時の費用はかかりますが、月々1,000円ちょっとなので稼げたらすぐ取り戻せます。

丁寧な公式マニュアルがあるし、利用者が多く、困ったときの解決方法がネットで検索しやすいエックスサーバーが個人的にはおすすめです。

\ 今ならキャンペーン中! /

▼ エックスサーバー

※プランは1番安いものでOKです。
※ドメインは自分が使いたいものにしましょう。

レンタルサーバーはもっと安いものもありますが、「速さ」「安定性」で選ぶのが良いと思います。
他の激安レンタルサーバーは別のアカウントとの共用サーバーであることが多く、共用している誰かがサーバーの容量をめちゃ使うと、自分が使用できる容量が少なくなってしまったりします。また、ウィルス感染のリスクも低くなりますね。

WordPressをさわる

サーバー開設したらまずはWordPressインストールしてみよう!

「Wordpressって何?難しそう!」こんな気持から開放されます。

サーバーから『WordPress簡単インストール』ができます。ポチポチッとできちゃいます。

サーバー管理画面の下記やじるしのところからインストールすることができます。
エックスサーバー管理画面

めっちゃざっくりな説明ですが、次のステップで全部解説します。

Webデザイン独学学習した人

デモサイト制作から納品までの工程を知る

サーバーの準備ができたら、お仕事でどんなことをしているかを把握しましょう。私がいつも行っている一連の流れを動画でまとめました。

こちらは、CodeBegin(プログラミングコミュニティ)内にも置いている教材になります。

有料ではありますが、下記のすべてがまるっとわかります。

  • デモサイト構築前のサーバー操作
  • WordPressの手始め
  • 制作が爆速になるSnow Monkeyの使い方
  • 役立つデザイン知識
  • 制作物の納品方法

これまで案件を繰り返し、無駄だとおもったところはとにかく省いて超シンプルにまとめています。
初案件への1歩をためらっている方へ作りました。これを1度見ていただけたら、きっと不安はなくなり自信を持って案件へ踏み出せませす。

Webデザイン独学学習した人

Webページの構成を学ぶ

こちらについては、完全独学&無料で勉強できます。学習方法についてはこちらの記事で解説してます。

Webデザイナーとしてお仕事をしたい方は、一度こちらの勉強方法をやってみると学びがたくさんあると思います。今までの何気ないネットサーフィンががすべて学習になるような内容になっています。

ここまできたらもうWebデザイナーとして名乗っても全然大丈夫です。とはいえ、まだ仕事もしていないのに名乗りにくい気持ちもあるかと思います。

胸を張ってWebデザイナーと言えるように、案件を獲得して実際にお仕事をしましょう!私流の案件のとり方は次のステップで書きます。

Webデザイン独学学習した人

案件で学ぶ

前の章まで一通りを勉強しつつ、実際のお仕事で学んでいくのが1番効率的です。

「え、こんなに早く仕事しちゃっていいの?」と思うかも知れません。

でも、大丈夫。実際の会社でも新人にいきなりお仕事を任せる会社も少なくありません。

誰だって最初は初めてです。仕事のやり方はを実際の仕事を通して学ぶのが近道です。(何度も転職して新しい仕事をそのつど覚えてきた私の経験からです。)

問題にぶつかったらその度にググって調べつつ、どのように解決していくか模索することが学びになります。

お仕事の受注は、主に下記4つかと思います。

  • 友人からの案件
  • 友人の紹介からの案件
  • クラウドソーシング
  • 制作会社からの案件

下の2つは営業のノウハウが必要なので、まずは上の2つがおすすめです。

ぜひ学習段階から、「私、Webサイト作れるよ。誰か作りたい人いたら教えてほしいな。」とゆるく伝えておきましょう。

これまで培ってきたあなたの信頼が案件に繋がります。

実案件でつまずいたら…

実案件はとにかく調べて進むことになりますが、実際、つまずいてどうしようもなくなることがあるかと思います。

そんなときはいつでもご相談くださいね。

\ お気軽にどうぞです /