Webデザインとは？初心者でもわかるWebデザインの基礎から解説

2021.03.03

この記事では「Webデザイン」がそもそも何かわからない人に向けて、WebデザインスクールであるデジタルハリウッドSTUDIO横浜が「Webデザイン」についてご紹介していきます。

WebデザインではWebサイトや広告のページ、ブログ、バナーなど様々なWebに関わるものをデザインします。

Webデザインをする目的は、Webサイトを運営している人が、パソコンやスマホでそのWebサイトなどを見た人の求めている情報を正しく提供するためです。
つまり、Webデザインは大まかに、そのページや画像で伝えたい情報(目的)をわかりやすく伝えるために、Webサイトの情報をデザイン(整理して設計)することなのです。

そこで、今回は様々なWebデザインを参考にして、Webデザインが一体どういうものなのかお伝えしていきます。
記事の後半ではWebデザインをどのように勉強すれば良いのかもお話するので、参考にしてください。

1.Webデザインとは
2.様々なWebデザインについて
- 2-1.Webサイト
- 2-2.ランディングページ(広告)
- 2-3.バナー
- 2-4.ボタンやメニューバーなど
3.Webデザインが完成するまでの流れ
4.Webデザインの勉強方法
- 4-1.独学でWebデザインを勉強する
- 4-2.Webデザインスクールに通う
- 4-3.ハローワークの職業訓練に通う
5.まとめ

1.Webデザインとは

Webデザインは、Webサイトのようなパソコンやスマホで見れるものの伝えたい情報を整理することです。
もっともイメージしやすいのが企業のWebサイトでしょう。

上記のようなWebサイトは、Webデザイナーが構成などを考えてデザインすることで私たちが使いやすく利用できるようになっています。
このWebサイトなどのレイアウトや導線を整えて、そのページで伝えたい情報をわかりやすくするのがWebデザインです。

ただ、Webデザインは紙のデザインと違って、使う人(ユーザー)の使いやすさも重視されています。
どれだけカッコいいWebサイトでも「探している情報がどこにあるかわからない」「サイトの読み込みが遅い」ことがあると使いにくいと感じてしまいます。
このことから、Webデザインはレイアウトや導線を整えつつ、ユーザーが使いやすい構成にすることだと言えます。

2.様々なWebデザインについて

Webデザインは様々な形があります。

代表的なのがWebサイトですが、そのほかにもランディングページやバナーなど目的に応じたWebデザインが存在しています。
ここではその様々なWebデザインを参考にして、Webデザインについてもう少し深く解説していきます。

2-1.Webサイト

Webサイトは、様々な目的で作られるWebデザインです。

「サービスを知ってもらう」「商品を購入してもらう」「情報を発信する」など数えるとキリがないほどの目的があります。
特にユーザーの使いやすさが重視されているWebデザインの方が、最近では見た目よりも重要だと考えられています。
下記の画像は1990年代のWebサイト（1998特報!!倶楽部）と2019年のWebサイト（RISING SUN ROCK FESTIVAL 2019 in EZO）を比較したものです。

この時代はスマホがありませんでしたが、現代はスマホ対応をさせるレスポンシブデザインが主流です。

実際に、企業などからの案件では、レスポンシブデザインにしてほしいという内容がほとんどです。
これは日本のスマホ普及率がどんどん高くなって、スマホでWebサイトを見る人が増えたからと言えます。

このように、ユーザーが使うデバイスに合わせたデザインにすることもWebデザインです。

2-2.ランディングページ(広告)

ランディングページはいわゆる広告ページで、ほとんどが1ページで構成されているWebデザインです。

ランディングページはWebサイトと違い、特定の商品やサービスを買ってもらいたいときに作られます。
例えば、化粧品を販売するランディングページの場合、数々の化粧品を紹介するのではなく何か1つ口紅に特化して紹介します。
つまり、何か1つのことだけを伝えたいときに使われるWebデザインです。
特徴的なのがランディングページはほとんど1カラムといって、横幅がない構成になっています。

1カラムだと情報量を絞り込めるので「商品やサービスを購入してもらう」という目的でユーザーにランディングページを見てもらえます。

カラムは単なる構成ではなく、ユーザーに与える印象を変えるWebデザインの手法の1つと言えます。
そのため、ランディングページは1カラムでデザインされることが多いWebデザインなのです。

※必ずしも1カラムといった決まりがあるわけではありません。

2-3.バナー

