記事

Articles

ホーム記事一覧 > デザイン×アソビ~デザイン会社KNAPさんに本気のアソビをぶつけてサイトをデザインしていただいた話

デザイン×アソビ~デザイン会社KNAPさんに本気のアソビをぶつけてサイトをデザインしていただいた話

たつみまや
2022年4月28日

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

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

aso-biz(アソビズ)2周年、ブランドをリデザインしました
社内イベント/研修事業を提供しているaso-biz(アソビズ)は、お客さまとのコミュニケーションをリデザインする目的で、サービスサイトを大幅アップデートしました。

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

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

宝探しにそれぞれ全うしている様子のイラスト

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

Zoomで仲間にジェスチャー(一部伝わらない)を送る人

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

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

aso-bizのきくちが実際に使用しているバーチャル背景

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

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

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

制作フロー(約2ヶ月)

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

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

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

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

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

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

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

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

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

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

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

ワイヤーフレーム

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

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

協力して謎に挑むKNAPのみなさま

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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


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

KNAP(ナップ)という単語には、小山という意味があります。そう、子どもの頃、わくわくした遠足のお供、ナップサックのナップです。
高さを競う高嶺でも、豊かな金山でもないけれど、頂上までのぼってみると、いつもより少し「すてき」な景色が見えます。
ナップはちょうどいい高さなんですね。
KNAPらしいちょうどよさを突き詰めながら、クリエイティブの力を信じ、「ちょどいいデザインを。ちょうどいいサービスを。ちょうどいい価値を。」これからもこの先も、変化しながら、提供してまります。

https://knap.jp/about/より

この記事を書いた人

たつみまや

株式会社アソビズ CEO。1991年生まれ。2020年より「組織にアソビゴコロを。」をモットーにBtoBで謎解きイベントを提供している。新卒で経験した老舗メーカーでの営業から、地方創生ビジネスに興味を持ち、横浜のベンチャー「DAS株式会社」にジョイン。観光促進の観点から謎解きイベントのディレクションに従事した。2020年には謎解きイベントの関係性構築に注目し、教育・組織づくりに転向し「aso-biz」サービスを開始。2022年9月に法人化し代表に就任。表向きは、リモートワーク、女性のキャリア、組織づくりに興味。だが実はゲームや旅行、日本酒と家が大好き。筋トレとファスティングは気まぐれ。受賞:令和3年度テレワーク先駆者百選(総務省)。

contact
お問い合わせ

謎解き宝探しオンライン無料体験
資料無料
ダウンロード