Webデザインってなに？

Webデザイナーの働き方

まずはWebデザイナーとしての働き方について見ていきます。

一般的な働き方の種類は次のとおりです。

• 通勤して雇用先や客先に常駐する働き方。正社員や派遣、契約社員やバイト、業務委託など様々な雇用形態が考えられます。
• 定期的に雇用先に出社して打ち合わせをし、仕事を家でこなす半リモート型の働き方。正社員でも最近はこういった働き方が増えてきましたが、最も多いのは業務委託でしょう。
• 雇用先には一切通わず、最初から最後まで遠隔でやりとりをするフルリモート型。業務委託のフリーランスならではの働き方です。最近ではクラウドソーシングを利用したフルリモートの働き方が増えてきました。社会情勢から、正社員でも期間限定でフルリモートになるケースも増えてきています。

未経験から仕事を探す方法

何も制作したことがない状態で仕事を探しても、よほど巡り合わせが良くないと内定や案件を獲得できないでしょう。
そのため、少なくともオリジナルサイトを1つ以上制作しておきましょう。
可能であれば、クラウドソーシングなどを利用して実際に報酬が発生する案件実績を作っておきましょう。これは就職、転職、フリーランスなどどの進路でも有効な実績です。

いくつか代表的な職探しの方法について列記しておきます。

• 就職・転職エージェントのサイトに登録する（例：リクナビ、マイナビ）
• 求人サイトで未経験募集を探す（例：indeed、Google求人）
• 人材派遣会社に登録する（たくさんあります）
• 知人の紹介や、ウェブサイトを持っていない個人事業主の知人などに、勉強として作らせてもらう（格安または無料でも実績になるため可）
• クラウドソーシングで未経験OKの案件やコンペ型と呼ばれる案件に応募する

最後のクラウドソーシングのコンペ型案件は特におすすめです。コンペ型の案件についてはクラウドソーシング大手であるクラウドワークスの代表取締役もこう述べています。

契約内容と対価に自身が持てなければ、仕事を始めてみてから「やっぱりできませんでした」といったことでクライアントに迷惑をかけてしまうことがあるので、コンペ形式やタスク形式のほうが良いこともあります。〔中略〕（コンペ形式は）採用されなかったとしても、フィードバックをもらったり、採用された案との違いも分かったりするので自身のスキルアップにもなります。その点、デザイン初心者やイラスト初心者、あるいはキャッチコピー初心者でも気軽に応募が可能です。実際コンペ形式は、クラウドワーキングを始めたばかりの方や、個人で仕事をするのが初めての方が数多く応募しています。

吉田浩一郎氏（クラウドワークス代表取締役）の著書

興味のある方は一度クラウドワークスでどのようなコンペ案件があるのか目を通しておきましょう。

クラウドワークスのコンペ（※1）

以下はクラウドワークスの検索画面のおおまかな見方です。参考にしてください。

働き方のバリエーションに富んでいる点もWebデザイナーの魅力ですね。

Webデザインは可能性の宝庫

働き方の選択肢が豊富なだけではなく、進路の選択肢も豊富な点もWebデザインの魅力といえます。どういうことなのか解説します。

Webデザインの基本を押さえておくと、もちろんWebサイトを作れるようになります。

しかしWebデザインのスキルが役に立つのは、デザイナーだけとは限りません。

今後さらに広告を学んだり、検索結果上位に表示するためのスキル（SEO）を学んだり、アクセス解析を学んだりすることで、様々な方面でWebデザインスキルが役立ちます。

作り手としてWebデザインを極めるのもよし、Webデザインの基本スキルを持ち合わせた広告運用者やSEOエキスパートになるのもよしです。他にも集客プランを広く考えるWebマーケター、アクセス解析を駆使したWebコンサルタント、顧客と作り手の架け橋になるWebディレクターなどなど、様々な展開ができます

そして、今回学ぶWebデザインのスキルは、プログラマーにとっても有益な知識なので、将来的にプログラミング言語を学ぶ際にも役に立ちます。

このようにWebデザインのスキルは現在のIT業界では広く役に立つスキルなので、多くの可能性を秘めているといえます。

もっと深く業界のことを知りたい方は、パーソナルメンターを頼ってください。

Webデザインとはなにか

ここからは、そんな自由な職種であるWebデザイナーが手掛けるWebデザインとはいったい何か、という話題にシフトします。

みなさんにとって、Webデザインとはどのようなものでしょうか。

かっこいいサイトを作ることかもしれません。
自分のデザインセンスで作品を作り上げることかもしれません。

様々な定義があっていいと思います。
ただし多くのクライアントにとって、Webデザインとは何らかの目的を達成する手段の1つ、なのです。

では「何らかの目的」とはどのようなものがあるのか。ここではWebデザインの目的と種類について見ていきたいと思います。

