ピッピとポッポのweb制作講座

登場人物、ピッピ、ポッポ、佐藤くん、汐ちゃん

佐藤登場

汐登場

ピッピとポッポ登場

ピッピ通常
ピッピ

では、まず最初にwebサイト、少し前で言うところのホームページ制作の流れを教えよう。

佐藤腕組み
佐藤

そんなもの、教わらなくてもわかってるよ。お客様から依頼されたwebサイトを作ればいいだけだろ。

ピッピ怒り
ピッピ

間違っておる、何もわかってはいない!!

佐藤怒り
佐藤

な、なんだと!

汐困惑
汐(シオ)

でも、私も佐藤先輩と同じように、お客様が作って欲しいwebサイトを作るんだと思います。

ピッピ通常
ピッピ

それは、本当の意味でwebサイトを作ってはいない。
言われたままwebサイトを作るのは誰でもできる、我々はプロなのだ。
プロがwebサイトを作るということは、「お客様の困ったを解決する」ことであるべきだ。

佐藤困惑
佐藤

!!!

汐困惑
汐(シオ)

!!!

ピッピスマイル
ピッピ

まずはそれを、しっかりと覚えておくことだ。
では、改めてwebサイト制作の流れを教えよう。

1 お客様が本当に作りたいものを探し出す

ピッピ通常
ピッピ

まずは、お客様にとって本当に必要なものは何か、お客様に聞き取りしたり、現状の問題点を分析などをする。
佐藤くん、君も他の先輩と一緒にお客様と打ち合わせに参加したことはあるのではないかね?

佐藤困惑
佐藤

た、たしかに。
俺はとにかく話している内容を聞き漏らさないように必死で議事録を取ってたけど、先輩は色々お客様に質問していた。

ピッピスマイル
ピッピ

そのとおり、そうして分かったことをまとめてお客様にふさわしい「webサイト」の提案をする。
これを「企画立案」「要件定義」などともいうな。
この時のディレクターの知識量とコンサルレベルによってWEBサイトの品質は雲泥の差が生まれる。

佐藤通常
佐藤

よく聞いてた言葉だ

ピッピ通常
ピッピ

さらにこの時に、作るwebサイトの内容にあわせて「お見積もり交渉」もする。
しっかりと根拠を説明して、お互いに信頼関係を築くのだ。

ポッポのWEBサイト制作豆知識

ポッポ通常
ポッポ

webサイトやホームページを制作したり改善したい時の悩みは大きく3つにわけることができるっぽ。
そして、それぞれ次のような対策をすることが多いっぽ。

①集客力や周知力を高めたい

【改善策】サイトのSEO強化,ブログなどコンテンツマーケティングの着手、SNS等の利用

②お問い合わせや予約など、ユーザーのアクションを増やしたい

【改善策】ページ内のリンクを増やす、押したくなるような導線にする、ページ構成の見直し

③コストを削減して、もっと効率化したい

【改善策】チャットボット、予約機能、解析ツールなどなど、自動化のツールの導入

ポッポ照れ
ポッポ

困ったことをちゃんと見極めて正しくwebサイト、ホームページを作るっぽ。

2 実際に作るものを設計する

佐藤怒り
佐藤

いや、ちょっと待てよ。
さっき、お客様に相応しい「webサイト」を提案してるじゃないか。
なんで、また設計するんだ?

ピッピ通常
ピッピ

最初にたてた企画と要件は、あくまでwebサイトの内容である。
そのため、その内容に合わせて実際に作るwebサイトの設計を行うのだ。

汐通常
汐(シオ)

あ、ワイヤーフレームとかサイトマップとかってやつですね。

ピッピスマイル
ピッピ

その通り。
しかし、この設計はデザインのためだけではない。
SEOはもちろん、システムやUI(ユーザーインターフェイス)UX(ユーザーエクスペリエンス)など目には見えない部分も設計する。

汐スマイル
汐(シオ)

聞いたことある、UIとかUXとか聞いたことある。

ピッピ通常
ピッピ

また、制作チームの設計や、そのスケジュール、お客様とのお打ち合わせのタイミングなど、様々なことを設計していく。

佐藤納得
佐藤

先輩もスケジュールの設計や打ち合わせのセッティングが大変そうだった。

ピッピスマイル
ピッピ

このように、たくさんの設計がある。
ひとまず「各種設計」「進行管理」としておこう。

3 ビジュアルデザインをする

汐喜ぶ
汐(シオ)

私の出番ですね!!!!

ピッピ焦る
ピッピ

う、うむ。
各種設計でできた設計図をもとにデザイナーさんにビジュアルデザインをしてもらう。
設計図の意図を汲み取り、かつビジュアルとして最適なデザインを行ってもらう。

佐藤考え込む
佐藤

先輩に「これではデザイナーに意図が通じない」って何度もワイヤーフレーム書き直させられたなぁ、、、。

ピッピ通常
ピッピ

webサイトのTOPページのデザインは特に全体のイメージが決定されるページでもある。
そのため、最初に制作し、お客様と打ち合わせをして合意を得る必要があるぞ。

汐通常
汐(シオ)

デザイナーの先輩もTOPページは先にって言ってましたね。

ピッピ通常
ピッピ

この合意を得ないまま制作を進めてしまうと、お客様のイメージと違うwebサイトになってしまう。
きちんとお客様と一緒に作ることを意識しよう。

4 設計やデザインを元にwebサイトを組み上げる

ピッピ通常
ピッピ

これまで作ってきた設計やデザインを元に、webサイトを組み上げる。

汐スマイル
汐(シオ)

ここからは、私はコーダーとしてお手伝いすることになりますね。

ピッピスマイル
ピッピ

うむ。
汐くんの言った通り、コーダーがwebサイト本体の組み上げをしたり、プログラマーが申し込みフォームなどのシステムを作ったりしていく。
実際にwebに形として組み上がっていく。

佐藤通常
佐藤

ディレクターはあんまり仕事ないっすよね。

ピッピ怒り
ピッピ

ばかもの!!
この最後の組み上げの段階で万が一がないように、定期的にチェックをするのもディレクターの仕事だ。
そのためのテストとその修正を行う期間を設定しなければならぬのだ。
そうして間違いがないwebサイトをお客様にお届けするまで、気を抜くでない!!

佐藤反省
佐藤

ご、ごめんなさい。

ピッピ通常
ピッピ

無事に想定していた通りのwebサイトであることを、お客様と確認して初めて完成なのだ。 また、WEBサイトは公開したから終わりではない、サイトを公開してからが本当のスタートだ!

次回へ続く?