Blog

ブログ

「CUSTOMIZE EXPERT&CREATIVE EXPERT」ダブル受賞!!|BRAVO MUSIC オンラインストア

去る2022年5月30日に、BRAVO MUSIC オンラインストアをEC-CUBEで構築しリリースいたしました。

本サイトはEC-CUBE社から、「CUSTOMIZE EXPERT」&「CREATIVE EXPERT」を授与されております。

ダブルで受賞した実績は、弊社初です!!!(パチパチパチ???)

エンジニアチーム&デザインチームの汗と涙の結晶となった案件です?

https://bravomusic.jp/

 

 

さて本リニューアルでは、以下EC-CUBE2系の2サイトを1サイトに統合し、リニューアルすることになりました。

 

このような多くの情報を整理し、まとめ上げたのは私自身初めての試みでした。

「こんなに多い情報どうする〜〜」と嘆きの声が私一瞬ありましたが、とてもやりがいがありハートが熱くなるお仕事となりました★

情報整理に精を出す

全て洗い出して情報整理!

本プロジェクトの趣旨。2サイト(「fitness musicサイト」と「yoga musicサイト」)を1サイトに統合するミッション!

2サイトある上、両サイトとも、とても情報が多いサイトであり、また整理されていないコンテンツもある状態でした。そのためまずやったこと!2サイト分のページを全て洗い出す作業を実施!!

Excelに全ページ、リストアップし、その後ブラボーグループ様にリプレイス先では必要なページかどうかをご判断頂きました。その上でWFを作成し、優先順位が高いものは、グルーピングやカテゴリとして位置づけし情報整理に努めました。

カテゴリ名や配置場所について熟考を重ね、ブラボーグループ様と対話しながら現在の内容で確定。

そして優先順位が低いものは、「フィットネス関連コンテンツ」&「ヨガ関連コンテンツ」としてスライドバナーエリアを設け集約することにしました。

ジャンル分けしきれないものや、コンテンツとして優先度が低いものはここにまとめ、情報整理することに努めたのです。(2023.02現在では、この部分はクローズさせています)

「お知らせ」については下の方に配置することにしたため、重要なトピックはファーストビューとなるメインビジュアル下で訴求エリアを確保。バナー点数を際限なく設置できるよう、スライドバナーを展開する見せ方でご提案いたしました。

これなら「お知らせ」エリアが下に配置されていても、しっかりと重要なトピックスをユーザーにお知らせすることができます!

 

さて1つトピックスをお話します。

ジャケ写下にある「視聴する」ボタン。きっと思うことがあるでしょう!

ボトムをそろえたい!!!!!(みんなの声が聞こえる〜〜)

一度ボトムをそろえたことがあるのですが、不自然に間のあいた空白が出きてしまい、そろえることをやめました。全て同じ文字数なら、きれいにレイアウトがまとまるでしょうが、動的部分になるためその選択肢は取れません。

一方で商品一覧ページでは、「視聴する」ボタンをそろえています。

本ページは整然としたページ内容となるため不自然さがなく、そろえる選択を取りました。ページの見せ方によって臨機応変にですね!

https://bravomusic.jp/products/list?product_type_id=1

メニューの見せ方はシンプルに!

今回譲れない点がありました。それは、ヘッダー周りのメニュー導線をシンプルに使い勝手よい導線とすること。ログイン時も気を配りこの点妥協せず、担当デザイナーと協議しました。

加えて「著作権について」アテンションをかけたいこと、ブラボーグループ様から要望を受けたため、ヘッダー周りが煩雑にならないよう、目に付きやすい赤ベタで配色。今回追求したシンプルさを叶えるため、スクロール時の追従からは外すことにしました。追従なしでもファーストビューに配置することで目的を達成できていたことも理由です。

ドロップダウンメニューも活用し、その中で多くのメニューを展開し整理することにしました。

検索も検索窓をトップページに表示せず、ドロップダウンメニュー内に展開することでコンパクトに見せる効果を発揮しています。

