コーディング・画像編集だけじゃない!Webデザイナーの仕事内容って?

公開日: : Webデザイン心得

マンガでわかるWebデザイン 4

Webページ制作って具体的にどういうことをするの?

この記事を読んでくださっている方の中には、「Webページを作る仕事って、ちょっと興味あるんだよね!」という方が多いかもしれません。
もしくは、「突然、今年からWeb担当を任されてしまった!」という状況の方もいらっしゃるかもしれませんね。

Webページを作るには、

  • どういう内容を
  • どういう過程で

行うのかを、現役Webデザイナーが解説していきたいと思います。

Webページ制作過程の全体図はこれだ!

  1. マーケティング・企画
  2. デザイン
  3. コーディング
  4. テスト
  5. 運用・PDCA
HTML

Webデザイナーというと、「画像編集とコーディングをする仕事」というイメージがあるかもしれないね。


HTML

うん。それじゃ間違いなの?


HTML

半分正解かな。マーケティングの根本の部分を理解した上で、戦略に沿った施策として実行するのが「画像編集やコーディング」という行動の部分なんだ。


HTML

そして、ページが完成した後はどうする?


HTML

ん?お仕事完了じゃない?
ミッションコンプリートォォォ!!!


HTML

わかばちゃん?PDCAっていう言葉は知ってるかな?


HTML

(な、なんかHTMLちゃんの笑顔がコワイ)


マーケティング・企画

実はここが一番重要です!

「どんな市場に、どんなニーズがありそうなのか?」
「そのニーズを持っている人はどんな人?その人々に私たちは何を提供するのか?」
をひたすら考え抜いて戦略を練ります。

HTML

そもそもマーケティングって何なの?


HTML

いい質問だね!マーケティングとは、「自然にものが売れる仕組みを作る」ことだよ。「マーケティングとは○○である」っていう言葉はいろんな人が諸説唱えているんだけど、セリングって言う言葉と対比させるなら、僕はこの「自然にものが売れる仕組みを作る」っていう言葉がしっくり来ているよ。


HTML

せ、せりんぐ?


HTML

セリングっていうのは簡単に言うと「押し売り」ってことだよ。この記事を書いている人がマーケティングを勉強し始めたとき、愛読していたのがこれ!


HTML

マーケティングの基本的なフレームワークが網羅されているよ。しかも図解で分かりやすい。感涙!


HTML

作るページの戦略を理解しているのと理解していないのとでは、効果が全然変わってくるからね。自社のページを作るにしろ、他社のページを作るにしろ、戦略を深く理解しておくことは必須なんだ!


デザイン

まずは表現したい情報を優先順位順に整理します。

そして、ラフ案を作り、優先順位が高いものを中心に配置していきます。

ラフ案が固まったら、Photoshopなどの画像編集ソフトで、ページの仕上がりイメージをカラーで作ってみます。

HTML

先ほど立てた戦略を常に意識しながらデザインしていくよ。例えば、値段よりも品質を重視するお客様を狙う高級化粧品の公式販売ページでは、価格は控えめに書いてあるべきだよね。でも、「今月はこの商品の売上を50万円達成させなきゃ!」と、目標だけを見てしまって戦略の意図を完全に忘れてしまうとどうなってしまうか…。赤と黄色の大きい文字で「今なら9980円!」とか書いちゃうわけ。


HTML

それってもともと狙おうとしていたお客様を逃がしてるよね。結局誰にも刺さらないページになっちゃうんじゃない?


HTML

その通り!わかばちゃん、いいこと言う!


コーディング

実際にHTMLやCSS、PHPなどを使ってWebページを作っていく段階です。

まさに、「Webデザイナー」という職種でイメージする作業がこの段階になります。

テスト

実際にそのシステムが動くかどうかを、お客様に見せる状態にする前に確認します。

運用・PDCA

実際にページを公開したら、効果を見ながら運用していきます。

PDCAサイクルとは

よりよい結果を出すために繰り返し行う行動の仕方のことです。

Plan(企画)
Do(実行)
Check(チェック)
Act(改善)
この頭文字をとって、「PDCAサイクル」と呼ばれています。

大事なのは、Actまで行ったらまたPlanに戻ること。
「なぜお客様が来てくれないんだろう?」「なぜこの商品は見てもらえないんだろう?」何度も何度も仮説を立て、実行、検証することで、より効果の高いWebページが出来上がるのです。

HTML

一口にWebデザイナーと言っても、ひとつのWebページを作成・運用するのにはこんなに考えるべきことがあるんだね!マーケティングやPDCAについては今後の記事でもっと詳しく解説していくよ!お楽しみに!


記事作成:湊川 あい
マンガ・イラスト:湊川 あい


The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

マンガでわかるWebデザイン1

Webデザイン独学でも挫折しない3つのポイント

「初めてのWebデザイン」の巻 挫折してしまうのは勿体ない! 「よし、こ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

C97RWxjVoAAdVdm
「マンガじゃなくてもGitぐらいわかるでしょ」と言われたことがあります

わかばちゃんと学ぶGit使い方入門 Web連載から始まった「マンガで

dakkou
マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかる

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

→もっと見る

PAGE TOP