WEBデザイナーになる方法

ビジネス

2014.05.132022.05.23

近年、インターネットの人口が増えていく一方で、優れたWEBデザイナーが求められる時代となっています。

ですが、インターネット人口と同じようにWEBデザイナーを希望する人も増えているのが実情です。
都心だけでなく地方でも専門学校で「WEBデザインコース」や「WEB学科」と称して毎年新しく人材が送り出されます。

今の高校生・大学生の中でも「IT関係の仕事をしたい」と思っている人も非常に多いため、いずれはWEBデザイナーも飽和状態を迎える可能性があります。
専門的な技術を持つ歯科医師や歯科衛生士でさえ供給過多で飽和状態となっているのが現代です。
つまり、WEBデザイナーとして生き残るにはそれなりの覚悟が必要となります。

WEBデザイナーとは
より専門的な知識を付ける
多彩な技術をつける
WEBデザイナーとして活躍するには

WEBデザイナーとは

意外にもウェブデザイナーになるのは簡単です。
怖いのは簡単に抜け出すことができないということです。
ここの業種で得た知識というのは、同じWEBの業界でしか通用しないものが多く、システムエンジニアやアプリケーションのプログラマーなどに転職できる人さえ少ないと言えます。

そんなWEBデザインの業界で生き残るのは２つの道があります。

「より専門的な知識を付ける」

もしくは

「多彩な技術を付ける」

このどちらかと言えます。
ごく普通のウェブデザイナーというのは、いくらでも代わりが効いてしまいます。
特にこの業界は常識というのがあっという間に覆されてしまうもので、何年も掛けて勉強したものが突然無意味になることが多々あります。

例えば、１０年前の２００４年は「フラッシュを覚えればずっと食って行ける」だとか、「一度覚えれば、５秒のフラッシュを作れば５万円のボロい商売」などと、WEB業界はFlashの技術でバブルが起こり、あらゆるサイトでフラッシュが持て囃されました。

ですが、淡い夢も長くは続かず、今では多くのサイトが脱フラッシュを目指しています。
何故ならば
「テキストのクロールができないため検索エンジン最適化が行えない」
「コンテンツの可変サイズが難しい」
「ショートカットキーやマウス、キーボード操作のユーザービリティが悪い」
「管理、メンテナンスが難しい」
「データベースと接続して管理するには膨大なお金が掛かる」
「読み込みに時間がかかり、ブラウザによって表示されない」

といった重大すぎる問題が山盛りあるためです。
そういた事もあり、WEB業界ではフラッシュが衰退しつつあります。

また、何と言っても致命傷を与えたのが「iOSのフラッシュ非対応」です。
今では街に出かければ必ず見かけるiphone。職場でも学校でも何十人もが毎日使っていると思います。
そのアイフォンがフラッシュ非対応という道を選んだ為に、フラッシュが衰退の一途を辿りました。

新しくHTML5たCSS3アニメーションなどの技術が普及しだし、大手のサイトもこれに合わせたWEB制作となっています。

つまり何が言いたいかというと、常に新しい技術が生まれ、過去に学んだものが無駄になる可能性があるということです。

より専門的な知識を付ける

先ほど説明した１つめの生き残る方法です。
基本的にウェブデザイナーというのはHTMLやCSSを使ってコーディングするのが主になると思います。

ですが、現在では動的なサイトも多く、モバイル向けに最適化など色々な知識が必要です。
そこでHTML、CSSに加え以下の様な専門的な知識を身に付けると良いです。

HTML5
CSS3
Mobile CSS (UserAgent切り替え・Viewport指定等)
Javascript
JQuery
WordPress
PHP
MySQL（データベース管理システム）
.htaccessによるアクセス制御
サーバーの管理維持
ドメインについて

いずれも2014年現在の話ですので、情報や技術が常に新しくなりますが少なくともHTML＋CSSだけで仕事をしようとするよりは有効的と言えます。

特にこの中でも、モバイル対応のCSSと、WordPress、PHP、MySQLの技術をしっかりと習得しておけば、暫くはウェブデザイナーとして幅広く活躍できると思います。
他にも動的なサイトを作るためには、今後はHTML5が必須になってゆくと思います。現在はjsとJQueryによってスライダーやセレクタ、動的なアクションを対応している流れですが、これがいつまで続くか分かりません。

