インターネットビジネス最新情報ポータル IBNIP

独学でWebデザイナーになる方法

独学でWebデザイナーになる方法

スクールに通えば基礎からWebデザイナーになるための指導をしてもらえますが、ゼロから独学で学ぶ場合は書籍やオンライン講座などを利用します。

PhotoshopやIllustratorの使い方、HTMLやCSS、JavascriptやJQueryなどについてのわかりやすい指導書や講座、そして、それらを紹介しているWebサイトはたくさんあります。

しかし、まずやるべきことは、Webデザインの仕事をするための準備、仕事の流れやその時々で必要となる知識やスキルの全体像を把握することです。

ここでは、Webデザイナーの仕事の流れと、どの段階で何が必要なのかを順を追ってご説明いたします。

そもそもWebサイトはどうやってできているの?

WebサイトはHTMLというマークアップ言語で書かれています。

OSやブラウザによってやり方が異なりますが「ソースを表示」というような項目をクリックすると、Webサイトのソースコードを見ることができます。

このソースコードこそがWebサイトの実態であり、Webデザイナーはこれを作るのが仕事です。

「こんな複雑なコードを書くのは無理」と思われるかもしれませんが、初めはすべて書けなくても大丈夫です。ソフトを使えばある程度は自動的に書き出してくれます。

プロになると、ソフトを使うよりも、自分でコードを書く方が早い人もいます。

環境を整える

1.メモリの大きいパソコンと大画面やデュアルモニター

Webサイトを作る時には複数のグラフィック系アプリケーションを同時に立ち上げて、いくつもの画面を同時に扱います。

スクールなどに通わず、独学で学ぶ場合はメモリの大きいパソコンと大画面モニターかデュアルモニターがあると便利です。

2.必要なツール

ソフト

  • 画像作成・加工・デザイン作成:Adobe社のPhotoshop、Fireworks、Illustrator
  • コーディング:Adobe社のDreamweaverなど

1ヶ月の体験版をAdobe社の公式ページよりダウンロードできますが、購入する場合は月額4980円にてAdobe社のすべてのソフトが使えるサービスもあります。

フォント

OS付属のフォントだけではなく、有料、無料の多種多様のフォントを取り揃えておきます。

サーバー

作成したWebサイトをアップロードするサーバーが必要となります。

実際に仕事として請け負う時はお客様のサーバーにアップロードしますが、独学で学ぶのであれば自分のサーバーが必要となります。

サーバーを自作する人もいますが、多くの場合レンタルサーバー会社と契約をします。安い会社であれば、数百円/月でレンタルすることができます。

又、専用のドメインを作りたい場合は「お名前.com」や「ムームードメイン」などの会社から希望のドメインを買います。最近は数百円から千円/年の管理料で買うことができます。

FTPソフト

FTPソフトはサーバーにHTMLファイルをアップロードするためのソフトです。ネットから無料でダウンロードすることができます。FFFTP、Filezilla、WinSCPなどが有名です。

その他、状況に応じてWordPressやECサイトなどを習得する場合がありますがそれらは基礎を習得してからで構いません。

仕事の流れ

制作の現場では、チームとしてディレクター、デザイナー、コーダー、プログラマーなどが分担して仕事を行うこともありますが、ここでは企画からアップロードまでの一連の流れと各段階で必要な知識やスキルをご説明します。

企画

作成するWebサイトのコンテンツ、サイトのイメージや配色など概要を決めます。

必要なスキルと対策
色に関する知識 色、特に配色については関連サイトなどを利用して理解しておきます。
Webサイトの階層の知識 Webサイトのツリー構造を理解し、サイトマップを作成してみます。

ワイヤーフレーム作成

ワイヤーフレーム作成はデザインを行う前の段階で行う作業です。

手書き、Word、Excel、Illustratorなどでおおまかなレイアウトを決めます。ヘッダ、フッタ、左カラムのコンテンツ、メインカラムのコンテンツという程度のもので構いません。

必要なスキルと対策
Webサイトの構成要素、レイアウトパターンの知識 書籍などを参考にします。

デザイン画像作成

デザイン画像は、Photoshop, Fireworks, illustratorなどを使用して、ワイヤーフレームに沿ってWebサイトのできあがりイメージを画像で作成するということです。

建築パースと考え方は似ていますが、異なるのは実際にWebサイトを作成する際にデザイン画像を使用することです。

簡単に言えば、デザイン画像をパーツごとにばらして、コーディングによって配置し、見た目が同じになるように組み立てるということです。

必要なスキルと対策
Photoshop, Fireworks, illustratorなどのスキル すべての機能を理解しなくても、レイヤーや画像の加工、配置が一通り理解できるようになればとりあえずは大丈夫です。デザインだけを担当するという職種に就くのであればしっかり習得したいところです。実際に使いながらマニュアル書籍やオンライン講座を参考にして習得します。

HTMLとCSSでコードを書く

いよいよコーディング作業です。できあがったデザイン画像をパーツごとにばらして組み立てていきます。

<HTML>

HTMLのルールは把握しておく必要があります。

Dreamweaverなどのソフトを使えば、テキストや画像を配置するとある程度は自動的にコーディングをしてくれますが、いずれは自力で書けるようになる必要があるため、ソフトが書き出したコーディングはその都度見て覚えるようにします。

<CSS>

CSS(スタイルシート)は文字や画像の配置や色など視覚的表現をコントロールするためのコードです。HTMLとCSSを組み合わせるとWebサイトとしての形ができあがります。

必要なスキルと対策
HTMLとCSSでサイトを組み立てるスキル 書籍やオンラインの講座など一番わかりやすいもの選んで勉強します。ネット上から無料のHTMLテンプレートをダウンロードしてコードの書き方を参考にしてみるのもよいでしょう。

JavascriptとJQuery

次は、Webサイトに動きをつけます。

画像がスライドのように切り替わったり、メニューがドロップダウンになっていたり、その他にもさまざまな動きをするWebサイトがあります。

10年ほど前まではアニメーションのような動きと言えばもっぱらFlashが主流でしたが、Apple社がiOSのFlash対応をしていないことから、今ではFlashはほとんど使われなくなり、JavascriptやJQueryで動きをつけることが主流となっています。

これらはソースコードを見るとかなり複雑ですが、コードを1から書くことができるWebデザイナーはそれほど多くはありません。

いろいろなパターンの動きを表現するためのスクリプトがネット上から無料でダウンロードできますので、それらをカスタマイズして使用します。

必要なスキルと対策
JavascriptやJQueryの既存のコードをカスタマイズできるくらいのスキル 書籍やオンライン講座や利用して設置やカスタマイズする方法を習得します。

サーバーにアップロード

完成したWebサイトをサーバーにアップロードします。サーバーにアップロードするにはFTPソフトを使います。

必要なスキルと対策
使用するサーバーのおおまかな機能把握 管理画面を見てサーバーのおおまかな機能は把握しておきます。
FTPソフトの基本的な使い方の知識 FTPソフトによって使い方が異なりますが、ネット上に掲載されている情報で習得可能です。

実際のWebデザイナーの仕事はさらに複雑ですが、とりあえずここまで押さえておけば基本的なWebサイトを作ることができます。

その後、レスポンシブ(スマホ対応)、WordPressなどのCMS、ECサイト(オンラインショップ)、Webマーケティングなどさらに幅を広げていくことになります。