Webデザイナーの仕事内容、制作事例

 

柳井 謙一

こんにちは!

柳井です。

 

WEBデザイナーについて、いつくかの記事で概要的なことを解説してきましたが、「で、具体的にどんな仕事内容なの?」と思う方もいると思います。

 

今回はWebデザイナーの仕事内容について、具体的な部分を解説していきます。

私の制作事例も掲載しているので、参考にしてみて下さい。


Webデザイナーの仕事内容

html CSS

Webデザイナーの仕事内容は、大きく下記の4つに分類することができます。

1. Webデザインの方向性を決める(ディレクション)

2. 構成とレイアウトを決める

3. バナーなど、デザインの作りこみ

4. コーディング(html, CSS, JavaScriptなど)

大手企業やデザイン事務所であれば、1と4の業務をデザインとは異なる部署が担当することもありますが、中小企業・個人レベルだとデザイナーが1~4をすべて担当します。

 

それでは各業務を、順番に解説していきます。

1. Webデザインの方向性を決める(ディレクション)

コンセプト

一番最初にやることは、Webデザインの全体の方向性を決めることです。

  • デザインでどんな目的を達成するのか?
  • 誰に向けたデザインなのか?
  • どんなコンセプトでデザインするのか?
  • どんなテイストにするか?
  • サイトのテーマカラーを何色にするのか?

方向性といっても思い付きで決めるのではなく、事前にクライアントの会社や商品をリサーチして、収集した情報に基づいて決めていきます。

 

柳井 謙一

私の場合、制作をする前に必ずクライアントの会社に足を運び、1~2時間位は雑談を兼ねてヒアリング調査を行います。

しっかり事前調査をしておけば、サイトデザインのブレを限りなく抑えることが可能です

2. 構成とレイアウトを決める

サイトの方向性が決まったら、Webサイト全体の構成とレイアウトを固めていきます。

進め方として、まずは簡単な線画で構成案とレイアウトを作り、クライアントの確認・修正をもらいながら徐々に作りこんでいく感じです。

 

柳井 謙一

ここでがっつり作りこんでしまうと後の修正が大変なので、最初は線画レベルの超簡単なデザインで確認していくのがポイントです。

3. バナーなど、デザインの作りこみ

 バナーデザイン-サンプル

 

構成とレイアウトが決まれば、IllustratorやPhotoshop、Fireworksといったデザインソフトを使い、細かいデザインパーツを作りこんでいきます。

バナーだけであれば、初心者でも簡単に作れるツールもあります。

≫超簡単!自分で「凄いバナー」が作れる!【バナープラス】

 

柳井 謙一

1つ1つのバナーに対して、クライアントの要望を聞いているときりがなくなります。

最初の1・2案だけ見せて、後はテンプレート通りに流し込んでいくと効率よく作成できます。

 

4. コーディング(html, CSS, JavaScriptなど)

コーディング

コーディングとはWebサイトを構成する言語(html、css、JavaScript、PHP)を使用して、サイトの実装作業を行うことで、本来はコーダーと呼ばれる人達の仕事です。

ただし、最近ではコーダーとデザイナーの境目が薄くなり、デザイナーにもコーディングが求められることが多くなりました。

だからといって色んな言語を習得するとなるとかなりの時間と労力が必要になるので、まずは基本的なhtmlとCSSだけ抑えておきましょう。

 

柳井 謙一

コーディングといっても、そこまで難しいことを覚えなくても大丈夫!

私の場合はhtmlとCSSは普通に使え、PHPに至っては少し齧っている程度です。

 

まとめ

  • Webデザインの方向性を決める
    ➡ 事前にクライアントの会社や商品をリサーチして、収集した情報に基づいて決めていく
  • 構成とレイアウトを決める
    ➡ 線画で構成案とレイアウトを作り、クライアントの確認・修正をもらいながら徐々に作りこんでいく
  • バナーなど、デザイン作りこみ
    ➡ デザインソフトで、細かいデザインパーツを作成
  • コーディング(html, CSS, JavaScriptなどで)
    デザイナーといえど、htmlとCSSの基礎は習得しておく

 

Webデザイン参考事例

最後に、私が実際に制作した、サイトの一部を参考事例として掲載しておきます。

一般社団法人 南三陸町観光協会(観光情報サイト)

 

南三陸町観光協会ウェブサイト

2012年の案件で、サイトリニューアルを担当させていただきました。

ツアープログラムに関しては毎年かなりの本数を受注して言うようで、大きな成功事例の一つです。

Webデザイナーとして1年経たない内に制作したので、今見ると改善点も沢山ありますが(;^ω^)

※2017年現在、リニューアルを予定しております

 

URL
https://www.m-kankou.jp/
利用テンプレート
テンプレート未使用、ゼロベースからPHPでサイトを構築。
目 的
①電話の問い合わせ件数を減らす
②ツアープログラムの成約
③観光集客
成 果
  • 月間PV(ページビュー)数 ➡ 約200,000回~
  • 電話問い合わせ ➡ 約70%減
  • ツアープログラム年間 ➡ 500本以上受注
  • 観光集客 ➡ 毎年増加傾向
