写真の撮り方、キレイに加工する方法を配信するWebデザイナーのブログ

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

Web design

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

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

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

こんにちは、よこ です。

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

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

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

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

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

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

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

[ もくじ ]

■① コーディングについて知る

 HTML/CSSを知る
 質問できる環境でHTML/CSSの実践をしよう
 ディベロッパーツールの使い方を知る

■② サーバーについて知る
 サーバーを開設(契約)してみる

■③ WordPressについて知る

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

■④ Webデザインの構成とレイアウトを学ぶ

 Webページの構成を学ぶ

■⑤ お仕事をする

 実案件で学ぶ

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

宣伝でもなんでもなく、私が今Webデザイナーとして活動できているのは【CodeBegin】のおかげです。できたら「ぜひCodeBeginに入ってください!」と言いたいところですが、基本的にはプログラミングコミュニティなので必ずしもみんなさまに合うともかぎらないです。

ですので、私がやってきたことを分解してこちらに書いていこうと思います。

① コーディングについて知る

①コーディングについて知る。デスクに座りつつHTML/CSSを独学している人

ホームページ制作のお仕事をするうえで、必ずやっておきたい学習になります。一般の方が手軽に作れるホームページとの差別化ができる、大きなポイントになるからです。

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

まずはどんなもんか、軽い気持ちで慣れていきましょう。

CodeBeginのロードマップは無料公開されているので、こちらを参考にやってみると良いと思います。

② サーバーについて知る

②サーバーについて知る。自宅でサーバーを開設している人

コツコツとロードマップを進めていても、どうしても手が止まってしまうときがありました。そんなときは気分転換に別のことをやっていました。

例えば、サーバーの契約をしてみたり、Photoshopをさわってみたり。

私の場合は、気分転換の時間であっても、なにかしらWebに関連することを進めるようにしてました。

Photoshopに興味のある方は参考にこちらの記事をどうそ

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

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

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

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

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

▼ エックスサーバー

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

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

WordPressをさわる

ロードマップを最後まで終えてサーバーも開設できたら、まずはWordPressインストールしてみましょう。

実際にさわってみることで「Wordpressって何?難しそう!」こんな気持ちから開放されます。

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

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

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

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

③ WordPressについて知る

③WordPressについて知る。WordPressを使い始めた人

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

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

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

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

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

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

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

④ Webデザインの構成とレイアウトを学ぶ

Webデザインを学習する人

Webページの構成を学ぶ

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

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

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

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

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

⑤ お仕事をする

Web制作案件を進めている人

案件で学ぶ

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

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

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

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

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

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

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

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

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

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

実案件でつまずいたら…

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

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

\ お気軽にどうぞです /