Webデザイナーってどんな仕事？
Webデザイナーは具体的にどのような仕事をしているのでしょうか？具体的な仕事の内容や、必要なスキルについて解説しますので、今後の参考にしてください。
Webサイトの構成をデザイン
クライアントの依頼に沿ってWebサイトをデザインするのが、Webデザイナーの仕事です。全体のレイアウトや、Webサイトのイメージを左右するビジュアルの決定などを行います。
デザインしたWebサイトを実際に形にするときに使うのが、HTMLやCSSといった言語です。HTMLは、Webサイトの土台となる枠組みや文字を書くための最も基本的な言語です。
しかし、HTMLだけではデザインは完成しません。そこで利用するのが飾り付けするための言語CSSです。HTMLとCSS両方をうまく使うことで、デザイン通りのWebサイトが作れます。
Webデザイナーは、企業や個人と綿密な打ち合わせをしながら意図をくみ取り、イメージを明確にします。そのイメージをWebサイトとして形にするために、HTMLやCSSを利用するのです。
Photoshopなどの画像編集スキルが必要
Webデザインを行う上で、PhotoshopやIllustratorといったグラフィックソフトのスキルは欠かせません。色合い・ロゴやアイコンの配置など、具体的なデザインのイメージを作成するのに必須です。
そのため、Webデザイナーを目指すなら、グラフィックソフトを使った画像編集スキルを身につけておきましょう。
本や学習サイトを使って独学することもできますし、通学制のスクールや通信講座などで学ぶこともできます。
ポートフォリオを持とう
ポートフォリオとは作品集のことです。Webデザイナーとしての実績や実力を示すための資料として、クライアントへ提示します。
Webデザイナーとしての経験がある場合には、これまで手掛けたWebサイトをまとめるとよいでしょう。提示する相手に合わせて、似た傾向・好みの傾向のものを集めると効果的です。
未経験の場合には、自分でデザインしたWebサイトをポートフォリオとしてまとめましょう。実際に作ったサイトがあれば、未経験でもどのような技術があるWebデザイナーなのか判断できるからです。
ポートフォリオをWeb上に作るケースも増えています。しかし、プリントアウトしたものも添える方が、見てもらいやすくなるでしょう。
よく聞く用語の意味を知ろう
どんな仕事でも、よく聞く専門用語があります。Webデザイナーの場合には、どのような専門用語が登場するのでしょうか？代表的な用語を紹介するので、参考にしましょう。
レスポンシブデザイン
パソコン・スマホ・タブレットなど、どんな端末でも利用しやすいWebサイト作りのために必要なのが『レスポンシブデザイン』です。表示する端末に合わせ、自動的に最適な表示方法に切り替えます。
レスポンシブデザインでWebサイトを作るとき、サイトの内容を決めるHTMLは1つのみです。どんな端末からでも、内容自体は同じものを閲覧できます。
違うのはCSSです。Webサイトを飾るCSSを、パソコン用・スマホ用という具合に用意することで、端末ごとに最適なデザインでの表示が可能なのです。
スマホなどモバイルユーザーの使いやすさが向上するため、検索エンジンに評価されやすくなります。更新作業が発生したとき、HTMLが1つのみなので、1回の作業で完了するのも利点です。
ランディングページ
縦長レイアウトで、ユーザーに決まったアクションを求めるためのWebサイトが『ランディングページ』です。例えば、試供品の申込み・無料会員登録・求人募集への申込み、といったアクションを得ることを目指します。
通常のWebサイトと違い、サイドメニューや上部メニューを設置しないため、デザインの制約が少ないのが特徴です。比較的自由にレイアウトできます。たくさん画像を使うのも特徴です。ランディングページは営業トークを再現しているため、情報量が多くなっています。通常のWebサイトよりも、広告としての機能が強いといえるでしょう。
WordPress
『WordPress』は、HTMLやCSSなどの専門知識がなくても、簡単にWebサイトを作って公開できるコンテンツ管理システム（CMS）の1つです。誰でもすぐにWebサイトが作れます。WordPressの利用者が多い理由は、使いやすさです。HTMLを触らなくても、Webサイトの基本的な構造を作れます。
また、テーマを選ぶだけで、着せ替えのようにWebサイトの雰囲気をガラッと変えられます。豊富なプラグインを選べば、Webサイトに必要な機能をすぐにつけることも可能です。
パーツの名称
Webサイトはパーツによって構成されています。パーツにはどのような種類があり、それぞれどのように機能するのでしょうか？代表的なパーツを紹介します。
ヘッダー、フッター
『ヘッダー』はページの1番上に位置している部分です。企業のロゴやWebサイトのタイトルを表示し、全体のイメージを作ります。アイキャッチにもなる部分です。Webサイトのどのページを見ても、必ず上部にはヘッダーが表示されます。
『フッター』はページの1番下に位置している部分です。カテゴリ一覧・タグ・お問い合せページへのリンク・コピーライト表示の他、関連記事・人気記事などが配置されることもあります。
記事を読み終わった後に目に映る部分のため、記事を読み終わったユーザーにとってもらいたいアクションによって、何を配置するか決めましょう。
グローバルナビゲーション
ヘッダー部分に設置し、『ホーム』『サービス紹介』『会社概要』など、Webサイトのメインとなるページにリンクを貼るのが『グローバルナビゲーション』です。
どのページでも共通して表示されるヘッダーに配置することで、サイト内を移動する際のショートカットとして機能します。
アコーディオンメニュー
『アコーディオンメニュー』は、クリックで展開表示できるナビゲーションメニューです。タイトルや見出しが表示されている部分をクリックすることで、そのテーマについての詳細が出てきます。文字数が多くたくさんスクロールしなければいけないWebサイトは、ユーザーにとってあまり読みやすいとはいえません。
そんな時は、アコーディオンメニューを使い、タイトルや見出しだけ表示されるようにします。ユーザーが読みたい部分だけ選んで詳細を展開し、読むことが可能です。スマートフォンサイトの読みやすさを向上させる効果も期待できます。
カルーセル
『カルーセル』とは、ユーザーに見せたいコンテンツを順番に表示させるエリアです。一定時間ごとや、クリックされるごとに表示が切り替わるので、1カ所に複数のコンテンツを表示できるメリットがあります。
通常、Webサイトの上部に配置されるカルーセルは、ユーザーが1番最初に見る部分です。そのため、ユーザーが魅力を感じるコンテンツを配置するのがよいでしょう。特に強く印象づけたい場合には、アニメーションを用いたカルーセルがおすすめです。
ファビコン
ブラウザでWebサイトを開くと、タブにアイコンが表示されます。このアイコンが『ファビコン』です。ファビコンはWebサイトの目印として機能します。
たくさんのWebサイトを1度に開くと、たくさんのタブが横並びに表示されます。すると、ぱっと見でどのタブがどのサイトのものかが分かりにくくなるのです。こんな時ファビコンがあると、それを目印に探してもらいやすくなります。
また、Webサイトをお気に入り登録した際にも、ファビコンが表示されるので、どんなサイトだったか覚えてもらいやすくなるのです。Webサイトを印象づける役割のあるアイコンといえるでしょう。
Webデザインの流れと基本用語集
Webデザインをするとき、急に配色を決めたりロゴを配置したりすることはありません。デザインにも手順があるのです。どのような流れでWebデザインが行われるのか、解説します。
ワイヤーフレーム
まず『ワイヤーフレーム』の作成を行います。ワイヤーフレームは、Webサイトのどこに何を配置するか決める設計図のようなものです。Webサイトに必要な要素を洗い出し漏れなく設置することや、事前に見やすさを確認することが目的となります。
実際に作ってから修正が発生すると、手間も予算も無駄が出てしまうでしょう。ワイヤーフレームを作ることで、無駄なく必要な要素を盛り込み、見やすいWebサイトのデザインができるのです。
デザインカンプ
ワイヤーフレームの次に作るのは、Webサイトの完成イメージである『デザインカンプ』です。配色を決めたり、仮の画像を配置したりして、完成したときのイメージを形にします。
デザインカンプは、PhotoshopやIllustratorなど、グラフィックソフトで作ることが多いです。Webデザイナーと、企業や個人といったクライアントの間では、Webサイトの完成イメージの共有が欠かせません。
デザインカンプは、完成イメージを共有し、クライアントの意図に沿ったWebサイトを作るために必要不可欠です。
コーディング
Webサイトのデザインが決定したら、最終的にブラウザで閲覧できる形式にしなければいけません。この工程が『コーディング』です。コーディングでは、HTMLやCSS・JavaScriptといったプログラミング言語を使います。他にも、グラフィックソフトやホームページ制作ソフトのスキルが必要です。
これらのスキルを使って、実際にWebページを組み上げていくのが、Webコーダーです。建築士の設計通りの家を作る大工のように、WebコーダーはWebデザイナーのデザイン通りのWebサイトを作ります。
ソフトやプログラミング言語を駆使することで、クライアントの意図をくんだWebサイトを構築するのです。
デザイン設計の考え方
Webデザインは、ユーザーにとって使い勝手がよく、価値を感じられるものが理想です。そのための考え方としてよくいわれているのが、UIとUX、そしてユーザビリティとアクセシビリティです。それぞれの考え方がどういったものなのか解説します。
UI、UX
『UI』はユーザーインタフェースといって、ユーザーがパソコン使用時に使用する入力方式や表示方法などのことです。『UX』はユーザーエクスペリエンスといって、Webサイトによって得られる体験のことをいいます。
UIとUXは影響を与え合うもののため、UXを向上させたいならUIも向上させましょう。使い勝手のよさによって、体験の質は様変わりしてしまうからです。
UIを高めるには、どんなユーザーがWebサイトを訪れるか想定することが大切になります。例えば、インターネットを使い慣れた人と日ごろ使わない人では、使いやすさの感じ方に違いがあるでしょう。
どんなユーザーがターゲットになるかを想定し、そのユーザーにぴったりのUIとUXをデザインすることが大切です。
ユーザビリティ、アクセシビリティ
『ユーザビリティ』とは、特定のユーザーの満足度を高め、指定された目的を達成しようとする考え方です。作成するWebサイトのメインターゲットが「趣味を楽しむ高齢者」なら、高齢者の満足度が高まるようにデザインします。
例えば、大きな文字にする・インターネット独特の表現をしない、といった具合です。『アクセシビリティ』は、アクセスのしやすさのことです。誰がどんな状況でアクセスしたとしても、利用しやすいWebサイトの構築を目指します。
例えば、高齢者でも若者でも見やすいWebサイトを作るなら、文字のサイズを自由に変えられるように設計すれば、誰でも好みのサイズで閲覧可能です。
レイアウトに関する用語
Webサイトを構成する要素の配置の仕方を、レイアウトといいます。レイアウトの際によく使われる用語を解説するので、デザインする際の参考にしましょう。
カラム
『カラム』は段組みのことをいいます。Webサイト全体の構成を決める、最も基本的な部分といえるでしょう。よく使われるのは、2カラムレイアウトや3カラムレイアウトです。2カラムは「メイン＋サイドバー」の2列で構成され、3カラムは「メイン＋サイドバー2列」の3列で構成されています。
カラムはもっと多く増やすことも可能です。しかし、増やすほどメインが狭まってしまうので、本当に必要か考えて設計しましょう。全体幅を考慮しない設計をすると、横スクロールしなければいけないWebサイトになってしまう可能性があります。
操作性の悪い横スクロールを避けるためにも、カラムは必要最低限に抑えるのがよいでしょう。
グリッドレイアウト
整然とした美しさのあるレイアウトを考えるときに利用するのが『グリッドレイアウト』です。もともと新聞や雑誌などで使われてきた手法で、Webサイトのデザインでも基本とされています。
グリッドレイアウトでデザインするときには、まずガイドラインとなるグリッド（格子）を引きます。そして、グリッドをもとに要素を配置していくのです。たくさんの情報を整理できる・更新しやすい・レスポンシブデザインと相性がよい、といったメリットがあります。
スプリットスクリーンレイアウト
印象的なWebサイトを作りたいときに役立つのが『スプリットスクリーンレイアウト』です。画面全体を2分割し、メインエリアとサブエリアとします。メインエリアにはタイトルやキャッチコピーといった重要な要素を配置し、サブエリアには詳細情報を配置します。
目を引きやすいだけでなく、分かりやすく情報を整理して配置できるという特徴もあるレイアウトです。パソコンの大きな画面では横並びに、スマホの小さな画面では縦並びにすることで、レスポンシブデザインにも比較的簡単に対応できます。
SEO対策の知識も欠かせない
Webデザイナーとして活躍するためには、デザインやプログラミング言語についてはもちろん、SEO対策についても知っておきましょう。
どのようにすれば検索エンジンに評価されるデザインになるのか知っていれば、SEO対策にもなるWebデザインができます。
見出しのhタグ
見出しは、記事の読みやすさにも、SEO対策にも役立つ重要な要素です。しかし、単に文字のサイズを大きくしたり太字にしたりするだけではいけません。『hタグ』を使用し、見出しだと検索エンジンに分かるようにするのです。
例えばこの項目の見出しであれば「<h3>見出しのhタグ</h3>」と記載しています。hタグで見出しを囲むことで、検索エンジンに「これは見出しです」と伝えられるのです。
見出しタグは1から6まであるので、記事の構成によって使い分けましょう。hタグで見出しを設定したときに、自動で見出しデザインが施されるようにもできます。下線を引いたり、文字色を変えたりできるのです。CSSで設定できる見出しデザインは、トレンドも意識しながら設定しましょう。
パンくずリスト
『パンくずリスト』は「ホーム＞キッチン用品＞フライパン」のように、Webサイトのどの位置を閲覧しているか分かりやすく表示するリンクです。コンテンツの1番上に設置することが多いでしょう。
大きなWebサイトになればなるほど、パンくずリストの重要性は高まります。広大なサイト内で迷子にならないためのガイドになるのです。パンくずリストも、活用するとSEO対策に役立ちます。キーワードを意識してカテゴリ分けをすることで、アンカーテキストにターゲットキーワードを含めるという、SEOの基本を実践できるのです。
パンくずリストはシンプルな見た目のものが多いですが、CSSでオリジナルデザインにすることもできます。
ソーシャルボタン
ソーシャルメディアを利用すると、普段検索しないユーザーからもアクセスしてもらいやすくなります。そのため、Webサイトに『ソーシャルボタン』を設置し、潜在ユーザーを取り入れましょう。
ソーシャルボタンを設置すると、コンテンツを気に入ったユーザーが、ソーシャルメディアで共有してくれる可能性があります。ユーザーが共有した投稿から、別のユーザーがアクセスしてくれる可能性もあるのです。
まとめ
Webデザイナーの専門用語はたくさんあります。そのため、1度に全て覚えようとするのではなく、まずは分かるところから取り入れていきましょう。
デザインに取り組んでいるうちに、自然と身につく言葉もたくさんあります。紹介した言葉を中心に、まずは基本的な専門用語を覚え、徐々に慣れていきましょう。