サイト制作秘話シリーズ 第6弾
不定期でお届けしている Web制作ドキュメンタリー『サイト制作秘話』。
今回ご紹介するのは、大阪府大阪市中央区にある大阪タクシー協会様の制作事例です。
目次
1.プロジェクト紹介
2.コンセプト決定
3.WF作成
4.ドライバーさんインタビュー
5.デザイン、イラスト
6.コーディング
7.撮影
8.ディレクターのコメント
9.営業からのコメント
10.お客様からの声
11.採用ブランディングに繋がる採用サイト制作
プロジェクト紹介
お客様について
ご依頼のきっかけは、タクシー業界を盛り上げたいという協会様の想いからでした。高齢化が進むタクシー業界に「若者を増やしたい、女性ドライバーを増やしたい」、そして「時代に合った働き方が出来て、意外と稼げる」ということを認知させたいというご要望から企画がスタートしました。
案件について
サイトカテゴリ：採用サイト
サイト制作の目的：大阪のタクシー業界を盛り上げる、若手の運転手採用を目指す、「タクシー運転手ってええやん」という印象を与える、就活、転職の際の選択肢にタクシー運転手を入れてもらう
サイト制作のテーマ：熱く面白いサイトにしたい、タクシー業界の全体イメージを変える
ターゲット：老若男女問わずタクシーを利用する方、若手で就職・転職をご検討中の方
制作期間：6か月
コンセプト決定
コンセプトについて
各自治体で同様のサイトがすでにある中で、他サイトと差別化するために「大阪らしいオリジナリティ」を前面に出しました。全体的に「熱さ」「勢い」「愉快さ」「面白さ」などをコンセプトにしています。加えて、より「わくわく感」を出すためにイラストを提案させていただきました。弊社のデザインチームなら絶対に楽しいものが作れると思っていたからです。
WF作成
要件定義をして、まずはWF制作です。
※WF（ワイヤーフレーム）：実際の制作に入る前に、サイトの仕様や構成を決めるものになります。設計図のようなものです。
要件定義後に提出した、TOPページのWFです。ここからお客様のご要望や修正を加えて、FIX後デザイナーに渡します。
ドライバーさんインタビュー
よりタクシー業界のリアルな部分を知りたいと思い、協会に所属されているタクシー会社様に数社ご協力いただいて新人ドライバーの方々と座談会を実施しました。また、座談会に来られなかった方へは、アンケート形式で「どのような経緯でタクシー運転手になったか？」「志望動機は？」「実際本当に稼げているのか？」など、現場の声をお伺いしました。
制作を進める中で直接お話を聞ける機会は中々ないため、貴重な時間でした。
ご協力いただきましたタクシー会社の皆様、ありがとうございました。
デザイン、イラスト
次に作成したWFをもとにデザインを作成していきます。「この二人を絶対にアサインしたい！」と直談判して組んだデザイナーチーム。まず初めにイラストのラフを提案しました。
▼実際に提案したイラストラフ
「熱さ」や「勢い」、「大阪らしさ」を表現するため、何色をベースにするか何度もすり合わせさせていただきました。赤色だと車体が燃えているように見えてしまうかも･･･とのことで、青色を使用し、水で勢いを表現しました。また、大阪は水の都と呼ばれるため親和性が高いことから提案をし、最終的には青ベースになりました。イラストが確定したのち、デザインに進んでいきます。
▼完成したイラスト
イラストレーターからのコメント
ゴリゴリにイラストを使ったMVを！とのことでディレクターさんから直接ご指名をいただき、終始わくわくしながらイラストを作成していました。最初は神輿のようにタクシーの上に大阪のモチーフを載せるような案も出したのですが、そちらはどう見ても霊柩車にしか見えず却下になりました。
「アツい！」というコンセプトなのに波を使ったのは、大阪湾と北斎の富嶽三十六景をイメージしていたからだと思います。本棚の奥に眠っていた北斎画集を引っ張り出して絵の研究なんかもできて本当に楽しかったです。ちなみに完成後はいまいちわからないですが、線のタッチは若干筆っぽくしているんです。
何より面白かったのはそこからたこやきくんというキャラクターがどんどん生まれていったところだと思います。チームの発想力でどんどんアイデアが広がっていくさまに「クリエイティブしてんな～！」とテンションが上がりっぱなしでした。本当に皆さんの力無しでは成り立たなかった案件だったと思います！！
▼たこやきくんと仲間たち
デザイナーからのコメント
「おもしろいもの！」とざっくり作成したい印象を貰ってからのスタートでした。どういった面白さ？と思いながらもあれこれ相談していく内にいつの間にかキャラクターまでできていました。
「大阪っぽさって何かな。」「関西弁？」「いいねそれ！たこ焼きとかあっても良さそう」「キャラクターにしちゃいますか！」「動かしたい！」「TOPページに社員さんのコメント置きたいし、喋らせるのはどうでしょう」「ええやん～」誰が発言したとかは覚えてないですが、こんな感じで会議（雑談？）が進みました。全部私の独り言だった気もします。
イラストレーターの方もちょうど後ろの席にいたので、よく相談させてもらいました。モチーフ、サイズ、向きなど細かい部分もデザインと並行して相談できたのでスムーズに進められました。
デザインに関しては、個人的にあまり制作したことのない方向性だったので、はじめは詰まる部分が多く寝る前も「あれどうしたらいいんかな。」と枕を濡らしながら考えていました。道路標識を入れたりしていた段階もありました。色数が多くなって却下になりましたが。でも気付いたら完成していて、思い返せば楽しく制作していたんだろうなと思います。
ディレクターさんのクライアント様との関係性、イラストレーターのクオリティ、実装部隊の迅速さ、すべてプロフェッショナルでした！皆様のおかげで完成できました。今後もこういった一体感を持った案件ができたらなー。
コーディング
デザイン確定後に、HTMLにデザインを反映します。対応デバイスやブラウザに沿ったコーディングを⾏います。
コーダーからのコメント
面白い・楽しいサイトというコンセプトをコーディングでも表現するために、設計段階で”リキッドレイアウト”・”cssアニメーションに拘る”という2点を決めました。
リキッドレイアウトは、端末の画面幅にとらわれず同じデザインを表現するレイアウトです。
イラストが画面外からスライドしてくる表現を最大限生かすためにこの手法を選択しました。
ピクセルのような絶対値ではないので調整箇所が多く大変でしたが、コンセプト通りのサイトを作成できたと考えています。
またファーストビューでは、かなりcssアニメーションに拘りました。
複数の要素が異なる動きをするため、0.1秒単位でアニメーションとイージングを調整しています。
自分でも納得のいく出来なので是非何度も見ていただきたいです。
撮影
撮影はパートナーカメラマンの前田奈海様にご担当いただきました。寒空の中の撮影でしたが雰囲気も良く、サイトに使えないのがもったいないくらい、たくさんのいい写真を撮影することが出来ました。当日撮影にご協力いただきました東京日本交通株式会社の皆様、敷島交通株式会社の皆様、本当にありがとうございました。
プログラミング
タクシー会社を検索する部分を実装いたしました。どこのページからも検索ができるように、追従ボタンを全ページに設置しています。営業区域ごとに色分けをして、検索一覧ページではキーワード検索できるようにしています。
ディレクターのコメント
とても楽しいチームでした！大阪出身の面白くてアイデアマンのデザイナー、画力が素晴らしいイラストレーター、デザインをデザイン以上に表現していただいたコーダー、スピーディーに細かく実装いただいたプログラマー、ありがとうございました。毎度上がってくるデモページを見るのが楽しかったです。
大阪タクシー協会の皆様に多大なお力添えを賜りましたこと、心より感謝しております。制作キックオフから制作が進むにつれ、協会の皆様のテンションがどんどん上がって熱くなっていく感じが伝わってきてとても嬉しかったです。
サイトは、メインビジュアルのイラスト、動き、関西弁、音声機能（なんと喋ります！）、撮影、検索のしやすさ、全てにこだわりました！是非たくさんの方にご覧いただきたいです！
ありがとうございました。
お気に入りのページは未経験の方へです。LINEっぽいデザインにしました。TOPページとは異なる、スタンプっぽいかわいいタッチのイラストを描いてくださってます。
営業からのコメント
「タクシー運転手が今の時代にとてもフィットした仕事であるということをもっと知ってもらいたい」というクライアント様のお悩みをきき、採用推進サイトを企画しました。
採用というと業務内容や企業情報など堅い情報が多く似たものになりやすいので、他府県の類似サイトに負けない”大阪らしさ”を出すことで差別化していこうという発想からぐっと方向性が定まってきたように思います。
熱くて、たのしくて、愛らしい。
弊社制作チームと大阪タクシー協会様の渾身のサイトとなりました！
ぜひ音声アリでたくさんの方にご覧いただきたいです。
そして、今後も遊びごごろあふれる企画を一緒に作っていく予定ですので
そちらもぜひご期待ください！
お客様からの声
この度は、協会公式サイトに引き続き人材確保サイトの制作にご協力いただき、誠にありがとうございました。
ブリッジコーポレーション様との打ち合わせを何度も重ね、一緒に素晴らしいコンテンツを作り上げることができました。
特に上部の動くイラストは、サイト全体にまとまりを与え、美しい仕上がりとなりました。
また、今回新たに作成されたキャラクターは、タクシーと大阪のイメージを見事に表現しており、大変嬉しく思っています。
現在、このキャラクターの名前募集キャンペーンを実施中です。今後も様々な場面でタクシー業界を盛り上げてくれることを期待しています。
制作に携わっていただいた皆様に心より感謝申し上げます。
採用ブランディングに繋がる採用サイト制作
以上、大阪タクシー協会様の案件ストーリーをお届けいたしました。弊社ではコンセプト設計、クリエイティブ制作まで社内で一貫してブレないものづくりが可能です。採用サイトづくりで迷っている方は、ぜひ一度お問い合わせください。この記事が、Webサイト制作の不安・迷いを払拭するきっかけになれば幸いです。
それでは、また！
【7/31まで】現在、たこやきくん達の名前募集キャンペーンを行っています！
かわいいたこやきくん達をもっと広めたい！との想いで名前募集キャンペーンサイトも制作しちゃいました！
サイトのフォームよりお名前と必要事項を記入し送信いただくことで応募完了となります。
たくさんのご応募をお待ちしております。
また、ＷチャンスとしてXにてリポストキャンペーンも実施中です。
キャンペーンツイートをリポストしていただくだけで応募完了となります。
当選者には、共通乗車券1000円分を50名様にプレゼント！🎁
簡単に応募できるので、ぜひご参加ください！
