Webデザインとは？Webデザイナーの仕事と必要な5つのスキル

この記事を読むための時間：8分

Webデザインという言葉は、誰もが一度は耳にしたことがあるのではないでしょうか？しかし、いざWebデザイナーを目指そうと思った時に「Webデザインって何？」と改めて思う方も少なくありません。

今回は初心者やこれから目指す人向けに、Webデザインの流れや仕事内容、必要なスキルなどを紹介していきます。

Webデザインとは？

Webデザインとは、Webに関わるものをデザインすることです。

そもそも、本来デザイン（英：design）とは日本語で「設計」「意匠」などという意味で、機能や美的な外観を考慮した計画のこと。

色や模様などを配置して見た目を作るのはデザインの手段であり、目的のための計画（設計）自体をデザインと言います。

つまりWebデザインはWebを通して伝えたい情報を伝えるためのWebサイトやWebページを設計することを指しており、グラフィックデザイン的な要素だけでなく情報アーキテクチャの構築などの設計スキルも求められます。しかしながら、「デザイン＝見た目を作る」という解釈も広まっているのも事実です。

Webデザインをする人や職を「Webデザイナー」と呼びます。しかし、Webデザイナーが設計やプログラミングまで担当することもあれば、使いやすさの設計は「UIデザイナー」と呼ばれる人が担当する場合もあるなど、デザインの範囲は会社やプロジェクトによって様々です。

Webデザインの歴史

Webデザインの仕事について知る前に、Webデザインの歴史をたどってみましょう。ここでは、1991年ごろのWebサイトの誕生から現在までの流れを簡単に紹介します。

①1900年代のWebデザイン

Photo：世界初のホームページ（復刻版）
http://info.cern.ch/hypertext/WWW/TheProject.html

Webデザインの歴史は、Webサイトの誕生とともにスタートしました。

世界で初めてのWebサイトは、WWW（ワールド・ワイド・ウェブ、英：World Wide Web）を開発したイギリスのティム・バーナーズ＝リー博士が1991年に立ち上げた、テキストのみのもの。この時オープンソースとして公開されたため、誰でも使えるようになり世界中に広まりました。

1993年、閲覧者が情報を送り返せる仕組みCGIが誕生します。これによりWebサイトに双方性が生まれ、コミュニケーションが可能になりました。それと同時にインターネット接続環境が発展してWebサイトの動きがスムーズになり、容量の大きな画像や動画を使用するのも可能になります。

1996年代にはAdobeがFlashを開発。初期のHTMLでは不可能だった動きのあるWebデザインが可能になりました。これによりサイトの構造や機能が重要視され、サイトの見た目や使いやすさ（ユーザビリティ）に注目が集まるようになったのです。

②2000年代のWebデザイン

2000年ごろからはCSSを使用したWebデザインが注目されるようになります。CSSによってシンプルなコードで比較的単純に、そして自由にデザインが可能になりました。

この頃から「ユーザーがどのようにWebサイトを見るか」などを考えたレイアウトが重要視され始めました。伝えたい情報をしっかりと伝えるための配置やナビゲーション機能に配慮したWebデザインが急増します。

2000年代中期には、コンテンツ重視のデザインになって行きます。さらにコンテンツはSEO重視になり、SEOがデザインを左右する要素になりました。

2007年にはApple社によりiPhoneが発表され、スマートフォンの普及とともにモバイルの大きな画面で見られるのを前提としたWebデザインの動きが強まります。

③2010年代のWebデザイン

2011年ごろにCSSフレームワークがオープンソースとして公開され始めたことにより、2009年頃に誕生していた「レスポンシブWebデザイン」が簡単に実現できるようになります。

スポンシブWebデザインとは、画面やブラウザのサイズに応じてウェブページが最適に閲覧できることを目指したWebデザインの手法です。スマホ用・PC用と別で制作して分けられていたWebサイトがひとつになり、URLが統一されることで表示エラーを防げるというメリットがあります。

以上のWebデザインの歴史を見てもわかるように、Webデザインの世界では技術の進歩によってできることやトレンドが変わることを覚えておきましょう。

Webデザイナーの仕事の種類

Webデザイナーの仕事は多岐に渡りますが、大きく以下の4種類に分けられます。

• Webサイトのデザイン
• アプリケーションのデザイン
• LP（ランディングページ）のデザイン
• バナーなどのデザイン

順番に解説していきます。

Webサイトのデザイン

Webデザインと聞くとWebサイトのデザインを思い浮かべる方が多いのではないでしょうか？企業の紹介を目的としたコーポレートサイトやブランディングサイト、製品を販売するECサイト、キャンペーンのプロモーションサイトなど、Webサイトにも様々な種類があります。

アプリケーションのデザイン

スマホやPCで利用しているアプリケーションのデザインもWebデザインのひとつです。

如何に情報を伝えるかが重要なWebサイトと違って、アプリケーションはアプリそのものが持つシステム（仕組み）も重要なので、設計の性質が大きく異なります。見た目の美しさよりも機能美を求められるため、「UIデザイナー」としての求人も多い分野です。