Webサイトの種類

クライアントの目的は様々ですが、大枠の目的によって次のようなWebサイトの種類に分けられます。

種類	内容	目的	サンプル集
コーポレートサイト	企業情報を掲載するサイトです。	株主やスポンサーからの信用をアップしたいなど	コーポレートサイトの例（※2）
ブランディングサイト	特定の商品をPRするためのサイトです	商品のブランディングイメージをアップしたい（購入者からの信用をアップしたい）	ブランディングサイトの例（※3）
リクルートサイト	求人情報を掲載するサイトです。	求人者からの応募を増やしたい、自社が求める求人を多く集めたい	リクルートサイトの例（※4）
Webマガジン	何らかの情報を発信するメディアです	記事を閲覧する人に、広告を表示したい、メルマガ登録してもらいたい	Webマガジン（※5）
ECサイト	ショッピングカートに商品を入れて購入するようなショッピングサイトです。	販売単価アップ、販売点数アップ、リピート率アップ、流出顧客の防止などが目的になる	ECサイトの例（※6）
ポータルサイト	総合的な情報を掲載するプラットフォームです	最初に自サイトから検索を始めてほしい。	ポータルサイトの例
ポートフォリオ	自分の作品や実績を掲載します。	クライアントから指名をもらいたい、自分自身のブランディングもしたい	ポートフォリオの例

1つずつ具体例付きで紹介します。

コーポレートサイト

企業情報が載っているウェブサイトです。多くの企業が自社のコーポレートサイトを持っています。

株式会社ジャストシステム

株式会社ジャストシステム（※7）

自社ブランドの商品をまとめて掲載しています。教育に対する幅の広い事業展開を知ることができます。

ただし、商品価格や詳細については割愛しており、明らかに販売を目的としたWebサイトではないことがわかります。

また、株主向けの情報や斎場情報なども充実しています。

企業としてのJustSystem社を知りたいと思うターゲットを明確に描いて、その人達の知りたい情報をコンパクトに載せている良質なサイトです。

Red Bull

Red Bull（※8）

社名と同名の飲料で有名なRed Bullですが、実は様々なジャンルに進出しています。このスクリーンショットにあるようにレースなどにも進出しています。

Red Bullを調べた人に、会社の奥深さ・幅広さを伝えることに成功しているWeb サイトです。

会社の理念などもスタイリッシュに掲載しており、徹頭徹尾クールで情熱的な印象を受けます。

ブランディングサイト

特定の商品や事業、企画などをPRするためのサイトです。

docomo sky

docomo sky（※9）

ドコモがドローンなどを利用して展開する事業に特化したブランディングサイト。

ドコモはもちろん通信系の企業として有名ですが、そこから派生して鉄塔や農地などの監視を行うドローン事業を展開していることが伝わります。

商品のPRではありますが、いわゆる売る目的ではなく、ブランディングイメージを高めたいという目的で作られています。機能性よりも好印象やインパクトを与えたいデザインになっています。

パーソナルワークスタイル

パーソナルワークスタイル（※10）

特定の個人の働き方に焦点を当てて表彰する企画サイトです。企画が如何に魅力的なのか、面白いのか、受賞者を紹介しつつイベント自体の魅力を高める作り込みになっています。

リクルートサイト

主に自社求人を掲載するサイトです。新卒向けも転職者向けも1つのリクルートサイトにまとめているところや、新卒用の特設サイトを作るところなど、採用戦略によって様々な作り込みがされます。

リクルートサイトは商品を売るのではなく、求職者が応募したくなることも目的に作られているためか、ユニークなサイトが多いのが特徴です。

原田産業株式会社

原田産業株式会社（※11）

キャッチコピーと写真のインパクトが強烈です。これだけで「もっと知りたい」と思う人達は、この企業が求める人材である可能性が高いと言えます。

逆に「奇をてらっているのは嫌だな」と感じる人は応募もしないので、採用側としては非ターゲット人材に時間を使わずに済みます。

採用側にも求職側にも、ターゲットを絞ったデザインを作ることはメリットのあることを思い出させてくれる良質なサイトです。

groxi株式会社

groxi株式会社（※12）

同じく奇抜なトップページですが、こちらの方が募集年齢が若い印象を受けますね。

また、キャッチコピーが英語であったり日本語が小さかったりする点から、キャッチコピーよりも漫画風の画像でインパクトを狙っていることも分かります。

「かぶるな、かぶけ」のサイトと同じく個性的な人材の募集ですが、両者は全く違う個性派に訴えかける作りになっていると思いませんか？

デザインの力を実感できる良質な2サイトです。

Webマガジンサイト

特定のターゲットユーザーに特定の興味にフォーカスした内容を継続的に発信していくメディアサイトです。当サイトもWebマガジンです。未経験からWebデザイナーを目指す人がたまに読むと役立つ内容を配信しています。例えばWebデザイナーの働き方や年収の推移、将来性などなど。

