アラフォー会社員がWeb系の副業をオススメするブログ

Web制作スキルを独学で知識0から身につける学習ロードマップ【副業案件受注できるスキルセット】


Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45
この記事に書いてあること
Web制作スキルを知識0から独学して身につけるための方法を全公開
 
サイト運営者 ユズト
「独学」で企画・設計からWeb制作、Webデザインのスキルを一通り身につける方法をまとめました! 『本業は普通の事務職サラリーマン。アラフォーから副業開始し月10万円以上の収益化を継続。副業収益化の方法や副業継続の秘訣を語ってます』

 

 
Web制作を始めようと考えている人
副業でWeb制作してみようかと思うけども何からはじめてどこまで勉強すればいいんだ?
 

 

Web制作って独学でもスキル習得できます。

スクールの学費に10万円以上のお金をいきなり使うのもなぁ

まだ自分ができるかも想像つかないし

とりあえずやってみたい、そう思ったらまず独学です。

 

ただ、スクール行けば

カリキュラムがある」「講師がいる」「仲間ができる」

があるから流れに沿って勉強すればいいし、迷ったら人に聞けば良いわけです。

でも独学は自分でカリキュラムを考えて、自分で卒業制作物を決めて作りきって、その後の動きも考えないといけない。

訳もわからず0からやみくもに勉強するには効率が悪い。

 

僕はテックアカデミー(オンラインプログラミングスクール)、デジハリStudio(通学制Webデザインスクール)に行って、

コーディング、WordPress、Webデザイン、UI/UX、Webディレクション

などのWeb制作に関わるスキルを一通り学習してオリジナルデザインのWebサイトを作りました。

 

その経験を元に

独学だったらこの流れで勉強すればいい

というロードマップを作ってみよう、と考えました。

 

独学で時間を無駄にしてしまうことのないようこの記事が参考になれば幸いです♪この記事気合入れて作ったら3万文字くらいになったんで気になるところだけ目次から飛んでみてもらってもOK!

Web制作スキルを独学で0から身につけて副業案件受注するロードマップ

Webサイトを0から制作するロードマップは以下の流れでスキルを習得していきます。

  • 企画スキル →Webサイトの目的とターゲットを決める
  • 設計スキル →ページ構成(サイトマップ)とレイアウト設計図(ワイヤーフレーム)を作る
  • デザインスキル →Webサイトのデザインを制作する
  • コーディングスキル →完成デザイン通りにブラウザ表示させる
  • サーバーの知識 →「サーバー」にコーディングデータをアップしてインターネットから見れるようにする

検索エンジンで「Web制作 独学」と検索するとよく稼げるスキルと紹介されているのは、

  • コーディングスキル →Webサイトをデザイン通りにブラウザで表示できるようにする

だけです。

 

このコーディングスキルがあれば副業可能

とりあえずコーディングだけできればいいよ、という人はコーディングのところだけ読んでください。

 

でもですよ、Web制作の一通りの流れ知っておいた方がいいと思いませんか?

Web制作ってコーディング案件だけ受注するとしても、その前後で何をしているか分かっているのといないのでは発注者側の信頼も変わるし、自分が何をすべきかも明確になります。

なので、一通りこの記事では書いていきます!

Web制作独学のメリットデメリットを補足します

「独学」のメリットデメリットを補足する記事です

この記事内容は「独学」のメリットデメリットを補足するために作りました。

独学メリット 独学デメリット

①費用が安価ですむ

 

②自分のペースで勉強でき、自分が興味ある分野を集中して学習できる

①自分でカリキュラムを作ってゴールを決めなければならない

②分からない時に質問したり相談できる相手がいない

③期限を決めないとダラダラ学習し続けることになる

④仲間ができない

この記事で補足する内容

デメリット①の「自分でカリキュラムを作ってゴールを決めなければならない」を解消するために、この記事で「カリキュラム」概要を作ってみました。

 

メリット②の「自分のペースで勉強でき、自分が興味ある分野を集中して学習できる」について、「デザイン」「コーディング」だけでも学習できる内容にしました。

0からWeb制作できるスキルを身につける方法から「デザイン」「コーディング」を学習する部分を分けて説明するのでそこだけ見ればいいという内容にしています。

 

もちろんWeb制作全体像が分かるようにもしてます。

  • 「0からWeb制作」=「企画+設計+デザイン制作+コーディング+サーバーアップロード

独学は、カリキュラムとゴールを自分で作らないといけないのが迷子になるポイント。

なのでこの記事でざっくり流れを書いていきます。

次から本題、いきましょう!

「企画」で目的とターゲットを明確にする

「企画」で目的とターゲットを明確にする

最初に、何のためにWebサイトを作るのか、誰のためのWebサイトなのか、誰に見てもらってどう行動してほしいのか、を整理します。この段階を「企画」と言います。この段階をきちんと整理することで目的に合ったWebサイトを制作することができます。

Webサイトは「何かを売りたい、問い合わせが欲しい、知ってもらいたい」などの目的を叶えるための手段の一つです。Webという特性を生かして誰に何を伝えてどう行動して欲しいのか、を考えるとコンテンツは何があったらいいのか、どんなデザインが効果的なのか、どんなレイアウトが見やすいのかが見えてきます。

 

「企画」の流れ