LP（ランディングページ）のデザイン

LP（ランディングページ）のデザインもWebデザイナーの仕事です。

Webマーケティングにおけるランディングページとは、ネット広告にリンク元を設定したある特定の製品やサービスの訴求に特化した縦長1ページ完結型のサイトのことで、いわゆる広告ページです。

LP（ランディングページ）には特定の製品のコンバージョン（成果）獲得という明確な目的があり、縦長1ページのレイアウトでどうアクションを誘導するかが問われます。

バナーなどのデザイン

Webに掲載するバナーなどの広告やECサイトの商品サムネイルなどのデザインも、Webデザインの一種です。

バナーなどのデザインはグラフィックデザインに近いですが、ユーザーの興味を引いてクリックさせるための高い訴求力のあるデザインが必要とされます。

Webデザインの流れ

Webデザインの流れは基本的に以下のような流れで進みます。

1. 要件定義（企画・設計）
2. サイトマップとワイヤーフレーム作成
3. デザインカンプ作成
4. コーディング

順番に詳しく見ていきましょう。

①要件定義（企画・設計）

パソコンに向かっての制作に入る前に、クライアントや営業担当者などと打ち合わせをして要件定義をします。

コンセプトや目的、ペルソナなどから構造設計やビジュアルイメージまでをすり合わせて完成イメージを固めましょう。クライアントに納得してもらうデザインをするためにも、しっかりとヒアリング・提案する必要があります。

②サイトマップとワイヤーフレーム作成

続いて、構造とレイアウトの設計をします。

サイトマップとはWebサイトの階層構造を示した構造図で、情報をカテゴライズしながら整理してユーザーの導線を設計します。ワイヤーフレームはレイアウトの図面で、何をどこに配置するかを示したものです。

Webサイトをデザインする時はこの2つを作成し、クライアントとすり合わせを行うケースが多いでしょう。

③デザインカンプ作成

ワイヤーフレームを元に、実際の完成図「デザインカンプ」を作ります。撮影や原稿依頼などをして使用する素材を集めつつ、見た目を作り上げていく作業です。

デザインカンプの作成にはIllustratorやPhotoshopを使用します。数人のWebデザイナーが関わる仕事や新人のころには、設計やワイヤーフレームの作成には携わらずに下層ページのデザインカンプ作成だけさせてもらう、なんてことも多いかもしれません。

④コーディング

完成したデザインカンプをコーディングしていきます。コーディングとは、プログラミング言語を使ってソースコードを記述する作業のこと。コーディングすることでデザインがWebブラウザ上で見えるようになります。

コーディングにはHTMLやCSS、JavaScript、PHPなどを使用します。「コーダー」と呼ばれるコーディング専門の職種が担当することもあり、デザインカンプ作成者とは別の場合もあります。

Webデザインに必要な5つのスキル

「Webデザイナーを目指したいけど、何を勉強したら良いのかわからない」という方も多いのではないでしょうか？そこで、Webデザインに必要な5つのスキルを紹介します。

これからWebデザインを勉強する方はぜひ参考にしてください。

【1】Webサイトに関するスキル【UI/UX】

Webサイトの仕組みやWebサイトで使用される要素の知識は最低限必要です。

例えばユーザーの目に触れる部分であるUI（ユーザーインターフェース、英：User Interface）について。「ヘッダー」「フッター」などの構成や「グローバルばナビゲーション」「ハンバーガーメニュー」などのナビゲーションといったパーツ、「シングルカラムレイアウト」などのWebサイトのレイアウトの知識などは必須です。

さらに、デザインの美しさやコンテンツの読みやすさなどのユーザーの体験を指すUX（ユーザーエクスペリエンス、英：User Experience）の知識も重要になります。

【2】デザインに関するスキル【配色・テキスト・レイアウト】

Webデザインに限らない「デザイン」のスキルも求められます。デザインの基本的な知識について学んでおきましょう。

配色やトーンなどの色がもたらすイメージの違いや心理的効果、フォントの使い方や美しい文字組みについてがメインになります。

また、「フラットデザイン」「ミニマルデザイン」などといったデザインの種類やトレンドについても知識をつけるとデザインの幅が広がります。

【3】ツールに関するスキル【Illustrator・Photoshop】

デザインカンプの作成には、IllustratorやPhotoshopといったデザインツールを使用します。Illustrator・PhotoshopはWebデザインに限らず様々なデザインで使用されるツールで、ほとんどのデザイン会社で標準ソフトとして採用されています。そのため、しっかりと使いこなせるようになるのが望ましいです。

【4】コーディングに関するスキル【HTML・CSS】

先ほど「Webデザインの流れ」でも登場したコーディングの知識も必要です。HTMLやCSSの知識を身につけ、またコーディングを行わなくてもある程度のWebサイトを作れる「Adobe Dreamweaver」も使えると便利でしょう。

