最近、自宅で仕事が出来るスキルとして「Webデザイン」に興味がある人も多いのではないでしょうか?
と思っている方も多いのではないでしょうか。
この記事はこんな方向けの記事になります。
- Webデザインを始めようと思っている人
- Webデザインに興味がある人
- Webデザインって何を勉強すればいいのかわからない人
- 初心者からWebデザイナーになろうとしている人
この記事を読むことで、
「Webデザイナーになるためには何を勉強すればよいのか」がわかります。
Webデザイナーって何をするの?
あまりよくわかっていない人も多いのではないでしょうか。
そもそも「Webデザイナーとは何をするのか」というところを簡単に説明しておきます。
Webサイトの
- 見た目のデザイン(色・フォント・装飾・レイアウト)
- 見た目以外のもの(内面的部分)
を合わせて設計することです。
Webデザイナーは「見た目以外のところ」も考える必要があります。
- 表示のパフォーマンス
- 使いやすさ
- アクセスしやすさ
- どういうページを作るか
- コンテンツ内容
などがそれにあたります。
外見だけでなく、サイトの構造や内面も考えることでよりよいWebサイトに繋がるのです。
Webデザインに必要な知識
Webデザインの役割がわかっても、実際何を勉強すればいいかわからないですよね。
- Webデザインの基本的な知識
- Webサイトの作り方
- Photoshopとillustratorの使い方
- 基礎的なプログラミングスキル
- レスポンシブデザイン
このあたりを知っておく必要があります。
それぞれ細かく説明していきますね。
Webデザインの基本的な知識
いわゆる、Webデザインの概論のようなところです。
これを知っておくことで、根本的な考え方がわかります。
概論と言ってもどういうことかというと
- Webデザインの役割
- Webサイトについての理解
- デザインの基礎知識
こういったことが当てはまります。
それぞれ簡単に説明しますね。
※Webデザインの役割については、前述したので割愛します。
Webサイトについての理解
これは「Webサイトがどういうものか」ということです。
こういったことを知っておく必要があります。
そうすることで目的に合ったWebサイトを作ることが出来ます。
デザインの基礎知識
デザインの基礎知識とは
Webでよく使う「デザインの基本」を理解しておくことでより素敵なサイトができます。
Webサイトの作り方
Webデザインをする上で、Webサイトの作り方を理解しておくことは重要です。
- 企画:どういうサイトにするか考える
- サイト設計:どういうWebページを作るか決める
- ワイヤーフレーム制作:デザインの下書き
- モックアップ制作(デザインカンプ):デザインの清書(完成版)
- コーディング
このような手順で作っていきます。
さらに詳しく知りたい方はこちらの記事をどうぞ。
Photoshopとillustratorの使い方
これらは「デザインの完成形」や「ロゴ」などを作るのに欠かせないツールです。
※前述した「Webサイト制作の流れ」でいうところの「④モックアップ制作(デザインカンプ)」で主に使用します。
Photoshopとは
- 写真を加工して思い通りの見栄えに仕上げたい
- 画像や文字を使ってWebページなどをデザインしたい
illustratorは
- 名刺やブログにのせるオリジナルロゴを作成したい
- イラストを描きたい
- こだわりの文字デザインなどを作成したい
といった時に使います。
- 写真だけでなく高品質なデザインやイラストの作成を得意とするPhotoshop
- 細かい図形や線を使ったイラストやこだわりのデザインを得意とするillustrator
公式ホームページはこちら。
基礎的なプログラミングスキル
デザインしたものを実際にWeb上で見せるためには、プログラミングスキルが必要です。
実際に「デザイン」だけするというケースもありますが、フリーランスはコーディングまで一通り出来ると良いです。
※前述した「Webサイト制作の流れ」でいうところの「⑤コーディング」でプログラミングスキルを使用します。
基本的なプログラミングスキルとして
- HTML/CSS
- JavaScript/jQuery
などは抑えておくとよいでしょう。
より、動きのあるサイトを作る場合は「PHP」も必要になります。
おまけで良いと思います。
レスポンシブデザイン
レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを作る方法です。
最近では、Webサイトを見る人は「パソコン」より「スマフォ」が増えてきています。
そういった、時代の流れに適応するために、スマフォでのデザインも考えなくてはいけないのです。
私のブログも
- パソコンで見る場合
- スマフォで見る場合
デザインが変わるのわかりますか?
もし「パソコンのデザインのままスマフォで見た場合」=「レスポンシブデザインを使わない場合」はとても見づらいです。
- 文字が小さい
- ボタンが小さく押しづらい
といったことがおきます。
横に広いパソコン画面をスマフォで見るので全体的に縮小されるからです。
Webデザインはどうやって勉強するの?
ここまでで、Webデザインな知識がわかりました。
ではWebデザインはどうやって勉強するのでしょうか?
Webデザインの勉強方法はまずこの2つに分けられます。
- スクールですべての内容を学ぶ
- 各分野をそれぞれ学ぶ
初心者の方は、「すべての内容が網羅できる」のがベストです。
しかし、中には
- プログラミングスキルはある
- Photoshopの使い方を知っている
という方もいるかもしれません。
そういった方には、分野ごとの学習をおすすめします。
学び方としては以下のように分けられます。
自分に合った学び方で、はじめましょう。
私の場合
簡単にオンラインスクールのメリットとデメリットだけお話しすると
<メリット>
- 学習の道筋がわかりやすい
- 教材がわかりやすい
- コースを修了してもテキスト閲覧できる
- プロのエンジニアが講師として在籍している
- 講師がモチベーションを支えてくれる
- 転職サポートがある
<デメリット>
- スクール費用が高い
こういったところですね。
どこに重きを置いて自己投資するかです。
まとめ
まとめると
- Webデザインの基本的な知識
- Webサイトの作り方
- Photoshopとillustratorの使い方
- 基礎的なプログラミングスキル
- レスポンシブデザイン
これらを網羅して学習するには「スクール型」が向いています。
ですが、各分野ごとに学習していくのも一つの方法です。
ぜひWebデザイナーの道を踏み出してみてください。
本日紹介したTechAcademyのWebデザインコースはこちら
無料体験もあるのでぜひ見てみてください。
▶『Webデザインの流れ【初心者向け】』
▶『Webデザインが学べるオンラインスクールの特徴』
▶『Webサイト制作の流れ【企画について詳しく教えて】』