企画はざっくり以下の流れで考えます。

  • ①Webサイトの目的と目標を決める
  • ②自分の特徴を洗い出す(自分を知る)
  • ③Webサイトを見てもらいたい人をはっきりさせる(相手を知る)
  • ④競合分析をする(他を知る)
  • ⑤ポイントを整理してサイト概要(コンテンツ、デザイン)を決める

①Webサイトの目的と目標を決める

目的は、「Webサイトで実現したいことは何か」

目標は、「Webサイトで達成したい数字は何か」→KGI、KPIという指標をつかう

②自分の特徴を洗い出す(自分を知る)

自己分析をするということ。強み弱みを整理します。

③Webサイトを見てもらいたい人をはっきりさせる(相手を知る)

サイトを見る人になりきってみてどんなコンテンツが必要か、デザインはどうしたらいいか、を考える土台にします。以下のような手法を使ったりします。

ペルソナ →具体的な人物像

カスタマージャーニーマップ →ユーザーの行動を明確に可視化する方法

ストーリーボード→漫画のような絵コンテを使ってWebサイトの利用シーンやユーザーの感情などを洗い出す方法

④競合分析をする(他を知る)

見る人が自分のWebサイトを見てくれるためには他の似たようなサービス・商品を提供しているサイトには無いアピールをしないといけません。他のサイトの良いところ、分かりにくいところ、書いていないところを考えるということ。

⑤ポイントを整理してサイト概要(コンテンツ、デザイン)を決める

誰に何を伝えてどう行動して欲しいのか、結果自分はどうなったらハッピーなのか

Webサイトを見る人はどんな人で何に悩んでいるのか

他の競合サイトがアピールしているポイントは?

自分サイトを見る人(相手)競合の3つを整理しWebサイトのポイントをまとめてみます。

そのポイントから

コンテンツ内容の洗い出し(最新ニュース、取扱商品、サービス、採用情報、会社情報・・・)

見本にしたいWebサイト

デザインの方向性(和風、格調高い雰囲気、信頼感、インパクト、ナチュラル、先進的、キッズ向け、女性向け・・・)

色(ベースカラー、コンセプトカラー、アクセントカラー)

フォント

必要なパーツ、図とかイラスト

を固めていきます。

「企画」はここでは説明不足なので自分の卒業制作の事例なども含めてまた別の記事で深堀りして書いてみます。

「企画」の独学方法

ここはで独学できます。

Webデザインの基本

伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著), 宮田 優希 (著), 伊藤 由暁 (著)

ノンデザイナーでもわかるUX+理論で作るWebデザイン

川合 俊輔 (著), 大本 あかね (著), 菊池 崇 (監修)
この本は通学制スクール(デジタルハリウッドSTUDIO by LIG)でも勧められた本です。卒業制作企画のときに利用しました。ペルソナ、カスタマージャーニーのことが分かりやすく書かれています。UX設計からのUI設計という業界初心者は聞いたことないワードについて詳しく書かれています。UX設計UI設計は理解して損はなし。というか知っておくべきワードです。

Webディレクションの新標準ルール

栄前田 勝太郎 (著), 岸 正也 (著), 滝川 洋平 (著), タナカ ミノル (著)
この本は制作会社のディレター職の人が購入しているとデジハリ同期に聞いたので購入した本です。ディレクション職を希望している人に特にオススメ。Webサイトのミッションとゴールの確認、受託におけるヒアリング方法、企画の発想法、工数の計算、ワイヤーフレームのパターンと作成方法などディレクション実務にあった内容が書かれています。
 
具体的な手順は僕の制作事例から記事にしましたので参考にしてみてください。

「設計」でサイトマップ、ワイヤーフレームを作る

「設計」でサイトマップ、ワイヤーフレームを作る

Webサイトのページ数とページ同士のつながりを明確にしたり(ページ構成を明確にする)、ページごとのレイアウトを決めてどんなコンテンツを入れるか(レイアウト設計図)をはっきりさせます。

この段階を「設計」といいます。

 

「設計」の流れ

設計は以下2つの工程がメインです。

  • ①サイトマップ作成
  • ②ワイヤーフレーム作成

①サイトマップ作成

サイトマップとは、Webサイトのページ構成を図で示したものです。

サイトマップ

上記のような図です。「企画」の最後で洗い出したコンテンツ内容をグルーピングして階層化します。

どのコンテンツをどのページの配下に置くか、が見てすぐに分かります。

例えば

トップページ:https://yuzuskill.com/

会社概要ページ:https://yuzuskill.com/company/

企業理念ページ:https://yuzuskill.com/company/philosophy

となります。階層は深すぎると見る人が迷うので3階層くらいまでを目安にした方がいいです。

②ワイヤーフレーム作成

ワイヤーフレームとは、簡単にいうとレイアウト設計図です。「ワイヤー」とか略したりします。

ワイヤーフレーム

上記のような設計図です。

そのページに必要なコンテンツをどういうレイアウトで配置するのか、がわかればお客さんとも情報共有できるしページ数が多かったら全てのページのデザインを共有するのは難しいのでワイヤーフレームで共有して進めていく、ということ。

「設計」の独学方法

ググれば(検索すれば)独学可能。

サイトマップは、

サイトマップ(構成図)をエクセルで簡単に作成する方法【テンプレート付き】 | Web幹事

の記事が作成方法としては分かりやすいです。

