今まで10年以上グラフィック(紙媒体)のデザインを行い、最近webのデザインとコーディングを始めています。
始めてると言っても基本的な事しか出来ないのでまだまだ×100勉強が必要ですけどね。
ちなみに今出来る事はこんな感じです。
- Photoshopでサイトデザイン
- HTML5とCSS3を使ったサイト構築(コーディング)
- スマホ対応レスポンシブデザイン
- WordPressのオリジナルテーマ作成(投稿機能あり)
サイト制作を本格的に勉強するまでは難しそうだなぁと思っていましたが2ヶ月ほどでこれ位は一通り作れるようになりました。
その間に僕が実際行った勉強方法や使っているツールなど紹介します。
グラフィックデザイナーからwebデザイナーへ！勉強方法と便利ソフト・ツールのご紹介
書籍を活用した勉強方法
よくwebデザイナー育成講座なんてのがありますが、普段からパソコンに触れているグラフィックデザイナーであれば独学で十分です。
僕が活用したのは書籍とwebサービスです。
まずは書籍のご紹介。
初心者向けの書籍はいくつかありますが大体書いてる事は一緒です。
初歩の知識を得るために購入したのはこちらの2冊だけです。
「Webデザインの新しい教科書」はHTML・CSSなどのコーディングの勉強に、「いちばんよくわかるWebデザインの基本きちんと入門 レイアウト」はデザイン・レイアウトの参考にしました。
最初に言いますが書籍だけで全て覚えるのは難しいというかほぼ不可能です。
コツは全ての事を完璧に覚えようとせず、ざっと流し読みする程度で大丈夫！
一度全ての内容に目を通しておいて、実際サイトを作る際にわからない部分の該当ページを詳しく読むという使い方をしています。
「Webデザインの新しい教科書」の新刊らしき書籍が発売されていたので、今から勉強される方はこちらの方がいいかもです。
ちなみにこのような書籍は大型の図書館に置いてある場合もあります。
2冊購入するだけで5000円位掛かるので図書館の活用もオススメです。
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系の情報サイト一覧。
- DesignDevelop
- Googleウェブマスター向け公式ブログ
- ICS MEDIA
- stocker.jp
- webopixel
- Webpark
- webクリエイターボックス
- webディレクターズマニュアル
- かちびと.net
- コムテブログ
- サルワカ
- バシャログ
webデザインのギャラリーサイト一覧。
Feedlyの使い方はこちら↓の記事を参考にしてください。
大まかな勉強方法はこんな感じですかね。中でも手を動かしてコードを書くのが一番大事です。
- 書籍でwebデザインのざっくりとした知識を得る。(全て理解しなくてもOK)
- Progateで実際にコードを書く。(一番大事です)
- コードを書きながら細かな不明点を上記の書籍やネットで調べる。
- 移動時間や空き時間にUdemyで動画勉強。
- 毎日1時間ほどFeedlyで最新のweb業界情報収集。
- ひたすら繰り返す。
web制作に使用しているソフトのご紹介
続いてweb制作に使用しているソフトのご紹介。
Brackets
コーディング用の無料エディター「Brackets」
コーディング用のソフトはAdobeのDreamweaverが有名ですが、無料のBracketsでも全く問題なくサイト制作が出来ます。
ちなみにBracketsもAdobe公式のソフトですし、DreamweaverCCのコード部分はBracketsをベースにしています。
FileZilla
FTPクライアントソフト「FileZilla」
FTPソフトとは制作したデータをサーバーにUPする為のソフトです。
以前は違うソフトを使っていましたが、FileZillaの方が使い勝手が良かったのでこちらに変えました。
使い方はこちらを参考にしてください。
ソフトはこの2つと、デザイン用のIllustratorかPhotoshopどちらかがあれば基本的なweb制作は可能です。
web制作に便利なサイト・ツールのご紹介
続いてweb制作に役立つサイトやツールのご紹介です。
stokphoto
webデザインなどの商用にも無料で使えるストックフォトサイトまとめです。
aun
クライアントとのデザイン修正に便利なサービスaun
Copypet
サイトのパーツや細かな装飾をコピペだけで表現可能なタグをまとめたCopypet
teratail
コードの書き方など自分では解決できない事を質問できるエンジニア特化型Q&Aサイト「teratail」
MENTA
今から学びたいことをメンターに直接指導してもらえるサイト「MENTA」
新しいスキルを身につける時は独学よりもメンターに指導してもらい時間をショートカットしよう！オンラインで人生のメンターが探せるサービス「MENTA – メンタ」
browserling
MacでWindowsのブラウザチェックをする際にbrowserling
まとめ
僕はこんな感じで日々勉強しています。
ある程度グラフィックデザインが出来るようになった時に、
「デザインを追求して極める or 横に展開してwebや動画制作なども出来るようになる」
で悩みました。
しかしデザインのセンスが良い人なんて山ほどいます。
僕はそこで勝負するのは難しいと判断して今はweb制作を勉強していますが、web制作も極める気はあまり無くてある程度出来るようになったら今度は動画制作を勉強するつもりでいます。
考えは人それぞれですから、デザイナーならデザインを極めろよって言う人もいるとは思いますけどね〜。
以上グラフィックデザイナーがwebデザインをする為にやった勉強方法のご紹介でした。
独学では不安だなって人はWeb制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】などを利用して短期間で身につけるのもオススメです。
関連記事:
・腕に自身のあるフリーランスのデザイナーやエンジニアに是非！高収入案件紹介サービス「Workship – ワークシップ」に登録してみた。
・駆け出しフリーランスは週2・3〜の派遣勤務との並行がオススメ！フリーランス求人エージェント紹介
LINE@で質問や相談、お仕事の依頼などを受け付けております。
- お仕事の依頼をしたい。
- 記事の内容をもっと詳しく知りたい。
- デザイナーやフリーランスの働き方について聞きたい。
