キュレーションマガジン「Glam.jp」リニューアル

クライアント：モードメディア・ジャパン株式会社
Webサイト名：Glam.jp

経営課題

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

デザイン・リニューアルの問題

アメリカと同一のシステムということで、WordPressを使ったシステムとデザインが採用されていたが、Webサイトのデザインを一新したいということで、リニューアルとなりました。

WordPressの自由度の問題

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

カテゴリーの構成とスマートフォン対応

また、各カテゴリーがサブドメイン毎のURLに分かれており、複雑な構成となってしまっていました。

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

経営課題の解決方法

デザインの課題解決

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

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

また、PCとスマートフォンで最適なテーマを適用するようにすることで、スマートフォンに置いてもブランドイメージを損なわないデザインを実現いたしました。

システムでの課題解決

WordPressについては、まず各カテゴリーがサブドメイン毎のURLに分かれていたものを、カテゴリーに一本化することで、シンプルな構成へと変更しました。

また、WordPressを利用するメリットであるPluginを活用することで、入力のや閲覧の課題に対応し、大規模アクセスや大量にあるページの生成などは、カスタマイズやチューニングを行う事で解決しました。

プロジェクトの実施

投稿管理機能の拡充

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

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

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

メディア向け独自機能の実装

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

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