Wandをリニューアルしました!Vol.2

Wandをリニューアルしました!Vol.2

記憶だけで描けるイラストはドラえもんとアンパンマンだけ。
さらっと何でも描ける人に憧れているmiyossyです。

Wandをリニューアルしました!Vol.2!
前回の記事では、リニューアルに至るまでの道のりと新しいロゴ、新しいWandに込められた想いについてお伝えしました。今回はサイトリニューアルの裏側を詳しくご紹介します!
ぜひお楽しみいただけたら嬉しいです🌼

Vol.1についてはこちらからご覧いただけます。

Wandをリニューアルしました!Vol.1

目次

◼︎サイトリニューアル

◼︎サイトリニューアルの流れ

◼︎制作のこだわり
-魔法のような体験を目指して
-ときめくFV
-構造を整え、視覚で伝える
-広がるコンテンツ、充実する体験

◼︎まとめ

 

制作メンバー

今回Wandのリニューアルを担当したのは、こちらの5人。
前回同様、デザイナーのurarinさんにインタビューしながら進めていきます!

制作メンバー

サイトリニューアルの流れ

下のような流れになります。

Wandリニューアルの流れ

 

制作のこだわり

魔法のような体験を目指して

ーデザインにおけるテーマやコンセプトを教えてください!

urarinさんイラスト

ビジュアルデザイン面では、「元気でエネルギッシュな方向へシフトする」という方針を踏まえて制作しています。魔法のようなワクワク感や楽しさを演出するためにLottieアニメーションを使用しあんどぷらすが連想するモチーフや、配色、動きなどを細部にこだわって調整しました。アニメーションがメインのサイトは初めてだったので試行錯誤を重ねながら制作しています。

パッと目を引く新しいWandのFV(ファーストビュー)。アニメーションがたくさんあってとってもかわいい!
LottieはGIFや動画に比べてファイルサイズがかなり小さいので、ページの表示速度にも寄与しています。また、拡大しても劣化しないため、レスポンシブに強いところもメリットです!

 

ときめくFV

ーFVのイラストはどのように考えていったのですか?

urarinさんイラスト

実は最初は全く違うタッチで書いており、キャラクターのポーズやモチーフの数も今と異なっていました。ただ、キャラクターたちのポーズがどこか真面目すぎて、「これでは魔法の楽しさが伝わらないな」と感じ、何度も書き直すことに… 時には手描きに立ち返りながら、試行錯誤を重ねました。

ーちょこっと出てくるあんどぷらすのキャラクターひよこちゃんがとっても可愛いですね〜!

urarinさんイラスト

描き直す中でもひよこちゃんだけは最初からずっと羽ばたかせたいと思っていました(笑)
ワクワクを届けるサイトだからこそ、私たち自身も楽しみながら作りたい。我らがひよこちゃんが飛んだらきっと私たち自身もワクワクできる!と思ったので!

FV制作過程

どれも素敵ですが、やっぱり完成したイラストが1番華やかでワクワク感が伝わってくるような気します!

ー「Magic for you」のフォントもイラストに合っていて素敵です!

urarinさんイラスト

FVのコピーはイラストの雰囲気に合わせて柔らかいフォントを選定し、さらにキーワードである「Magic」のみ異なるフォントを組み合わせることで「特別感」「非日常感」「ワクワク感」を表現しています。

 

構造を整え、視覚で伝える

Blogページにおいて、ユーザーが迷わずページを理解できるように工夫した点はありますか?

urarinさんイラスト

yuiさんとsayakaさんにカテゴリを整理していただいたので、私の方でも分かりやすくなるようにイラストを制作しました。ブログの各カテゴリページでは、該当カテゴリのイラストを右上に配置することで、ユーザーが今どのページにいるのかを直感的に把握できるようにしています。楽しさが分かるようカラーは多めに使用しつつ、ごちゃごちゃ感や派手すぎに見えないよう調整しました!

Blogカテゴリ別

以前のサイトは、カテゴリが複雑で似た内容の記事でも執筆者によって選択するカテゴリが異なってしまうことがありました。今回はカテゴリを4つに精査して、それぞれに該当する記事内容を明確にしたことでユーザーにもわかりやすい構成となっています!

カテゴリーアイコン制作過程

色々な案を考えてくださっていたんですね…
どのイラストも4つのカテゴリ「Study」「「Project」「Event」「Column」のイメージにぴったりです!
そして、かわいい!!

広がるコンテンツ、充実する体験

ーこれまでのWandとのいちばんの違いって何ですか?

urarinさんイラスト

ブログだけでなく、ラジオやYoutubeといったコンテンツも含めて、ひとつのオウンドメディアとして構成している点だと思います!それにより、トップでの情報の見せ方や各コンテンツをクリックした際の導線・表示方法についても、使いやすさを重視して情報設計を行いました。

Blogページ

グレーの背景と黒のカテゴリ表記によって洗練された印象となったブログページ。
それぞれのアイキャッチの下にタグを設けることでユーザーが興味のある分野の記事を選択できるようになりました!

一覧ページRadioセクション

Radioページ

スタッフで運営している「あんどぷらす的ラジオ」は外部サイトであるShopifyに遷移せずにサイト内で聞けるようになっています。サイト内で聞けるようにすることで、離脱リスクを抑えています。

 

一覧ページYoutubeセクション

会社紹介動画や制作実績動画がチェックできます!

 

ーAboutページにもアニメーションがついているんですね!こだわったポイントはありますか?

urarinさんイラスト

Wandの世界観を大切にしながら、ストーリーから着想を得たアニメーションを作成しました。あえて抽象的な表現にすることで、見る人それぞれの想像が広がる余白を持たせています!

まとめ

サイトリニューアルの裏側を少しでも楽しんでいただけたでしょうか?

実はデザインが新しくなっただけでなく、機能面でもLLMO(生成AIにサイトを認識させ、表示・引用してもらうための最適化手段)に配慮した設計が施されており、裏側もしっかり進化しています!

リニューアルはゴールではなく、ここからがスタート。これから増えていくコンテンツや新しい取り組みとともに、さらに楽しんでいただけるサイトを目指していきます。

パワーアップしたWandをこれからもチェックしていただけたら嬉しいです🌷
最後までご覧いただき、ありがとうございました。

それでは、次の記事でお会いしましょう!