グラフィックデザイナーからwebデザイナーへ!実際に僕がした勉強方法と使用ソフト・役立つサイトやツールのご紹介

どうも。 
フリーランスでグラフィック・web制作をしている名もなきデザイナーshoji@です。  

 

今まで10年以上グラフィック(紙媒体)のデザインを行い、最近webのデザインとコーディングを始めています。

始めてると言っても基本的な事しか出来ないのでまだまだ×100勉強が必要ですけどね。

ちなみに今出来る事はこんな感じです。

  • Photoshopでサイトデザイン
  • HTML5とCSS3を使ったサイト構築(コーディング)
  • スマホ対応レスポンシブデザイン
  • WordPressのオリジナルテーマ作成(投稿機能あり)

 

サイト制作を本格的に勉強するまでは難しそうだなぁと思っていましたが2ヶ月ほどでこれ位は一通り作れるようになりました。

その間に僕が実際行った勉強方法や使っているツールなど紹介します。

 

グラフィックデザイナーからwebデザイナーへ!勉強方法と便利ソフト・ツールのご紹介

書籍を活用した勉強方法

よくwebデザイナー育成講座なんてのがありますが、普段からパソコンに触れているグラフィックデザイナーであれば独学で十分です。

僕が活用したのは書籍とwebサービスです。

まずは書籍のご紹介。

初心者向けの書籍はいくつかありますが大体書いてる事は一緒です。

初歩の知識を得るために購入したのはこちらの2冊だけです。

「Webデザインの新しい教科書」はHTML・CSSなどのコーディングの勉強に、「いちばんよくわかるWebデザインの基本きちんと入門 レイアウト」はデザイン・レイアウトの参考にしました。

最初に言いますが書籍だけで全て覚えるのは難しいというかほぼ不可能です。

コツは全ての事を完璧に覚えようとせず、ざっと流し読みする程度で大丈夫!

一度全ての内容に目を通しておいて、実際サイトを作る際にわからない部分の該当ページを詳しく読むという使い方をしています。

 

「Webデザインの新しい教科書」の新刊らしき書籍が発売されていたので、今から勉強される方はこちらの方がいいかもです。

 

ちなみにこのような書籍は大型の図書館に置いてある場合もあります。

2冊購入するだけで5000円位掛かるので図書館の活用もオススメです。

【コスパ抜群の勉強方法】Webやデザインの参考書は図書館を活用してお得に借りよう!

 

webサービスを活用した勉強方法

続いてwebサービスを使った勉強方法です。

 

Progate – プロゲート

初歩の勉強に一番役立ったであろうProgateです。

実際のコードを書きながら勉強できるので書籍よりも覚えやすいですし、HTML・CSSに加えてJavaScript・jQuery・PHP・Sassなどのフロントエンドに使える言語の勉強も可能です。

月額980円(無料でも勉強できる)ので、とりあえずというか必ず使ってみてください。知識が身に付くスピード感が違いますよ。

ちなみに僕は現在Lv.57です。笑

 

Udemy

Udemyの未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコースです。

動画を視聴して勉強するwebサービスです。

自宅で勉強する際はProgateで手を動かし、電車移動やちょっとした空き時間にUdemyで動画を見て勉強していました。

こちらのコースは再生時間が42時間のボリュームがあり、Photoshopを使ったデザイン〜コーディングまでの全ての流れが網羅されています。

 

最新のweb動向の情報収拾方法

webはグラフィクに比べて新しい技術や知識・デザインやレイアウトなどがどんどんと出てきます。

常に最新の情報を仕入れておかないと、ただ単にサイトが作れるだけでは他のwebデザイナーと差別化ができません。

そんな時に活用したいのがFeedlyです。

僕がFeeldlyでフォローしているweb系の情報サイト一覧。

 

webデザインのギャラリーサイト一覧。

 

Feedlyの使い方はこちら↓の記事を参考にしてください。

情報収集の時間短縮に便利なRSSリーダー「Feedly – フィードリー」

 

