企業サイトを作成していると、よくあるのが「商品(製品)一覧」と「商品(製品)詳細」ページの作成。
多くの商品を取り扱っているお客様だと、よくあります。
最近はECサイトも多いので、そう言った案件は昔よりずっと多いのではないでしょうか。
楽天やアマゾンのように、シンプルで定番化したものも良いですが、もう少しだけ工夫出来ないかなぁと色々巡っていて、参考になりそう!面白い!と思ったキャプチャをちょっと紹介してみます。
国外のものは、http://cartfrenzy.com/とか、こちらの記事とかで沢山見れるので、国内の物に限定しておきます。趣味がちょっと偏ってますけど。
FELISSIMO フェリシモ
![110407_1-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_1-list.jpg)
![110407_1-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_1-detail.jpg)
商品一覧の上部分のキーワード。これをクリックすると、このキーワードで検索出来る、という面白い仕組み
無印良品 ネットストア
![110407_2-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_2-list.jpg)
![110407_2-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_2-detail.jpg)
ザ、シンプル&ベーシック。
印デザイン オンラインストア
![110407_3-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_3-list.jpg)
![110407_3-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_3-detail.jpg)
クールできれい。海外サイトっぽく見えますが、国内サイトです。
郵便局のポスタルグッズ
![110407_4-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_4-list.jpg)
![110407_4-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_4-detail.jpg)
あまり見ない、1カラムで綺麗に商品を見せているデザイン。あったかい感じが可愛い。
株式会社エンジェルハート
![110407_5-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_5-list.jpg)
![110407_5-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_5-detail.jpg)
一覧に香りに関するキーワード。詳細には商品用のロゴと、香りのステータスがしっかり明記。
MAJOLICA MAJORCA|資生堂
![110407_6-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_6-list.jpg)
![110407_6-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_6-detail.jpg)
Flashのサイトですが、このブランドらしい見せ方。化粧品棚の商品クリックで見る事が出来ます。
Victorian maiden
![110407_7-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_7-list.jpg)
![110407_7-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_7-detail.jpg)
商品一覧で在庫状況なども明記。詳細ページは各カラーの写真や、柄のアップなど、大きいサイズのままで並んでいます。拡大のためにクリックする手間がないです。
4℃ジュエリー
![110407_8-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_8-list.jpg)
![110407_8-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_8-detail.jpg)
写真だけ並んでるようで、マウスオーバーすると商品名と価格、写真も少しだけアップになります。こちらも1カラムデザイン。
ベルギーワッフル マネケン ショッピングサイト
![110407_9-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_9-list.jpg)
![110407_9-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_9-detail.jpg)
一覧の1項目に色んな工夫があって、すごく可愛い。
100%チョコレートカフェ|株式会社 明治
![110407_10-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_10-list.jpg)
上部の一覧をクリックすると、下にある各詳細にアンカーリンクする、あまり見ないタイプ。
(ヘッダーのメニューとコンテンツの間に震災に関する文章がありますが、ちょっと長くなってしまったので、削除させていただきました。ごめんなさい)
株式会社湖池屋
![110407_11-list](https://memo.ark-under.net/wp/wp-content/uploads/110407_11-list.jpg)
![110407_11-detail](https://memo.ark-under.net/wp/wp-content/uploads/110407_11-detail.jpg)
各商品詳細へのリンクが、カテゴリーボタンの中に隠れているタイプ。詳細ページはカテゴリーで1ページになってて、ちょっと不思議な作り方。
こんな感じで、数は少ないですけども。
何か面白い工夫の参考になれば幸いです。
普段はまとめられた記事を見てる側なんですが、探すのってなかなか大変な物ですね。デザインのまとめ記事をアップしてる方々すげー。
海外サイトのデザインはとても素敵だけど、日本語でやろうとすると、ちょっと違うなぁって思うときがあるんですよね。
日本らしいデザインって、どんなのかなぁ?ということに興味が湧いているこの頃です。@・ェ・@