デザイナー目線。モノ・コト紹介するサイト

【まとめ】初心者の方がWebデザインを学ぶなら最低限必要なスキル

Webデザイナー

A子
A子

Webデザイナーになりたいんだけど、一体何を学べば良いのか全然分からない!

というあなたのための記事です。

目次

  1. 最低限必要なスキル
  2. Webデザインの基本知識
  3. Photoshop(フォトショップ)
  4. Illustrator(イラストレーター)
  5. HTML/CSS
  6. JavaScript/jQuery
  7. レスポンシブサイト

このページでは、初心者の方がWebデザイナーとしてのキャリアをスタートする上で最低でも学んでおきたいスキルについて、できるだけ分かりやすく解説していきます。

講師
講師

ぜひ参考にしてみてくださいね!

執筆者紹介
Web/UIデザイナー歴16年目のフリーランス。これまで数々のスクール取材&体験を行ってきた経験をもとにしたWebメディアを運営。多数の大手企業Webサイト制作経験あり。

スポンサードサーチ

Webデザイナーになるうえで最低限必要なスキル

マウスで作業を行う女性

早速ですが、実践的なWebデザインスキルを身につけるためには最低でも以下のスキルを学ぶ必要があります。

最低限学ぶ必要のあるスキル

  1. Webデザインの基本知識
  2. Photoshop ※デザインソフト
  3. Illustrator ※デザインソフト
  4. HTML/CSS ※構築言語
  5. JavaScript/jQuery ※プログラミング
  6. レスポンシブサイト ※HTML/CSS応用

このスキルを提示した基本的な考え方としては、今現在主流となっているWebデザインスキルを最低でも身につけましょうということです。

この変化激しいWebデザイン業界では一昔前のスキルだけではすでに時代遅れとなっていることが多いため、これからの時代に対応するためは最低でも今の時代に必要とされる技術を学んでおく必要があります。

講師
講師

それぞれのスキルについて詳しく解説していきます。

スキル1. Webデザインの基本知識

ワイヤーフレームが書かれたノート

Webサイトを作るためには始めにサイトについての基本知識を知っておくことが理想です。

例えばこんな知識

  1. そもそもWebサイトって何?
  2. どんな仕組みで作られているの?
  3. どんな画面構成で作られているの?

もちろん知らなくても制作スキルを習得することはできますが、全体像を理解しないまま唐突に勉強を始めてしまうと、なぜこのスキルを学ぶ必要があるのか腑に落ちない状況で学習を進めることになってしまいます。

簡単なレベルでも大丈夫ですので、スキル習得の前に基礎知識について理解しておくと効率的に学習が進められるのでおすすめです。

初心者の方は以下書籍の第1章まで目を通すだけでも大丈夫です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana
1,243円(03/25 14:12時点)
発売日: 2019/03/15
Amazonの情報を掲載しています

スポンサードサーチ

スキル2. Photoshop(フォトショップ)

Photoshopロゴ

PhotoshopはWebサイトをデザインするためのツールとして昔から使われてきた老舗デザインソフトです。

サイト全体のレイアウトから細かい画像加工・装飾まで全般的に使われています。
Webデザイナーの定番ソフトとしてまず始めに習得しましょう。

Photoshopでレイアウト(※補足参考)

Photoshopでレイアウト

Photoshopでバナーデザイン

Photoshopでバナー作成

Photoshopで写真加工・トリミング

Photoshopで写真加工

※補足:
ただし現在ではレイアウトについてはAdobe XDまたはSketchというソフトを使う機会が一般的になってきましたので、Photoshopの次の学習内容として意識しておきましょう。

スキル3. Illustrator(イラストレーター)

Illustratorロゴ

Illustratorは主にロゴや図形、イラストなど、Photoshopでは苦手とする複雑な形をデザインするためのツールとして使用されているデザインソフトです。

一般的にはロゴやイラストなどをこのIllustratorで制作し、それをPhotoshopへ入れ込む形で使われています。

また、逆にIllustratorをベースにWebデザインを行い、Photoshopをサブツールとして利用する方も多くいらっしゃいます。

Illustratorでロゴデザイン

Illustratorでロゴデザイン

Illustratorでイラスト作成

Illustratorでイラスト作成

こちらも最近ではAdobe XDを利用する機会が増えてきましたので、そちらを習得された方は必ずしもIllustratorを習得する必要はありません。

ただし、特にバナーを作る時など細かいデザインはIllustratorの方が作りやすいうえ、他者とデータを共有する際など、まだまだIllustratorは使われていますのでできれば習得しておきたいスキルです。

※補足:
Photoshop・Illustrator共にソフトの価格が割高な点はハードルが高いですが、こちらでお得に購入できる方法をご紹介していますのでぜひ参考にしてください。

スポンサードサーチ

スキル4. HTML/CSS

HTML/CSSロゴ

実はPhotoshopなどのデザインはあくまでデザインサンプルであって、実際はそれをHTMLCSSという2つの技術を用いてインターネットで閲覧できるように再構築する必要があるのです。

そして構築することでようやくWebサイトとして一般公開できます。

※補足:
構築ソフトは無料のものもありますが、先程ご紹介したお得なソフトにも含まれていますので、Web制作はこれ1つあれば充分ですね。
講師
講師

HTMLとCSSについてもう少し詳しく解説します。

HTML(エイチティーエムエル)

(例)HTMLで構築してSafariなどのインターネットソフトで表示した例

