『Webデザイン』って言葉、よく聞くけど実際どういう意味？
このような疑問を抱く人は多いと思います。
本記事では、今さらきけないWebデザインって何か解説していきます。
目次
Webデザインとは何か？
Webデザインとは、パソコンやスマホなどで閲覧できるもののレイアウト、デザインを決めることを指します。
Webデザインは様々な形があります。
企業のWebサイトデザインも、ウェブサービスデザインも、ランディングページのデザインも、バナーなどのデザインも、すべてWebデザインと呼ぶことができます。
Webサイト
ウェブサイトとは、wwwなど特定のドメイン内で運営されているWebページ全体のことです。
「ネットサイト」と呼ばれたり、「ホームページ」と呼ばれたりします。
ブログもWebサイトの一種です。
- ホームページ・・・どちらかと言えば個人や小規模な企業などが運営する小規模なWebサイト
- ブログ・・・個人で運営していることが多く、日記形式で手軽に更新ができて、トラックバックやコメントなどの機能を持ったWebサイト
構成としては、トップページがあり、そこからリンクを辿って行くことのできる個別のWebページがあり、画像や図が設置されていることが多いです。
ランディングページ（広告）
ランディングページとは、広告ページのことで、ほとんどが1ページで構成されているWebデザインです。
訪問者が最初にアクセスするページのことです。
訪問者がホームページに着地する（land）イメージからこの名前がつきました。
略してLPとも呼ばれます。
上記は、広い意味（広義）のランディングページのことを指しています。
「ランディングページ」には、「広義のランディングページ」と「狭義のランディングページ」が存在します。
Webマーケティングでよく使用されるのは、狭義のランディングページのほうです。
両者は混同しやすいので、まずは広義と狭義の違いをおさえてみましょう。
広義のランディングページ
ホームページの中で最初にアクセスされたページのことです。ホームページのなかで訪問者が最初にアクセスして「着地」したページのことです。
例：Googleアナリティクスの「ランディングページ」
狭義のランディングページ
訪問者のアクションを誘導することに特化した縦長のレイアウトのページのことを指します。一般的にランディングページ（LP）というと、こちらの狭義のランディングページを意味することが多いです。
検索結果やリスティング広告、SNSなどから流入した訪問者をダイレクトに注文やお問い合わせなどのアクションに結びつけることに特化したページのことです。
バナー
バナーとは、主に広告で使われるWebデザインで、ウェブサイト上にあるリンク付き画像のことを言います。
バナーは、サイズがあらかじめ決められています。
その限られたサイズの中で伝えたい情報を伝えるWebデザインです。
一般的な国際標準のバナーサイズは以下となります。
【Rectangles and Pop-Ups】
- 横：300px × 縦：250px（ミディアムレクタングル）
- 横：250px × 縦：250px（スクエアポップアップ）
- 横：240px × 縦：400px（バーティカルポップアップ）
- 横：336px × 縦：280px（ラージレクタングル）
- 横：180px × 縦：150px（レクタングル）
- 横：300px × 縦：100px（3:1レクタングル）
- 横：720px × 縦：300px（ポップアンダー）
【Banners and Buttons】
- 横：468px × 縦：60px（フルバナー）
- 横：234px × 縦：60px（ハーフバナー）
- 横：88px × 縦：31px（ミクロバナー）
- 横：120px × 縦：90px（ボタン1）
- 横：120px × 縦：60px（ボタン2）
- 横：120px × 縦：240px（バーティカルバナー）
- 横：125px × 縦：125px（スクエアボタン）
- 横：728px × 縦：90px（リーダーボード）
【Skyscrapers】
- 横：160px × 縦：600px（ワイドスカイスクレーパー）
- 横：120px × 縦：600px（スカイスクレーパー）
- 横：300px × 縦：600px（ハーフページAD）
ボタンなど
WebサイトのボタンなどもWebデザインの1種です。
以前は、パソコンのソフトを使い画像を作って、その画像を背景としてボタンなどを作成していました。
しかし、現在ではCSSという技術ができ、コードを書くことでボタンなどを表現できるようになったのです。
さらに、レスポンシブデザインを考慮して、スマホでも対応できるようにデザインする必要がでてきました。
「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
このレスポンシブデザインがなかなか難しくて、パソコンで表示できる大きさだけではなくスマホやその他のデバイスでの大きさを考慮しなければなりません。
レスポンシブデザインを学ぶためには「HTML」、「CSS」といったホームページを表示するためのプログラミング言語を学ぶ必要があります。
また、Webデザインをする上で、必須となっているのが「Javascript」の知識です。
Javascriptは、ホームページに動きをつけてよりページをリッチに表現するための言語です。
このようにWebデザインをするためには、デザイン知識だけではなく、プログラミング言語の知識もつける必要があります。
Webデザインの基礎
Webデザインは、デザインの基本に忠実であれば、美しく見やすいです。
魅力的なWebサイトには、デザインのトレンドやユーザーの利用デバイスに合わせて、「カラム・レイアウト」「フリー・レイアウト」「グリッド・レイアウト」といったレイアウトのパターンが採用されています。
また、「近接（グループ化）」「整列」「反復」「コントラスト（強弱）」といった手法も、Webデザインの基礎として確立されているコンセプトです。
このようなレイアウトや手法を学ぶ場合は、既存のWebサイトを参考にしましょう。
Webデザインの勉強方法
Webデザインを勉強するための3つの勉強方法を紹介します。
Webデザインはデザインやコーディングなど学ぶことが幅広くあります。
そのため、勉強方法がわかっていないと何から始めれば良いのかわかりにくいです。
1.独学でWebデザインを勉強する
Webデザインを勉強するためには、まず本を読みましょう。
おすすめ本
-
- 「Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。」
- 「レスポンシブWebデザイン入門 マルチデバイス時代のWebデザイン手法」
-
-
ブログデザインで参考にした書籍8選｜初心者向け
続きを見る
今の時代は、インターネットの情報でも勉強することができます。
2.Webデザインスクールに通う
Webデザインスクールに通うことは、順序良く効率的に、短い期間でWebデザインを習得することができます。
カリキュラムに沿ってWebデザインを体系的に学べるので、勉強につまづくことも少ない方法だと言えます。
オンラインでもスクールがありますので、時間があるときにスクールに通うことも可能です。
独学で勉強するのは難しいと感じる人は、WebデザインスクールでWebデザインを勉強することがおすすめです。
3.ハローワークの職業訓練に通う
ハローワークの職業訓練は、ハローワークが無料で就職支援として行なっている学校です。
最初に教材費が1万円ほどかかるものの、授業は無料で受けられるのでWebデザインを勉強いしたいけど費用をかけたくない人におすすめの方法です。
ただし、平日の9時〜夕方まで行われている就職を前提とした学校なので、現在仕事をしている人は難しいでしょう。
そのため、失業保険をもらっている人や、これから退職する人向けの方法です。
まとめ
今回は、Webデザインについて解説していきました。
Webデザインは単にWebサイトの見た目を整えるだけではなく、ユーザーが使いやすいようにWebサイトの構成を含めてデザインすることでした。
デザインもどんどんIT化が進んでいるため、Webデザインの知識はデザイナーにとって必須項目です。
是非マスターしてみましょう！