独学でも1年でフリーのWebデザイナーになれる勉強方法とおすすめの参考書

f:id:harry_jpn:20160502200440j:plain

Webデザインができると、自分が提供したいモノやサービス、またサイト上で自分自身の考えや思いを発信することができます。Webデザインを勉強することは、様々な業務においても考える思考能力がつくので、例えば、今まで営業という職種だけで働いてきた人などについては、プレゼン資料を作るといった作業にも非常に役立つので、少しでもWebデザイナーに興味がある人であれば、ぜひ勉強してみてほしいと思います。

ここでは、HTML5とCSS3を基本としたレスポンシブデザインで、個人事業主様のサイトや飲食店やサロンなどを中心としたサイトが制作できるWebデザイン能力が身に付けられると捉えていただけたらと思います。

僕がWebデザインを勉強しようとしたキッカケ

本格的にWebデザインを勉強し直し始めたのは、2014年の夏頃でした。それまではWebディレクションとECコンサル的なことが中心でしたが、Webデザインスキルもあれば、もう少し業務の幅が利かせると思った為、Webデザインを勉強しようと思い始めました。

2015年の夏頃より、飲食店やサロン、個人事業主様のサイト、企業サイトなど知り合いから紹介を受けた案件や、クラウドワークスから依頼のあったものを手掛けるようになりました。とにかくWebデザインきっかけでクライアントになるケースも模索したかった為です。現在は、Webデザインが完成した後のメンテナンスや、コンサルを中心に業務を行っており、デザインに関しては、あくまで依頼の入り口として考えています。

まずは画像編集スキルから身につける

僕は元々、デザインの仕事を少しだけ行っていた為、Webデザインの勉強をする前に、写真などの画像を中心とした画像編集作業を行っていました。

HTMLなどのプログラミング系から勉強するか、グラフィック系から勉強するか、ということで悩むかもしれませんが、まずグラフィック系であるPhotoshop（フォトショップ）と、Illustlator（イラストレーター）から勉強することをおススメします。

なぜかというと、PhotoshopはWebデザイン以外でも、写真の加工といった場面でも役に立つスキルなので、覚えておいて損はないです。

Photoshop（フォトショップ）、Illustlator（イラストレーター）って？

PhotoshopとIllustratorについての基本的操作については、以前から知っていましたが、もう一度、やり直しの意味も含めて、下記の参考書を使用して勉強しました。どちらも一人で進めていくには、十分わかりやすい参考書です。

Photoshop は、画像の色を調整したり、サイズを変更したり、画像と文字を合成したするツールです。Webサイトに掲載する為に、暗い画像を明るくしたり、大きい画像を小さくしたりします。また文字を合成してバナーを作ったりする、Webデザインに欠かせないツールです。

Illustrator は、カタログやDM、ポスターなどを制作したいときに使うソフトです。ロゴやイラストなど、細かい線画や、図形などを描きたい時に使う、特に紙媒体においてのデザインに欠かせないツールです。

どちらも一ケ月の体験版をダウンロードすることができます。まずはどういうものか試してみたいという方にオススメです。サポートの保証ができずあまりオススメはできませんが、自己責任でのCS2のダウンロードも可能です。

関連サイト：Acrobat 7 および CS2 製品のダウンロード

デザインの基本をおさえる

Webでも紙媒体でも、ビジネス資料に関しても、デザインは非常に重要な要素です。見にくい資料、ダサいデザインに説得力があるでしょうか？

デザイナーの人だけではなく、ノンデザイナーの人にも、デザインのレイアウトルールを知っているだけで、読みやすく伝わりやすい，そして見た目にも洗練されたデザインや資料に近づくことができます。そういう意味で基本ルールをまず押さえておきたいオススメの本になります。

フォントにこだわろう

デザインをする上でフォントは非常に重要です。明朝体は少し高級感があり、丸文字だとカジュアルなイメージがあります。フォント一つでイメージが大きく変わることを理解した上で、いろいろなフリーフォントを手に入れてみるとデザインの幅が広がります。フォントについての理解については、タイポグラフィの基本ルールを押さえておくことをお勧めいたします。

デザインを真似てみる

デザインは一から起こそうとすると非常に大変です。特に初心者の方にとっては、デザインする時点から迷ってしまい、作成するのにとてつもなく時間がかかることがあります。

デザインをし始めた頃は、とにかく、お気に入りのサイトを見つけて、同じようなバナーやレイアウトができるかをどんどん制作することをオススメします。レイアウトデザインを勉強するには、この本がかなり参考になります。

Webプログラミングの参考サイト

デザインスキルが身についたら、次はWebプログラミングになります。ここからが興味がないとかなり初心者の方にとってはハードになってくると思います。

HTMLやCSSなど、まずは基礎からしっかりと学んでいくことが重要になりますが、個人的にオススメできる参考サイトが「ドットインストール」です。このようなサイトが無料で使えることは本当に素晴らしいです。

プレミアム会員（有料：９８０円）もありますが、無料でも十分理解できるサイトだと思います。

参考書を使ってWebサイトを作ってみよう

上記のサイトでなんとなく理解できたら、実際に参考書を使ってWebサイトを作ってみると良いと思います。Dreamweaver を使ってみるのも良いですが、最近はWordpressなどのツールが主流となってきたため、できたらフリーのHTMLエディターを使って更新できるスキルを身につけておきたいです。

上記の参考書を使って勉強しました。一から参考書に沿って勉強していくとサイトが出来上がりますので、自分なりにアレンジしていくこともできます。参考書の工程を経てきたら、web制作スキルも身についてきたと言えるのではないでしょうか。

だいたいは検索すれば解決法が見つかるので、あとは色々と実践を積むために知り合いのサイトを作ったり、個人商店レベルのサイト制作を引き受けても良いと思います。満足が得られるものであれば、仕事もとっていけるレベルになると思います。

無料HTMLテンプレートを利用する

実際に無料のテンプレートを使ってサイトを作ることによって、実践的に感覚を掴むことができます。実際にすでに素晴らしいテンプレートの画像やCSS を少しアレンジするだけで、webデザインの知識もつくし、出来上がった時の満足感も非常に高いといえます。

個人的によく使っていたのが、Bootstrapです。英語が苦手な方は、Tmplate Partyがオススメです。ただ、著作権が入っているので、外したい方は有料になります。

Webデザインが難しいという方へ

ここまできてどうしてもWebプログラミングができない、という方も出てくるかと思います。最近はWixなどプログラミングができなくてもwebサイトが制作できます。僕も実際に数件、Wixで制作する案件を受けてきました。

理由はクライアント側でブログなどを更新していきたいという理由でした。Wordpressよりも直感的に作ることができるので、webに詳しくないweb担当者様や、サイト更新の経費を抑えたい方にオススメしています。

最後に

今では学校に行かなくてもネットや本でも独学でwebデザインが学べる時代です。僕はレベル的にはまだまだなのですが、webデザインを勉強すると、業務の幅が広がったので、結果的には良かったと思っています。これかたWebデザイナーを目指したいという方の参考になればと思います。