読者です 読者をやめる 読者になる 読者になる

I AM HARRY

WEB、英語、ライフハックや日々のニュースを発信していくWEBブログ

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

フリーランス WEB

f:id:harry_jpn:20160502200440j:plain

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

 

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

 

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

  • 本格的にWebデザインを勉強し直し始めたのは、2014年の夏頃。それまではWebディレクションとECコンサル的なことが中心だったが、Webデザインスキルもあれば、もう少し業務の幅が利かせると思った為。
  • 2015年の夏頃より、飲食店やサロン、個人事業主様のサイト、企業サイトなど知り合いから紹介を受けた案件や、クラウドワークスから依頼のあったものを手掛けるようになりました。とにかくwebデザインきっかけでクライアントになるケースも模索したかった為。
  • 現在は、Webデザインが完成した後のメンテナンスや、コンサルを中心に業務を行っており、デザインに関しては、あくまで依頼の入り口にしたかった為。

 

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

 僕は元々、デザインの仕事を少しだけ行っていた為、Webデザインの勉強をする前に、写真などの画像を中心とした画像編集作業を行っていました。HTMLなどのプログラミング系から勉強するか、グラフィック系から勉強するか、ということで悩むかもしれませんが、まずグラフィック系であるPhotoshop(フォトショップ)と、Illustlator(イラストレーター)から勉強することをおススメします。なぜかというと、PhotoshopはWebデザイン以外でも、写真の加工といった場面でも役に立つスキルなので、覚えておいて損はないです。

Photoshop(フォトショップ)、Illustlator(イラストレーター)って?

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

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

一ケ月の体験版をダウンロードすることができます。まずはどういうものか試してみたいという方にオススメです。画像編集ソフト | Adobe Photoshop CC体験版ダウンロード

 サポートの保証ができずあまりオススメはできませんが、自己責任でのCS2のダウンロードも可能です。Acrobat 7 および CS2 製品のダウンロード

 

PhotoshopとIllustratorについての基本的操作については、以前から知っていたが、もう一度、やり直しの意味も含めて、世界一わかりやすいIllustrator 操作とデザインの教科書 (世界一わかりやすい教科書)世界一わかりやすいPhotoshop 操作とデザインの教科書 (世界一わかりやすい教科書) を参考に進めました。ただ、今は、どちらもセットになった参考書が販売されているので、下記の参考書を買ったほうが得なのかもしれません。

世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書 CC/CS6/CS5対応 (世界一わかりやすい教科書)
 

 

 

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

Webでも紙媒体でも、ビジネス資料に関しても、デザインは非常に重要なファクターです。見にくい資料、ダサいデザインに説得力があるでしょうか?ノンデザイナーの人には、伝わるデザインの基本 よい資料を作るためのレイアウトのルール を知っているだけで、読みやすく伝わりやすい,そして見た目にも洗練されたデザインに近づくことができます。そういう意味で基本ルールをまず押さえておきたいオススメの本になります。

伝わるデザインの基本 よい資料を作るためのレイアウトのルール

伝わるデザインの基本 よい資料を作るためのレイアウトのルール

 

 

 

フォントにこだわろう

デザインをする上でフォントは非常に重要です。明朝体は少し高級感があり、丸文字だとカジュアルなイメージがあります。フォント一つでイメージが大きく変わることを理解した上で、いろいろなフリーフォントを手に入れてみるとデザインの幅が広がります。フォントについての理解やフリーフォントのダウンロードはLIGがオススメです。

liginc.co.jp

 

デザインを真似てみる

デザインは一から起こそうとすると非常に大変です。特に初心者の方にとっては、デザインする時点から迷ってしまい、作成するのにとてつもなく時間がかかることがあります。デザインをし始めた頃は、とにかく、お気に入りのサイトを見つけて、同じようなバナーやレイアウトができるかをどんどん制作することをオススメします。僕は元々、アパレルのECサイトを運営していたので、レディースファッションECサイトでは圧倒的な人気を誇る、「イーザッカマニア」のバナーや商品ページのレイアウトデザインにおいても、本当に参考になるサイトです。シンプルだけど、計算された色使いや配置など、ぜひ真似てみたくなります。

 

Webプログラミングの勉強について

デザインスキルが身についたら、次はWebプログラミングになります。ここからが興味がないとかなり初心者の方にとってはハードになってくると思います。HTMLやCSSなど、まずは基礎からしっかりと学んでいくことが重要になりますが、個人的にオススメできる参考サイトが「ドットインストール」です。このようなサイトが無料で使えることは本当に素晴らしいです。プレミアム会員(有料:980円)もありますが、無料でも十分理解できるサイトだと思います。

dotinstall.com

 

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

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

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

 

 後ほど、実際に本屋で確かめて、下記の参考書を改めて使用しました。実際に手を動かしながら覚えていく作業というのが一番の早道だと思っています。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

 

無料FFFTPツール

FFFTP - 窓の杜ライブラリ (Windowsの時)

FileZilla - The free FTP solution ( Macの時)

 

無料HTMLエディタ

ez-HTML - 窓の杜ライブラリ (Windowsの時)

Atom ( Macの時)

 

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

実際に無料のテンプレートを使ってサイトを作ることによって、実践的に感覚を掴むことができます。実際にすでに素晴らしいテンプレートの画像やCSS を少しアレンジするだけで、webデザインの知識もつくし、出来上がった時の満足感も非常に高いといえます。個人的によく使っていたのが、Bootstrapです。英語が苦手な方は、Tmplate Partyがオススメです。ただ、著作権が入っているので、外したい方は有料になります。

 

海外サイト

startbootstrap.com

 

国内サイト

template-party.com

 

はじめから制作してみる

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

 

最後に

ここまできてどうしてもWebプログラミングができない、という方も出てくるかと思います。最近はWixなどプログラミングができなくてもwebサイトが制作できます。僕も実際に数件、Wixで制作する案件を受けてきました。理由はクライアント側でブログなどを更新していきたいという理由でした。Wordpressよりも直感的に作ることができるので、webに詳しくないweb担当者様や、サイト更新の経費を抑えたい方にオススメしています。

ja.wix.com

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

 

 どうやって仕事を見つけるの?

ここでは、フリーランスが仕事を見つけるための戦略も記事にしています。

www.iamharry.net

まずは、クラウドワークス に登録して、Webデザインの仕事を見つけて、実力を試すのも良いでしょう。

 

Copyright© I AM HARRY All Rights Reserved.