おかやま

おかやま（※13）

岡山県に関する情報発信をしているメディアサイト。お店の紹介やスポットの紹介など、様々な角度から岡山県の良さを発信しています。

記事の文章は短めですが、写真の品質にこだわっており全体的に洗練された印象を受けます。

PLAN-B

PLAN-B（※14）

Webマーケティング全般の記事を発信しているメディアサイト。デザイン性にも優れており、また記事のクオリティも高いものが目立ちます。

メディアサイトならではタイル状に配置された記事デザインも見やすく、1つの記事からまた別の記事にしっかりリンクしているため、1人のユーザーがついつい何ページも読んでしまう構造になっています。

ECサイト

Amazonや楽天などショッピングサイトのことをECサイトと呼びます。ショッピングサイトやショップサイトという呼び方でもOKです。一度は使った事があると思います。

BEAMS

BEAMS（※15）

アパレルブランドのECサイトです。商品だけではなくメディアサイトとしての顔も持っており、様々な企画記事を発信しています。

このブランドに愛着のあるユーザーには嬉しいコンテンツがぎっしりあり、企画で紹介された商品をそのままオンラインで購入できる仕組みも秀逸です。

無印良品

無印良品（※16）

こちらもメディアサイトとしての顔も持ち合わせています。独自の企画記事やセール情報などを発信しつつ、オンライン決済の仕組みを取り入れたショッピングカートが実装されています。

無印良品といえばシンプルな商品が印象的ですが、Webサイトもブランドイメージを損なわず、全体的にシンプルで洗練された設計になっています。色味も少なく、枠線なども最低限になっており、これぞ無印良品のWebサイトという仕上げ理です。

ポータルサイト

様々な情報の起点となるような、情報をまとめているサイトのことです。必ずしもあらゆるジャンルを取り扱っている必要はなく、限定的・専門的なポータルサイトや、社内情報に特化した社内ポータルサイトなどもあります。

Yahoo Japan

Yahoo Japan（※17）

ポータルサイトといえばYahooが有名です。天気やショッピングやトラベルなど、あらゆるジャンルの情報を取り扱っている大型ポータルサイトです。

Schoo

Schoo（※18）

動画学習に特化したポータルサイトのSchooです。動画で学べそうな様々なジャンルの動画を公開しています。外部から講師を招き、動画授業という形で配信し、授業中はライブであれば質問などもできる優れたサイトです。独自の仕組みで配信を実装しています。

オンライン動画学習サイトとしても歴史がある方なので、1ユーザーとして、あるいはデザインを学ぶ1学習者として、使ってみてると勉強になります。

ポートフォリオ

自分の作品や実績をまとめたWebサイトです。ある程度の作品数になると作るWebデザイナーも多いです。作品数が少ないとスカスカになってしまうので、最初は無理やりポートフォリオを作る必要はありませんし、デザイナーなら絶対に持つべきとも限りません。

今回はあくまで優れたデザインのサンプルとして掲載しておきます。

minico

minico（※19）

紙雑貨店のポートフォリオサイト。Webサイト自体が紙のようなテクスチャで作られており、コンセプトの一貫性を感じます。

動きのあるサイトづくりをしており、遊び心も感じさせます。見ていてワクワクするサイトです。

kie nakazawa

kie nakazawa（※20）

手作り感に満ちたポートフォリオサイトです。ご自身で制作された作品で彩られており、自信とこだわりを感じさせます。

Webサイトの3つの運用

Webサイトの運用には様々な業務が関わってきますが、Webデザイナーとして知っておくべき最低限の運用について学んでおきます。

WebデザイナーというとWebサイトを作る印象が大きいですが、Webサイトは作って終わりではなく、様々な改修作業が行われるものです。そのため、運用についてもだいたいの概略を押さえておくことが重要です。

ほとんどのWebサイトで次の3種類の運用が必要になります。理解のために、それぞれ「アクセス」「プロセス」「サクセス」というキャッチーな表現を用意しておきました。

• Webサイトにアクセスする人の数を増やす（アクセス）
• Webサイトの使いやすさを改善する（プロセス）
• Webサイトが成果を上げる割合を増やす（サクセス）

1つずつ見ていきます。

アクセス

如何にWebサイトを訪問する人数を増やすかを追求するのがアクセス段階の作業です。PV（ページビュー、ピーブイ）を増やすとも言います。

Webサイトに訪れる人の数を増やす代表的な方法は次のとおりです。

• 検索エンジンの結果で、より上位に表示されるようにする
• 検索エンジン、SNS、他のWebサイトなどに広告を掲載する
• 他のWebサイトからリンクしてもらう
• ニュースサイトやSNSなどでバズる（話題になること）
• チラシやパンフなどにWebサイトのURLを載せる
• メールマガジンなどを発行して、Webサイトに定期的に来てもらう

