見出し画像

児童向け学習塾サイトの制作

個人的なオシゴトの話です。
既に4月納品完了し、5月に決済いただいているので、どういったフローで制作を進めていったかなど、書き留めておきたいと思います。

まずは先方と条件のヒアリング

依頼を頂いた時点で、予算やスケジュール感、作業フロー等すり合わせをしていきます。条件が固まったら、作業見積もり書を作成しましょう。
WEB制作の見積書は作業範囲によって変わると思いますが、大まかに以下の要件に絞られます。

・ページデザイン費
・コーディング費
・運用費@月(公開後、運用まで請け負う場合)

今回はシンプルなサイトのLPデザイン・コーディング作業だけでしたので、提出した見積りもシンプルなものになりました。
これがもっと大きなプロジェクトの場合などは、それぞれの費用項目を以下のように細分化する必要があるかも知れません。

・デザイン費
 └トップページ
 └下層ページ
 └アイコン
 └メインビジュアル
 └WEBパーツ(ボタン等)
 └ロゴ
 └素材購入費    などなど。。

ここで気を付けなければいけないのが、予め請け負う作業範囲はどこからどこまでか、先方と共有しておくこと!
これは見積りに限った話ではないですが、制作途中で請けたはずのない依頼をされたりなど、クライアントと認識齟齬があると大きなトラブルになり兼ねません。これを回避するためにも、作業範囲内容は明確に伝えておくことが大事です。エビデンスとして内容を見積書の備考に明記しておいても良いでしょう。これをしておけば、後々工数が増えて採算が合わなくなって来た…なんて悩みからも解放されるはず。
見積書の作成は、Wordなどオフィスツールのテンプレートを使っても良いですが、私は見積書~請求書まで無料で作成・管理できるサービス、Misocaを使いました。(無料版は作成できる請求書が月5通までです)

デザイン開始

制作にあたって、先方から提示のあったものはページ内容とWF、ベンチマークサイトのみでした。これらの資料を元に、制作を行っていきます。
今回は児童向け学習塾(所謂お受験と称されるような私立学校へ入学するための児童向け進学塾)とのことでしたので、以下のように主ターゲット層とライフスタイルを設定してみました。

・比較的富裕層の教育熱心な20代~30代の(母)親
└専業主婦。昼間はスマホでのメールやSNS等の利用が殆どだが、夜寝る前などは、ゆったりパソコンで通販ショッピングやネットサーフィンをする。

「児童向け」ではあるもののターゲットはあくまで「親」であり、「学習塾」なので、あまり幼稚な印象になり過ぎないもの、といったポイントに留意しつつ、次はサイトのカラーリング選定と大まかなレイアウトを行っていきました。
ページデザインに関しては頂いたベンチマークサイトを基にし、情報量が少なめであったことと、ご希望がレスポンシブサイトであったことから、大きめのアイコンを配したポップテイストなフラットデザインにまとめ、色はキッズ(正しく↑のヘッダビジュアルみたいな)カラーをベースに、初稿時にはビビッドとパステルで2パターンカンプを作成し、先方に確認を頂きました。個人的にはビビッドカラーの方がしっくり来ていたのですが、先方はパステルカラーをチョイスされましたw

コーディング

そのあと何度か修正対応をして、いよいよコーディングへ。時間が土日の2日ほどしか取れなかったため、今回はBootstrapを導入しました。
ロゴやタイトルにはWebfontを使用しています。
FIXしたデザインに沿ってコーディングを行い、PageScrollやSlider等のScript実装~テストまでの作業を、みっちり5.5時間ほど、自宅から自転車で行ける距離のコワーキングスペースで終わらせ、その後、帰宅して寝る前にSlider画像の当て込みや動作確認、ざっくりPCとモバイルデバイスでの閲覧チェックをして、2日め日曜にバグ対応と最終チェックをして納品に備えました。

完成

そんなこんなで完成したサイトがこちら。
https://seihoujuku.com/
実は納品時にmeta情報は仮で頂いていたので、OGPタグを仕込んでおきながら設定は先方にお任せしていました。…が、今確認する限り、そのままになっていますね。。あとSliderの動作がおかしくなってしまっている。。コード弄ったのかなぁ。ちょっとガッカリ。納品時は正常でしたよ!
http://www.zf.em-net.ne.jp/~latte/works/seihoujyuku/
先方でMVも変更したようで、かなり優しい雰囲気のサイトになりました。
初稿ボツになった下のビビッドパターンと比べて、どうでしょうか?

画像1

反省点

メニューからギャラリーに飛んだ際、Sliderの写真が画面内に入りきらず、見切れてしまう点は後悔が残りました。カンプ時点では、トリミングを念頭に置いていましたが、支給素材の画角が余りトリミングに向いていなかったので、そのまま組み込むことにしたんですよね。ここは何とか、もう少し気を利かせたい点でした。。
あと、一番大きな失態は納品を失敗したこと!先方は3月中に納品を希望されていたのですが、メール送信後、数日経過しても受領連絡が来ず。。おかしいな?と思い、メーラーを確認して送信エラーになっていたのを知ったのが4月過ぎてからでした。。普段、毎日メールチェックしないのが仇になりましたorz やっぱり大事なメールは、送信後に確認しなきゃですねー。
(特にペナルティなどはありませんでしたが。。)
もし個人的にお仕事の依頼を請ける機会があれば、また振り返りしたいと思います。今回初めてダブルワークをやってみて、改めてハードさを痛感したので、時間に余裕の持てる現場に配属されないと無理そうですがw

宜しければ………