ワイヤーフレームは、

ワイヤーフレームの作り方完全ガイド【サンプル付き】 | Web幹事

がワイヤーフレーム作成方法を理解するのに分かりやすいです。

「設計」で使用するツール

サイトマップとワイヤーフレームを制作するためのツールは色々あって

エクセル、パワーポイント、Cacoo、Photoshop、AdobeXD

と自分は使ってきました。

・テックアカデミーではCacooというクラウドサービスを使うカリキュラムになってました。

・デジハリLIGでは特に指定なしだったのでパワーポイントで作りました。

・実案件ではAdobeXDで作りました。(一度Photoshopで作ってみたけれどAdobeXDの方が簡単)

自分が確認するためだけなら「手書き」でOK。ページ数が少なかったりレイアウトが複雑でなければ「エクセルまたはパワーポイント」でいいと思います。誰でも修正しやすいですしね。

※Cacooは個人的には使いづらい感じ。クラウドサービスなのでURLを伝えればデータを共有できるメリットありですが、無料版だとシート数制限があったりするので微妙。Cacoo有料版にするんだったら下で説明するAdobeXDスタータープラン(無料)でいいかな。

オススメはAdobeXD

レイアウトが多少複雑だったり、コンテンツが多かったり、写真画像をちょっと埋め込んでみたり、ページ数が多ければ「AdobeXD」がいいです。photoshopを使っていたらなおさら操作性は同じなので使いやすいしphotoshopより簡単に使えます。「AdobeXD」についてはまだAdobe XD使ってないの?はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ:LIGブログに無料の「AdobeXDスタータープラン」を使ってワイヤーフレームを作る方法について書かれています。

この記事内の「便利な使い方:ホーム画面をサイトマップにする」というところで、サイトマップも作成して各ワイヤーフレームへのリンクを設定できるやり方も書かれてます。これは便利!

利用する際にはAdobe Creative Cloudのアカウントの作成が必要ですが、無料版として「期間」の縛りがなく、制作で必要な機能は全て利用可能。以下制限がありますが、個人で使う分には問題なし。

AdobeXDスタータープラン(無料)での制限
・「共有プロトタイプ」「共有デザインスペック」という機能で発行できるリンクが、それぞれ1件まで
・ クラウドストレージが2GB(有料プランでは100GB)
 
具体的な手順は僕の制作事例から記事にしましたので参考にしてみてください。

「デザイン」を目的に合わせて制作する

「デザイン」を目的に合わせて制作する

企画で「サイト概要(コンテンツ、デザイン)」と設計の「ワイヤーフレーム」が作れたら次はデザイン制作です。デザインだけまずやってみよう、という人はここだけ見てください。

「デザイン制作」の流れ

  • お客様からサイトの目的をヒアリングしてイメージに合うWebサイトを確認する
  • 目的に合ったデザイン案(ラフデザイン)をワイヤーフレームのレイアウトで作っていく
  • デザイン案(ラフデザイン)からいいのを選んでデザインカンプにする

がデザイン制作の流れです。上級者になるとすぐにデザイン制作に取り掛かれるかもですが、初心者はデザイン案(ラフデザイン)をいくつか作って考えます。制作会社の人と話すとお客さんに複数案だすのではなく一つのデザインをベースに詳細詰めていく、ということを言ってました。いくつも作るのは時間と労力がかかりますしね。なので最初のうち案件をとるときはデザイン案をいくつかだすと差別化になります(他の制作会社や個人製作者は複数案出さないから)。大変だけれども頑張るときも必要です。

デザインカンプとは

デザインカンプとは、簡単に説明すると「完成イメージ」のことです。日本語では「カンプ」と呼んでいますが、これは英語では「包括的レイアウト」という意味の「Comprehensive Layout」を略した呼び方です。つまり、すべての要素がそろった状態の最終的な見本がデザインカンプです。

引用:くりたま.jp

「デザイン制作」の独学方法

以下の流れで進めるのがいいかと思います。

  • ①見本通りにPhotoshopで制作できるようにする
  • ②デザイン理論を学習する
  • ③色々なWebサイトを模写する
  • ④オリジナルデザインのWebサイトを作ってみる
  • ⑤Illustraotorを使えるようになってみる

まず見本通りに作ってみる。スクールではPhotoshop基礎講座(写真加工の方法とか文字の書き方とかを地味に練習する)もありますが、見本デザイン通りにPhotoshopで制作することを軸にカリキュラムが進んでいきます。見本通り制作できたら、既存Webサイトを模写してみる。パターンが分かってきたらオリジナルサイトを作ってみる、という流れ。

これはダメだな、と思ったやり方はphotoshop使い方の基本である「レイヤーとは」「ブラシの使い方」とか細かい使い方から学習する方法です。頭に入ってこないです。機能多すぎて何のためにこれ覚えるの?みたいになるから。まずWebサイトを作りましょう。

①見本通りにPhotoshopで制作できるようにする

まずPhotoshopでWebサイトを作れるようになりましょう。つまり見本通りに制作できればOK。

オススメする学習方法はUdemy、本です。

Udemy

見たいコースを購入してパソコンでもスマホでもいつでも見ることができるというサービス。月額サービスではなくて1講座ずつ買い取りです。見本デザインどおりに制作する講義もあって通学制スクールのカリキュラムのように分かりやすいです。

