IT EVANGELIST.NET ロゴ

クライアントの課題をITで解決する

構築事例:Glam.jp

2014年9月26日にグラムメディア・ジャパン株式会社からモードメディア・ジャパン株式会社に社名を変更したモードメディアが運営する、世界最大級の女性向けオンライン・メディア、米国Glam.com(www.glam.com)の日本版のリニューアルを行いました。

Glam.jp トップ

  • クライアント:モードメディア・ジャパン株式会社
  • Webサイト名:Glam.jp
  • 公開日:2014年09月17日
  • URL:http://www.glam.jp/
  • 対応端末:PC、スマートフォン

与件

Webサイトのデザインを一新したいということで、株式会社ラナデザインアソシエイツ、RANA007でリニューアルを提案。

既存システムがWordPressで構築されていたため、引き続きCMSはWordPressでの構築となりましたが、旧Webサイトはエリア別にカスタムフィールドが多用され複雑なインターフェースを取っている上、レイアウトやデザインの自由度が低かった為、それに対応できるようにカスタマイズする事が要求されました。

また、各カテゴリーがサブドメイン毎のURLに分かれていた物もカテゴリーに一本化することとなりました。

さらに、スマートフォンでのアクセスを想定した、ユーザービリティとファッション性を両立できる形でのインターフェースデザインも必須となりました。

ソリューション

デザインについてはRANA007が担当し、黒をベースとしたスタイリッシュなデザインに仕上げ、モード感やクール感を訴求したファッション性の高いサイトとなりました。

PCではブラウザの画面サイズを変える事で、トップページや各カテゴリートップにおいては、各投稿の2列と3列表示が動的に切り替わるようになっています。

また、PCとスマートフォンでテーマを分ける事で、スマートフォンに置いてもブランドイメージを損なわないデザインを実現いたしました。

投稿管理機能

WordPressの問題点として、デザイン性の高いページにしようとすると、「ビジュアルモード」があまり使い物にならず、HTMLを毎回直接記述する必要があることが挙げられます。

今回は、これを回避するために「AddQuicktag」というPluginの導入を行い、PCとスマートフォンで実現したいデザインパターンを予め必要数用意し、そのデザインパターンに対応するボタンを管理画面に追加しました。

これにより、投稿画面では実現したいデザインパターンを選んでボタンを押すだけで、高いデザイン性を維持しながらスマホにも対応したページを誰でも簡単に作成できるようにしました。

また、女性向けオンライン・メディアというWebサイトの性格上、表示される画像については、投稿者の望んだ物が望んだ場所に表示されることが大変重要です。

そのため、投稿された画像がトップページの上部に大きく表示されるアリーナ画像への対応や、サムネイル表示画像の選択、投稿一覧、RECOMMEND、RELATED ARTICLEで最適なサイズ・形で表示されるようにシステム側で自動で画像サイズ調整を行う、特定のページにおいては、スマートフォンでアクセスしてもPC用のページを表示する等、各種カスタマイズを行っております。

コンテンツ閲覧機能

トップページでは、各コンテンツへの訴求と個別コンテンツへの流入を行う為に、上部にあるアリーナ画像、各投稿コンテンツ、レコメンドにおいて写真による訴求が行われるように大きく画像が表示され、各カテゴリーページにおいても同様のレイアウトを実現しています。

また、jQuery masonryと無限スクロール対応により、ブラウザサイズを変更すると2列と3列表示が動的に並べ替え、下にスクロールをする度に記事を読み込み続けるという動作を行うようにしております。

PCとスマートフォンの切り分けについては、Pluginの「Multi Device Switcher」をカスタマイズすることで、PCとスマートフォンで違うテーマを吐き出すだけでなく、管理者が望む形でPCとスマホの表示が実現するように対応しております。

ページ詳細

Glam.JP トップページ
Glam.JP トップページ

Glam.JP カテゴリートップ
Glam.JP カテゴリートップ

Glam.JP EDITOR'S ROOM
Glam.JP EDITOR’S ROOM

Glam.JP PRESENT & INFO
Glam.JP PRESENT & INFO

Glam.JP デザインパターン1
Glam.JP デザインパターン1

Glam.JP デザインパターン2
Glam.JP デザインパターン2

Glam.JP デザインパターン3
Glam.JP デザインパターン3

Glam.JP スマートフォン
Glam.JP スマートフォン

mautic is open source marketing automation