と同時にスマホのハンバーガーメニューについてもシンプルな設計にこだわりました。

全てメニューを表示すると縦にとても長くなり、ユーザーにとって使い勝手の悪いものになってしまいます。そのため、クリックしたら下位のメニューが展開する見せ方でブラボーグループ様からも了承いただくことができました。

(ブラボーグループ様もこの部分の見せ方について気にされており、解消できてよかったです!)

 

 

 

ここでときおり話題になるトピックを!ページトップについて。

スクロール時に追従させているサイトもありますが、「そこまで必要?」と思うことがあります。スマホだと特に、操作性も落としてしまう導線だと考えています。実際この「ページトップ」導線を使っているユーザーも少ないことでしょう。

iPhoneだとステータスバーをタップし、この動作を取るユーザーも多くいること想像しますよね。現在、「ページトップ」の導線がないサイトも存在しているくらいです。

そのため「ページトップ」は、フッターのデザインアクセント程度の役割とみなしてよいと考えています!実はこの「ページトップ」デザイン、メインビジュアルでもアクセント処理として扱われていることがあります。矢印の向きは ⬇ です。ぜひ他サイトでこの処理を探してみてください★

タブをフル活用!

今回タブが、情報整理に貢献しています。

 

そこでも一番複雑なタブ構成が「オススメ楽曲ベスト3」!

情報整理の仕方について一番悩んだコンテンツでもあります。スマホではプルダウンで選択する形式を取り、使いやすいUI設計を目指しました。

ただ!この設計はバックエンド側の処理工数について検討する必要がありました。今回はエンジニアと相談しこの設計を実現することができました★

こういった時の事前の対策として、WFの時点で&デザインが仕上がったタイミングでエンジニアに問題がないか前もって確認を取りながら進めるようにしています。

デザインはトレンド感を取り入れる

デザインリニューアルするからには、トレンド感を取り入れたい。デザイン制作に携わる者にとっては、ごく自然な考えです。それでは本サイトで取り入れたトレンドについてピックアップし、ご紹介します。

▼背面全面に写真を配置し、レイヤー構造を採用

その上をコンテンツがスクロールしていくことで、スクロール時に奥行きが加わり、スケール感ある迫力あるイメージを効果として与えています。

▼ブロック単位で横に流れる文字

デザインのアクセントになるだけでなく、リッチ感も演出してくれます。英字は配置するだけで華やかさが加わり、装飾として多用されています。

(この英字の装飾方法は使いやすくもあるので、安易に使うことなく上手に取り入れたいところです!)

この2つのデザイン処理について、デザインギャラリーサイトを見ていると同じような表現をしているサイトをいくつか見かけるかと思います。実はデザインって、基本パターン化して作られているのです。

似通ったサイトに見えないよう処理を組み合わせて、オリジナルのエッセンス等を取り入れデザインしていることが分かります。じゃあ誰でもトレンド感あるデザインが作れるんじゃないかって??

それは一朝一夕ではできません。が回答です★

余白感や細部のディティール、フォントについてもベストを尽くして完成させているためです。心地よいデザインにたどり着くまで何度も試行錯誤を重ねます。

ディレクターである私もラフデザインを作ることがあり、身を持って知りました〜〜!機会があったらみなさんもデザイン制作にチャレンジしてみてください♪

チームメンバー一丸で作ったサイト!

最後に本サイトの制作メンバーについて触れさせてください♪

本サイトはチームメンバー一丸となって作り上げ、思い出深いサイトとなりました。制作中はお互い遠慮することなく必要あらばみんなで集まって、すり合わせや進捗確認を行いました。リモートメンバーが多いため、そんな時はSlackのハドル機能を使って柔軟に集まります!

チームワークって大切!!

リリース日はみんなでオフィスに一同に集まり、追い込みました。オフィスにいた他メンバーも気にかけてくれて、応援してくれたりその場を和ませてくれたり?