今後の改善案
2017年の現在、2回目のリニューアルを担当させていただき、サイトの情報整理とレスポンシブルデザインに対応したサイト作りを進めている途中です。

南三陸さんさん商店街(観光情報サイト)

さんさん商店街ウェブサイト

2014年に1回、そして2017年最近に1回と、2度にわたるサイトリニューアルを担当させていただきました。

観光集客を目的にサイトを作り込み・更新を繰り返してきたことで、毎年集客は増加傾向です。

オープン時から見守ってた復興商店街ですが、東北を代表する商店街の1つと呼べるまでになってきました。

 

URL
https://www.sansan-minamisanriku.com/
利用テンプレート
Digipressテンプレート『Attractive
目 的
①観光集客
②電話の問い合わせ件数を減らす
③語り部プログラムの受注
④サイトアフィリエイト
※アフィリエイトは2017年5月から開始
成 果
  • 月間PV(ページビュー)数 ➡ 180,000回~
  • 観光集客 ➡ 増加傾向
  • 電話問い合わせ ➡ 約50%減
  • 語り部プログラム受注 ➡ 年間50~60本
  • アフィリエイト報酬 ➡ 月額2万円~(見込み)

神割崎キャンプ場(観光情報サイト)

神割崎キャンプ場

2015年にサイト構築を担当させていただいた案件。

南三陸町観光協会のサイトと連動していたこともあり、開設当初からキャンプ場の予約が好調で初年度から黒字決算を実現したサイトです。

 

URL
http://www.m-kankou.jp/facility/kamiwarizaki/
利用テンプレート
Digipressテンプレート『Attractive
目 的
①キャンプ場の予約受注
②電話の問い合わせ件数を減らす
③観光集客
成 果
  • 初年度から黒字決算 
  • 電話問い合わせ ➡ 約50%減

職人引越センター(コーポレートサイト)

職人引越センターウェブサイト

友人の引っ越し屋のウェブサイト構築を担当させていただきました。

開設1年目は、受注状況0という悲惨な状況でしたが、その後一念発起。

本格的に運営に力を入れたところGoogleで上位表示を獲得し、1年で年間2,000万円を受注するWebサイトに成長しました。

 

URL
https://www.shokuninmoving.com/
利用テンプレート
Digipressテンプレート『Attractive
目 的
引越しサービス、家具組み立てサービスの受注
成 果
  • ホームページ開設後、年収2,000万達成 
  • 見積もり1日平均3~5件、(繁忙期最大 18件)

南三陸モアイファミリー(コーポレート・物販サイト)

南三陸モアイファミリーウェブサイト

私自身が運営する物販ビジネスのウェブサイトで、物販用もですが南三陸町に展示中の本物のモアイ像をPRするために作ったサイトです。

モアイグッズをAmazonやYahooで販売しているので連動させております。

 

URL
https://www.moaifamily.com/
利用テンプレート
Digipressテンプレート『Attractive
目 的
①南三陸町のモアイ像をPR
②顧客リストの獲得
③通販サイトとの連動
成 果
  • 顧客リスト獲得 ➡ 月間約30程獲得
  • 通販サイトへの流客増
課 題
通販サイトとの連動強化するため、今後はSEO記事を増やしていく予定です。

泉ヶ岳温泉 やまぼうし(コーポレート・宿泊サイト)

仙台泉ヶ岳温泉-やまぼうしウェブサイト

2016の案件で、温泉宿のウェブサイトリニューアルを担当させていただきました。

 

URL
https://www.yamabousi.com/
利用テンプレート
TCDテンプレート『LUXE
目 的
①サイトの運営費を削減
②社内のスタッフで更新・運営できるように
③旅行サイトでなく、自社サイトからの直予約を増やす
成 果
  • サイトの運営費 ➡ 0円に削減(外注との契約打ち切り)
  • 社内スタッフが自由に気軽に運営・更新中
課 題
自社サイトの直予約については、まだまだこれから。
はっきりとした成果が得られるよう、今後は仙台の観光、宿泊に関するビックキーワードで上位表示を狙っていく予定。

南三陸deお買い物(ネットショップ)

南三陸deお買い物ネットショップ

2014年の案件で、通販サイトのウェブサイトリニューアル(デザインのみ)を担当させていただきました。

 

URL
http://www.odette-shop.com/
利用ECカート
MakeShop
目 的
①サイト運営の効率化
②売上増
成 果
  • サイト運営の負担軽減
  • 約20%売り上げ増

 

 

以上、Webデザイナーの仕事内容と、制作事例についてでした!


ご拝読ありがとうございました。

コメントやご質問はお気軽に、ページ最下部にあるコメント欄よりお願いします。

柳井 謙一