特にワードプレスは、現在とても普及してきているCMS（コンテンツマネジメントシステム）のひとつで、大規模なサイトの構築には不可欠となってきています。
ワードプレスはPHPとHTML+CSSを覚える事によって、テーマが自由に編集できたり動的なサイトを作ることができます。

自作テーマが思うように作れる程度の技術になれば、ウェブ制作会社に入っても即戦力となれるはずです。
がっつりPHPを覚えなくとも、ループの方法やindex.phpから何処に繋がっていて、どこを編集すれば良いか程度は覚えて置くと融通が効くはずです。

あとは、意外と覚えていないのがドメインの管理やサーバ管理です。
あくまでも”ウェブデザイナー”なので、ウェブサイトはレンタルサーバーで管理すれば問題無いですが、ある程度は、レンタルサーバーの管理を適切に行える必要があります。

例えば自分のサイトを定期的にバックアップを取ったり、サーバーの空き容量を把握、転送量をチェック。
DNSやドメインの設定程度はウェブデザイナーでも覚えておいた方が良いです。

色々と例を上げてみましたが、こういった様な専門技術をしっかりと身につけるというのが、WEBデザイナーとして生き残る１つめの方法と言えます。

多彩な技術を付けるという方向性から、ウェブデザイナーとして活躍する方法を紹介します！！

多彩な技術をつける

専門的な技術を付けることを紹介しましたが、今度は多彩な広い技術を付けることで、転職や独立しやすい体制を予め作っておくという方法を紹介します。
また、この方法は、主に小さなWEB制作会社では壮大な威力を発揮するので、独立希望・もしくは小さなWEB制作会社で働くのであれば考えて見てください。

多彩な技術というのはどういうことかというと

人気サイトを作る技術
ニーズに合った豊富なコンテンツを作り出せる
カメラを使える、綺麗な写真を撮れる
一眼レフカメラで動画を撮れる
フォトショップで写真編集ができる
イラストレーターでWEBデザインができる
イラストレーターで素材や加工ができる
HTML/CSSでサイトが作れる
WordPressのサイトが作れる
パンフレットやチラシなど作れる
印刷業者にデータを入稿できる
プレミアやアフターエフェクトで動画が作れる
ロジックやプロツールで音楽が加工できる

こういった技術があれば、非常に幅広く活躍でき高収入を狙うこともできます。
また独立する体制も作りやすいです。

まず人気サイトを作る。ニーズにあったコンテンツが作れる。

これは、ウェブデザイナーになる前に始めるべきことです。
レンタルサーバーを借りて、ワードプレスをインストールして、市場で人気のある分野を元にサイトを運営します。
そこでアクセス数を稼ぎ月間１万～１０万ＰＶを生み出します。
こういった経験を積むことによって、非常に実践的な技術を学び勉強することができます。

カメラを使える、綺麗な写真を撮れる。

これは現在の個人WEBデザイナーには必須と言える程重要なことです。
写真素材を何万円も出して買えるような余裕のあるクライアントなら良いですが、ちょっとした素材は自分で用意できた方がスムーズに制作が進みます。
自分で撮影した綺麗な写真であれば、誰の許可を撮る必要もなくサイトに使用できます。

カメラの勉強は少し必要ですが、フルサイズの一眼レフカメラと単焦点レンズの２つあれば屋外の写真はほとんど撮れます。
残りは、クリップオンストロボか、もしくはモノブロックのストロボを買ってきて、ライティングを簡易的に組めば、ショップサイトの物撮りまで出来るので、ウェブデザイナーとカメラマンの両方の仕事ができます。
何処の会社も、誰しも１００％プロのカメラマンが必要な訳ではありません。
現代では予算を少なくしたいという会社が多いため、素人とプロの中間の”ある程度写真がうまい”人が求められたりします。

そこで、低予算で”ある程度”の物撮りができる、というのは非常に強みになります。
また、交友関係が広い友人と仲良くしておけばキャスティングもお願いできます。

つまり、例えばファッションサイトを作る時、個人で仕事を受注した場合は、「モデル代＋撮影代＋サイト制作＋運用」が自分で全てもらえるので、ただHTMLサイトを作る時の何倍～何十倍もお金を取ることができたりします。
そこからモデル代などを紹介してくれた友人やモデルをしてくれた本人に出せばよいのです。

