こんにちは。BECKのDX (デラックス) です。
顧問先のマルハートさんの楽天市場店スマートフォンサイトをフルリニューアルいたしました。
この記事を書いた人
DX ｜ BECK 代表
マルハートさんはギフト専門店としてネットショップを運営していますが、去年の秋頃から当社とお付き合いさせていただいている顧問先で、すごく頑張っているお店です。
そして何より・・・絶好調です！
そんな中、ここで一気にアクセルを全開にしていきたいと言うこともあって、今回のフルリニューアルに至りました。
ちなみにこちらが社長の丸目さん。(あだ名：マルケン)
この写真は確か、彼が人生で初めてモバイルスイカにて山手線に乗る際の改札での一コマ。
「デラックス〜、改札開いた〜！」
( 中学生か )
なんて言ってたときです (この数十分後、降車駅の改札が開かずションボリしていました 笑)
とまぁ、歳はボクより上ですが、色んな意味でカワイイ人です。。
さて、少しハナシは脱線しましたが、今回のリニューアルにあたり、いくつかのポイント (コツ) を教えちゃいます。
まずはサイトのビフォーから
こんな感じでした。というより、楽天のデフォルト(RMSで最低限の編集ができる状態のこと) ですね。
当社の顧問先やクライアントも ほぼそうですが、今やスマホデバイスのほうがデイリーでもアクセスや売上構成比が高く、PCのサイトを編集する時間があったら、先にスマホを編集したほうがイイというくらい、お客様はスマートフォンで閲覧、お買い物をされています。
デフォルトでのスマホサイトだと、編集領域やカスマイズに限りがあるため、中々お店の特色を打ち出すことが難しかったり、あとは自店舗からの離脱経路も多いんです。
じゃあ、新しくサーバーに静的ファイルやシステムを組んだサイトはイイの？というと、もちろんデメリットもあります。
単純にそれは、技術介入が多く、サイトのクオリティやパフォーマンスを維持継続しづらいという点・・・ぐらいですかね (だからそれが難しんだよ)
で、今回BECKにて、こんな風に大変身させました。
サイトのアフターがこちら
インターフェースはこんな感じです。スマホサイトのロゴや色も含めて一新しました。
ギフト専門店 (というか、ここも含めて今一緒に色々企ててます) という特色を考えてインターフェースを組みました。
ヘッダーには「自分でギフトを選ぶ」というお客様の選択肢を最大限尊重した導線と、グローバルナビゲーション (三本線のところ) に関しては、難しい専門用語のカテゴリ名は一切排除し、「誰でもわかる言葉」で「シーン別」「目的別」に商品が探せるような設計です。
そしてフッターは「お店からお客様に知ってもらいたい情報」を集約しました。
あとは「予算別」というギフトにおいては欠かせない探し方も、比較的最初のほうに導線してあります。
予算別とは、単に「お金」の問題だけでは無く、「誰に何の目的で贈るか」によっても非常に重要な要素になるからです。
そしてもうひとつ重要なのが・・リダイレクトです。
リダイレクトとは、意図的に別のURLに遷移させる手法のことで、javascriptやHTMLなどで行うのが一般的で、ちょっと難易度は上がりますが、Webサーバーを使って行う301リダイレクトも便利です。
ここで注意が必要なのが、リダイレクトとは単純にURLを遷移させることだけ考えれば良いのでは無く、Googleからの検索流入のことも考える必要があるということです。楽天でネットショップを運営しているお店だと、一般的にはPC用サイトのほうが先に公開されていて、あとでスマホ用を作ったという人が多いと思います。
先にPCのほうがあるということは、ちゃんと作らないと「元々の検索結果」にも影響が出てしまう恐れがあるということです。
WordPressでホームページやブログサイトを作る際、親テーマをサーバーにインストールしたら、必ず子テーマで編集するという基本中の鉄則があるのと同じで、
ボクもリダイレクトには保険をかける派です。
今回のマルハートさんのサイトも、リダイレクト先の本番環境とは別に、サーバーに保険環境も用意し、そっちにはnoindexをかけています。
検索結果などの流れを見て対策ができるようにする目的もあります。
ちなみにまったく同じことを、顧問先のサンローズさんでもやっています。
noindexとは？
Googleの検索エンジンにインデックスされないようにするため、htmlコードに記述するmetaタグ(meta要素)の値になります。
つまり、HTMLにnoindexを記述することで、どのようなキーワードで検索してもGoogleの検索結果にそのページが表示されなくなるのです。
マルハートさんもサンローズさんも同じく、Googleから検索してスマホでアクセス時のみ、スマホサイトが表示されます。
気になった方はぜひチェックしてみてください。
マルハート 楽天市場店 ( ※スマホ時のみスマホサイトを表示)
次は両社とも、PCサイトを大変身させちゃおうと思ってます。
いかがでしたでしょうか？
最近、大好きなカメラマンの友達に「DXは忙しい雰囲気が出ててダメよ！」って叱られたので、
全然忙しくありません！！ (笑)
なので、ぼちぼち商魂ゼミの本講座の開催準備に取り掛かりますので、こちらもお楽しみに！
スマホサイトを大変身させたい方は、ぜひ一度ご相談ください。
ではまた！
BECK 魅せるWeb
最新記事 by DX (全て見る)
- 3840pxについて考えてみよう - 2020年7月9日
- 【ダウンロード特典あり】CSSで素人感満載のテーブルレイアウトを超簡単に改善！ - 2020年6月24日
- シンプルに逃げてないか？ - 2020年5月7日