セールをしょっちゅうやっていて僕は2万円以上の動画を1200円で買いました。激安。なんでこんなに値下げるのかと思いますがセールで買うのがお得です。セールを待ちましょう。

自分は、「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

を購入しました。

Udemy

 

上記画面のように実際のphotoshop操作画面で一つ一つ丁寧に教えてくれて音声説明付き。スマホからでも見れます。これは 全422レッスン& 総動画時間41.5 時間のボリューミーな内容で見本デザイン通りにWebサイトをPhotoshopで作ってみる、という内容。まさしく求めているカリキュラムそのもの。かつHTML、CSSのコーディング講座もあるからこれだけでコーディングまで学習できます。

Udemy Webデザイン入門講座

他にもおすすめ講座はありますのでこちらの記事を参考にしてみてください。

関連記事

ユズト 「Udemy」のコースをセール期間に購入してスキルアップしました。 ・本もいいけれど動画で網羅的にWeb制作スキルやWebデザインスキルを習得してみたい ・「Udemy」とい[…]

Udemyで副業スキルを習得できるおすすめコース

オススメ本

グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本)

この本は、Illustraotorで名刺デザイン制作も含まれていてIllustraotorの基本的な使い方も覚えられます。もちろんPhotoshopでWebサイトを見本通りに作る内容も含まれており一通りのWebサイトを制作できるスキルを身につけることができます。僕がデジハリLIGで学習したカリキュラムの進め方でこの本は書かれてます。

デジハリの回し者かと思われそうですが、本屋で色々探したけれどWebサイトを見本通りに作れる内容になっているのが見当たらなかったのでこちらをご紹介します。photoshop本って写真加工とかグラフィックデザイン系、もしくは基礎勉強の本が多いんですよ。

②デザイン理論を学習する

次は、を読んでデザインの理屈を頭に入れましょう。そうすることで、なぜこのデザインが見栄え良く見えるのか、なぜこの色が落ち着く色なのか、など理解できるようになります。

前に書いた未経験からWebデザインを勉強する効率のいい手順【初心者向け】その2:「デザイン理論」を学ぶでも簡単に書きました。

といってもなんとなく頭に入れておいて、そんな理論なんだ、くらいで最初はいいと思います。手を動かして制作していかないと結局身にならないから。デザイン模写するときに振り返りをしていけばOK。

 

理論が網羅的に分かる本

いちばんよくわかるWebデザインの基本きちんと入門

伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著), 宮田 優希 (著), 伊藤 由暁 (著)
この本は、「企画」でもご紹介したのですが再度ご紹介します。僕は前半部分のデザイン理論が網羅的で参考になるな、と思い購入しました。レイアウトの4原則、グリッドレイアウト、視線の動線、レスポンシブデザイン、配色、写真の扱い方、画像の解像度・ファイル形式、タイポグラフィ(文字デザイン)が一通り説明されていて本当に網羅的。実例も豊富で赤や黄色ベースの色別サイト例や信頼感、男性的、女性的などイメージ別実例なども紹介されています。この本だけで一通りのデザイン理論が頭に入ります。

 

デザインのクオリティーがあがる本

けっきょく、よはく

網羅的な本ではないのですが、「余白のとり方」をメインにデザインをとりあげた本がこちら。レイアウトの「余白の活用」をより具体的に知りたい方向けの本です。なにもない白い空白の部分もデザインの一部である、ということを理解させてくれます。 webデザインは余白の取り方によって決まる、といっても過言ではないです。 デザイン素人の僕は色々と情報を詰め込みたくなるときがあります。目立たせたいポイントをより強調するために余白が必要である、という概念。NGデザインとOKデザインの比較事例が豊富なので分かりやすいです。これをみて余白が怖くなくなりました。

なるほどデザイン

この本は、通学制スクール(デジタルハリウッドSTUDIO by LIG)でも勧められた本です。 「どんな人に、何を、なぜ、いつ・どこで」伝えるためにどういうデザインをすべきか、という観点から色、フォント、レイアウトの実例豊富にグラフ・チャートの見やすいデザイン例まで書かれています。難しい言葉一切無し。個人的には「擬人化力」というチャートが納得感あり。書体を声色に例えてみる、とか色を年代に例えてみる、とか身近なイメージをデザインに落として説明しているのが分かりやすい。

 

レイアウトの理屈が分かる本

知りたいレイアウトデザイン

この本は、本屋で立ち読みして購入しました。最初のパートが論理的な説明で分かりやすかったんです。「Who×What×How(誰に、何を、どうやって)」を整理し、直観的に知りたいことが分かるデザイン制作方法について事例豊富に説明されています。個人的には、「How」の考え方が参考になりデザイン制作の基準となりました。この本のデザイン制作の進め方を参考にしてオリジナルデザインの製作をしました。何かAmazonレビューが少なすぎるけれど僕は参考になりました。

③色々なWebサイトを模写する

PhotoshopでWebサイトが作れるようになって、デザイン理論が一応頭に入ったら、次は模写です。模写の目的は

  • Photoshopの使い方に慣れる
  • デザインセンスを身につける

です。いきなり自分のオリジナルデザインで制作すると絵心ない人だとかなりかっこ悪くなります。ただボックスを並べているだけ状態。自分がそうでした。デザイナーが作ったWebサイトを模写することでなんでこの余白があるのか、この線の細さはなぜこんな細さなのか、ボックスに影がついてるけどないとどうなるのか、など自分の今の考えだったらこうするのになんでだろうか、と比較することができます。