こういった施策が代表的です。

アクセス増加施策に伴うWebデザイナーの仕事

Webデザイナーとしてこれらの施策に関わる仕事例を、挙げておきます。（ほんの一部です）

検索エンジンに上位表示されるようにサイトを整える

内部の作り込みを、検索エンジンが好む方法に変えることで検索エンジンに上位表示されやすくする施策は人気です。SEO（エスイーオー）というジャンルの業務の1つで「SEOの内部対策」などと呼ばれています。

バナー制作

SNSなどに広告を掲載する際に、画像を広告に載せることができます。これをバナー画像などと呼びます。バナーはできるだけ魅力的に作りたいので、制作能力のないオーナーは外注することが一般的です。

リンクや他サイトの紹介ページの作成

他サイトにリンクを張ってもらう代わりに、こちらからも相手にリンクを張る相互リンクという文化があります。最近では減ってきました。

このリンクを張る作業がWebデザイナーに依頼されるケースもあります。

プロセス

ユーザー目線に立って、如何に使いやすいサイトを作るかを追求するのがプロセス段階における作業です。ユーザービリティを高める、UX（ユーザーエクスペリエンス）を改善するなどとも言います。

代表的な作業は次のとおりです。

• サイト内のリンクや文字が近すぎて、モバイルで見たときにタップしづらいところを直す
• 文字が小さすぎる・大きすぎる、文字の色が薄すぎるところを直す
• ボタンやリンクの場所が分かりづらいところを直す
• ページとページのリンクを、張るべきなのに張ってないところを直す
• 問い合わせフォームの入力欄が使いづらい点を直す
• 画像による説明が必要なところに、適切な画像を配置する
• 「合わせて読みたい記事はこちら」など、ユーザーにオファーすべきところでオファーするよう直す

非常に種類が多いです。サイトによって様々な作業が考えられます。ここで挙げたのは、ほんの一部です。

これら作業の多くは、そのままWebデザイナーの仕事にもなります。

サクセス

Webサイトにアクセスした人のうち、できるだけ多くの人にオーナーが目的とする行動をとってもらいます。オーナーが目的とする行動とは、例えば購買であったり会員登録であったりメルマガ登録だったりします。

ユーザーが、目的とする行動を取ることをコンバージョンと呼びます。CVR（コンバージョンレート、コンバージョン率）とも呼びます。

コンバージョン率を高める施策は次のようなものがあります。

• より商品の魅力が伝わる写真やテキストに差し替える
• アクセスの多いページから、商品紹介ページにリンクを張る（プロセス段階の作業と同じですが、作業理由はコンバージョン率を高めるためです）
• 入力フォームの内容を少なくする
• 無料登録や試供品などの請求フォーム送信後に表示されるページで、商品への期待値を高める内容を用意する。（成約率を高めるため）
• 商品の魅力を余すところなく伝えるページを別途作る

ランディングページの制作

オーナーが、検索エンジンやSNSに広告を出して、Webサイトへのアクセスを増やすことを検討したとします。

その際に、せっかくお金を払って増やしたアクセスを取り逃がさないように、商品の情報を一箇所にまとめてプレゼンテーションするようなページを用意する手法が一般化しています。このページを、ランディングページなどと呼びます。省略してランペとも言います。

キャッチコピーやメインバナーの差し替え作業

こういった仕事もよくWebデザイナーに発注されます。既存のメインバナーやキャッチコピーではコンバージョン率があまり上がらなかったという理由であったり、季節によってサイトの装いを変えたいという理由であったり、新商品が発売したため目立たせたいという理由であったり、様々な理由で変わります。

メインバナーやキャッチコピーはダイレクトにコンバージョンに繋がることが多い改修になります。

まとめ

Webデザイン概略について解説しました。

Webデザイナーの働き方から始まり、Webデザインで学ぶスキルが如何に可能性に満ちたスキル群なのかをお伝えしました。

次に、Webサイトには様々な種類があるということを事例をもとに紹介しました。また、ギャラリーサイトと呼ばれるサイト集へのリンク（※21）も紹介していますので、自分の琴線に響くサイトを探してみて将来的な目標にしても良いでしょう。

最後に、ユーザーとオーナーという2つの立場が存在することと、3つの運用があるということを解説しました。そして、各運用フェーズに対してWebデザイナーがどのように携わるのかも紹介しました。

ここで学んだことは実務ですぐに役立つことではないかもしれません。しかし、スキルを身に着けた後に改めて今後の進路を考えるときには、きっと役に立つ情報です。受講修了後などに振り返ってみてください。

次からはより実践的な内容として、デザインルールなどを学んでいきます。