22時前にオフィスに届いた出前(ビルの表の入り口が閉まっていて、出前のお兄さんが辿り付けず!予定より配達時間が遅くなってしまったのです 笑)をみんなで囲んだことは今でも良い思い出です。←ちなみにレアなことです。めったにありません!!22時はオフィスに誰もいないことが基本である弊社。

リリースできた時はみんな感極まり、喜びの声が上がりました!感動!!!私も嬉しかったー。ついに我が子が世にリリースされた気持ちです✨✨

今現在もブラボーグループ様がこまめに更新して下さり、サイトを育てている様子を見るととても嬉しく思います。

 

株式会社ジョーレンは「EC-CUBEインテグレートパートナー」ページで、プラチナランク企業として掲載されています。他EC-CUBE構築実績も掲載していますので、ぜひご覧ください!

https://www.ec-cube.net/integrate/partner/

https://www.ec-cube.net/integrate/partner/partner.php?partner_id=1431

Shopify多言語対応。「ゆとり屋」オンラインストアをリリース!

Tシャツやステッカー等、ゆとり屋様オリジナルグッズを販売するサイト。

ゆとり屋ONLINE STOREを2023年1月24日にリリースいたしました。弊社オリジナルデザインで、Shopifyにて構築しております。

https://onlineshop.yutoriya.shop/

  

 

鳥の種類から選ぶ」ページは弊社メンバー間でも人気のページ★

細かな描き分けをしているゆとり屋様のイラストは、思わず見入ってしまいます。

本サイトならではの魅力あるコンテンツです。

ゆとり屋様のInstagramでも本サイトへの導線が貼られ、商品のご案内をしていますので、合わせてチェックしてみてくださいね。

 

さて本ブログでは、本サイトの制作に関することについて 3つ!ご紹介したいと思います。

構成について変化にこだわる

デザインはリズム感が大事です。

リズム感って?

同じ拍子のリズムが継続して刻まれていると、単調となりリスナーにとってあきあきしてしまいますよね。

早いリズムだったり、ゆっくりなリズムだったり変化あるリズムを刻むことで、あきなくリスナーは聴けるのです。

サイトの見せ方も同じで単調な構成が続かないよう、リズム感ある構成で組んでいます。

本サイトの場合、以下構成を例にあげましょう。

・ランキング

 「もっと見る」の導線

・ゆとり屋が選ぶおすすめ

  「スライド」の展開

ゆとり屋様に提案し、この構成で設計することを確定。違いも出て、ユーザーにとっても分かりやすい効果が出ました。もちろん配色等でも違いを出しています。

またこの2つのコンテンツは、更新頻度が多いため上部に配置しています。より見せ方の差別化が重要になりますね。

スマホファーストを意識する

PCのメインメニュー(「Tシャツ、パーカー・トレーナー」等が並んでいるメニュー)は、

メニュー間の余白が狭いため少し窮屈に感じ、可読性・視認性が下がっているかもしれません。

ゆとり屋様と相談し、「メニューの文字数を短くする」or「メニュー数を減らす」ことも検討しましたが、ECサイトは特にスマホからの閲覧数が多いため、PCサイトのメインメニューはこの見え方でよしとしました。

それより、メニュー名&メニューの数を優先することを選択したのです。

近頃、「(PCデザインより)スマホデザインを先に確認したい」といったクライアント様の声が多くなりました。

至極当たり前のことではありますが、ますますスマホデザインの重要性は高くなること感じています。

デザイナーは、スマホからもデザイン作れるようにしておくといいですね!

心理学的法則を活用

ミラーの法則

サイト制作中にゆとり屋様から相談を受けました。

「【鳥の種類から選ぶ】のサブメニュー。たくさんメニューを設けてもいいと思いますか?」

この問いを受けた時に、私の頭の中でよぎったこと。

———————————

マジカルナンバー7

———————————

制作に携わるみなさんなら、一度は聞いたことがあることでしょう。

マジカルナンバー7とは。

【ナビゲーションの項目数は、7つ以下に制限しなければならない】

私もこの数字を意識して、10年以上今までサイト制作を行って来ました。

そしてクライアント様にもこの説明をしたことがあります。