模写するときのポイントは、

  • ②のデザイン理論を考えながら模写する
  • ちょっとだけ変えてみる(フォントを変更、色を変える、線の細さを太くする、レイアウトをずらすとか)

カッコイイと思えるデザインはなぜカッコいいのか、ということを自分の頭で考えていくという作業。最初は適当なことでもいいので理論化してみるとデザインの再現性が高まってくるはずです。ちょっとだけデザインを変えてみるとなんか微妙なデザインになったりします。全体のバランスも考えてデザインされているのでちょっと変えてみることで見えるデザイン理論もあります。

自分が好きなWebサイトを選んでここまでで身につけたPhotoshopスキルで模写します。

前の記事で書いた未経験からWebデザインを勉強する効率のいい手順【初心者向け】その3:既存Webサイトをたくさん見るでWebサイトの探し方を書いているので色々Webサイトを選んでみましょう。

そこでも紹介した本はこれ。事例豊富なので重宝します。

Webデザイン良質見本帳

・印象から考えるデザイン(キュート、エレガント、クール、信頼感、透明感など)
・配色から考えるデザイン(ブランドカラーから考える、赤、ピンク、青、緑、白、黒など)
・業種、ジャンルから考えるデザイン(カフェ、ファッション、音楽、士業、ポートフォリオ、コーポレートなど)
という切り口でまとめられています。トレンドデザインなども整理して紹介されているので便利です。

④オリジナルデザインのWebサイトを作ってみる

オリジナルデザインは、

いろんなサイトを選んでうまいこと混ぜ合わせる

でできます。オリジナルデザインの作り方の記事で詳細は書きましたのでそちらを見て下さい。

未経験からWebデザインを勉強する効率のいい手順【初心者向け】

⑤Illustraotorを使えるようになってみる

Illustraotorを使わなくてもWebデザインはできます。Photoshopでもバナー制作や簡単な図は作れるので。ただ、Illustratorで名刺デザイン制作、企業ロゴ制作、図やイラスト制作ができるので使えるとデザインの幅が広がるしWebデザインのクオリティーも上がります。

  • 名刺デザイン
  • トレース

ができればとりあえず基本はOK。

Illustraotorは操作方法にクセがあるので、その使い方に慣れが必要です。何か見本となるイラストがあったときにそれをIllustraotorでパパっとトレースできればそれっぽいイラストが作れてしまうので便利。

ちなみに通学制スクールのデジハリLIGではIllustraotorは名刺デザイン制作でしか学習しません。なのでそれほど上達しません。Photoshopメインでカリキュラムが進みますし卒業制作もPhotoshopだけでできます。

Illustraotor学習方法を紹介します。

まずです。

グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本)

「①見本通りにPhotoshopで制作できるようにする」で紹介したデジハリ本を再度紹介します。これに名刺をIllustratorで制作する方法が書かれています。①で購入していれば名刺制作もできてしまうということでご紹介しておきます。

Illustrator しっかり入門 増補改訂 第2版 【CC完全対応】[Mac & Windows 対応]

Illustraotorは使い方が特殊で最初はよく分かりません。「ベジェ曲線」とか「パス」とか。どこに何の機能があるかも分からないので未経験者向け超入門本から使い方を学習するのも良いです。基本をしっかり身につけることができます。

WebデザインのためのPhotoshop+Illustrator

基本の使い方がわかったら、Webデザインで利用するアイコンやロゴパーツ、背景パターン、バナーなどの実践的なIllustrator制作方法を紹介しているこの本も参考になります。この本の優れているところはPhotoshopで制作すべきデザインとIllustratorで制作すべきデザインを両方紹介し、Photoshopで制作したデザイン内にIllustrator制作パーツを埋め込むという方法も紹介されています。ハイクオリティーのWebサイトを制作するためにはどちらも使えると良いのでこの本はその基本となる考え方が書かれています。(Photoshopの写真加工の方法も書かれているので細かい画像修正もできるようになります)

次にUdemyです。

UdemyでもIllustrator講座あります。Udemyが使いやすいということであれば下の2つのどちらでも基礎を学習できます。

Illustrator 基礎からプロレベルまで完全ですべてをゼロから最短で学べる講座:Udemy

【超入門】初心者からデータ入稿まで Adobe Illustrator でキャラクターを描いてオリジナルグッズを作ろう:Udemy

Schooという授業形式の動画サービスもあります。

月額980円で4600本以上の授業が見放題のオンライン動画学習サイトです。

網羅的な講座が少ないイメージですが単発で知りたいことについて利用するには良いかな。Illustratorで名刺制作という講座で名刺をIllustratorで制作できます。他にもWebデザインとで検索すると色々授業が出てきます。

「デザイン」の独学方法まとめ

  • Photoshopで見本通り作れたら、その技術で模写して、慣れたらオリジナルサイトを作る

ということ。Photoshop、Illustratorは本当に機能が多いので最低限Webデザイン制作ができれば模写をした方が効率的。あとは、分からないところが出てきた時のために参考本を1冊くらい手元に置いておくか、ググる(検索する)でいけます。

