結論：KNAPさんのおかげで素晴らしいウェブデザインが完成しました。2022年4月に2周年を迎えたaso-biz（アソビズ）の節目に、デザイン会社のKNAPさんに相談し、ブランドをリデザインしていただきました。

本記事は、制作フローをKNAPさんとアソビズの取り組み、制作フローをご紹介いたします。ウェブリニューアルに関するお知らせは以下からご覧ください。

目次

サイトのお気に入りポイント

aso-bizのサイトに訪れて真っ先に目につくのが、黄色とターコイズブルーで彩られた可愛らしいイベントの主人公たち。デザイン会社KNAPさんにaso-bizのサービスを知っていただき、イチから描き下ろしていただきました。

個人的には、切り株に座り仲間に何かを伝えようとしてジェスチャーをしている彼がお気に入りです。ノートPCのマークにはaso-bizのブランドロゴが描かれているのもお気に入りポイントのひとつです。

aso-biz（アソビズ）が社内イベント・研修を実施する際に最も大事にしていることは「アソビゴコロ」です。

例えば、バーチャル背景の中央に、こっそり文字を入れてみるなど。Zoomの会議中に普段は見えないけれど、離席したらクスッとなるかもしれないちょっとした工夫も、アソビゴコロの一種なのではないかなと思います。

そんなアソビゴコロが根幹にあるaso-bizのウェブサイトをリニューアルするにあたって、訪れていただいた方に「楽しそうだな〜！」「気が利くな〜！」と思っていただくことを目指してデザインしました。

本記事では、リニューアルしたウェブサイトの制作フローを紹介いたします。参考になれば幸いです。

ウェブリニューアルの大まかな流れ

KNAPさんにはデザインをお願いしまして、ウェブサイトへのデザイン反映は社内エンジニアが担当しています。

細かい内訳は、各セクションで紹介しましょう。

01.打ち合わせ：KNAPさんによる緻密なヒアリング

まずはaso-bizが新サイトをどうしたいのか？ということをKNAPさんに相談するフェーズです。社長とデザイナーの方に参加いただきました。その時アソビズが用意していた相談事項は、「とにかくいい感じにしたい。」でした。迷惑極まりない依頼の仕方です。

改めて旧aso-bizサイトの課題を突き詰めると、

・どこに何が書いてあるかわかりづらい
・問い合わせしづらい
・結局何を紹介したいのかわからない

の３点に辿り着いたことで、漸くサイトの方針が定まりました。

・情報を整理する
・大事なところだけ目立たせたい
・アソビゴコロを伝えたい

冒頭のアソビゴコロをしつらえた可愛らしいデザインの根幹がここで生まれました。

02.ウェブサイトの骨格を担うワイヤーフレーム

方針が定まり、サイトマップが完成したところでいよいよ骨格を決めるワイヤーフレームの制作です。デザイナーさんがヒアリング結果をもとに、文字や情報のレイアウトをざっくり決めることを指します。

03.KNAPさんで「謎解き宝探しオンライン」を実施

デザインに移る前に、ユーザー目線に立ってaso-bizのサービスを見ていただくために、社内イベントコンテンツ「謎解き宝探しオンライン」を実施いただきました。

参加を経て「テンション上がりまくり」「言葉で伝えるのムズイ…」「楽しい！」というフィードバックをいただきまして、「ビジュアルで楽しさが伝わるデザイン」という方針が決まりました。

04.実体験を生かしたデザイン

デザイン作業でサイトの統一感を出すためにKNAPのデザイナーさんと擦り合わせたのが以下の２点です。

・メインカラー
・メインビジュアルのイラストタッチ

メインカラーは、「楽しさ」から連想される黄色と、落ち着いたビジネスっぽさを連想させるターコイズブルーをメインに据えおき、統一感のあるカラーになりました。

メインビジュアルのイラストは、サービスのイメージを左右する大事な要素です。制作前にイラストサンプルを複数用いて、どの人物がイメージに近いのか、納得のいくイラストなのかをしっかり確認してくださいました。

デザイン進捗を提出していただくたびに、aso-biz一同大盛り上がりです。
「かわいい！」「これいいね！」「みやすい！」

細かく修正を重ね、デザインを納品いただいたら、あと少し。ほぼほぼ完成です。

05.サイトの動き・アニメーションをすり合わせ

ボタンにカーソルを重ねるとどうなるのか？

文字はどんな感じで表示されるのか？

など、静止画で納品していただいたサイトの動きを確認するフェーズです。
ここからはaso-bizがデザインに命を吹きかけなければなりません。

KNAPさんに、このサイトのアニメーションが参考になると思う、このボタンはこんな感じで動くといいと思う、アニメーションを盛り込みすぎるとまた画面がうるさくなるのでシンプルな動きで十分だと思う、など、丁寧なアドバイスをいただきました。

アドバイスをもとに、コーディング担当のエンジニアに向けて指示書を作ります。

06.デザイン反映・コーディング

デザインとアニメーションの指示書をもとに、エンジニアがコーディングを行います。

ステージングサイトを用い何度も社内チェックを重ね、約2週間ほどフルフルで作業を行い、漸く完成に至りました。

KNAPのみなさまにはとても感謝しております。
ありがとうございました！

まとめ

アソビゴコロが詰まった新aso-bizサイト、ぜひ訪れてみていただけると嬉しいです。

もしサービスが気になったよ！という方は、無料体験会を実施いたしますので、お問い合わせフォームよりご連絡ください。

デザイン会社：KNAPさんについて

デザイン会社 - KNAP Webデザイン - 東京（恵比寿）