産後２ヶ月から育児しながらwebデザインを勉強し始め、その６ヶ月後には初めての仕事を受注しました。
まったく知らなかったweb業界。デザインも未経験。
そんなまったくの０からでも、webデザイナーとして仕事ができるようになりました。
webデザインを覚えると、webの面白さを知るだけでなく、作りたいサイトを自分で作って発信することもできるし、さまざまな業界のことを知ることもできます。
そしてwebデザインは主婦やママにぴったりの仕事だと思うのです。
なぜなら時間や場所にとらわれずにいつでもどこでも仕事ができるから。
家事や育児の隙間時間に、パソコンたった一台でネット環境さえ整っていれば仕事ができてしまいます。
webデザインはこんな方におすすめ
・家事や育児の隙間時間に仕事をしたい方
・webスキルを身につけたい方
・時間や場所にとらわれない働き方をしたい方
この記事では、Photoshop・Illustrator・HTML5・CSS3・Wordpress・レスポンシブwebデザイン・bootstrapといったスキルを学ぶWebデザイン勉強方法を紹介します。
つまり、スマホなどのデバイスにも対応するレスポンシブデザインで1つのウェブサイトをWordpress構築で作れるようになるところまでをイメージしてもらえると良いです。
ということで今回は、
（１）デザインを制作→（２）コーディング（HTML、CSS）してwebサイトを構築→（３）ワードプレス構築
という実際の制作の流れにそって、説明します。
ぜひ、参考にしてみてくださいね。
デザイン制作を学ぶ方法
1.グラフィックデザインソフト、AdobeのPhotoshopとIllustratorをダウンロードする
世界で一番使われているソフトAdobeのPhotoshopとIllustratorでの制作がおすすめです。
この２つは何が違うかを簡単に説明すると、
Photoshop→写真や画像を加工。
素材の色調補正、合成、ゆがみ補正、ノイズ除去、透明度などを調整。ビットマップデータなので、画像を拡大すると細かいドットの集まりが見えます。
Illustrator→正確なデータ・レイアウトの作成。
テキストの段組や写真・文字間の調整。写真やイラストの配置。イラストやロゴ、名刺などの作成に適している。ベクターデータなので、拡大しても画質劣化がないです。
という違いがあります。
この2つのグラフィックソフトを使ってデザインを制作します。
2.PhotoshopとIllustratorの操作方法を学ぶ
・本で基礎を勉強するなら世界一わかりやすいPhotoshopと世界一わかりやすいIllustratorがおすすめ。
・ コストを抑えて自力で頑張りたいという人は、googleで「Photoshop 使い方」と調べるといろんなサイトが出てきます。が、独学は挫折してしまう人も多いみたいです。
3.フリーフォントや素材サイトを集める
Webデザインにおいてフリーフォントや写真やイラストなどの素材集めがかなり重要になってきます。
・フリーフォントを集める
→日本語なら「フリーフォント 日本語」、英語なら「フリーフォント 英語」とGoogleで検索すると、いろんなフォントがダウンロードできるサイトやおすすめフォントを紹介しているサイトがでてきます。
そこからおすすめと言われているフォントや有名フォントを大量にダウンロードしておくと、制作するときにスムーズに進めることができます。
・写真やイラストなどの素材を集める
→こちらも「フリー 写真」、「フリー イラスト」、有料なら「有料 素材」などとGoogleで検索するといろんな素材サイトがでてきます。
▽参考
・【商用利用ＯＫ】これだけあれば困らない！無料のイラストサイト30選
・有料の写真素材サイト8選、圧倒的に高品質なストックフォト！
・もうフリー素材じゃ物足りない！写真イラスト素材販売サイト10選
4.自分の名刺を作ってみる
ソフトはとにかく手を動かして慣れるのが一番。
ということで、まずは自分の名刺とかイラストとかを作ってみます。
デザインが作れるようになったら、たとえばiPhoneケースのデザインを作って、Canvathというオリジナルグッズ発注サービスを使ってBASEでオリジナルiPhoneケースを販売してみたりすることもできます。
5.作りたいサイトのトップページデザインを作ってみる
ソフトに慣れてきたら、さっそく作りたいサイトを考えてみてサイトのトップページデザインを作ってみます。
例えば、これから制作実績を載せるためのポートフォリオサイトでもいいし、webマガジンやブログでもなんでもいいです。
私はその頃ハワイアンカフェ経営をやりたいと思っていたので、カフェのホームページを作りました。
・デザインの基本原則を学ぶならノンデザイナーズ・デザインブック [第4版]。←18年間ずっと売れ続けているロングセラー、待望の第4版が2016年6月30日に出版されました。
・デザインを考えるときによく参考にしているギャラリーサイトは、Responsive Web Design JPとMUUUUU.ORGとI/O 3000あたりをよく見ます。
▽こちらにギャラリーサイトがまとまっているのでブックマークしておくことをおすすめ。
コーディングを学ぶ方法
6.ドットインストールで基礎を学ぶ
ドットインストールでは、初心者向けの３分動画で学ぶプログラミング学習サービスです。
私はHTML入門 (全24回) とCSS入門 (全23回)の２つを見て、コーディングとはどういうものかをまずはざっくり把握します。
7.本で学ぶ
ドットインストールでざっくり概要がわかったら、次に本で勉強します。
本は、実際に手を動かして一つのサイトを作りながら学べるものがいいです。
私はまず、ソシムのHTML5&CSS3レッスンブックで基礎を学んで、HTML5&CSS3デザインブックでレスポンシブwebデザインを学びました。
※レスポンシブWebデザインとは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。
スマホの普及にともないレスポンシブwebデザインは必須スキルなので、おすすめします。
また、BootstrapというTwitter社が開発したCSSの”フレームワーク”を使うと、簡単にレイアウトを調整し、レスポンシブwebデザインを制作することができます。
8.トップページデザインを元に実際に作ってみる
コーディングがある程度できるようになったら、（４）で作ったトップページデザインを元に、さっそく０から自分で作ってみます。
実際に作り始めてみると、うまく反映されなくて行き詰まることがでてきます。
そんなときはgoogleで検索すると、だいたい答えにたどり着くことができます。
最後に参考のブログをご紹介するので参考にしてみてください。
WordPressを学ぶ方法
9.本で学ぶ
WordPressとは、オープンソース・無料で提供されている「ブログシステム」のソフトウェアのことです。
どんな時に導入するかというと、例えば「ブログ」や「お知らせ」といった投稿することができる更新機能をつけたいときに使います。
最近はこういった更新機能をつける動的なサイトが多いので、Wordpressができるようになると仕事の幅も広がります。
WordPressも本で学べます。
基礎はソシムのWordPressデザインブックで、もっとマスターしたいという人はWebデザインレシピの著者・高橋さんの基礎からのWordPress改訂版がおすすめ。
WordPressもいじってみると行き詰まることがでてくると思いますが、そんなときはgoogleで調べてみてください。
web制作のときにおすすめのブログやサイト
→Web制作会社ですがオウンドメディアをつくってWeb制作に役立つ情報を中心に更新されています。
・バズ部
→SEOやコンテンツマーケティングなどを勉強するならこちらがおすすめ。
→本も出版されている高橋のりさんという方のブログ。Wordpress初心者でもわかりやすく説明されています。
→高品質なフリーフォントやフリー素材などの情報が豊富。
・コリス
→web制作をしている過程でなにか困ったことがあるときに細かいことも解決してくれるブログ。
→デザイン、web制作、webサービスなど、クリエイターにとって役立つ情報がたくさん。まとめ記事がとても役に立ちます。
その他のツール
・Chromeデベロッパーツール（検証モード）の基本的な使い方を解説
→CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできます。これを知っておくとかなり時間短縮になるのでマスターしておくことをおすすめします。
・Google Fonts
→商用・非商用問わず無料で利用できるwebフォントです。コードをコピペするだけで簡単に使いたいwebフォントを使うことができます。
・Font Awesome Icons
→さまざまなアイコンをwebフォントとして利用することができます。こちらも無料で、コードをコピペするだけで簡単に使えます。
YouTube始めました
YouTubeで未経験からWebデザイナーになるための情報を発信しています。
ぜひチャンネル登録もよろしくお願いいたします！
未経験からWebデザイナーになる方法をすべてお教えします
「時間や場所に捉われない働き方をしたい」「Webデザイナーになりたい」という方に向けて、未経験からWebデザイナーになる方法〜営業方法をすべてお教えする「Webデザイナー養成講座」を2019年9月に募集スタートします。
興味のある方は、LINE＠に登録していただくとご案内が届きますので、ぜひ登録してください＾＾
▶︎ LINE＠ご登録はこちら
