「より多くの人へ、より正しく情報を伝えていく」

をコンセプトにUIUXを全面的に見直しました。詳しく知りたい人も、簡単に知りたい人へも、情報を正しく伝えるUI設計。ココヘリの大きな特徴をカード型として詳しい情報を折りたたみメニューの中に入れ込みました。簡単に知りたい人はカードの情報を確認、より詳しく知りたい人はカードを開いて情報を深掘りできる構成としています。

‍

テレビやスマートフォンのように誰もが概念を理解できている製品やサービスとは異なり、ココヘリはその新しいサービスの仕組みや意義を一から伝えていく必要があるのが難しい点です。ランディングページのUIUX刷新の気づき獲得のために複数のUIUXデザイナーへのヒアリングを行い、概念の無い状態のユーザーへの情報の伝え方を工夫して設計を行なっています。結果として、情報の伝えやすさに加えて、アウトドアアクティビティを安心して楽しめるようになるというエモーショナルな要素も加えたサイトデザインが完成しました。

‍

ココヘリ会員のみなさまのUGC (User Generated Contents) を一覧できるトップビュー

ココヘリ会員のみなさまが、さまざまなシーンでアウトドアを楽しむことを支えられていることが、ココヘリにとっての財産です。

‍

新ランディングページでは、会員の皆様に支えられるココヘリというイメージをInstagramのUGCフィードの中にココヘリロゴを配置することで表現しました。開発中～ローンチ直後は雪山のシーンが多かったのが、春登山に変わっていく季節の変遷や、MTGなどのアクティビティへの広がりも一目で感じられるトップビューになりました。この記事を書いている段階ではTHE NORTH FACEコラボが始まったので、端末の写真を早速アップしてくれている方が増えてきました。今後の移り変わりも楽しみです。

‍

Instagramでの#ココヘリ、#cocoheli 両方のハッシュタグに対応していますので、よろしければ会員の皆様もぜひタグ付けを行ってシェアをしてみてください。

‍

プロダクトの3D表示、AR表示へ対応

ココヘリ発信機の表現にもこだわっています。入会前によりリアルなサイズ感や色、形を感じ取って検討いただけるよう、3Dモデルを自由に回転しながら製品デザインを確認できる仕掛けを追加しました。PCではマウスのドラッグ、スマホでは指で触れることで3Dモデルを回転できます。さらに、左右の矢印の先には利用シーンなどの写真を用意しています。

‍

さらに、右上のARアイコンをクリックするとARビューを試すことができます。上の写真はデスクに会員証をARで表示させている様子です。平面を検知すると高精度な寸法誤差で会員証を表示してくれます。CGなのであくまで目安ですがお手持ちのアイテムとの比較を行いたい時などぜひご活用ください。

‍

vectaryというオンラインの3Dプラットフォームを用いています。サイトでの3D表示に加え、AR表示へも対応しています。

PCでARボタンをクリックすると、スマホで読み込むためのQRコードが表示されるので、そちらのリンクからも進めます。

‍

刷新を支えたwebflowへのプラットフォーム移行

今回の刷新では、これまでwordpressで管理されていたサイトのフロント側のページをwebflowへ移行しました。webflowはノーコードでWEBサイトを構築できるサービスで、CMS等の管理も一括してできるデザインに特化したプラットフォームです。

‍

新サイトは100% webflowのみ、デザイナーのみ、ノーコードで構築を行いました。もちろん、入会情報を管理するページはこれまでと変わらず信頼性を担保したシステムを用いています。新着情報や義務化施設などの情報の更新もwebflow上で専門の知識がなくてもアップデートができるようになり、情報更新のし易さが格段に上がりました。

‍

今後もサービスの魅力やより多く伝えていけるようにアップデートを重ねていくとともに、ココヘリの魅力をより多角的な視点でお伝えできるようなメディアも準備中です。ご期待ください。