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

実践的なWebデザインを学ぶなら最低限必要なスキル

Webデザイナー

A子
A子

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

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

目次

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

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

講師
講師

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

執筆者紹介
Web/UIデザイナー歴15年目のフリーランス。数々の実績を作りつつ北欧やスイスなどで現地のデザイナーと共に最先端のデザインに触れる。現在はこれまでの経験を元にしたWebメディアを運営。こんなフォントも作っています。

スポンサードサーチ

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

マウスで作業を行う女性

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

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

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

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

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

講師
講師

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

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

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

Webサイトを作るためには始めにサイトについての基本知識を知っておく必要があります。

例えばこんな知識

  1. そもそもどんな仕組みなのか?
  2. どのように作られているのか?
  3. どんな構成で作られているのか?

これら知識は基礎的な内容から応用的なものまで色々と幅があります。

超基礎的なWebサイトの仕組みについてはこちらのサイトで充分ですし、どのように作られているかについては当ページでも多少解説しておりますので参考にしてください。

もっと奥が深いWebデザインの構成やコンセプト、配色やレイアウトなどについては、たとえばこのような書籍でも学ぶことが可能です。

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (...

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (...

伊藤 庄平, 益子 貴寛, 久保 知己, 宮田 優希, 伊藤 由暁
2,618円(08/06 15:29時点)
発売日: 2017/02/25
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でイラスト作成

※補足:
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デザインを学ぶなら最低限必要なスキルのご紹介でした。
もし今後スクールを選択される際は、これらを考慮してスクール選びをしてみてくださいね。