コニカミノルタ株式会社 販社向け情報サイト

概要

コニカミノルタ株式会社様は、複合機、プリンター、ヘルスケア用機器、産業用・医用計測機器、電子材料、照明光源パネル、機能性フィルム、光学デバイスなどの開発・製造・販売などをされている企業です。 国内・海外の販社に向けた情報共有サイトを所持されており、より使いやすいサイトにするために Drupal を使ってリニューアルされたいとのご依頼をいただき、弊社にて構築させていただきました。

目的

これまでコニカミノルタ株式会社様では、独自開発された CMS に加え、一部の機能を Movable Type をカスタマイズしたものをご利用されておりましたが、より使いやすいサイトに改善すべく今回リニューアルをされることとなりました。リニューアルにあたり新システムを検討されたところ、Drupalであれば比較的安価に実現できるということを担当者様がご存知であったため、本案件のご相談をいただきました。 今回の改修の主な目的は下記の通りです。

  • 操作性の向上
  • ユーザーインターフェースの改善
  • ユーザーのアクセス権限に応じたメニュー等の表示項目の制限
  • 日本語ページと英語ページの同時管理
  • 不要コンテンツの整理
  • システム改修にかかるコスト削減
  • 新機能の追加

デザイン

一般非公開サイトのため今回はログイン後のページデザインのご紹介は控えさせていただきますが、主に以下の点に配慮しながらデザイン制作を行いました。

デザインガイドラインへの準拠

デザイン開始前にコニカミノルタ様がお持ちのデザインガイドラインを共有いただき、基本的にはその内容に則ったかたちで制作させていただきました。
コニカミノルタ様のコーポレートカラーであるコニカミノルタブルーを基調に、レイアウトやメニュー幅等もできる限りデザインガイドラインに則っています。今回は社内向けの情報共有サイトということで、一般ユーザーが利用されることはありませんが、ガイドラインに準拠しブランドイメージ統一に配慮することで、利用される社員の皆様にとっても違和感なく、より快適にご利用いただけるのではないかと思います。

ログインページデザインについて

すっきりとしたシンプルで分かりやすいモダンな印象のログイン画面に仕上げました。
背景画像に使用した空のイメージは、コニカミノルタ様の掲げられているコミュニケーションメッセージ(スローガン)「Giving Shape to Ideas」のコンセプト映像の雰囲気を踏襲しています。「質の高い社会の実現に向けて、皆さまの想い一つひとつを、私たちならではのアイデアと実現力でカタチにしていきたい」というコニカミノルタ様の企業姿勢を、サイトにログインする度に利用者の皆様に思い出していただきたいという想いを込めて制作させていただきました。

コンテンツページデザインについて

コンテンツ掲載ページについては、どなたにも快適にサイトをご利用いただけるようシンプル且つ情報伝達力の高いUI設計を心がけて制作しました。
今回の改修の大きな目的の一つとして「コンテンツの場所をわかりやすくする」「コンテンツへ到達しやすくする」という2つをあげていただいておりましたので、特にグローバルナビゲーションやプルダウンメニューの見せ方には何度も修正案をご提案しながら慎重に検討を重ね、より見やすく分かりやすいグローバルナビゲーションのデザインを追求いたしました。

メイン機能

フロントエンド

CSS プリプロセッサーの Compass を利用することで効率よくフロントエンドの開発をすることができました。 CSS スプライト機能も活用し、サーバーへのリクエスト回数を減らすことでページの表示速度の向上も果たしております。

独自システム + Movable Type からのマイグレーション

PDFとHTMLコンテンツが混在した構成となってるため、同じコンテンツタイプでありながらも通常の HTML 表示に加え、 PDF コンテンツ専用の表示方法を考える必要がありました。コンテンツの一覧ページなどは Views モジュールを使って実装していますが、標準の機能ではコンテンツの内容に応じてリンクを切り替えることができないため、値が空だった場合などの条件式を上手く利用して要件を満たしております。

コンテンツは11種類のタイプがあり、日英合せてコンテンツ数が2,000ページ以上存在します。手動でのインポート作業はかなりの時間を要しますので、インポート専用のスクリプトを開発しマイグレーション作業を行いました。

コンテンツタイプごとに保持するフィールドがかなり異なるため、フィールドへのマッピングやページに添付されたデータの移行にやや苦労しましたが、データ構造を綿密に分析したことで Drupal にふさわしい形で無事にインポート作業を終えています。

また同時に、1,500人以上のユーザーデータもインポートしましたが、検収期間中にユーザーデータを使ったテスト行う必要がありましたので、サイトの新旧切り替えのタイミングで最新のもので上書きできるように開発し対応しました。

コンテンツのアクセス制限

ユーザーごとに設定された権限レベルに応じて、コンテンツ自体のアクセス制限や表示するメニューの制限を行っております。また、各種コンテンツタイプごとに設定されているカテゴリに応じて閲覧を制限する必要もありましたので Taxonomy Access Control モジュールを利用して制御しています。

ニュースレター

登録されているユーザーに対し、サイト上からニュースレターを送信できるようにする必要がありました。

Simplenews モジュールを利用して実装しましたが、このモジュールだけでカバーできなかった機能要件は専用のカスタムモジュールで補助する形をとって実装することができました。

メールの内容を都度変更されたいとのご要望がありましたので、 Token モジュールを利用して本文の内容を自由に変更できるよう実装しています。

多言語対応

海外の販社スタッフの方も多数利用されているため、日本語と英語の両方のインターフェイスに対応し、全てのコンテンツが両言語に対応できるようにしております。

Internatinalization (i18n) モジュールにインターフェイスのローカライゼーションを行いましたが、対応しきれなかった部分についてはコアを汚さないように専用のカスタムモジュールにて対応しています。

PDF テキスト検索

Drupal コアの検索モジュールで PDF の内容を検索をできるようにする機能を構築しました。既存のモジュールで Apache Tika を利用して添付ファイルのテキストを検索できるモジュールが存在しましたが、検索結果の表示が要件と合わず、また検索速度の問題がありましたので、同モジュールを模範としたカスタムモジュールを開発して実装しました。

アクセスランキング

サイト内の PDF コンテンツのダウンロード数と HTML コンテンツの閲覧数の両方を合算して集計し、なおかつユーザーの権限に応じて表示する内容を制御する機能です。

また、ニュースレターにもユーザーのアクセス権限に応じたアクセスランキングを埋め込む必要があったため、 Token モジュールをサポートしてニュースレター内の任意の位置へアクセスランキングを挿入できるようにしました。

結果

全体的に Drupal の特性を非常によく生かすことができるプロジェクトでした。 Drupal のスタンダードには全て準拠し、コアや寄与モジュールのソースコードを一切汚さずに構築することができましたので、開発者側としましては非常に満足のいく仕上がりとなりました。追加改修のご検討いただいておりますので、今後進展があれば記事を更新いたします。