サイトをリニューアルしました!WordPressを卒業してEmDashに引っ越した話

RONDOのサイトをリニューアルしました!

RONDOのサイトをリニューアルしました!

5年ぐらい前にショップを始めて以来、ウェブサイトを変えることなく来ましたが、ここらでいっちょ見直そうと、外観だけでなく、サイト構造もまるごと入れ替えました。

見た目は白ベースだったサイトが、黒ベースの落ち着いたイメージになりました。パーティーが終わって照明が落ちたあとのDJブースでVUメーターだけがぼんやり光っている、そんな空気感です。いや、きっと違う。

今回は、ボツになったデザイン案も含め、リニューアルの舞台裏をお話しします。

そもそも、なぜリニューアル?

WordPress 時代の RONDO のトップページ
以前のRONDOのウェブサイト

これまでのRONDOのサイトは、WordPressで作られていました。

WordPressは世界中で使われているウェブサイト制作の定番で、長年お世話になりました。

ただ、レンタルショップとして機能を足していくうちに、プラグイン(追加の部品)がどんどん増えていきました。

ネットショップの仕組み、レンタルの予約、カード決済、申し込み画面の項目、納品書の印刷、日本向けの設定、セキュリティ対策、お問い合わせフォーム、表示の高速化……。数えてみたら10個以上。

ロータリーミキサーに例えるなら、ミキサー本体の後ろに、外付けのアイソレーター、EQのあとに、エフェクター、エフェクター、エフェクター、エフェクター、エフェクタァ….のように、ずらっと数珠つなぎになっている状態です。

ひとつひとつは良いパーツでも、どこかひとつの調子が悪くなると、全体に不具合が出てしまう。しかも、それぞれのパーツが頻繁に「アップデートしてください」と更新を迫ってくるわけです。

とはいえ、いちばんの理由はセキュリティ面です。お客さんの大切な情報をお預かりする以上、時代と共にアップデートし、守るべき門はできるだけ強固にしておきたい。そこで、思い切って仕組みごと入れ替えることにしました。

WordPressを離れて、EmDashを選んだ理由

引っ越し先に選んだのは、「EmDash(エムダッシュ)」という新しいCMS(サイトを作って更新するための仕組み)です。

簡単に言うと、WordPressの考え方を引き継ぎながら、今どきの仕組みで一から作り直されたCMSだそうです。記事や固定ページの書き方はWordPressとよく似ていて、WordPressからの引っ越しにも対応しています。

選んだ理由は、大きく3つあります。

1. 潜在リスクが減る

EmDashはCloudflareの上で動きます。サイトを動かすためのサーバーを自分で抱えず、WordPressのように設計者の違うプラグインをいくつも組み合わせる必要もありません。プラグインが増えれば増えるほど潜在的リスクは増えていきます。

決済サービスはStripeを引き続き導入することで、RONDOのサーバーにカード番号が保存されることがなく安全です。

2. 速い

ページは利用者にいちばん近いCloudflareのデータセンターから届くので、リニューアル後のページは、ほとんどが以前よりも速く表示されるようになった気がします。

3. 更新が楽

部品を最小限にしたことで、プラグインの数だけあったアップデートの通知も気にしなくて良くなりました。プラグイン更新したらバグった、なんてことは今までに幾度もありました。

ボツになったデザイン案たち

デザインは3つの中から並べて比べました。

A案「スタジオ風」

ボツになったデザイン A 案「スタジオ」。明るい地に丸い角

明るい背景に、たっぷりの余白と角の丸いボタン。いわゆる「今どきのおしゃれなサイト」ですね。

清潔感は満点ですが、前回のデザインと近い部分もあって、せっかくリニューアルするならもう少し違うものにしたいという気持ちがありました。

B案「ハイファイ風」

ボツになったデザイン C 案「ハイファイ」。仕様書のような線と等幅の文字

細い罫線と等幅の文字、すべての機種に「MODEL 01 / 06」のような型番があって、オーディオ機器の取扱説明書のような世界観です。

これも良いなとは思いました。

ただ、眺めているうちに「安牌すぎない?」とティンカーベルが耳元で囁いてきました。

ロータリーミキサーはもっとわくわくしながら選んでほしい。ということで、こちらもボツになりました。

C案「アフターアワーズ風」

採用したデザイン B 案「アフターアワーズ」。黒い地にアンバーの文字

黒に近い背景に、差し色はアンバー1色だけ。

このアンバーは、VUメーターの針のうしろで光っている色のイメージらしいです。

ロータリーミキサーがいちばんかっこよく見えるのは、薄暗いブースの中でVUメーターがぼんやり光っているとき。というわけでC案に決まりました。

日本っぽくないアメコミのような世界観がイイじゃありませんか。

完成したサイト

リニューアル後の RONDO のトップページ
リニューアルした完成版

少し手を加えて完成したのが、今ご覧いただいているこのサイトです。

テキスト内容自体は旧サイトからほとんど変えていません。内容を変えてしまうと、Google検索したときの順位が大きく変動してしまうこともあるので、そっとしておきました。触らぬ神に祟りなしです。

データベース、なぜかシンガポールに上陸事件

順調にサイトの切り替えが進み、このまま何事もなく完了するかと思いきや、そう甘くはありませんでした。

新しいサイトに切り替えた翌朝のこと。サイトを触っていて、なんだか重いな…と感じました。

調べてみると、サイトの情報を格納しておくデータベースが、なぜかシンガポールに作られていました。

ショップは東京にあるのに、商品だけシンガポールの倉庫に置いてあって、都度、国際電話で在庫確認していたようなものです。そりゃ効率が悪い。1ページの表示に長いときで1.5秒ほどかかっていました。

Cloudflare自体が世界規模のサービスなので、こういうこともあるみたいですね。すぐさま東京のデータベースに移し替えて事なきを得ました。

新しくなったところ

見た目以外にも、アップデートして使い勝手が良くなったり、セキュリティが強化されたところがあります。

  • パスキーでログイン:指紋や顔認証で、パスワードを入れずにログインできます。
  • ログイン時の確認コード:パスワードでのログインは二段階認証になりました。
  • Apple Pay・Google Payに対応:スマホからカード番号を入力せずにお支払いできます。
  • 記事が読みやすく:文字の大きさや行間、画像まわりの余白を整えました。

ご利用のみなさまへ大切なお知らせ

セキュリティを強化するため、リニューアルにあわせて、以前のサイトで設定されたパスワードはすべて無効にしました。

ログインの際は、ログイン画面の「パスワードをお忘れですか?」から、ご登録のメールアドレスでパスワードを再設定してください。お手数をおかけしますが、よろしくお願いいたします。

おわりに

サイトの見た目は真っ黒になりましたが、中身はこれまでどおり、純白のロータリーミキサーを全国へお届けします。

もし表示がおかしいところや、使いにくいところを見つけたら、お問い合わせフォームから気軽に教えてください。

それでは、またお会いしましょう。

機種の一覧はこちらからどうぞ。