バナーは主に広告で使われるWebデザインで、Webページ上で他のWebページを紹介する役割があります。

Webサイトやランディングページとは違って、掲載できるサイズがある程度決まっています。
バナーは、その限られたサイズの中で伝えたい情報を伝えるWebデザインです。
わかりやすいのが下記の画像（Googleディスプレイ広告より）です。

画像のようにあらかじめ決まっているサイズの中でデザインをします。
最終的にランディングページへと誘導するので、ユーザーが興味をもつ情報を整理してデザインする必要があります。

2-4.ボタンやメニューバーなど

ボタンやメニューバーなどもWebデザインの1種です。

以前までボタンやメニューバーを作成するときはパソコンのソフト(Photoshop)を使って画像を作り、その画像を背景としてボタンなどを設置していました。
しかし、CSSという技術が生まれてからコードを書くことでボタンなどを表現できるようになったのです。

そこからレスポンシブデザインが生まれたことで、マウスでクリックできるサイズのままボタンを設置するのではなく、スマホでも対応できるようにデザインする必要が出てきました。
パソコンの大きさのままスマホに対応させてしまうと、ボタンが小さくて指では押しづらくなります。

このようにバランスをとってデザインするのもWebデザインです。

3.Webデザインが完成するまでの流れ

ここまでご紹介してきたWebデザインは、クライアントから依頼されていきなりデザインするのではなく、クライアントとの打ち合わせ(ヒアリング)をしてからはじめてデザインに取り掛かります。
打ち合わせでは「どんなコンセプトにするか」「Webサイトを作る目的は何か」「何をアピールしたいか」などを決めます。

クライアントとの打ち合わせでどんな構成にするかまとまった後に、デザインの元となるワイヤーフレームを作ります。

ワイヤーフレームで構成がまとまったら、Webデザインの完成図となるデザインカンプを作ります。

デザインカンプはPhotoshopやIllustratorといったパソコンのソフトを使って作成します。

デザインカンプが完成次第、HTMLやCSSといったマークアップ言語(プログラミングに似ている)を使ってコーディングを行います。

コーディングはデザインカンプで作ったデザインを、実際にユーザーがパソコンやスマホで見られるようにする技術です。

コーディングまでが終わればWebデザインの完成です。

※Webデザイン完成までの流れをもう少し詳しく知りたい人はWebデザイナーの仕事内容とは？Webデザイナーの働き方から将来性をタップしてください。

4.Webデザインの勉強方法

もしあなたがこれからWebデザインを勉強するなら、ここでご紹介する3つの勉強方法がおすすめです。

Webデザインはデザインやコーディングなど学ぶことが幅広くあります。
一口にデザインといっても配色やレイアウトだけではなく、ユーザーの使いやすさを意識したデザインなど様々です。

そのため、勉強方法がわかっていないと何から始めれば良いのかわかりにくいのです。
ここでご紹介する3つの方法がわかっていれば、Webデザインを順序よく学んでいけるので今後の参考にしてください。

4-1.独学でWebデザインを勉強する

Webデザインは独学で勉強することが可能です。

独学で勉強する場合は、主に本やインターネットの情報を頼りに勉強することになります。
特に本はデザインやコーディングができるように、基礎から応用まで学べるものが多いです。
Amazonではコーディング関連のものだけで400冊以上もあるので、情報には困らないでしょう。

4-2.Webデザインスクールに通う

Webデザインスクールでは順序良く効率的に、短い期間でWebデザインを習得することができます。
カリキュラムに沿ってWebデザインを体系的に学べるので、勉強につまづくことも少ない方法だと言えます。

例えばデジタルハリウッドSTUDIO横浜では、自分の生活スタイルに合わせて通う事ができ、現役のWebデザイナーに指導をしてもらえます。

独学で勉強するのは難しいと感じる人は、WebデザインスクールでWebデザインを勉強することがおすすめです。

4-3.ハローワークの職業訓練に通う

ハローワークの職業訓練は、ハローワークが無料で就職支援として行なっている学校です。

最初に教材費が1万円ほどかかるものの、授業は無料で受けられるのでWebデザインを勉強いしたいけど費用をかけたくない人におすすめの方法です。
ただし、平日の9時〜夕方まで行われている就職を前提とした学校なので、現在仕事をしている人は難しいでしょう。
そのため、失業保険をもらっている人や、これから退職する人向けの方法です。

※職業訓練は授業を受ける人のモチベーションによって身につくスキルに差が出ます。