東京都墨田区のフットマーク株式会社様の競泳用水着ブランド「Jaked（ジャケッド）」の商品ブランドホームページを制作致しました。ご紹介させて頂きます。

---

トップページのご紹介

ヘッダーは、ロゴマークのみをシンプルに表示。今回、ブランドサイトなので、購入者向けの連絡先は、ショップリスト内の取扱い店舗としてご紹介しています。

Jakedというブランド内にも複数の商品ラインがあるため、サブメニューとして、マウスを乗せると下層ページへのリンクメニューを表示するようにしています。

スマホ時は、色を変えて、サブメニューも展開して表示されます。

メインイメージは、スライドショーで４枚を自動で切り替えて表示します。→で手動で切り替えることも可能です。今回、もとの画像はお客様よりサイズをあわせてご提供いただきました。シーズンが変わった時にカタログなどを再作成したりすると、写真も変わる場合がありますが、同じサイズでご用意頂くことで、画像の変更もお好きな時に自由に変更いただけます。

インスタグラムを利用する、とのことでしたので、インスタグラムに掲載した画像を、自動で表示させるようにしています。画像のサイズは、全体のデザインに合わせて調整しています。

主なコンテンツへのリンクバナーです。

マウスを載せると、動きがあり、クリックのきっかけとなります。

アウトレット品は、別扱いとして、バナーを用意しています。今後バナーが増える可能性があるとのことで、バナーエリアとしての役割もあります。

更新情報は少なめになりそう、とのことでしたが、お知らせとしての一覧表示機能を標準でご用意しております。

フッターには、運営会社名、SNSへのリンクアイコン、PDF版のカタログへのリンク、などをまとめています。

 

商品紹介ページ

複数ある商品ライン別に、個別の紹介ページを用意しています。その中の一つ「J−KATNA」のページで、下層ページをご説明します。

今回、ページ内のデザインはお客様よりご提供頂いています。事前にある程度のレイアウトをご相談した上で、イラストレータでのデータをご提供いただきました。データをもとに、画像化、テキスト化、として各部分を分けながらのコーディングを実施。合わせて、スマホ時のレスポンシブ対応を考慮して、縦に並び替わるようなボックスのレイアウトを行っています。

---

下層ページの前半部分は、あまり変更がない前提で、個別のコーディングを実施しています。一方で、ページ後半にある商品一覧は、WordPressの機能を活かして、商品の入れ替わり時には、お客様でも更新が実施できるような仕組みを構築しています。

今回は、商品画像をクリックしたら、運営されているネットショップの指定ページを表示したい、というご要望でした。WordPressでは、カスタム投稿として「商品」を追加しました。カスタム投稿の記事として、１商品毎に、タイトル、概要文、リンク先、サムネイル画像を登録します。

商品ブランドが複数ありますので、カテゴリーとしてどの商品ブランドページに表示させるかを選択します。これで公開すると、選択したカテゴリのブランド紹介ページの後半に、一覧表示として、登録した商品が表示され、ネットショップへのリンクも自動で設定されます。順番を変えたい場合は、ドラッグ＆ドロップで変更可能です。

同様の仕組みで、アクセサリーやアパレルの一覧ページも自動で作成しています。

こちらは、アパレルの一覧ページです。スマホで見た時の表示は、自動でこんな感じに切り替わります。

 

ショップリスト

店舗で購入されたいお客様向けに、正規取扱い店の一覧ページを用意しています。

今回、店舗数が多かったため、都道府県別に分類して、クリックすると中身が開く、という動作でページを制作いたしました。

このページは、更新頻度がそれほど多くはない、ということでしたので、各都道府県別の店舗データをexcelでご用意いただき、開閉の仕組みは、こちらでコーディングを実施して組み込んでいます。

スマホで見ると、表組み表示からリスト表示に変更して、縦に並ぶことで見やすいようにレスポンシブ対応の仕組みを実現しています。

お問い合わせフォーム

ネットショップや商品取扱い店舗での購入となるため、お問い合わせフォーム自体の利用は、少なくなりますが、SSL対応のフォームをご用意しております。

ブランド名検索での検索結果への表示

ブランドサイトは、基本はブランド名で検索されたときに上位に表示させたい、というご要望が多くなります。

今回は、「jaked」と検索されたときに表示する、ことを目指して、基本となるSEO対策を実施しました。結果、現在は１位に表示される様になりました。

 

WordPressの活用と保守

多くの商品点数を扱うブランドサイトですが、WordPressのカスタム投稿機能と一覧表示をうまく使うことで、分かりやすく、ブランドの魅力も伝わるホームページとなりました。

全ページ常時SSL化、レスポンシブ対応で、スマホ対応も実施されています

WordPressを利用時のセキュリティ対策として定期的なバージョンアップと、いざという時のためのバックアップを取りながら、保守サポートも実施させてもらっております。

---

ご依頼ありがとうございます。