参考サイトは「サルワカ」のゼロからのPhotoshopの使い方は見やすくて分かりやすいです。

参考本としては上記で紹介した本以外に以下の本もオススメです。

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

ちょっとした操作の説明も豊富で画面キャプチャー付きだから見やすい。便利な辞典となってくれます。XD操作も理解できるのでお得。
 
 
具体的な手順は僕の制作事例から記事にしましたので参考にしてみてください。

「コーディング」でデザインカンプ通りブラウザ表示させる

「コーディング」でデザインカンプ通りブラウザ表示させる

完成したデザインカンプはPhotoshopデータなのでこのままではブラウザで見れません。ブラウザで表示させるために「コーディング」作業をする必要があります。最初に基礎をおさえながら見本どおりにコーディングをする進め方をご紹介します。

「コーディング」の流れ

コーディングはデザインカンプ通りにブラウザにデザインを表示させるための技術になります。「エディタ」というコーディングするためのツールをつかって作業をすすめます。

そして、HTML、CSSというマークアップ言語を使ってブラウザでデザインを表示させていきます。動きのある場所はCSSでアニメーションをつけたり、jQueryというライブラリを使います。(※「ライブラリとは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのこと)

ここもデザインと同じくまずは見本通りに制作していきましょう。必要最低限のコーディングスキルを身につければ使ったことがないスキルもググれば分かる状態になります。

完成デザイン通りにブラウザで表示させるというゴールが明確です。なので、副業で仕事をとるにはコーディング案件からが楽な方法です。

「コーディング」の独学方法

  • ①HTML、CSSを学習する(コーディングの基礎)
  • ②jQueryを学習する(Webサイトに動きをつける)
  • ③効率的にコーディングできる方法を学習する(Emmet、ブートストラップ、Sass)
  • ④既存サイトを模写する
  • ⑤最低限覚える必要があるPhotoshopの使い方を学習する

コーディングはベーススキルであるHTML、CSSが分かれば動きをつけることができるjQueryをサッと理解することでできるようになります。

①HTML、CSSを学習する(コーディングの基礎)

独学によく使われるサービスは2つあります。

Progate(プロゲート )は、サイト内に用意されたエディタを使って実際に手を動かしながら課題をクリアしていく、というサービス。有料会員で980円/月額(税別)です。

ドットインストールは、動画で多種多様なプログラミングスキルを教えてくれるサービスです。無料動画もあり、有料動画をみるためにプレミアム会員になっても1,080円 /月額(税込)で見ることができます。

最初は、Progate(プロゲート )で学習をするのがいいかと思います。エディタが用意されているし、実際手を動かしながら課題をクリアしていくので身になりやすいです。

Progate HTML & CSSコース:Progate

復習用にドットインストール の

はじめてのHTML:ドットインストール

はじめてのCSS:ドットインストール

を見ると理解が深まります。(上記2コースは無料です)

ここでは「レスポンシブデザイン」までしっかり習得しましょう。

レスポンシブデザインって、パソコンやタブレット・スマホの幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのこと。パソコンで見るデザインがスマホでそのまま表示されたら見にくいからスマホ用のデザインが自動で切り替わると便利だよね、ということ。

これは必須スキルなのでしっかり学習しましょう。今の時代、スマホからサイトを見るユーザーの方が多いわけです。とはいえパソコンでも表示はさせておきたい。

Progate(プロゲート )のHTML & CSS 上級編にレスポンシブデザイン講義があります。

 

あと、個人的には「CSSアニメーション」の理解をしておくといいと思います。Webサイトに動作をつける方法として、後ほど説明するjQueryを使う場合とCSSアニメーションを使う場合があります。プレミアム会員にならないと見れないのですが動作をつける方法に興味があれば勉強してみてください。

詳解CSS アニメーション編:ドットインストール

オススメ本

本は網羅的に情報が書かれているので1冊仕上げると身になります。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

検証ツールを覚える

コーディングをするにあたって必要不可欠なツールがあります。

「Google Chrome」の検証ツール(デベロッパーモード)

です。Chromeの標準機能なのでお金がかかるとかいう話しではないのですがこれは知っておかないと話しにならないよ、というスキル。ブラウザで表示しているページのHTMLやCSSを確認・編集することができる、開発者にとって便利なツール。コーディング中にどこに問題があるのか分からない、この場所のコードがどうなっているのか知りたい、と思ったときにブラウザからすぐにコードを調べることができ一時的に編集もできるという便利ツール。Progateに分かりやすく紹介されていたのでご紹介します。

検証ツール(デベロッパーモード)の使い方:Progate

Font Awesomeを使えるようになってみる

Webアイコンという便利なものがあります。文字と同じように表示させることのできるアイコンです。拡大縮小してもボヤけないという利点があります。また文字みたいに色や大きさをCSSで変えることができるという便利なもの。facebookとかtwitterアイコンとかサクッとこれを利用できますし便利。サルワカに分かりやすく書かれています。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう:サルワカ

②jQueryを学習する(Webサイトに動きをつける)

①でデザインカンプをブラウザに表示させることはできます。そこからWebサイトに動きをつけたい、と考えると思います。よく見るハンバーガーメニューとかドロップダウンメニューとかページ内移動(リンクをクリックしたらスルスルとその場所に移動する)とかはHTML、CSSでは実現できません。JavaScriptというプログラミング言語を基本使います。ただ、JavaScriptは難しいです。なので、それを簡単に使えるようにしたのがjQueryと言います(javascriptのライブラリと言います)。これを使えば簡単に動きのあるサイトを作れます。制作会社とのコーディング案件でもjQueryが使えれば大丈夫です。