他にも自然の写真や町並みなど普段から撮りためておけば自由に使えるフォトストックができます。
また顧客のお店や商品などサクっと無料で取って上げて好感度アップなども出来ます。

一眼レフカメラで動画を撮れる。

これも、ウェブデザイナーでありながら勉強しておくと便利なことです。
最近ではフルサイズセンサー＋単焦点レンズで非常に美しい動画を手軽に民生機で撮影することが可能となりました。

一眼レフカメラで撮った動画をテレビCMで使う業者があるほどにクオリティが高く、ほんと少し簡単に撮る程度なら専門的な技術も入りません。
ドリー撮影などは専門の道具が必要ですが、フィックス（固定）で撮影する場合は一眼レフカメラに慣れていれば簡単です。

FullHDで撮影して、アドビのプレミアなどで編集すれば動画も制作できるので、受注できる仕事の幅や、こなせる仕事の幅が非常に広くなります。もしそれを仕事としなくても、覚えておくだけで使えるシーンもあるので便利です。

あとは撮影データをDVDに焼く方法など勉強しておけば、会社でも役に立てて頼られる存在となります。

フォトショップで画像編集

これは現在のウェブデザイナーでも必須とも言える技術の一つですね。
画像を取り扱う時は、「とりあえずPS」をクリックする程です。
少なくともレベル補正やリサイズ、レイヤーの取り扱い、マスク、フィルター、乗算・スクリーンなどをマスターしておけば、現場でも必ず使える技術です。
他にも最近のフォトショップは「コンテンツに応じて塗りつぶす」や「自動補正」「レンズ補正」といった類の作業がとてもスムーズに行えるようになりました。また流行りのHDRやパノラマ写真を自動で作ってくれる「Photomerage」といった機能もあります。

画像編集では女性モデルを綺麗に仕上げたり、商品の写真を綺麗に仕上げたりといった作業を覚えて置けば実践的です。
ネットの素材サイトからダウンロードしたブラシツールのインストールも覚えておくと良いです。

大規模なサイトでは、画像を圧縮する必要があるので、WEB及びデバイス用に保存でサイズを確認する癖を付けるのもおすすめです。

イラストレーターでウェブデザインをする

イラレを自由に使えるのもWEBデザイナーとしてはとても有利と言えます。
色々なバナーを作り出せたり、サイトのデザインを”仮”で作ることができます。
一緒に色の勉強をしておくのもよいです。

例えばデザインラボの「配色＆カラーデザイン　プロに学ぶ一生枯れない永久不滅テクニック」という本がありますが、これは便利で勉強になる本です。
色の三属性と有彩色、無彩色。PCCS表色系や、色相・明度・彩度の基本を学ぶ事もできます。
具体的にどのようなカラー配色がサイトに有効化といった例も沢山紹介されています。

WEBデザインも色彩のセンスによって印象が全く異なるので、”ユーザーインターフェース”と”配色”はこれからも大切なテーマとなるのは間違いありません。

また配色調和の基本を覚えておくだけで、見当外れな色を使わずにプロの仕上がりになるので、１冊はこういった本をマスターするのがお勧めです。
ケルビンについての説明もありますが、これはカメラのテクニックや動画のテクニックにも流用できる勉強です。
色温度というのはWEBデザイナーにも必須の項目で、カメラのホワイトバランスだけでなくプリンター、モニターのキャリブレーションを行う時に覚えていないと何をしているかチンプンカンプンになってしまいます。

イラストレーターで素材を編集・加工する

これもまたWEBデザイナーには欠かせない技術です。
全て自分で作ることは難しいですが、海外のフリー素材サイトからepsやaiのファイルを引っ張ってきてオリジナリティを加える技術があれば、WEB制作の幅も広がります。

他にもイラレでライブトレースの勉強をしておけば、写真の素材からベクター素材に編集できます。
大げさに言えば、ごく小さな写真素材(200px　200px)でさえもライブトレースを適切に行えば、A3ポスターに印刷できる程、引き伸ばすことも可能になります。
こういった細かいテクニックがWEB製作者としての技術の差として生まれます。

