デザインの
コトハジメ
Webデザインとは？
Webデザインとは、Webに関わるものをデザインすることです。
そもそも、本来デザイン（英：design）とは日本語で「設計」「意匠」などという意味で、機能や美的な外観を考慮した計画のこと。
色や模様などを配置して見た目を作るのはデザインの手段であり、目的のための計画（設計）自体をデザインと言います。
つまりWebデザインはWebを通して伝えたい情報を伝えるためのWebサイトやWebページを設計することを指しており、グラフィックデザイン的な要素だけでなく情報アーキテクチャの構築などの設計スキルも求められます。しかしながら、「デザイン＝見た目を作る」という解釈も広まっているのも事実です。
Webデザインをする人や職を「Webデザイナー」と呼びます。しかし、Webデザイナーが設計やプログラミングまで担当することもあれば、使いやすさの設計は「UIデザイナー」と呼ばれる人が担当する場合もあるなど、デザインの範囲は会社やプロジェクトによって様々です。
- Webデザイン：Webに関わるものをデザインすること
- デザイン：機能や美的な外観を考慮した計画
（「デザイン＝見た目を作る」という解釈も浸透している） - Webデザインの範囲：設計・制作・プログラミングなど、会社やプロジェクトによって変わる
Webデザイナーの仕事の種類
- Webサイトのデザイン
- アプリケーションのデザイン
- LP（ランディングページ）のデザイン
- バナーなどのデザイン
Webデザイナーの仕事は多岐に渡りますが、大きく以下の4種類に分けられます。
順番に解説していきます。
Webサイトのデザイン
Webデザインと聞くとWebサイトのデザインを思い浮かべる方が多いのではないでしょうか？
企業の紹介を目的としたコーポレートサイトやブランディングサイト、製品を販売するECサイト、キャンペーンのプロモーションサイトなど、Webサイトにも様々な種類があります。
アプリケーションのデザイン
スマホやPCで利用しているアプリケーションのデザインもWebデザインのひとつです。
如何に情報を伝えるかが重要なWebサイトと違って、アプリケーションはアプリそのものが持つシステム（仕組み）も重要なので、設計の性質が大きく異なります。見た目の美しさよりも機能美を求められるため、「UIデザイナー」としての求人も多い分野です。
さらに、デザインの美しさやコンテンツの読みやすさなどのユーザーの体験を指すUX（ユーザーエクスペリエンス、英：User Experience）の知識も重要になります。
LP（ランディングページ）のデザイン
LP（ランディングページ）のデザインもWebデザイナーの仕事です。
Webマーケティングにおけるランディングページとは、ネット広告にリンク元を設定したある特定の製品やサービスの訴求に特化した縦長1ページ完結型のサイトのことで、いわゆる広告ページです。
LP（ランディングページ）には特定の製品のコンバージョン（成果）獲得という明確な目的があり、縦長1ページのレイアウトでどうアクションを誘導するかが問われます。
バナーなどのデザイン
Webに掲載するバナーなどの広告やECサイトの商品サムネイルなどのデザインも、Webデザインの一種です。
バナーなどのデザインはグラフィックデザインに近いですが、ユーザーの興味を引いてクリックさせるための高い訴求力のあるデザインが必要とされます。
Webデザインの流れ
Webデザインの流れは基本的に以下のような流れで進みます。
- 要件定義（企画・設計）
- サイトマップとワイヤーフレーム作成
- デザインカンプ作成
- コーディング
順番に詳しく見ていきましょう。
①要件定義（企画・設計）
パソコンに向かっての制作に入る前に、クライアントや営業担当者などと打ち合わせをして要件定義をします。
コンセプトや目的、ペルソナなどから構造設計やビジュアルイメージまでをすり合わせて完成イメージを固めましょう。クライアントに納得してもらうデザインをするためにも、しっかりとヒアリング・提案する必要があります。
②サイトマップとワイヤーフレーム作成
サイトマップとはWebサイトの階層構造を示した構造図で、情報をカテゴライズしながら整理してユーザーの導線を設計します。ワイヤーフレームはレイアウトの図面で、何をどこに配置するかを示したものです。
Webサイトをデザインする時はこの2つを作成し、クライアントとすり合わせを行うケースが多いでしょう。
参考
ワイヤーフレーム
https://miro.com/ja/templates/wireframe/
サイトマップ
https://www.xserver.ne.jp/bizhp/homepage-configuration/
③デザインカンプ作成
ワイヤーフレームを元に、実際の完成図「デザインカンプ」を作ります。撮影や原稿依頼などをして使用する素材を集めつつ、見た目を作り上げていく作業です。
デザインカンプの作成にはIllustratorやPhotoshopを使用します。数人のWebデザイナーが関わる仕事や新人のころには、設計やワイヤーフレームの作成には携わらずに下層ページのデザインカンプ作成だけさせてもらう、なんてことも多いかもしれません。
参考
https://www.xserver.ne.jp/bizhp/homepage-design-comp/
④コーディング
完成したデザインカンプをコーディングしていきます。コーディングとは、プログラミング言語を使ってソースコードを記述する作業のこと。コーディングすることでデザインがWebブラウザ上で見えるようになります。
コーディングにはHTMLやCSS、JavaScript、PHPなどを使用します。「コーダー」と呼ばれるコーディング専門の職種が担当することもあり、デザインカンプ作成者とは別の場合もあります。
Webデザインに必要なスキル
「Webデザイナーを目指したいけど、何を勉強したら良いのかわからない」という方も多いのではないでしょうか？
これからWebデザインを勉強する方はぜひ参考にしてください。
【1】Webサイトに関するスキル【UI/UX】
Webサイトの仕組みやWebサイトで使用される要素の知識は最低限必要です。
例えばユーザーの目に触れる部分であるUI（ユーザーインターフェース、英：User Interface）について。「ヘッダー」「フッター」などの構成や「グローバルばナビゲーション」「ハンバーガーメニュー」などのナビゲーションといったパーツ、「シングルカラムレイアウト」などのWebサイトのレイアウトの知識などは必須です。
【2】デザインに関するスキル【配色・テキスト・レイアウト】
Webデザインに限らない「デザイン」のスキルも求められます。デザインの基本的な知識について学んでおきましょう。
配色やトーンなどの色がもたらすイメージの違いや心理的効果、フォントの使い方や美しい文字組みについてがメインになります。
また、「フラットデザイン」「ミニマルデザイン」などといったデザインの種類やトレンドについても知識をつけるとデザインの幅が広がります。
【3】ツールに関するスキル【Illustrator・Photoshop・figma・Canva】
デザインカンプの作成には、IllustratorやPhotoshopといったデザインツールを使用します。Illustrator・PhotoshopはWebデザインに限らず様々なデザインで使用されるツールで、ほとんどのデザイン会社で標準ソフトとして採用されています。そのため、しっかりと使いこなせるようになるのが望ましいです。
【4】コーディングに関するスキル【HTML・CSS】
先ほど「Webデザインの流れ」でも登場したHTMLやCSSの知識を身につけ、コーディングの知識も必要です。
JavaScriptやjQuery、PHPといったプログラミングの知識もあるとより良いと言われています。優先事項ではありませんが、身につけると強みになるはずです。
【5】Webマーケティングに関するスキル【SEO・アクセス解析】
WebマーケティングのスキルもWebデザインに欠かせません。特にSEO（検索エンジン最適化）対策は設計に大きく影響します。
また、Webサイトや広告は作って終わりということはほとんど無く、効果測定＆改善を繰り返していくものです。その運営まで関わるかどうかは会社によりますが、コンバージョンを獲得するためのアクセス解析などについても勉強しておきましょう。