Progate(プロゲート )で学習しましょう。

Progate(プロゲート )jQueryコース

復習用にドットインストール で知識を深めてみましょう。

jQuery入門:ドットインストール

オススメ本

本でオススメは下の2つ。実装してみたい動作がのっていれば買ってみて手を動かしてみるといいです。

jQueryデザイン入門

かなりの人がオススメしている本です。自分は実装してみたい動作が書かれているかどうかで本の購入を考えました。この本では、アコーディオンパネル、タブパネル、ロールオーバー付きナビゲーションバー、ドロップダウンメニューというよく見る動作の実装方法が書かれていたので購入しました。

jQuery最高の教科書

株式会社シフトブレイン (著)
これはデジハリLIG同期も購入していたオススメ本です。僕ももちろん買いました。サンプルをもとにスライドショーやスティッキーヘッダー(ヘッダー部分がスクロールに合わせて移動する)、スムーズスクロール、タブなどが使えるようになります。

③効率的にコーディングできる方法を学習する(Emmet、ブートストラップ、Sass)

ここまできたらコーディング慣れするために模写していくのがいいですが、効率的にコーディングできる方法を知っておくと便利です。

Emmet

簡単に言うと、コーディングするときの「ショートカットキー」です。

dbと入力後「Tabキー」でdisplay: block;になったり

dnと入力後「Tabキー」でdisplay: none;になったり

2文字入力で一瞬で必要なコードに変換してくれたりします。コーディングしているとよく使うコードは決まってきます。爆速でコーディングできると時短になります。以下ブログ記事で分かりやすく書かれています。僕のオススメ無料「エディタ」である「Visual Studio Code」で説明されています。

「はじめて」でも簡単!Emmetの使い方とよく使うパターン集:HPcode

ブートストラップ

ブートストラップとはCSSフレームワークのことです。つまり、CSSをセットメニュー化したものです。もっと言うと、classを書いただけで右寄せ、左寄せ、ボタン設置などよく使う装飾類が実装されてしまうというもの。CSSでどうしろ、こうしろと書かなくていい、ということ(①が分かってないと何のことか分からないと思いますがよくあるレイアウトに簡単にできるものだと思ってください)。

ここはドットインストール で学習しましょう。Bootstrap 4入門:ドットインストール

グリッドシステムが秀逸。これを覚えるとレスポンシブ対応が簡単にできます。Webデザインの知識がなくてもOK!Bootstrapの使い方【入門者向け】:Teachacademyマガジンに分かりやすく書かれてます。

※ただし、制作会社に営業して下請け受注をもらう方法を選ぶ場合ブートストラップを使うことは少ないです。0から案件を取りにいくときに自分のやり方で効率よくコーディングできた方がいいということ。制作会社案件はブートストラップ指定はあまりないです。

Sass

CSSを変数とか使って効率的に書けるようにしたすごいCSSというのがSassです。これはデジハリLIGの講師の方から教えてもらいました。これを知ってしまうと普通のCSSが書けない、と言っていたのでどんなに便利なんだ?と思った記憶が。

ただ、導入するのにひとクセあります。CSSを変換(コンパイル)する必要があるのです。古い記事ですがLIGブログに導入方法が書かれてます。これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応):LIGブログ

この記事を読んで、ドットインストール で学習すれば最低限使える効率的な技が身につきます。

Sass/SCSS入門:ドットインストール

④既存サイトを模写する

ここまできたら慣れることが必要。実績としても摸写は活用できるのでいくつか制作してポートフォリオにのせることをモチベーションに頑張りましょう。

  • 簡単だろうな、くらいのサイトを摸写してみる。難しすぎるとヤル気なくします。できると嬉しいです。
  • 簡単の基準は今まで学習した内容でできる!と8割以上イメージできるサイト。1、2割はググらないと分からないかな、と思うくらいの内容。
  • スマホ対応コーディングもする。レスポンシブ対応。
  • できるだけ上記で説明した検証ツールを使わず(答えを見ないで)に自力でコーディングしてみる。
  • どうしても分からないところはググって(検索して)調べるか検証ツールで少し見てみる。(考えることが重要)

上記の流れです。ここはスクール卒業しててもいくつか摸写して実績作らないといけないので必要な工程です。

僕はEvernoteにスクールで学習した内容はメモしていました。一回課題をこなしても忘れるだろう、と思ったから。その通りでしばらくすると忘れます、、Web制作は覚えること多いのでデザインやってコーディングやってサーバーのこと覚えて、としてたら最初にやったこと忘れてます。

なので、Evernoteに覚えたことをメモして模写のときにそれを活用して模写で再現する、ということをしました。再現しながらも1、2割はググれば(検索すれば)分かりそうだけどやったことないな、と思うようなWebサイトを模写するとスキルが伸びます。

3個くらい摸写できたら実案件取りに行きましょう。模写だけだとモチベーションもたないです。

⑤最低限覚える必要があるPhotoshopの使い方を学習する

デザインから学習している人は大丈夫なのですが、コーディング案件だけで副業したいとなるとデザインツールの使い方は学習せずに進んできているはずです。

