aso-biz|組織にアソビゴコロを。
デザイン×アソビ〜デザイン会社KNAPさんに本気のアソビをぶつけてサイトをデザインしていただいた話
見出し画像

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

aso-biz|組織にアソビゴコロを。

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

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

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

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

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

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

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

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

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

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

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

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

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

制作フロー(約2ヶ月)

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

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

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

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

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

  • どこに何が書いてあるかわかりづらい

  • 問い合わせしづらい

  • 結局何を紹介したいのかわからない

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

旧aso-bizサイトは文字にメリハリがなく情報が伝わりづらかった
  • 情報を整理する

  • 大事なところだけ目立たせたい

  • アソビゴコロを伝えたい

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

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/より


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
また記事ご覧ください🥺スキーーーーー
aso-biz|組織にアソビゴコロを。
エンタメ会社だからこその社内イベントや研修のノウハウ、社員の様子を綴っていきます! ー ビジネスにエンターテインメントを。 組織にアソビゴコロを。 aso-biz.jp