webデザイナーになるための勉強法
私は2011年からウェブの勉強を始めました。
今では100サイト以上の制作実績があります。
webデザイナーになるためには制作ソフトや言語を使いこなせなければなりません。
webデザイナーのスキルには
大きくわけて3つのスキル習得が必要で、
その他サーバーやドメインの知識が必要になります。
3つのスキルとは、
1.コーディングスキル
2.プログラムスキル
3.画像処理・デザインスキル
の3つです。
1.コーディングスキル
私が最初に覚えたことは、HTMLと呼ばれる言語です。
HTMLが習得できれば、CSSと呼ばれる言語を習得しました。
CSSを習得してからはプロのようなサイトを作れるようになります。
HTMLだけでは素人が作るサイトのようなサイトになります。
基本的な勉強法は、本を見て
本のコードを写経します。
コードをテキストエディタなどで打ち込み
実際の表示されるページを見て、
このコードを使うとこうなるのか！
動作を1つずつ確認して、習得していきました。
コーディングスキルは、これをやることで基本は身に付きます。
２カラムや３カラムのサイトのデザインはCSSを使って実装できます。
しかし、これだけでは、プロのようなサイトになりません。
プロのサイトは、これに加えて、動きがあったり、
画像加工されていてとても綺麗でダイナミックなのです。
HTML＋CSSはあくまでレイアウトを綺麗にするくらいでした。
2.プログラムスキル
動きのあるサイトは、どうやって作っているのか？
それは、JavascriptやjQueryと呼ばれる言語を使って、
ダイナミックなサイトを制作していることがわかりました。
JavascriptとJQueryの本を買って、
また写経してブラウザに表示させて、
動きを1つずつ確認にして習得していきます。
＜これで動きのあるサイトが作れるぞ＞
しかし、コーポレートサイトなどには、必ずと言っていいほど、
メールフォームと呼ばれるユーザーが入力した情報を受け取れるシステムが
設置されています。
これはどうやって作っているのか？
CGIやPHPと呼ばれる言語を使ってシステムが動いているから
メールでユーザーが入力した情報を受信することができます。
私は、CGIの本を買っていつもように、写経しました。
CGIには便利なメールフォームプロと呼ばれる無料で利用できる
メールフォームのプログラムが配布されています。
これを使わない手はありません。
この手のシステムは、１度設置できれば簡単です。
次に、メールフォームをPHPで自作する必要があると感じました。
CGIが使えないサーバーでも対応できた方がいいと思ったからです。
PHPの学習も本で写経です。
本屋で販売されているあらゆるPHPの本を読み漁り、
自作できるメールフォームのコードが記載されている本を探しました。
その本を参考にして、メールフォームを作成しました。
これで、一人で外注もせずに、ウェブサイトを作ることができます。
PHPやCGI、Javascriptなどと同時に
習得したスキルがあります。
それは、Photoshopのスキルです。
これは、画像加工やデザインにかかわる部分で、
このスキルが高いほど、エレガントな綺麗なサイトを
制作することが可能となります。
3.画像処理・デザインスキル
Photoshopの使い方と配色の組み合わせの相性の知識を勉強しました。
ウェブサイトにおいて配色の組み合わせが重要で、配色でユーザーが受ける印象はガラリと変わります。
間違った配色をすると、サイトに訪問したユーザーは居心地が悪くなり、離脱率が高くなります。
反対に、正しい配色をしたサイトでは、ユーザーの滞在時間は長くなります。
配色は、デザインの面(人に与える印象)と、サイトの目的にも影響する大切な部分です。
手を抜くことができません。
そして、プロのような綺麗なエレガントなサイトを制作する上で、一番重要となるポイントを今からお話します。
それは『とにかく真似ること』でした。
私は、自分が気に入ったサイトを模倣して再現できるように、PhotoshopやCSSを使ってコピーサイトを作りました。
(もちろん、コードは丸パクリはしません。画像も自分で制作します。)
プロのデザインを真似ることで自分のスキルにできます。
ウェブデザイナーになるには、上記の3スキルが必須です。
一人前になるためには、サーバーとドメインの知識も必要です。
サーバーの知識とは、自作サーバーはコスト面や運用面で割に合いません。
そのためレンタルサーバーが主流です。
ファイルのパーミッション(権限の許可レベルの設定)や、
FTPの設定方法(サーバーにデータをアップロードする方法)、
ディレクトリの構造を理解する必要があります。
ドメインについては、ドメイン種類と特徴。
ドメインには、.jpドメインや.com .net などあります。
法人ドメインではco.jp などたくさんの種類があります。
また、サーバーを変える時のネームサーバーの設定方法や、
MySQLなどのデータベースなど、バージョンなど、自分がやりたいことが
できるサーバーなのか知る必要があります。
これらの知識は、どうやったら身につくのか？
疑問があれば、すぐにサポートに連絡して聞くことをおすすめします。
エックスサーバーやさくらのレンタルサーバーでは、サポートは電話で対応してくれるので、すぐに疑問を解決できます。
疑問があるたびに、質問する姿勢が、サーバーとドメインの知識がつきます。
また、レンタルサーバーのよくあるご質問を読んで、疑問があれば電話で聞くことも勉強になります。
番外編 Wordpress
現在、世界中の4分の1のサイトはWordpressで作られていると言われています。
ワードプレスは、もはやスタンダードです。
私は、Wordpressを知った時に、正直 不要なスキルだと思いました。
その当時、自分でサイトも作れるようになっていたし、
マイクロソフトのWordみたいなサイト制作ツールだと思っていたからです。
しかし、ワードプレスは、そんな限られた使い道しかないツールとは、
相反するものでした。
ワードプレスは、もともとブログの無料プログラムでした。
今では、カスタム投稿やカスタムフィールドなどの登場により
CMS(コンテンツマネジメントシステム)として、完成度が高いプログラムになりました。
これは、自分のスキルにしたいと思い、本を購入しWordpressの基礎・使い方をマスターしました。
次に、Wordpressを自分でデザインして自作テーマファイルを作成するようになりました。
今では、ワードプレスのカスタム投稿を使ったシステム設計まで行うことができるようになりました。
最新のwebデザイナーのスキル
CSS3
CSS3の登場でスマホとPCに対応したサイトを制作することができるようになりました。
CSS3のメディアクエリと呼ばれるコードを使うことにより、デバイスの横幅によってデザインを最適化することができます。
CSS3は、それだけではなく、グラデーションやシャドウ表現、角丸にも対応しており、今まで画像で作成していたボタンや見出しをCSS3だけで表現することができるようになりました。
これで、ページの読み込み速度が上がり、SEOにも有利になります。
画像ばっかりつかっていると、読みこむ画像の容量が大きくなり、ページ全体が読み込まれるまでに時間がかかってしまったりします。
できるだけCSS3をつかってコーディングすることで読み込み速度を早くすることができます。
CSS3で一番すごいことができるのは、アニメーション機能です。
今まで動きのあるサイトを作るときは、javascriptが当たり前でした。
CSS3の登場でjavascriptを使用しなくても、動きのあるサイトを作ることができるようになりました。
CSS3のアニメーションを極めることでインタラクティブなサイトも制作することができます。
Sass(サス)
Sassは、CSSをプログラムっぽくした言語です。
Sassの意味は、いけているCSSということで、何がそんなにいけているのか？
それは、CSSの管理がしやすくなることです。
Sassを一度、覚えてしまうと普通のCSSに戻ることができないようです。
それだけ管理を効率的にでき、ファイルとコードを管理しやすくなるメリットだらけの言語です。
導入ハードルは高く、プログラムということで、学習コストも高いので、普及していないと思っていましたが、ウェブ制作の6割から7割はSassを導入しているそうです。
これは、もうスタンダードだと思います。
学習コストを払ってでも、修得するべきものだと私は思います。
＜まとめ＞ウェブデザイナーになるには
■1.コーディング基本
HTMLの習得
CSSの習得
javascriptの概要を習得
■2.プログラム
CGIメールフォームの設置
phpの概要を習得
phpを使ったメールフォームの作成
WordPressの基礎・使い方をマスター
WordPressでテーマファイルを作成
■3.画像処理・デザイン
Photoshopの習得
配色の勉強
・サーバーとドメインの知識
・Wordpressで自作テーマ作成
＜まとめ＞webデザイナーになるには
・CSS3の習得 特にアニメーション
・Sassの習得
PS.さらにウェブマーケティングの領域も習得しよう
サイトは本番アップしてからが本番です。
サイトには目的があるはずです。サイトに目的を達成してもらいましょう。
そのためには、日々アクセス数やアクセス経路などサイトを数値化し、改善していく必要があります。
無料で利用できるグーグルアナリティクスと呼ばれる便利なツールを使ってサイトを解析します。
私は、グーグルアナリティクスのことも理解できるようになりました。
専門用語が多くて、最初は用語を覚えるのに必死でした。
ある程度、グーグルアナリティクスを使えるようになったのですが、問題が発生しました。
それは、数値を拾うことができても、数値を活かすことができなかったのです。
問題の原因は、その当時はわからなかったです。
何を改善すれば、この数字を活かせるのか？
答えは、ウェブマーケティングの勉強をしてからわかりました。
ウェブマーケティングができるようになってからGoogleアナリティクスの数値を活用することができるようになりました。
ウェブマーケティング × グーグルアナリティクス
2つは、両輪なのです。
1つが欠けてしまうと、本当の意味での解析ができません。
私は、Googleアナリティクスのマニアックな使い方などを勉強していましたからね。
無駄な努力だったのです。
ウェブマーケティングを学び、Googleアナリティクスを活用することができれば、サイトの改善は簡単です。
Googleアナリティクスを最大限に活用するためには、
ぜひ、ウェブマーケティングを勉強してください。
