シロネさんのサイトは、Amazonや大手アパレルのように「検索して商品を探すサイト」というより、ブランドを好きなコアなファンの方が訪れて購入されるサイトだと考えています。
そのため、単に商品情報を並べるだけではなく、「このサイトで接客されているような感覚」になることが大切だと思いました。
例えば通販サイトでは、商品単体の写真が中心になることが多いですが、場合によっては商品そのものよりも、「着こなしや雰囲気の方が重要になることもある」のではないかと感じています。
実際の店舗でも、目的のあるものを買いに行ったときに、店員さんが着ているコーディネートを見て「それが欲しい」と思うことがあります。
そのような「リアル店舗での体験に近い感覚を、通販でも表現できると良いのではないか」と考えました。
そのため、商品ページを開いたときに最初に表示される画像は、商品情報としての写真だけではなく、「かっこいい」と感じてもらえるようなイメージ写真を見せることが、第一印象としてとても大切になるのではないかと思っています。
この仕組みはWordPressで作成しています。
前回の打ち合わせの際にご説明した「カラーミーAPIの利用について」ですが、今回は使用しない方針に変更しました。
理由としては、「WordPress側でカラーミーの商品ページ用のHTMLを作成できる仕組み」を構築できたためです。
この方法により、カラーミー側から画像などのデータをAPIで取得する必要がなくなりました。
運用としては、カラーミーの商品ページには「メイン画像を1枚のみ登録」し、商品説明や追加画像などのその他のコンテンツは「WordPressで作成したHTML」を使用して掲載する形になります。
この方法の一番のメリットは、「カラーミー側の容量をほとんど使用せずに運用できること」です。
画像などのデータは基本的にWordPress側のサーバーに配置するため、カラーミーには商品ごとにメイン画像1枚のみを登録する形になります。
そのほかにも、次のようなメリットがあります。
1.WordPress上でページデザインや構成を自由に作成できる
2.カラーミーAPIの仕様変更などの影響を受けない
3.商品ページの更新や修正をWordPress側で管理しやすくなる
4.HTMLを生成して貼り付けるだけのため、運用がシンプルになる
結果として、「カラーミーは販売機能として利用し、ページ制作やコンテンツ管理はWordPress側で行う」という役割分担の形になります。
また、管理画面と表示されているページを見比べると、「上から順に内容を入力していくことで、どの部分に表示されるのかがおおよそ分かる構造」になっています。
通常は、このようなテキストエリアにHTMLを自分で記述してページを作成する形になります。
ただ、この方法だとタグを間違って消してしまったり、少し編集を誤っただけでもレイアウトが崩れてしまうことがあります。
上記の懸念を払拭するために、今回は「HTMLタグを自動で出力し、そのままコピー＆ペーストして使える形」で作成しています。
手作業で入力したり、都度調整したりする必要がないため、運用時のミスも起こりにくくなると考えています。
商品作成用の投稿を保存すると「コピー」ボタンが表示されるようになっており、そのボタンから生成されたHTMLをそのままカラーミーのテキストエリアに貼り付ける形です。
そのため、更新作業もできるだけ分かりやすく、間違いの起きにくい運用にできるようにしています。
テキストについても、これまでのように文章として書く形でも良いと思いますし、読みやすさを考えて「見出し」で区切って構成する方法も良いのではないかと思いました。文章だけで説明するよりも、内容ごとに見出しを付けて整理することで、お客さまも情報を把握しやすくなるのではないかと思います。
ただここは好みなので、両方使用して良いかと思います。
見出しを使って内容を整理する方法は、割と大手のサイトでもよく使われているため、それなりに効果があるのではないかと思っています。
また、文章を作る際には「ChatGPT」などを使って内容を整理してもらう方法もありますし、「カラーミーのAIテキスト補助」などの機能を利用するのも良いのではないかと思います。と使ったことはないですが、多分使えると思います。
これまではカラー違いなども、それぞれ別の商品として登録していたと思いますが、今後はどのように運用するかも一度相談できたらと思っています。カラーごとに商品を分けるのか、1つの商品ページの中でカラー展開として見せるのかによって、一覧ページの見せ方も変わってくると思います。もし1つの商品にまとめる形にすると、表示される商品数は少なくなると思いますので、そのあたりも含めて一度ご相談できればと思っています。
とにかく写真を自由に入れられるようになったので、キャプションなども利用すれば、より「接客しているようなサイト」に近づくのではないかと思います。
写真はWordPressのサーバーに入れる形になるため、細かな写真も自由に追加できますし、上に記載しているキャプションを使えば細かい説明も入れることができます。
そのため、写真はできるだけ多い方が良いのではないかと思います。
お客さまはこのページの情報を見て購入を判断することになると思うので、判断材料は多いにこしたことはないのではないかと考えています。
キャプションも2通り入れるやり方を用意しています。
WPのギャラリーというので入れる方法と、縦横サイズ違いでもツラを合わせる方法の2種類を用意しています。
画像を多く入れれるので、スマホになった時のことを想定するとだいぶ縦長になるので、カートボタンを2つ設置しています。
カラーミーでは、デフォルトではカートボタンを2つ設置できなくて、これが結構大変でした。（汗
無事動くようになったのですが、数量やオプションが2つあると連動しなかったりするのですが、全て動くようにしています。
あと、できてないですが、配送とかカードとかも画像などを作成した方が良い場合は作って常に表示させます。
※まだ作成中のところ
カラーミーに関しては、ちょっと触らないと意味が分からないところが多いので、説明は簡単にしています。すいません。
一覧ページもできてなかったりしますが、ここは他のところが決まってからになるのでちょっとお待ちください。
とはいえ、よくある商品が3列または4列、商品数によって2列並ぶような感じだと思います。
こんな感じで。あとは表示するもの、料金もしかりです。
あとは一覧の画像をどうするか？
正方形？長方形？私自身は正方形がよいかな？とも思いますが、それがPC、スマホどちらでも見やすいかなと思っていますが、長方形と商品数の数が多くてもそんなに間伸びはしないです。
参考URL
https://shop.ordinary-fits.online
今回利用するギャラリーはどこでも利用できます。
https://kanegaetakanori.com/ktwdplus/wp-content/themes/twentythirteen-plus/img/sirone-ca.mov
確認URL
https://g2kvpl0bjm.shop-pro.jp/?pid=190674910
https://g2kvpl0bjm.shop-pro.jp/?pid=190835922
https://g2kvpl0bjm.shop-pro.jp/?pid=190835921
https://g2kvpl0bjm.shop-pro.jp/?pid=190824440
https://g2kvpl0bjm.shop-pro.jp/?pid=190824411
https://g2kvpl0bjm.shop-pro.jp/?pid=190824249
※不具合確認のためにあえて変な入れ方してたりもします。（ご了承ください）