Webデザイン概論

Webデザイナーに必要な知識【初心者からいきなりフリーランスになった私が解説】

最近、自宅で仕事が出来るスキルとして「Webデザイン」に興味がある人も多いのではないでしょうか?

Webデザインってよく聞くけど何を勉強すればいいの?

と思っている方も多いのではないでしょうか。

この記事はこんな方向けの記事になります。

  • Webデザインを始めようと思っている人
  • Webデザインに興味がある人
  • Webデザインって何を勉強すればいいのかわからない人
  • 初心者からWebデザイナーになろうとしている人
わたし
わたし
私はWebデザインについて0から学び、Webデザイン制作会社への就職経験は無いですが個人でお仕事を獲得できました。

この記事を読むことで、

「Webデザイナーになるためには何を勉強すればよいのか」がわかります。

スポンサーリンク

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サイトを作ることが出来ます。

デザインの基礎知識

デザインの基礎知識とは

 

  • レイアウト(近接・グループ化・整列・反復など)
  • 配色(色相・明度・彩度・色のバランス・色が与える印象など)
  • タイポグラフィ(フォントや文字の配列など)

Webでよく使う「デザインの基本」を理解しておくことでより素敵なサイトができます。

Webサイトの作り方

Webデザインをする上で、Webサイトの作り方を理解しておくことは重要です。

 

Webサイト制作の流れ
  1. 企画:どういうサイトにするか考える
  2. サイト設計:どういうWebページを作るか決める
  3. ワイヤーフレーム制作:デザインの下書き
  4. モックアップ制作(デザインカンプ):デザインの清書(完成版)
  5. コーディング

このような手順で作っていきます。

 

わたし
わたし
Webサイトの作り方を理解することで一人でもサイトが作れるようになります。

さらに詳しく知りたい方はこちらの記事をどうぞ。

『Webデザインの流れ【初心者向け】』

Photoshopとillustratorの使い方

これらは「デザインの完成形」や「ロゴ」などを作るのに欠かせないツールです。

 

※前述した「Webサイト制作の流れ」でいうところの「④モックアップ制作(デザインカンプ)」で主に使用します。

 

Photoshopとは

  • 写真を加工して思い通りの見栄えに仕上げたい
  • 画像や文字を使ってWebページなどをデザインしたい

 

illustratorは

  • 名刺やブログにのせるオリジナルロゴを作成したい
  • イラストを描きたい
  • こだわりの文字デザインなどを作成したい

といった時に使います。

 

  • 写真だけでなく高品質なデザインやイラストの作成を得意とするPhotoshop
  • 細かい図形や線を使ったイラストやこだわりのデザインを得意とするillustrator

 

わたし
わたし
この2つのツールを組み合わせることで素敵なサイトデザインが出来ます。

 

基礎的なプログラミングスキル

デザインしたものを実際にWeb上で見せるためには、プログラミングスキルが必要です。

実際に「デザイン」だけするというケースもありますが、フリーランスはコーディングまで一通り出来ると良いです。

※前述した「Webサイト制作の流れ」でいうところの「⑤コーディング」でプログラミングスキルを使用します。

基本的なプログラミングスキルとして

  • HTML/CSS
  • JavaScript/jQuery

などは抑えておくとよいでしょう。

より、動きのあるサイトを作る場合は「PHP」も必要になります。

おまけで良いと思います。

レスポンシブデザイン

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを作る方法です。

最近では、Webサイトを見る人は「パソコン」より「スマフォ」が増えてきています。

そういった、時代の流れに適応するために、スマフォでのデザインも考えなくてはいけないのです。

私のブログも

  • パソコンで見る場合
  • スマフォで見る場合

デザインが変わるのわかりますか?

もし「パソコンのデザインのままスマフォで見た場合」=「レスポンシブデザインを使わない場合」とても見づらいです。

  • 文字が小さい
  • ボタンが小さく押しづらい

といったことがおきます。

横に広いパソコン画面をスマフォで見るので全体的に縮小されるからです。

わたし
わたし
その手法を学ぶことで、どんなユーザーでも使いやすいWebサイトが作れます。

Webデザインはどうやって勉強するの?

ここまでで、Webデザインな知識がわかりました。

ではWebデザインはどうやって勉強するのでしょうか?

Webデザインの勉強方法はまずこの2つに分けられます。

  1. スクールですべての内容を学ぶ
  2. 各分野をそれぞれ学ぶ

初心者の方は、「すべての内容が網羅できる」のがベストです。

しかし、中には

  • プログラミングスキルはある
  • Photoshopの使い方を知っている

という方もいるかもしれません。

そういった方には、分野ごとの学習をおすすめします。

学び方としては以下のように分けられます。

自分に合った学び方で、はじめましょう。

私の場合

わたし
わたし
私は「すべての内容を学べる」オンラインスクール卒業生です。

簡単にオンラインスクールのメリットとデメリットだけお話しすると

オンラインスクールのメリットとデメリット

<メリット>

  • 学習の道筋がわかりやすい
  • 教材がわかりやすい
  • コースを修了してもテキスト閲覧できる
  • プロのエンジニアが講師として在籍している
  • 講師がモチベーションを支えてくれる
  • 転職サポートがある

<デメリット>

  • スクール費用が高い

こういったところですね。

オンラインスクールは「サポートが充実しているので費用が高い」が、「一番挫折しにくい方法」であり、「チャンスがあれば転職」にもつながる。

どこに重きを置いて自己投資するかです。

ちなみに私が使ったのは

「TechAcademy Webデザインコース」

1週間の無料体験もあるので、ぜひ見てみてください。

まとめ

まとめると

Webデザインに必要な知識
  • Webデザインの基本的な知識
  • Webサイトの作り方
  • Photoshopとillustratorの使い方
  • 基礎的なプログラミングスキル
  • レスポンシブデザイン

これらを網羅して学習するには「スクール型」が向いています。

ですが、各分野ごとに学習していくのも一つの方法です。

ぜひWebデザイナーの道を踏み出してみてください。

本日紹介したTechAcademyのWebデザインコースはこちら

「TechAcademy Webデザインコース」

無料体験もあるのでぜひ見てみてください。

スポンサーリンク

ABOUT ME
アバター
ミキ
看護師をしながら海外生活を目指し、Webデザインと英語を勉強中。看護師関連、海外渡航関連、Webデザインなど幅広く発信中。世界中どこにいても仕事出来るようになるのが夢。