大まかな勉強方法はこんな感じですかね。中でも手を動かしてコードを書くのが一番大事です。

  1. 書籍でwebデザインのざっくりとした知識を得る。(全て理解しなくてもOK)
  2. Progateで実際にコードを書く。(一番大事です)
  3. コードを書きながら細かな不明点を上記の書籍やネットで調べる。
  4. 移動時間や空き時間にUdemyで動画勉強。
  5. 毎日1時間ほどFeedlyで最新のweb業界情報収集。
  6. ひたすら繰り返す。

 

 

web制作に使用しているソフトのご紹介

続いてweb制作に使用しているソフトのご紹介。

 

Brackets

コーディング用の無料エディター「Brackets」

コーディング用のソフトはAdobeのDreamweaverが有名ですが、無料のBracketsでも全く問題なくサイト制作が出来ます。

ちなみにBracketsもAdobe公式のソフトですし、DreamweaverCCのコード部分はBracketsをベースにしています。

HTML&CSS webコーディングにオススメのAdobe公式無料エディタ「Brackets – ブラケッツ」

 

FileZilla

FTPクライアントソフト「FileZilla」

FTPソフトとは制作したデータをサーバーにUPする為のソフトです。

以前は違うソフトを使っていましたが、FileZillaの方が使い勝手が良かったのでこちらに変えました。

使い方はこちらを参考にしてください。

 

ソフトはこの2つと、デザイン用のIllustratorかPhotoshopどちらかがあれば基本的なweb制作は可能です。

 

web制作に便利なサイト・ツールのご紹介

続いてweb制作に役立つサイトやツールのご紹介です。

 

stokphoto

webデザインなどの商用にも無料で使えるストックフォトサイトまとめです。

デザインやブログに役立つ!無料・有料お勧めストックフォトサイト

 

aun

クライアントとのデザイン修正に便利なサービスaun

デザインの修正依頼をあうんの呼吸でスムーズに!ビジュアルコミュニケーションツール「aun – アウン」

 

Copypet

サイトのパーツや細かな装飾をコピペだけで表現可能なタグをまとめたCopypet

htmlとcssを利用したwebサイトのパーツ・装飾をコピペで簡単表現「Copypet – こぴぺっと」

 

teratail

コードの書き方など自分では解決できない事を質問できるエンジニア特化型Q&Aサイト「teratail」

コーディングの疑問は一人で悩まず質問して解決しよう!エンジニア特化型Q&Aサイト「teratail – テラテイル」

 

browserling

MacでWindowsのブラウザチェックをする際にbrowserling

Macで簡単!Windowsブラウザチェック無料webツール「browserling – ブラウザリング」

 

まとめ

僕はこんな感じで日々勉強しています。

ある程度グラフィックデザインが出来るようになった時に、

「デザインを追求して極める or 横に展開してwebや動画制作なども出来るようになる」

で悩みました。

しかしデザインのセンスが良い人なんて山ほどいます。

僕はそこで勝負するのは難しいと判断して今はweb制作を勉強しています。

web制作も極める気はあまり無くて、ある程度出来るようになったら今度は動画制作を勉強するつもりでいます。

考えは人それぞれですから、デザイナーならデザインを極めろよって言う人もいるとは思いますけどね〜。

以上グラフィックデザイナーがwebデザインをする為にやった勉強方法のご紹介でした。

独学では不安だなって人はWEBCAMPのwebデザインコースなどで1ヶ月の短期間でwebスキルを身につけるのもアリだと思います。

 

関連記事:

・腕に自身のあるフリーランスのデザイナーやエンジニアに是非!高収入案件紹介サービス「Workship – ワークシップ」に登録してみた。

・駆け出しフリーランスは週2・3〜の派遣勤務との並行がオススメ!フリーランス求人エージェント紹介

 

 

 

LINE@で質問や相談、お仕事の依頼などを受け付けております。

  • お仕事の依頼をしたい。
  • 記事の内容をもっと詳しく知りたい。
  • デザイナーやフリーランスの働き方について聞きたい。
などなど何でもお気軽に連絡いただければと思います。