palanXRサイトリニューアルの流れをご紹介します！

はじめに

bageleeの運営会社であるpalanでは、顧客の日常にARを届ける事業のWebサイト 「palanXR」があるのですが、先日こちらのサイトのリニューアルを行いました！（左がリニューアル前、右がリニューアル後）

今回は、UIにおけるリデザインを大きく4フローに分けてざっくりまとめたいと思います！

リニューアルまでのフロー

1.コンセプトの見直し

以前はどちらかというとxRが好きな方に届いて欲しい！という思いのもと、テック寄りなデザインでしたが、今回はもっとたくさんの人にWebARを体験してもらいたい！という思いを全面に出した方向で進めることになりました。（左がリニューアル前、右がリニューアル後）

2.参考をたくさん見る

コンセプトを決めたら、参考サイトでコンセプトに沿ったキーワードを検索し、ワイヤーやデザインのイメージを考えていきます
今回だと「誠実さ」「親しみやすさ」などのワードで集めていきました。

今回活用させていただいた参考Webサイト集です！

細かくカテゴリ分けされていたり、カラー別になっていたりするのでおすすめです！
「SANKOU!」 https://sankoudesign.com/
「URAGAWA」https://uragawa.work/
「MUUUUU.ORG」https://muuuuu.org//

3.ワイヤー制作

ワイヤーはマーケターの方と意見を交換しながら作成していきました。
ここでは主に、載せるコンテンツの順番や詳細を決めたり、ページの遷移先の確認などといった認識のすり合わせを行いました。

4.デザイン案作成

コンテンツの詳細が決まったらデザインに取り掛かります。
メインカラーなども変わりましたが、今回はレイアウトに関していくつかユーザービリティの向上のため変更したので、そちらをまとめていきます！

1.ユーザー側でスクロールの作業を増やさないようにする

コンテンツが多い場合やたくさん見ていただきたい時は、横軸を増やすことでどんな事例があるのかを1画面で見やすいようにしました。（左がリニューアル前、右がリニューアル後）

2.OGPの画像を統一

ぱっと見で見てくださった方にもイメージしやすいよう、モックアップを使用したものに統一しました。

3.すべての事例に担当箇所を追記

サイト内に「担当箇所」や「提供サービス」という項目を追加し、palanXRでどこまでお願いできるんだろう？という疑問もサイト内で見ていただけるようにしました。

また、社内のデザイナーさんやマーケターの方からのフィードバックも取り入れながら、ひたすらブラッシュアップをしたら公開です！🎉

まとめ

リデザインを考えてるけど具体的にどうしていこうかな？と悩んでる方の参考になれれば嬉しいです！
今後はもっとWebARの面白さやmagic leapなどの魅力など、xR開発の面はもちろん、より多くの方にxRって楽しそう！と思っていただくために引き続きサイトの改善を行なっていく予定です。
読んでくださりありがとうございました！