- 遠藤 歩
WEBデザインとは？仕事内容と初心者向けの勉強方法を解説
WEBデザインとは、WEBサイトにある要素のレイアウトを考え、ユーザーにとって見やすくなるように整理をすることです。
しかし、WEBデザインとはWEBサイト内の情報整理だけに限りません。画像作成もデザインであり、仕事の幅が広いです。そのため、「WEBデザインって何？」という疑問を持つ人は少なくありません。
そこで、WEBデザイナーと言われる人たちの仕事内容と、WEBデザイナーになるための勉強方法について紹介していきます。
WEBデザインとは
WEBデザインとはWEBサイトに訪れたユーザーがスムーズに情報を取得できるようにサイト上にある要素のレイアウトを整えることです。
また、WEBサイトに限らず、バナー・ヘッダーなどのWEBサイト内に存在する画像を作成することもあります。
そして「どのように見せるか」の観点から、テキストの大きさや文字色など細かな部分まで気を配ります。
情報に溢れた現代において、スマートフォンやパソコンでストレスを感じることなくスムーズに情報を取得できるのは、WEBデザイナーがこのような仕事をしているおかげです。
WEBデザイナーの仕事内容
WEBデザイナーと言っても、その仕事内容はWEBサイトのレイアウト・デザインだけにとどまりません。
WEBサイト内にある小さな正方形または長方形のバナーと呼ばれるものや縦長のランディングページと呼ばれるものを作成する場合も「WEBデザイナー」と呼びます。
さらに、SNSやブログのヘッダー画像を作成、SNS、ブログを構成する画像部分を作ることもWEBデザイナー仕事です。
これら全てをできるWEBデザイナーがいれば、一方でバナー・ヘッダーを専門とするWEBデザイナーがいるので、一概にWEBサイトを作れる人をWEBデザイナーと呼ぶ訳ではありません。
WEBサイト
WEBサイトはHTML・CSS・JavaScriptなどのマークアップ言語・プログラミング言語を使用して作られています。
そして、WEBサイトを作る際には次のような目的が必ず存在します。
集客をしたい
サービス・商品を伝えたい
サービス・商品を購入してもらいたい
自社の情報を発信したい
目的に合うように構成を考えてデザインを施していくことになります。
昔のWEBサイトは文字が並び、色・見え方が考慮されていないものが多いです。しかし、現代ではスマホが普及したことにより、人々がインターネットに触れる機会が増えています。そこで、どのように見せたらユーザーに届くのか？という観点を考慮するようになり「見せ方」を意識するようになりました。
そして、スマホでWEBサイトを見ることを第一に考えた「レスポンシブデザイン」が主流になっています。
WEBサイトにはトレンドがあるのでWEBデザイナーはトレンドに対応し続ける根気強さが必要です。
ランディングページ（LP）
ランディングページは直訳すると「着地ページ」です。ユーザーがページに着地した際に、そのページのみで商品・サービスへのお問い合わせや購入までを行うことができるので商品・サービスが売れる機会が増加します。
WEBサイトよりも画像が多く、華やかな印象を受けるものや、グラフや表を用いた堅いイメージのものがあり、それぞれの業種によって見せ方を変えています。
WEBデザイナーはクライアントにヒアリングをし、業種に合った見せ方のランディングページを作ることになります。よって、ヒアリングの時点でどれだけクライアントの意向を汲み取っていくかが大事です。
バナー画像
バナー画像はWEBサイト上にある「リンク付きの画像」のことです。画像をクリックすると他のページに飛びます。
広告やアイキャッチとして使われ、意図的にユーザーを次のような他のページに誘導するために使われています。
自社のSNSアカウント
自社の商品・サービスページ
特集ページ
子会社のWEBサイト
また、バナーにはサイズが決まっています。WEBデザイナー、PhotoshopやIllustratorを使用してサイズに合うように作成しなければなりません。
ヘッダー画像
ヘッダー画像は、WEBサイトやツイッターなどのSNS上にある大きめのメイン画像のことです。WEBサイトや各種SNSによって大きさは決まっていますが、メインの画像なので比較的大きめのサイズで作成します。
ユーザーがサイトやSNSに訪れる際に最初に目に止まる部分なので、ユーザーに注目してもらえるような見せ方で作成します。
WEBデザインの効率的な勉強
コーディングをしたいのか？グラフィックデザイナーになりたいのか？によって、目指すデザイナー像に合う効率的な勉強方法があります。
どんなデザイナーになりたいにせよ勉強方法は「独学」と「講座受講」の２パターンです。
コーディングからバナー、ヘッダーを作成するような全てできるデザイナーになるためには時間がかかり非効率的です。よって短期的にスキルを習得するためには、最初になりたいデザイナー像を明確にしておくことが大切です。
そして、なりたいデザイナー像に合わせた勉強方法をしていくことが挫折しないポイントです。
独学でデザインスキルを習得する
独学で勉強する場合はオンラインサービス（無料・有料）を利用しましょう。
WEBデザイン初心者に人気があり、かつ無料で利用できるサービスは次の通りです。
ドットインストール（無料会員）
プロゲート（無料会員）
YouTube（質が良いもの・悪いものあり）
ドットインストールとプロゲートについて「コーディングを習得したい人向き」で有料会員になることで、より質の高い勉強をすることができます。
「グラフィックデザインを習得したい人向き」なのはYouTubeですが質の良い動画・質の悪い動画が入り混じるので見極めが必要です。
また、有料でも質の高い勉強がしたいと望むのであれば「Udemy」を利用しましょう。Udemyはオンライン教材（動画コンテンツ）ですが、講師が作成したオリジナルコンテンツに沿って勉強を進められる上、自分のペースかつ質の高い勉強をすることができます。
必要なPCのスペック
WEBデザインをするにあたり、仕事に支障が出ないとされているパソコンのスペックは以下の通りです。
CPU：インテル Corei5以上
メモリ：16GB
ハードディスク：500GB以上
OS：MacまたはWindows10
グラフィックカード：無くても良い
WEBデザインではPhotoshopやIllustratorを使う場面がありますが、パソコンの性能が悪くて全然動かなくては仕事に支障が出てしまいます。とはいえ、CPU、メモリといった言葉を聴き慣れない人は多いです。
そこで、初心者でも理解しやすいようにひとつずつ分かりやすく解説していきます。
CPU
CPUとはコンピューターの処理性能を表しています。また、パソコンの中心的な役割を果たしているパーツなのでパソコンの脳みそ部分とも言えます。
インテルのCPUのラインナップは次の通りです。
i3
i5
i7
i9
注意点は数字が大きくなるにつれ高価になります。数字が上がるにつれ、処理性能が上がり、パソコンが重くなってしまうストレスを感じにくくなります。i3は処理速度が遅いためWEBデザインをする上ではパソコンが重くなりがちなので選択しないのが無難です。
メモリ
メモリとはパソコン上の作業デスクのことです。普段仕事をする上で作業デスクの面積が小さいと、一度に多くの作業をこなすことができません。しかし、面積が大きいと一度にいくつもの作業を並行して行えるので作業効率が上がります。
つまり、一度にPhotoshopやIllustrator、エクセルなどを開いてもスムーズに作業が行えるかどうかという考え方です。
メモリのラインナップは次の通りです。
4GB
8GB
16GB
32GB
64GB
WEBデザインだけの使用であれば16GBで十分です。動画編集もしたいと考えている場合は32GBあると安心できます。
ハードディスク
ハードディスクとはデータを保存できる容量のことです。容量が小さいと多くのデータを保存することができません。
WEBデザインではPhotoshop、Illustratorで作成したバナーやヘッダーを保存する機会が多いので、容量は多いのが望ましいです。
しかし、GoogleドライブやDropboxといったサービスを利用することでパソコン内に保存しない手段を取ることで、容量の節約をすることができます。
OS
OSとはシステム全般を管理し、アプリケーションやデバイスを動作させるためにの基本となるソフトウェアのことです。全てのパソコンにOSが入っています。これが入っていないとパソコンが動作しません。
多くの人が聞いたことあるOSは以下の２つです。
Windows
Mac
つまり、Webデザインをする上で、このどちらかを選べば問題ありません。
グラフィックカード
グラフィックカードとは映像をモニターに映し出すためのチップが搭載されているボードのことです。映像を綺麗にかつ滑らかに映し出してくれるのでゲームをする人、動画を扱う人には必要となります。
最近ではパソコンに内臓されているものがありますがWebデザインをするには必要ありません。しかし今後、動画編集をする機会がある場合は揃えておいた方が良いです。
WEBデザインのおすすめの本
WEBデザイン初心者が学習をする上で役に立つ本がありますがコーディング向き、デザイン向きといった学習目的に合う本を選ぶ必要があります。
そこで、WEBデザイン初心者に人気がある、コーディングに関する本とデザインに関する本の２種類を紹介します。
コーディングに関する本
WEBサイトを制作する時の必須知識がHTMLとCSSです。HTMLが文書構造を担うのに対し、CSSは文章の見た目・レイアウトなどの見栄えを整える役目を担っています。
他に、JavaScriptというサイトに動きをつける言語がありますがHTML・CSSと共に一度に習得するのは困難です。
初心者にとって始めやすいHTML・CSSから学ぶことで、挫折せずに続けられるでしょう。
また、世の中に存在する全てのWEBサイトにHTMLとCSSが使われているため、コーディングができるWEBデザイナーになるためには必要不可欠な知識です。
WEBデザインの初心者に人気があります。HTML・CSSの基礎を学びながら実際にサイトを作ります。活字が少なく読み進めやすいのでストレスを感じにくく「挫折」を感じないほど、初心者にとってやさしい内容です。
発売日：2019/3/16
価格：¥2,486
出版社：SBクリエイティブ
ページ数：280ページ
言語：日本語
購入サイト：Amazon
■レビュー
Webサイトの仕組みや作り方、デザインについて、またテキストエディタやブラウザのダウンロード手順まで、分かりやすく書かれていて、IT初心者にもやさしい本でした。
WEBページの仕組みから実際に作る過程まで程よくまとまっている。
視覚的にも読みやすく、HTMLやCSSの書き方だけではなくデザインの基礎についても記載があり、とても為になります。これ1冊で流行りのフルスクリーンのwebサイトが制作出来るようになります。オススメです。
引用元：https://www.amazon.co.jp/dp/4797398892/ref=cm_sw_em_r_mt_dp_U_UTFgFbCYDS4KP
WEBデザインの初心者向けです。インターネットの仕組み、サーバーとは何か？といったインターネットに関しての知識が乏しい人でも理解しやすいような内容です。
HTML・CSSの基礎から応用まで書かれている上、後半では実際にWEBサイトを作れるので自然と理解できていることに後から気がつきます。
発売日：2018/12/3
価格：¥3,080
出版社：マイナビ出版
ページ数：336ページ
言語：日本語
購入サイト：Amazon
■レビュー
HTML&CSSの最新バージョンで解説されています。スマホからタブレット、パソコン画面をつくる手順も書かれていて、知りたかった情報が得られました。
かなり色々な事が細かくわかりやすく紹介されています。
プロゲートでさくっと勉強ってのも良いですが、この本は持っておいて損はないです。
引用元：https://www.amazon.co.jp/dp/4839965471/ref=cm_sw_em_r_mt_dp_U_nTFgFbGKH9F18
デザインに関する本
色の使い方やフォントの選び方など、デザインに関する細かなポイントを抑えている本を読むことでグラフィックデザインのコツを掴めます。
コーディングに触れないので通勤時間や家事の合間などの隙間時間にスムーズに読み進めることができます。
バナー・ヘッダー画像をよく作成する場合は、次に紹介する本を読むことで色の使い方、文字の配置方法などのコツを掴むことができ、実務に活かすことができます。
デザインの初心者で知識が乏しい人に向いています。デザインの原則から学び、名刺・チラシなどのデザインを良い例と悪い例を用いて「どのようにしたら良いデザインになるのか」という視点で書かれているので理解しやすいです。
発売日：2016/6/30
価格：¥2,442
出版社：マイナビ出版
ページ数：260ページ
言語：日本語
購入サイト：Amazon
■レビュー
多分9割以上の普通の人はデザインのルールを知らないので、本書で再三繰り返されているが、デザインの本質的なルールを知っているか知らないかの違いが極めて大きいと感じた。
デザインの基本を図解で分かりやすく教えてくれるので、非デザイナーでも理解しやすく、すぐに応用出来ると思います。
語り口も優しく楽しく，本当にデザイナーではない人のために書かれています。
引用元：https://www.amazon.co.jp/dp/4839955557/ref=cm_sw_em_r_mt_dp_U_zUFgFbEYNZM6B
デザインの初心者向きでデザインのコツをわかりやすく解説しています。また、デザインに関わる要素を初心者にも分かるようにひとつひとつ解説しているので読みやすい内容です。
読み進めているうちに「なるほど」と感じることが多いです。
発売日：2015/7/31
価格：¥2,200
出版社：エムディエヌコーポレーション
ページ数：272ページ
言語：日本語
購入サイト：Amazon
■レビュー
本書は新人デザイナーやデザインに興味のあるすべての人に対して、デザインを「目で見て楽しめる」形にして、「なるほど」と感じられるようにデザインのエッセンスが描かれている。
グラフィックデザインを仕事としている者です。本当にいい復習になります。デザインを言葉で論理的に説明するのって難しいんです。が、これを頭に置いてプレゼン等すると説得力が違いますね。
例が多く、目的ごとの対比もあり読みやすいです。そして読んでいて楽しいのでデザイン初心者におススメです。
まとめ
自分は「どんなWEBデザイナーになりたいのか」を考えることが大事です。何をしたいのかが決まったら、その方向性に沿った勉強を始めましょう。
ただ漠然と「WEBデザイナーになる」と考えていても幅が広いので正しい勉強方法が分からなくなります。そうなってしまうと挫折の元になってしまうので「こんなデザイナーになる」というようになりたいデザイナー像を明確にしましょう。