HTML

HTMLではWebサイトに掲載する内容を、以下の記述方法でただただ羅列していきます。たとえば以下のような素材

素材

  1. ロゴ画像
  2. メニュー
  3. メイン画像
  4. 文章

などは

ロゴ画像

<h1><img src=”logo.png” alt=”ロゴタイトル” /></h1>

メニュー

<ul>
 <li><a href=”top.html”>ホーム</a></li>
 <li><a href=”about.html”>VOGELKUCKとは</a></li>
 <li><a href=”company.html”>会社概要</a></li>
</ul>

メイン画像

<div id=”mainImg”><img src=”main.png” alt=”メイン画像名” /></div>

文章

<p>文章内容</p>

このような内容を構築ソフトで記述します。
そしてインターネットソフトで表示させると

HTML

こんな感じになります。

HTMLは掲載する内容をただ羅列するだけでデザインはされていないため、Word文章のようにズラッと要素が並んでいるのみです。

講師
講師

これがHTMLです。

CSS(シーエスエス)

(例)HTMLで記述した項目をCSSでレイアウトし、インターネットソフトで表示した例

CSS

CSSではHTMLで作った項目を「移動させたり」「大きさを変えたり」「色を付けたり」して、Photoshopで作ったデザインサンプルに近づくようにレイアウトする役割があります。

たとえば先程、HTMLの項目でご紹介した「<p>文章内容</p>」の色を青色に変えたい場合、CSSでは以下のように記述します。

p {
 color: blue;
}

他にも「<h1>ロゴ画像</h1>」のサイズを変更したい場合は以下のイメージ

h1 img {
 width:250px;
 height:auto;
}

HTMLとは多少記述方法が異なりますが、これがCSS言語というものです。

このように、HTMLで要素を入れ込み、CSSでレイアウトすることでようやくインターネットで閲覧できるWebページが出来上がります。

講師
講師

HTML/CSSは難しく感じるかもしれませんが、その単純な仕組みを理解すればそれほど難しくないことに気付かれると思います。

※補足:
また、最近ではCSSがより効率的に記述できるSassも現場でよく使われるようになりました。(色々覚えるのが増えて厄介ですが…)CSSの次の習得内容として意識しておきましょう。

スキル5. JavaScript/jQuery

JavaScript/jQueryロゴ

JavaScriptはHTML/CSSだけでは表現が難しい機能やアニメーションなどを作る場合に必要な知識です。

たとえば、あなたが今開いたこのページのリアルタイムの時刻をHTML/CSSで表現することは難しいですが、JavaScriptで以下のような記述をすれば可能になります。

<script>
dd = new Date();
document.write(dd.toLocaleString());
</script>

この実行結果が以下のイメージです。

しかし、このJavaScriptはHTML/CSSよりもややとっつきにくいため、苦戦する方も多くいらっしゃいます。

そこで用意されたのが、JavaScriptをもっと簡単に記述できるようにしたjQueryというJavaScriptプログラムです。

「jQuery」という名前が付いているためJavaScriptとは完全に別物のように感じるかもしれませんが、複雑なJavaScriptを→コンパクトにしたJavaScript(別名:jQuery)というイメージが分かりやすいかもしれません。

例えば、以下のようなアニメーションを作る場合

JavaScript/jQuery

この場合、JavaScriptなら10行以上のコードを記述する必要がありますが、jQueryなら以下の記述で機能します。

$(‘.slider’).slick({
autoplay:true,
autoplaySpeed:5000,
dots:true,
});

+その他に数点読み込むファイルあり

このようにシンプルに実現が可能になります。

講師
講師

JavaScriptも基本知識については理解した上で、初心者の方はまずjQueryをベースに知識を習得しましょう。

スポンサードサーチ

スキル6. レスポンシブサイト

レスポンシブサイト

パソコン・タブレット・スマホのいずれかで見ても最適化されたWebページが表示されるサイトのことをレスポンシブサイトといいます。
今ではパソコンよりもスマホでWebが見られる機会が多くなりました。

レスポンシブサイトは基本的にHTML/CSSの応用版ですので、こちらをおさえれば比較的スムーズに知識習得が可能です。(ほぼCSSの応用です)

たとえば、CSSを作る際に以下のような設定をしてレイアウトしていきます。

PC用のCSS

@media screen and (min-width: 767px) {
PC用のCSSをここに記述
}

タブレット用のCSS

@media screen and (max-width: 767px) {
タブレット用のCSSをここに記述
}

スマホ用のCSS

@media screen and (max-width: 479px) {
スマホ用のCSSをここに記述
}

このように、ざっくり言ってしまうと「インターネットソフトで開いた画面サイズに応じて、CSSでレイアウトを設定する」という単純な作りです。

講師
講師

こちらはCSSに慣れてしまえばそれほど苦戦せず習得可能です。

さいごに

さいごに

実践的なWeb制作を行うために最低でも身につけたいスキルについてご紹介してまいりましたが、いかがでしたでしょうか?

A子
A子

いやー結構覚えるのあって大変だね!

と感じる方も多くいらっしゃると思いますが、これらスキルをはじめに習得しておけば、今後のキャリアチェンジでも大いに役立つのでぜひ挑戦してみてくださいね。

以上、実践的なWebデザインを学ぶなら最低限必要なスキルのご紹介でした。
もし今後スクールを選択される際は、これらを考慮してスクール選びをしてみてくださいね。