はじめまして！こんにちは、トウマです。
前回の【第１回：知っておくべき３つの注意点】に引き続き、今回は第２回目となります。
本記事の内容はストーリー立てて、全3回に渡ります。
- 第１回：未経験者が知っておくべき３つの注意点（本文に入る前によく心に留めておいてください。）
- 第２回：未経験からウェブデザイナーへの道のり（ノンスキルから上達していく方法やツールをご紹介します。）→ 本記事はココ。
- 第３回：実際の稼ぎ方（未経験者で実績がない状態から手っ取り早く稼ぐ方法を解説します）
未経験からウェブデザイナーまでの道のりは大変険しいですが、好きを仕事にし、ハマる人は継続できるはずです。
そこで、未経験だった私がウェブデザイナーとしての肩書きでお仕事ができるまでの道のり、上達方法について、実例を交えて４つのステップを解説いたします。
ステップ①：教科書となるデザイン本を買う
全くの未経験者は教科書となるデザイン本を購入しましょう。
デザインの基礎、「整列・近接・反復・対比」という言葉と意義、使い方が
一通り学べる本を選びます。後は 配色・フォントの使い方などですね。
自分の読みやすい一冊でいいです。
デザインをしている方にとっては、基礎的なことですが、フリーになったばかりの私はこの基礎ですら知識として持ち合わせておりませんでした。よって、このあたりのインプットを信頼性を担保する本でしっかり理解していきました。
私が参考にしたデザイン本はこれ。
● ノンデザイナーズ・デザインブック
これさえ読んでおけば、デザインの基礎は十分だと思います。
私のようにデザインをしてこなかった人にはピッタリの読み応えのある一冊です。
ステップ②：ウェブデザインに特化した環境を準備する
【前提】ウェブデザインですので、PCとWiFiは前提条件です。
ここから私が実際にウェブデザインを行う時にいつも使うツールを６つご紹介します。
１．Adobeツール
これは絶対必須で有料のツールです。
利用頻度が高いものから、
XD、Illustrator、Photoshop、Lightroom
です。
特にXDはウェブデザインをするにはおすすめです。
✓直感で操作できる（効率的！）
✓機能が充実
✓共有方法がなんと言っても画期的
特に最後の共有方法がとても便利で、お客様にデザインを確認してもらう場合は、仕上がったデザインのリンクを発行し、まるで実際のウェブサイトを見ているかのように、ブラウザ上でデザインや動作確認を行うことができるのです！！
私なりの使い分けは以下です。
Photoshop：写真を切り抜いたり合成したりする時
Adobeツール初心者の方は、Creative Cloudコンプリートプランの「学生・教職員向け」で購入すると、アドバンスクールオンラインで学割価格で購入でき、使い方もお得に学べます。
価格が通常より5000円ほども割り引かれているので、オススメ。
２．Canva（無料版）
ブラウザ上で多種多様なデザインが無料でも試すことができます。
なお、ウェブサイトのデザインももちろん試すことができますが、かゆいところに手が届かない感じでした。ウェブデザインを商売とするならプロフェッショナルのXDを推奨します。
３．AC系列サイト
illust AC、 写真ACといった、無料〜有料まで素材提供がたくさんある国産のサイトです。
png, jpgやイラレデータでダウンロードができるので、素材制作の際、こちらも重宝しております。ただ、無料会員だと制限があります。
４．ICOOON MONO
無料で多種多様なアイコンが手に入ります。
jpg, png, svgデータが用意されており、svgデータでダウンロードすると、後からでもillustrator等で色の変更ができ、自由にカスタマイズが可能です。
５．AdobeStock 無料コレクション
https://stock.adobe.com/jp/free
こちらはAdobeツールの利用者が無料でダウンロードできるイラストや画像素材がたくさんあります。質がよい＆ピンポイントの素材を見つけることができます。
６．Unsplash
有志の方が集まり画像素材を無料で提供されている海外のサイトです。引用は必須ではありません（記載したほうが提供者は嬉しい）。サイトの印象は画像でも決まります。おしゃれな画像を探しているとこちらにたどり着き、調べてみると色々と発掘があって、時間を忘れるくらい魅力的な画像が多くあります。
最初は無料の素材をダウンロードして、自分なりにカスタマイズしていく練習をしましょう。
無理に０→１を目指さなくても大丈夫です。１に少しアレンジで、実務でも全然使えます。
ステップ③：デザインを実践する
あとはひたすら模写からの実践ですね。
そこで、私が今でも実務で愛用している参考サイトを２つご紹介します。
こちらのサイトはウェブデザインに限らず全ジャンルで画像検索に特化しております。
ウェブデザインを検索した時は、おしゃれなサイトのキャプチャ画像がギャラリーのように表示されます。ポイントは「おしゃれ」なセンスの良いサイトが上がってくるので、とても参考になりますよ。
■ デザインのこと
こちらはおしゃれなウェブデザインの参考サイトです。
PCとSPでデザインがまとめてある点が見やすく、配色のサンプルやイメージも添えられている所が参考になります。
他にも参考サイトのまとめサイトはたくさんありますが、特に流行を抑えたデザインを紹介していて、使い勝手が良いと感じたのは上記のサイトでした。
また、参考サイトを模写する際は、下記のことを意識して取り組んでみましょう。
- 配色パターン
- 余白のとり方
- 見出しや、コンテンツの文字のバランス
- 装飾パターン（角丸だったり影の付け方だったり）
どのサイトも決まった型がありパターン化されています。
サイト全体の統一性を出すことが秘訣。
ステップ④：+@で実際にデザインした作品のサイトを作る
未経験者からウェブデザイナーになるためには、自分なりにウェブデザインの作品ができ、採用されることまでが一つの目標ですが、これだけだとデザイナーのプロには当然負けます。
そこで、未経験者がお仕事に繋げやすくするためには+@のスキルを持っておくことをオススメします。それは「HTML / CSS」コーディングのスキルです。
プロのデザイナーはウェブのデザインができてもコーディングまではできない方が多いです。よって、未経験者は、コーディングスキルを身に着けておくと転職には有利でしょう。
そのためには実際に仕上げた作品をコーディングして公開することで、自分の能力をアピールしていくことをオススメします。
習うより慣れろ。
コーディング自体はウェブで検索するといくつもノウハウが出てきます。
実践していくうちに、何がわからないか明らかになってくるので、問題にぶち当たった時は、すぐに調べ、アウトプットを繰り返して行ったらすぐ身につきます。情報収集能力も培われますね！
①素のHTML、CSSで自分のポートフォリオサイトをコーディングしてみる。
②できたらレンタルサーバとドメインを契約してポートフォリオサイトを公開する。
③仕上げたオリジナルの作品をどんどんアップしていく。
ここまでできたら十分です。
自分のサイトを作りデザインを公開までしている。という証明があるのと無いのとで取り組みの姿勢や本気度の印象は全然違います。
なお、WordPressという有名なサイト構築のパッケージが存在しますが、こちらの仕組みも積極的に学習しておきましょう。ポートフォリオサイト自体はWordPressで用意するのもいいと思います。
以上です。
デザインのやり方やコツを掴むまで模写を繰り返し、オリジナル性を加えアレンジしていくとアイディアが湧きやすくなります。自分の得意・不得意なイメージなどもはっきりしてくるのではないでしょうか。
また、+@でコーディングのスキルを磨いておくと非常に有利です。 ここまでできたら未経験者からとしては、その努力が高評価されるでしょう。
次が最後です。
この道のりを乗り越えたとして、では実際にどうやって稼いで行くことができるのか、その方法を最後の第３回で解説したいと思います。