と同時に著書「UXデザインの法則」にて、ミラーの法則として以下説明書きがあったことを思い出しました。

———————————————————————————————————————————————————————

ナビゲーションメニューのようなデザインパターンは、選択肢が常に目に見えていてユーザーが項目を覚える必要がないので、これらのリンク数を制限してもユーザービリティ上のメリットはない。メニューが効果的に設計されている限り、ユーザーは自分の目的さえ覚えておけば目当てのリンクを素早く識別できる。

———————————————————————————————————————————————————————

ゆとり屋さんサイトに訪れるユーザーは鳥好きが多くいるため、

「この鳥グッズを見たい!」という具体的な目的を持ってサイトを訪問することが予想されます。

そのため、メニュー数が多くても問題ないこと私はこの著書の裏付けにより回答をしました。

また多くの鳥の種類のグッズを取り揃えていることは、本サイトならではの優位性でもあります。

数多く見せるほど注目してもらえ、本サイトの最大の魅力にもつながるのです。

この続きの詳しい説明は、著書「UXデザインの法則」に書いてあるので、興味のある方は読んでみてくださいね。

さてその他2点、このサイトでも共通して語れることがこの著書に書いてありましたので、合わせて紹介させてください。

ヤコブの法則

ユーザビリティの専門家ヤコブ・ニールセンによって2000年に提唱。

———————————————————————————————————————————————————————

・ユーザーは他のウェブサイトでの経験の積み重ねを通じて「デザインはこうあるべき」という期待を築き上げる傾向がある

・ありふれた慣例に従ったデザインにすることで、ユーザーがサイトの中身やメッセージ、扱う商品にもっと集中できるようにすべき

———————————————————————————————————————————————————————

というものです。

本サイトでいくつかピックアップして例を挙げると以下になります。

1)サイトロゴ

2)ヘッダー右上にあるカート等のボタン

3)数量のセレクトボタン

4)カートに追加するボタン

5)フッターにある規約関係のページ、SNSの導線

どのサイトでも基本共通して本サイトのような配置、挙動をしているでしょう。

これはメンタルモデルという心理学の概念です。(詳しくは著書「UXデザインの法則」を参照)

この法則を意識した設計にすることで、ユーザーは快適に目標達成に集中できるため、本サイトでも基本事項として取り入れています。

美的ユーザビリティ効果

———————————————————————————————

見た目が美しいデザインはより使いやすいと感じられる。

———————————————————————————————

見た目の美しさは、ユーザビリティがUPすると研究結果により証明されています。

コストが捻出できないため、見た目は二の次。

とプロジェクトにより判断されることがありますが(とても悲しい事実(T_T))、この実証結果により今一度見直すべきかもしれません。

この著書で他注目した事例として、

・見た目が美しい携帯電話

・見た目が美しくない携帯電話

でユーザビリティテストをしたところ、

【ユーザビリティを高く評価しただけではなく、携帯電話の見た目によってパフォーマンスにもプラス効果があり、タスクの完了時間が短縮された】

という結果が出たそうです。

リリース後、本サイトを紹介したところみんなから「かわいい!」というコメントを寄せてくださいました。

それはユーザビリティだけではなく、パフォーマンスにも良い影響を与えること示唆してくれています。

「見た目が美しいデザインはユーザーにポジティブな反応を引き出し、デザインが信頼性を高めてくれる。」

ともこの著書で伝えていました。ユーザー体験が重要視されている昨今、深く同意することです。

成果を出すなら、デザインまでしっかり力を注ぎ実施すべきであることメッセージとして受け取れるでしょう。

まずは見た目を美しくしてからではないと、ユーザビリティテストも効果を発揮しない事実。

デザインの価値が重要であることこの著書が教えてくれました!

 

株式会社ジョーレンではShopifyやEC-CUBEの構築はじめ、デザインについてもお引き受けしております。

さまざまな課題を抱えている方、ご相談からでも構いませんのでお問い合わせください。

各専門スタッフがクライアント様と伴走し、制作を行わせて頂きます。