JavaScriptやjQuery、PHPといったプログラミングの知識もあるとより良いと言われています。優先事項ではありませんが、身につけると強みになるはずです。

【5】Webマーケティングに関するスキル【SEO・アクセス解析】

WebマーケティングのスキルもWebデザインに欠かせません。特にSEO（検索エンジン最適化）対策は設計に大きく影響します。

また、Webサイトや広告は作って終わりということはほとんど無く、効果測定＆改善を繰り返していくものです。その運営まで関わるかどうかは会社によりますが、コンバージョンを獲得するためのアクセス解析などについても勉強しておきましょう。

Webデザイナーに資格は必要？

Webデザイナーは、資格をもっていなくてもなれる職業です。しかし、Webデザインに関わる資格は様々あり、取得しておくと就職や転職で有利に働きます。

おすすめは以下の資格です。

• ウェブデザイン技能検定：厚生労働省が認定する国家資格（2020年9月時点）
• Webデザイナー検定：Webデザイン業界全体のスキルや流れ
• Webクリエイター能力認定試験：デザインとコーディングのスキル
• アドビ認定エキスパート：Illustrator・Photoshopなどのアドビソフトの知識

初心者がWebデザイナーになる方法と勉強法

初心者がWebデザイナーを目指すのは、そこまで難しいことではありません。努力やある程度の時間、そして少々のセンスがあれば、社会人でイチから目指すことも可能です。

初心者がWebデザイナーになるには大きく3つの方法がありますので紹介していきます。

独学でWebデザインを勉強する

独学でWebデザインを学ぶことも充分可能です。Webサイトに関する知識を本やインターネットで学び、PhotoshopやIllustrator、HTMLなどのツールは実際に触りながら習得していきましょう。

ただし、独学は成長が実感しにくいためか、途中での挫折率が高いです。毎日何時間勉強する、いつまでに何を勉強するなどといった計画を立てながら進めていくことをおすすめします。

Webデザインスクールに通う

Webデザインが学べるスクールはたくさんあり、どんどん数を増やし続けています。コストがかかりますが、独学よりも効率良く勉強でき、最後まで学びきれる確率が上がるでしょう。

オンラインで学べるスクールなど、自分にあった通い方ができるスクールも多いです。ただし、プログラミングの勉強がメインになるスクールも多いので、習得したいスキルが学べるかどうか確認するのを忘れないでください。

ハローワークの職業訓練校に通う

ハローワーク経由で行ける求職者や転職志望者のための職業訓練校に、Webデザインのコースがあります。（地域によってはない場合もあります）

学費がかからず失業保険を受給しながら通えるので、職についていない方におすすめです。実際に職業訓練校を出てWebデザイナーとして活躍しているプロも多くいます。

Webデザインに役立つおすすめ参考サイト4選

最後に、Webデザインの参考に役立つおすすめのサイトを紹介します。

Webデザインは常に新しいアイデアと最適な設計を求められるので、世の中にある素敵なWebサイトに触れて技術を吸収し続けることが欠かせません。

初心者の方も、これから紹介するサイトで様々なWebデザインに触れてみてください。

SANKOU!

国内のWebサイト･LPを集めたWebデザインギャラリー･参考サイト集です。独創的でおしゃれなサイトがたくさん集められています。LP、コーポレートサイト、ブランドサイトなどのカテゴリごとのほか、テイストやレイアウトごとに見ることも可能で、サイト名通り参考になるサイトです。

SANKOU! 公式サイト：https://sankoudesign.com/

MUUUUU.ORG

縦に長くオーソドックスなレイアウトでデザインが優れたサイトを厳選して集めているというWebデザインポータルサイトです。サイトの業種ごとに細かくカテゴライズされているのが特徴。サムネイルの状態でもデザインが見比べられる、非常に見やすいサイトです。

MUUUUU.ORG公式サイト：https://muuuuu.org/

81-web.com

国内の優れたデザインのWebサイトを集めたギャラリー＆リンク集です。サイト名の81は日本の国際電話番号「81」に由来しているそう。サムネイルホバーでカテゴリやカラーを確認できます。サムネイル右下の＋マークをクリックするとお気に入りに追加され、「favorite」ページでまとめて見られるのも嬉しいポイントです。

81-web公式サイト：https://81-web.com/

bookma! v3

感性を刺激するWebデザインを集めたギャラリーサイトです。PCサイトとスマホサイトを見比べられるのが特徴。上部のPCアイコンをクリックするとPCサイトのみに、スマホアイコンクリックでスマホサイトのみの表示に変えられます。カテゴリ検索はできません。

bookma! 公式サイト：https://bookma.torch.blue/

まとめ

今回は「Webデザイン」について詳しく紹介しました。

Webデザイナーになるためには学ぶことがたくさんありますが、奥深くやりがいのある仕事です。インターネット技術の発展やトレンドの変化とともに成長し続けられるのもWebデザインに関わる仕事の魅力だと言えます。

興味のある方は、まずはWebデザインを集めた参考サイトをのぞいてみてはいかがでしょうか？