ブログ

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

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

https://onlineshop.yutoriya.shop/

 　

 

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

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

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

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

 

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

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

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

リズム感って？

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

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

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

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

・ランキング

　「もっと見る」の導線

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

 　「スライド」の展開

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

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

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

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

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

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

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

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

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

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

心理学的法則を活用

ミラーの法則

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

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

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

———————————

マジカルナンバー７

———————————

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヤコブの法則

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

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

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

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

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

というものです。

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

１）サイトロゴ

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

３）数量のセレクトボタン

４）カートに追加するボタン

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

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

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

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

美的ユーザビリティ効果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

合同会社DMM.com様（以降、DMM様）のご依頼により女性向けに検査キットを販売するサイト、

DMMLunaサイトを2022年10月31日にリリースいたしました。

オリジナルデザインで、Shopifyで構築した案件になります。

https://dmmluna.com/

 

DMMLunaブランドを確立すべく世界観をどう表現するかを熟思

今回DMM様の新たなサービスの試みとして、本サイトを立ち上げることとなりました。

課題として承ったミッションは、DMMLuna独自のブランディングがいかに確立できるかです。

その実現のため、いくつかの試行錯誤を行いデザインに望みました。

扱う商材をどう見せるか！？議論

まず課題に上がったことは商材をどう見せるかについてです。

本サイトで扱う検査キットとは、以下のような商材になります。

この商材写真をいくら飾っても、目指すデザイン感にマッチさせることはできません(;_;)

そしてチームメンバーとディスカッションした末、検査キットの写真は用いず、ターゲットとなる女性写真を主役に、検査項目の数を明示して見せる！

という案で世界観を壊すことなくまとめ上げることができました。

この案に行き着くまで他のアイディアも出ており、例として

「イラスト化する案は？」「商品画像の更新性負荷や、商材の正確な再現性が劣るのでは？」といった理由により見送りになった経緯も背景にあったのです。

・FIXした商材画像が見れるページはこちら！

https://dmmluna.com/collections/kit

 

ロゴへ込めた思い＆ストーリー性を持ったキャラクター設定

次にオリジナルの世界観の実現です。

ベンチマークとなるサイトは、そのサイト独自に描き起こしたイラストや撮り下ろしの写真が起用されていました。

本案件ではイラストレーターの起用が予算等の兼ね合いにより厳しく、条件として担当デザイナーができる範囲で制作しなければなりません。

またセンシティブな内容を扱った商材となるため、サイト用の写真撮影も見送る必要がありました。

その制約ある中で、ミッションとしてDMMLuna独自の世界観を表現する必要があったのです。

更にDMM様がベンチマークとなるサイトを大変気に入っていたため、それを凌駕するサイトを作らなければ！！という課題もありました。

そして提案させて頂いた内容は以下になります。

• DMMLunaが描くストーリー展開

  (メインビジュアルにおいて)

  ・ルナ先生の元に本サイトのターゲットとなる女性をイメージしたイラストを配置。

  ・お家は、自宅で検査することができる。

  ・ポストは、ユーザーが検査した検査キットを郵送する。

  ・傘の子は、安心を届ける。

  といったメッセージを込め構成。

 

• サイトロゴ

  シンボルの形状から「優しく包む」を表現。

  全体の形はハートを想起させ 「心」「優しさ」「安心」を。

  内側に包む形状はDMMLunaが女性の健康を守り、 優しく包み安心をもたらすという意味をかたどる

 

• コンセプト

  DMMLunaをきっかけに新しい価値観や新たな生活習慣の場を本サイトを通じてユーザーに与えられるよう、DMMLunaブランドを確立できるようデザイン。

  今までターゲットとなるユーザーが利用していたサイトはなんとなく気持ちがのらない、面倒くさいといったネガティブなイメージを与えていたかもしれません。

  DMMLunaではそういったイメージを変え、DMMLuna独自の世界観を演出した本サイトで一新を目指す。

  ※このコンセプトは、これからの顧客満足度の向上、そして市場シェアの拡大にもつながることも目的といたしました。

 

ご提案した世界観はDMM様に評価いただき、仕上がったデザインを通じてご要望に沿った世界観を作ること結実できたのです。

 

「よくあるご質問」の見せ方を思案する

ここでは制作エピソードのこぼれ話を。

よくあるご質問は一般的に以下のような文字ベースの印象が多いかと思います。

今回DMM様から

「文字文字の印象ではなく、キャッチーで読みやすい見せ方にしたい！」とご要望を受けておりました。

実現に向け、イラストを入れる、URLの文字列をそのまま記載しない等

チームメンバーと工夫はしてみたものの、テキスト原稿のボリュームがある程度あると、実現することは困難なことが分かりました。

（本サイトは制約上、これ以上テキスト原稿の文字数を減らすことはできませんでした）

そして仕上がったページはこちら！

https://dmmluna.com/pages/faq

とはいえ、一般的な「よくあるご質問」ページより読みやすくキャッチーな印象に仕上がっていますよね★

Shopifyで構築することで運用性UPの恩恵を享受

まだまだShopifyを勉強中の私。

今回Shopify構築を通していくつか気づきがありました！

Shopify構築をクライアント様に提案する際に、メリットとしてお伝えできるかと思います。

管理画面でカンタンに更新ができる

今回Shopify側で用意されているテーマ＊を元にオリジナルデザインの適用を行いました。

Shopifyではオリジナルのデザインを適用しても、管理画面からGUIで更新できる（ソース更新ではなく、ビジュアルベースで更新できる）仕組みが作れます。

 

Shopifyで構築すれば、運用者側でソース更新することなく、制作者側に依頼かけずとも

ブログのようにGUIで更新できる！のです。

つまりShopifyを使うと、手間なくノンテックの方でもとても簡単に運用する体制が築けます。

＊

テーマとは：デザインのテンプレートのようなもの。テーマをそのまま使い構築もできますし、テーマを元にオリジナルデザインを作ることもできます。

戦略に合わせて、コンテンツの順序を並び替えられる

クライアント様のご要望として「更新頻度が高いコンテンツを上部に配置したい」という声が寄せられます。

例えば、「ブログコンテンツ」や「お知らせ」等々。

一方でストーリー展開を意識した場合、初めてユーザーに見てもらうサイトの場合、順序としてまずは自己紹介から入りますよね。

「私は◯◯です。◯◯◯をやっているサイトです。よろしく！」

このサイトはなんぞや的な紹介ですね。

この構成を優先とした場合、ページ最上部に配置することが適しています。しかし時が経ちサイトリリース後、リピーター層が多くなった場合は、ユーザーにとって何度も見なくてもよいコンテンツになるため、下に配置変更したくなる時が訪れるかもしれません。

この点Shopifyでは柔軟に応えることができます！

先程紹介した管理画面のGUIで上下に移動させ変更することが容易にできるのです。

つまり、サイトの戦略に合わせてコンテンツの配置をいつでも簡単に変更できるので叶えられるのです。

構築のポイントは、

配置を変更しても自然な見え方になるようデザインする！です。

今回紹介した以外でもShopifyが得意としていることはたくさんありますので、構築の検討をされている方はお問い合わせ頂き、ご質問いただけたらと思っております。

 

株式会社ジョーレンではオリジナルのデザインから、Shopifyのテーマ（テンプレート）を使った構築まで、業種ジャンル問わず幅広く承っております。

「こういった機能を付けたい」等、機能面に関するご相談も承ること可能ですので、お気軽にご相談ください。