後はイラレとフォトショップの連携も重要です、イラレで元となるデータを作り、フォトショップでアンティーク加工したり、クリッピングマスクを施したり、マスク＋別の素材の乗算など複雑な処理を施すことによって、色々なものを作り出せます。

HTML・CSSでサイトをつくれる

これは、超基本ですね。
コードや要素を全て覚える必要はありません、”どんなのがあったか”というのを覚えておけば、必要となった時にパッと検索すればコードが出ます。
例えば「divに影つけるのなんだっけかな～？画像に付けずに、ボーダーとCSSで対応させた方が良いなぁ」とおぼえて置けば、検索できます。

「box shaddow と text shaddow にborder 1px solid #666で対応しよーっと」といった感じで思い出せます。
画像で影を付けてしまうと、後々影の濃さを変えたり、影を無くすことが出来ないので、余計な時間を掛けてしまうことになります。

一例ですが、こういった”何があるか”を覚えておくのが大切です。
他にもアンカーを覚えておいたり、ALT、ファイルネーム付けを正しく行うことでSEO対策にもなります。

ワードプレスでサイトを作れる

実際に自分のレンタルサーバーにインストールして弄って覚えるのが一番早いです。
ここで、なんとなくPHPやワードプレスのテーマについて勉強して置くと実践的な勉強ができます。

特にテーマをインストールして付帯しているfunction.phpというのは難しいですが、さら～っと読んで、どんなことが書かれているか分かる程度にはなっておくと良いです。

ワードプレスはウィジェットやプラグインが豊富で、今まで複雑なJSをインストールしないと動作しなかった物も簡単に動作できます。
他にも過去にはcgiで #user bin parlといったように、頑張って書き上げていたCGIも、今では「コンタクトフォーム」というプラグインを入ればものの数分でフォームをインストールできます。

他にもアクセス数ランキングや、関連記事の表示なども簡単です。
またユーザーごとに管理権限を設定できるので、大人数で編集する事もできます。

パンフレット・チラシを作れる

これはウェブデザイナーがやばくなった時に覚えて置くと転職できて便利な技術です。
基本的にはイラレとフォトショップを覚えて置けばできます。
単行本やカタログ、雑誌を作るのであればインデザインも覚えた方が良いですが、ウェブデザイナーでインデザまでやる必要なないかもです。

【低予算】格安でフリーペーパーやパンフレットを作る方法！！【低コスト】

ここのページを読んでフリーペーパー作りとパンフレット作りを覚えれば、仕事になります。
それにもしWEBデザイナーをやめても、とりあえずフリーで食いつなぐ事もできます。
あと、これができれば会社でも重宝されるはずです。

印刷業者にデータを入稿できる

つまるところ、アウトライン化と塗りたし、CMYKの合計を400％にしちゃいけないとか、画像書き出ししてZIPにするとか、基本的な１０個位の事を覚えればOKです。
あとは親切なプリントパックやグラフィックのお姉さんが手取り足取り教えてくれます。LINE ID以外は・・・。

入稿さえすれば、印刷物が自由自在に頼めるので、WEBデザイナーとて活動するときに、自由に販促物が作れます。
また顧客がこれをチラシにしたい～と言った時にも柔軟に対応できます。

アフターエフェクトで動画編集

つまり、さっき説明した一眼レフカメラで撮影した動画を加工する技術です。
例えば切ったりつないだり、フェードアウトさせたり、雨をふらせたり雪を降らせたり、光でキラキラにしたり
色々と動画を加工することができます。

何だかんだいって、イラレやフォトショにも似ているので、ずるずると覚えてしまいそうです。
あとはパブリッシングすれば動画ファイルの出来上がりっ！

ロジックやプロツールで音楽編集

これはですねー・・。今では音楽をサイトに埋め込むことが少ないですが、もし好きであれば覚えておくと便利です。
動画制作するときに音楽をぴったりに収めたり、ちょっとしたループの曲を作ればフリーBGMの代わりに自分で曲が作れたりします。
あとは、ポータブルレコーダーがあれば、楽器演奏なども収録＋編集できます。
ディレイやリバーブを調整できれば、CDプレス＋PR販促物制作＋WEB制作など一環してアーティストをサポートできます。
「この人に頼めば全部できる！！」という、便利な人ですね～～。