しかしながら、制作会社と仕事をすると完成デザインがpsdファイル(photoshopデータ)で送られてきてそこから必要な画像は書き出して画像フォルダに入れないといけません。

よって、Photoshopで

・画像書き出し(画像アセットを使う、pngとjpgの違いを理解)

・色のCSSを調べる(色を正確に再現するため)

・フォントが何を使っているか調べる

ということができるくらいは知っておく必要があります。特に画像書き出しは必要です。背景透過が必要な場合はpngデータにするとか画像形式も考えて書き出しする必要があります。記事を書いてみましたので参考にしてみてください。

Photoshop画像書き出し方法を具体的に解説【画像形式の違い説明付き】

 
コーディングの具体的な手順は僕の制作事例から記事にしました。

「サーバー」にデータをアップしてインターネットから見れるようにする

「サーバー」にデータをアップしてインターネットから見れるようにする

最後に制作したコーディングデータをサーバーにアップロードしてインターネットからWebサイトが見ることができればOK。

制作会社とやりとりするときに、制作会社のサーバーにテストフォルダを用意してもらえるのでそこに制作したコーディングデータをアップしていきます。そのときにFTPソフトというものを使ってアップしていくのでこのやり方を一通り知っておく必要があるということ。

自分で模写したコーディングデータをインターネット接続してブラウザで見れるようにできればOK。

  • レンタルサーバーを借りる
  • ドメインを取得する(独自ドメインはテスト時は取得しなくていいのでここは飛ばしてもOK)
  • ファイルをアップロードする

でインターネット接続してブラウザで制作したサイトを見れるようになります。以下サイトが概要が分かりやすく書かれています。

ついに完成!ファイルをアップロードしてWebサイトを公開!:Webクリエイターボックス

FTPソフトは無料ダウンロードできるのでここで紹介されているFileZillaで問題ありません。僕もこれを使っていて困ったことありません。

Web制作スキル学習をするために必要なモノ

Web制作をするために最初に用意する必要のあるモノについては別の記事で書きました。参考まで。

Web制作を始めるために必要なツール(道具)【最初に用意するもの】

Web制作独学で行き詰まったらスクール受講で時短

独学はデメリットもあると最初に伝えた通り。

  • モチベーションが続かない
  • 分からないところをすぐに教えてもらえればこんなに時間がかからないのに
  • カリキュラム課題通りに作ってそれを実績にしたい
  • オリジナルサイト作りたいけど独学じゃ作りきれない

独学で時間がかかりすぎて諦める、いつもの毎日に戻ってしまう。

 

時間を買うという投資。それがスクール。

スクールである程度のスキルまで引き上げてもらうことは時短になります。僕はそうしました。

無料体験コースがあるスクールもあるのでまずそれを試してみるのはアリですね。

僕の体験からスクールの選び方とオススメスクールを紹介した記事を書きましたので気になる方は参考にしてください。

【無料あり】副業でWeb制作案件受注したい人のスクール選び方とおすすめスクール3選

まとめ:Webサイトを無料で作ってモチベーションをあげる方法もある

Webサイトを0から制作するには以下スキルを身につける必要があるということを紹介してきました。

  • 企画スキル →Webサイトの目的とターゲットを決める
  • 設計スキル →ページ構成(サイトマップ)とレイアウト設計図(ワイヤーフレーム)を作る
  • デザインスキル →Webサイトのデザインを制作する
  • コーディングスキル →完成デザイン通りにブラウザ表示させる
  • サーバーの知識 →「サーバー」にコーディングデータをアップしてインターネットから見れるようにする

 

独学でするには身が入りにくい。と思ったらおすすめは

知り合いでWebサイトが欲しい人を見つけて無料でいいから受けてみる

といいですよ。

 

ヒアリングする相手がいればこんなニーズあんのね、それをWebで解決するには?という思考になって勉強になります。

その上、相手がいればやり切るモチベーションにもなる。

 

僕はたまたま独立した個人事業主の知り合いがいたので、

無料でサイト作るんで色々事業内容教えてください!

と志願しました。

それを作りきって実績にして営業しました。営業トークも身が入りましたね。

無料で作ってれば多少間違えても気が楽だし、モチベーションも保てるしでお得。おすすめです。

 

 

この記事はここまでです。

どうも、ユズトです。
サラリーマンに期待と絶望を繰り返しながら転職も3回経験。アラフォーから自分の実力一本で稼ぐのだ、と決意し未経験のWeb業界へ突入。転職という道は選ばず副業で。本業終わりにWeb制作スキルをスクールで身につけ、独力で営業開始。初月で月10万円の収益化。そこからマーケティングスキル、ライティングスキルも身につけスキルの多角化。スキルがあれば生活が安定することを実感。サラリーマンだけが仕事じゃない。サイト名の「セカンドスキル」とは本業以外の第2のスキルのこと。副業と両立することで得られるメリットはたくさんあります。やる気になったその日が開始日!副業をオススメする理由はこちらの記事で書いてます♪

noteに僕がWeb制作案件で副業案件受注するまでの全工程を詳しく書きました。
スキル0からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。 実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnote
【note】スキル実績人脈0のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順
Web制作スキルを独学で知識0から身につける学習ロードマップ【副業案件受注できるスキルセット】
情報発信しています♫