Drupal 7

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

概要

コニカミノルタ株式会社様は、複合機、プリンター、ヘルスケア用機器、産業用・医用計測機器、電子材料、照明光源パネル、機能性フィルム、光学デバイスなどの開発・製造・販売などをされている企業です。 国内・海外の販社に向けた情報共有サイトを所持されており、より使いやすいサイトにするために 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 のスタンダードには全て準拠し、コアや寄与モジュールのソースコードを一切汚さずに構築することができましたので、開発者側としましては非常に満足のいく仕上がりとなりました。追加改修のご検討いただいておりますので、今後進展があれば記事を更新いたします。

大津赤十字病院サイト + 大津赤十字志賀病院サイト

概要

滋賀県大津市にある大津赤十字病院様と大津赤十字志賀病院様のWebサイトリニューアルを担当させていただきました。 大津赤十字病院様は高度救命救急センターやがん診療連携拠点病院、基幹災害拠点病院など地域の医療拠点としても様々な重要な役割を担われている総合病院です。 また、大津赤十字志賀病院様は大津市の湖西方面 和爾町に位置する総合病院で、雄大な琵琶湖と比良の山々が連なる美しい景観に抱かれた豊かな自然環境の中、大津赤十字病院様との連携をとりながら地域の皆様に充実した医療をご提供されています。

数百ページを超える大量のコンテンツをこれまではHTMLベースで長期運用されていましたが、今回のリニューアルをきっかけにCMSを導入し更新・管理コストの削減を図りたい、またデザインも一新されたいということで、入札の結果弊社にお任せいただくこととなりました。

目的

今回のリニューアルにあたって、重要視されていたのは以下のようなポイントです。

  1. 近隣病院との差別化だけでなく、地域の中核病院として、患者さんやその家族、医療関係者等にとってより分かりやすいホームページとする
  2. 掲載情報を見直し、アクセシビリティ・ユーザビリティに配慮する
  3. 情報発信力の高いホームページにし、診療科・人間ドック・採用情報などの情報を容易に更新・編集できるホームページとする

デザイン

大津赤十字病院と大津赤十字志賀病院サイトでWebサイトのデザインを統一することで、関連病院であることを分かりやすく印象付けています。一方で、それぞれの病院の個性も反映できるようホームページの第一印象となるメインイメージのスライドや色合いで差別化を図りました。

コンセプトキーワードは「信頼感・清潔感」

地域の拠点病院として重役を担う大津赤十字病院様にふさわしいデザインのご提案を行うため、「信頼感」と「清潔感」をキーワードにデザインの制作を行いました。 シンプルな画面構成やアイコンの活用などにより、どなたにも分かりやすく使いやすい画面構成を心がけています。また、メインビジュアルやキャッチコピーでは、患者さまと病院との心のふれあいをイメージしたデザインを行うことで、大津赤十字病院様の理念である「患者さまの人権と意思を尊重する医療」が伝わる表現を目指しました。

スマートフォンでも見やすいレスポンシブWebデザインの採用

今回のリニューアルの要件として「レスポンシブWebデザインの採用」を挙げていただいておりましたので、スマートフォンやタブレットからも最適化した見やすいレイアウトでホームページを閲覧することができるようにしています。 各端末のサイズに応じて可変するレイアウトの実装はもちろんのこと、数あるページの中には単純に画像を縮小してしまうと可読性に欠けてしまうようなコンテンツもございましたので、一部のページではスマートフォン用に画像を調整するなどの配慮を行っています。

機能

Drupalのモジュールを利用したさまざまな機能を実装しています。これまでHTMLで手動で更新を行なっていた作業も簡単にブラウザ上から行っていただくことができるようになり、管理コストの削減に貢献できました。

お知らせ

お知らせの内容をカテゴリごとに投稿できる機能です。カテゴリー指定の色による分類分けや、PDFや外部リンクのみの投稿も可能な機能をお作りしています。 Views モジュール、 Quick tab モジュール、 Taxonomy モジュールを使用して作成しました。

休診のお知らせ

日付と診療科、医師名などを入力することで休診のお知らせ一覧と、各診療科の外来担当医表の休診のお知らせ欄に自動的に表示されます。 過去のお知らせは利用者にとって不要なので当日以降のお知らせだけが表示される形でお作りしています。

診療科・部門紹介

診療・スタッフ・外来担当医表などについて編集・追加ができる機能です。 特定の入力欄にコンテンツを入力するだけで自動的にタブ分けして表示されるようになっており、見やすくなるように工夫を加えています。 また、更新した外来担当医表は全診療科の外来担当医表にも自動で表示されます。 コンテンツ編集者が編集を行いやすいように、編集時のフィールドの表示方法にも一部手を加えております。Drupal のコントリビュートモジュールだけでは対応できないようなこともカスタムモジュールを作成すればカスタマイズすることができます。

人間ドック予約状況

カレンダー1ヶ月分ごとに1日か2日の人間ドック予約状況を登録できる機能です。 Drupal の「Node」と「Views」と「Calendar」のモジュールを組み合わせることによって、 簡単に予約状況のカレンダーを登録していただける機能を作成しております。

広報誌

大津赤十字病院様専用の広報誌のPDFを投稿し、自動でリンクされる機能です。 各広報誌の一覧ページでは Views モジュールのグループ化機能を使用することで広報誌のカテゴリごとに年別にセクションを区切ることで見やすく表示されます。

サブメニューブロックの自動化

PC などの画面幅の広い端末では左サイドに、スマートフォンなどの画面幅の狭い端末ではページ下部に表示されるサブメニューブロックは、メインメニューに登録しているサブメニューを自動で表示されるように作成しております。 Drupal の 「Menu block」 モジュールを活用し、カスタムモジュールで少し手を加えることでより使いやすい機能を構築しております。

大津赤十字看護専門学校サイト

概要

大津赤十字病院様のWebサイトリニューアルに合わせて、滋賀県大津市にある大津赤十字看護専門学校様のホームページのリニューアルも担当させていただきました。 大津赤十字看護専門学校様は滋賀県大津市に明治37年に誕生した歴史と伝統ある看護専門学校です。確かな技術力と温かい心を持った質の高いサポートができる看護のプロをこれまでにも多く育成されてきました。 今回はそんな素晴らしい学校の魅力がより伝わるWebサイトへと一新するため、病院サイトのリニューアルに合わせて弊社にリニューアルをご依頼いただきました。

また、学生達に情報をいち早く伝えられるよう、更新等運営管理をスムーズに行えるよう、CMS Drupalを用いたサイト制作を行いました。

目的

今回のリニューアルでは以下の内容を重点に置きながらリニューアル作業を行いました。

  1. 入学を検討している学生さんへの訴求力の向上
  2. 掲載情報を見直し、アクセシビリティ・ユーザビリティへの配慮
  3. 更新頻度の高いページの運用管理コストの低減

デザイン

コンセプトキーワードは「強い意思・赤十字病院様らしさ」

幅広い層のユーザーが訪れる病院サイトと比べると、学校サイトを閲覧するユーザー層は限定されています。いろいろな学校のサイトを見比べながら「どこへ入学したらよいだろう・・・」と迷われている学生さんやその保護者の皆様に、他でもない「赤十字」で学ぶことの魅力が十分に伝わるようなサイトデザインを意識して制作を行いました。

コンセプトキーワードを「強い意思・赤十字病院様らしさ」に据えたことにより、他の看護学校様のサイトではなかなか取り入れられにくい「赤」と「黒」をキーカラーに選び差別化をはかっています。 また、真剣な眼差しをした横顔の看護学生と「強い意思」を感じさせるキャッチコピー等、よりコンセプトを際立たせる表現に工夫しました。

このホームページを見た学生さんが大津赤十字看護専門学校様で学ぶことで「こんな自分になりたい!」と思っていただけるようなデザインを目指しました。

フロントエンド面での工夫

UXを向上するためフロントエンド面にも力を入れて制作させていただいています。Javascriptを用いたページ表示時のエフェクトの実装や、Chart.jsによる円グラフ表示など楽しく閲覧いただける工夫をしています。

機能

機能面では、Drupal の標準モジュールを更新しやすようにカスタマイズさせていただきました。 お客さまが全ページを編集できるようにという要件をお聞きしていたため、どの機能も機能ごとに更新しやすくなるような工夫を加えております。 以下は、一部ではございますがご紹介いたします。

オープンキャンパス/資料請求フォーム

オープンキャンパスや資料請求の申し込みを利用者の方がオンラインでできるウェブフォーム機能をお付けしました。 Drupal の高機能モジュールを利用することで、単にフォーム受付を行う機能だけでなく、送信内容を確認したり CSV で一括出力したりできるウェブフォームの管理機能を一式ご用意しています。

グラフ生成

卒業後の進路を動きを加えたグラフを制作させていただきました。お客様側で、数字を打ち込んでいただけたら自動でグラフの倍率が変更されます。

メインスライドショー

TOP ページの大きなスライドショーは Drupal の Views モジュール と Views Slideshow モジュールを使用して制作させていただきました。 画像、キャッチコピー、テキスト、リンクテキストとリンク先 URL のフィールドをそれぞれ作成し、Views モジュールで自動的に出力することでお客さまご自身の手で簡単にスライドショーの内容を変更していただけるようにお作りしております。

お知らせ投稿機能 + スライドショー

弊社標準の新着情報機能をお知らせ投稿機能として制作させていただきました。 TOPページにはスライドショーのお知らせ一覧ブロックを実装しており、カルーセルタイプのスライダー、スライドコントロール用のナビゲーション、フリックでの移動などの機能を持ちあわせております。

長浜赤十字病院 病院サイト + 看護部サイト

長浜赤十字病院様の病院サイトと看護部サイトのリニューアルを行いました。

概要

長浜赤十字病院様は滋賀県北部「長浜市」にある総合病院です。 湖北地域の中核病院として、地域医療支援、救命救急、講演会など地域の医療環境の向上に寄与するさまざまな活動を行われています。

HTML ベースの PC サイトとして長期運用している数百ページ規模のホームページをこの度リニューアルされたいとのことで入札の結果弊社にリニューアル作業をお任せいただきました。

目的

今回ホームページをリニューアルするにあたって特に以下のようなポイントを重視されたいとのことでした。

  1. 患者様、医療関係者様、就職希望者様からの視点で見やすく使いやすいホームページとする
  2. デザイン・レイアウトに工夫を凝らし内容をわかりやすくする
  3. 診療担当医表やお知らせ・職員募集など更新頻度の高い部分については容易に編集・更新できるようにする

また、昨今の Web 状況を考慮し、レスポンシブデザインの採用やサイト構造・コンテンツの整理などもご希望されていました。

他の事例と同様に Drupal 7 をベースとして構築させていただきました。

デザイン

長浜赤十字病院病院サイトは白・赤・グレーの3色を基調としたすっきりとした配色で赤十字病院様らしさと清潔感ある雰囲気を両立させました。また、アイコンを効果的に使用することでユーザーに分かりやすく使いやすいWebサイトを目指しています。

看護部サイトでは病院サイトよりも明るめの赤みがかったピンク色と爽やかなブルーの2色を基調に、研修医サイトではグリーンを基調とした配色で病院サイトとはまた違った表情を持たせています。

病院サイト、看護部サイト、研修医サイトでそれぞれ表情は異なりますが、全体的なレイアウトやパーツデザインは基本的に同じものを使用し、統一感あるデザインにまとめました。

機能

機能面では、数百ページのコンテンツを管理する運用者の方のユーザビリティや業務効率の改善を念頭にさまざまな機能をお付けさせていただきました。 その一部を以下にご紹介いたします。

  • お知らせ
  • 休診・診療変更のお知らせ
  • 外来担当医表
  • 募集要項
  • 病院広報誌
  • 見学/資料請求フォーム
  • 情報一括登録
  • サイト自動バックアップ

お知らせ

管理画面から投稿するとトップページに自動表示されるお知らせの機能です。 カテゴリー指定による色による分類、特定の日に自動で投稿する予約投稿などの機能をお付けしています。

休診・診療変更のお知らせ

休診・診療についての変更のお知らせを表示する機能です。 日付と診療科、内容を入力することで自動で一覧に表示されます。 過去のお知らせは利用者にとって不要なので当日以降のお知らせだけが表示される形でお作りしています。

外来担当医表

診療科ごとの診療担当医を示す「外来担当医表」の機能です。 あらかじめテーブル形式になった入力フォームに入力することで、運用担当者の方が直感的かつスムーズに情報を作成/更新することができます。

募集要項

こちらは採用情報の詳細を示す「募集要項」の機能です。 繰り返し利用する共通のパターンをフォーマット化することで、運用者の方がなるべくスムーズに情報を管理できることを重視してお作りしました。

病院広報誌

長浜赤十字病院様では従来より広報活動を積極的に行われており、さまざまな病院発行紙が存在しました。 それらの PDF を投稿するとグループごとに複数のページに分類され新しいもの順に表示される機能をお作りしました。

見学/資料請求フォーム

病院見学や資料請求の申し込みを利用者の方がオンラインでできるウェブフォーム機能をお付けしました。 Drupal の高機能モジュールを利用することで、単にフォーム受付を行う機能だけでなく、送信内容を確認したり CSV で一括出力したりできるウェブフォームの管理機能を一式ご用意しています。 ユーザビリティ向上のため、郵便番号を入力すると住所を自動で入力してくれる機能などもご要望をいただいてお付けしています。

情報一括登録

運用担当の方がコンテンツをたくさんまとめて登録したいときのために、 CSV による情報一括登録機能をお付けしています。 こちらも Drupal の高機能モジュールを活用することで、スピーディかつ安定性の高い形で機能を構築することができました。

コンテンツ移行

数百ページあった静的 HTML のページをリニューアル後サイトへ移行いたしました。 新たに設計したサイトマップをもとにまずは半自動的にページを登録していき、細かな部分は人的にマニュアルで移行いたしました。 移行の際には全ページ HTML タグの整理/書き直しを行い、サイトパフォーマンスや SEO の面を強く意識しました。

ケアひろば

人 + 地域 + 社会をつなぐ、コミュニティサイト「ケアひろば」のホームページ制作・システム構築を行いました。

概要

ケアひろばは「非営利団体と個人がつながる場」「地域のコミュニケーションツール」「セーフティネット」として株式会社ケアツール様が運営されている SNS サイトです。 非営利団体や個人の方が無料で登録・利用することができます。

デザインは、ユーザー層を考慮したスッキリとしたやさしいデザインで、さまざまな端末に対応したレスポンシブデザインでお作りしています。 機能面では、ベースは Drupal のコミュニティ機能を活用し、独自機能についてはカスタムモジュールを開発する形で構築を行いました。

※上記画像内コンテンツはサンプルコンテンツです。

デザイン

サイトデザイン

配色

クライアントからは最初に「シンプルですっきりしたデザイン」をご要望としていただいておりました。参考として挙げていただいたサイトも、白黒ベースの限りなくシンプルなデザインでしたが、今回のサイトの性質を考えると「暖かみ」や「賑やかさ」を感じさせるデザインが良いのでは…ということで、ご提案時には、当初のイメージ通りのすっきりとしたモノトーン系の配色でまとめたデザイン案の他、弊社からのご提案としてグリーン系を中心にまとめた明るく優しい雰囲気の配色パターンなど複数案ご提案させていただいた結果、こちらの優しい配色のサイトデザインに決定しました。

レスポンシブウェブデザインの採用

今回のサイトでは、ブラウザ幅によりレイアウトが変化するレスポンシブウェブデザインを採用しています。画面解像度に応じてレイアウトを最適化することができるため、パソコンからはもちろんスマートフォンやタブレット端末からでも見やすく操作しやすい設計を実現することがました。

ロゴデザイン

こちらもサイトデザイン同様に、シンプルなロゴや賑やかさを感じさせるロゴなど方向性の異なるテイストで複数案ご提案をさせていただき、こちらのイラストをふんだんに取り入れた可愛らしいロゴデザインをご採用いただきました。
ロゴタイプ(ロゴの文字部分)からその周囲に散りばめられたイラストまで、すべて弊社内のデザイナーがケアひろば様のために描き起こしたオリジナルの手描きイラストを用いています。ケアひろばの名にふさわしく広場にさまざまな年齢層の人々が集まっている様子を表現しました。
ケアひろば ロゴデザイン制作実績

イラスト

今回のサイトではロゴマークをはじめ、スライドショーやメインナビゲーション部分などにも、イラストやアイコンをふんだんに取り入れることで、親しみやすく暖かい雰囲気を表現しています。ロゴマークとスライドショーには弊社デザイナーが描き起こしたオリジナルのイラストを、ナビゲーション部分などにはアイコンフォントを採用しました。
スタジオ・ウミでは使用用途に応じて様々なテイストのイラスト制作が可能です。

機能開発

SNS 機能

ホームページに訪れた一般の方がユーザー登録して利用できる SNS 機能を構築しました。 ユーザー登録、ログイン、ログアウト、ユーザー情報編集、パスワード再発行といった SNS サイトで必須となるユーザー周りの基本機能は Drupal のコミュニティ機能を利用することでスピーディにベースの機能をご提供することができました。

プロフィール登録

登録ユーザーが自分のプロフィールや URL 、住所などの情報を自由に登録・編集できるプロフィール登録機能を備えました。 こちらも SNS サイトでは一般的な機能ですが、 Drupal のユーザー周りの機能を利用する形で使いやすくメンテナンス性の高い機能をスピーディにご提供することができます。

記事投稿

登録ユーザーが自分の投稿を自由に投稿できる機能を構築しました。 ブログのように画像を添付したり、ちょっとしたポスターや文書を PDF として公開する機能も備わっています。

記事へのコメント投稿 非公開

他のユーザーが投稿した記事にコメントを加える機能を構築しました。 こちらも Drupal では記事に対するコメントの設定が細かく行えるようになっているため、その機能を活用する形で構築しています。 また、下の記事を投稿した人とコメントを書いた人のみが閲覧できる「非公開コメント機能」も備わっています。

記事への Nice!

他のユーザーが投稿した記事に対して Nice! をつける機能を構築しました。 Facebook や Instagram 、 Tumblr などでも、コメントとはちがう形で反応を返す「いいね」「スキ」といった機能が用意されていますが、ケアひろばでもそのような Nice! 機能をご提供しています。

ユーザーのフォロー

他のユーザーの新着記事一覧を表示できる「フォロー」機能を構築しました。 安心して利用できる SNS にしたいということでフォロー機能は承認制でお作りさせていただきました。 省力化によるスピードアップとコストダウン、メンテナンス性の向上に考慮し、データベースやフォローボタンの部分はカスタムモジュール、一覧表示の部分はコントリビュートモジュールと切り分けた形での実装にしています。 高品質のコントリビュートモジュールがあり独自の機能拡張もやりやすいという Drupal の特長を活かしました。

ユーザー・記事検索

「ユーザー検索」「記事検索」機能を構築しました。 ユーザー検索では名前や住所から他のユーザーを検索でき、記事検索では記事をフリーワードを使って検索することができます。 いずれの機能でも、入力フォームからフィルタリング、検索結果の表示、ページめくり機能に至るまで、検索機能に必要なほぼすべての要素を Drupal の Views (ビューズ) という定番モジュールを利用して実現しています。

ユーザー間メッセージ送信機能

ホームページ上で登録ユーザー間でメッセージがやりとりできる機能を構築しました。 メールを利用せず、サイト上で完結した形でメッセージのやりとりができます。 非営利団体の場合には、公式サイトをわざわざ立ち上げることなく、オンラインの問い合わせ窓口を設けることが可能です。 個人の場合には、ちょっと連絡を取りたいけれどメールアドレスでのやりとりはしたくないようなときでも安全にメッセージを送り合うことができます。

通知機能

ホームページのヘッダー領域に各種通知が届く「通知」機能を構築しました。 他ユーザーからのフォローの申請や未読のコメントなどがあったときにヘッダー領域にその旨を表す通知が届きます。 JavaScript を使った控えめな強調エフェクトも追加させていただきました。

スライドショー

新しくホームページに訪れたユーザーを対象としたスライドショー機能を構築しました。 jCarousel という JavaScript / jQuery のライブラリと Drupal のモジュールを使用して実現しています。

CyAC

サイトの概要

弊社の別事業部が運営するゲーマ向けのソーシャルネットワークサービスです。ゲーマー向けのおもしろ記事を提供し、ユーザーが自由に様々な形式の大会を開催できるサービスなどをメインに展開しています。

2014年2月の時点で使用モジュール数が約100個、ユーザー数が5万人弱、様々なタイプのノードが約3万件ある比較的大規模なサイトです。

諸々の事情で外注開発していた Drupal 7 で制作されたサイトなのですが、開発スピードと品質を向上させるためStudio Umiで受け持つことになりました。

目的

  • 今後更に需要が拡大すると思われるスマートフォンやタブレット端末へ完全に対応し、それらの端末の集客率アップ
  • 前バージョンのでの不具合解消
  • サイトパフォーマンスの改善
  • 新機能の実装
  • 月々の保守費用の削減

挑戦

前任者が開発した数万行に及ぶモジュール群の調査・分析して引き継ぐ必要があり、またパフォーマンスを改善するため、モジュールを取捨してテスト、本番移行する作業に困難が予測されました。

保守費用の削減とパフォーマンス向上

コスト削減のためのサーバー移転

スタンドアローンのサーバーを利用していたのですが、リソースを調査した所性能がありあまっていることが判明し、また月々のコストがかなり高額のため、サーバー会社を他社へ変更することにしました。

月間ページビュー数が60万、同時アクセス数が多い時で500人近くになるため、そこそこの性能のサーバーが必要です。root権限が使えて様々なチューニングができ、コストパフォーマンスの良い、と言うことが条件でしたので、VPSしか選択肢がありません。これまでの弊社の経験を活かせ、なおかつ調度良いプランがあるさくらインターネットのサービスに変更することにしました。

サーバー移転後のコストは以前と比べ、約10分の1まで削減することができ、またサーバーパフォーマンスに関してはソフトウェアのチューニングで同程度以上の能力を保つことができました。

モジュールの取捨

使用されていないモジュールがくつも有効となっており、無駄なオーバーヘッドが発生していたため本当に使用されていないかよく調査し削除する必要がありました。削除後は劇的とは言えませんが、ページ生成速度をやや改善することができました。

各種サーバーソフトウェアのチューニング

前サーバーでは8GBもあるメモリが上手く使いこなせていなかったため、新しいサーバーではApache、MySQL、PHPのチューニングを行うことで無駄なディスクIOが発生しないように工夫しています。

リバースプロキシー

フロントにリバースプロキシーのVarnishを置くことで、未ログインのユーザーに対しての負荷をキャッシュし、アプリケーションサーバーへ無駄なリクエストが発生しないようにしました。

機能開発

レスポンシブ・ウェブデザイン

利用者のスマフォ・タブレット率が5割を超えるサイトでしたので、それらの端末で機能を失ったりアクセシビリティが低下しないことも重要な課題の一つでした。前回まではDrupalの有名なベーステーマである Adaptive theme を利用して開発されていたのですが、レイアウトの多様性求め一からスクラッチ開発することになりました。

ある程度慣れ親しんだユーザーが居ると考慮したため、レイアウトを殆ど変えずにCyACのコーポレートカラーを取り入れ、流行のソリッドデザインを基調としてデザインしています。

主なターゲット層が10代〜20代の若者が使用するモダンブラウザのみでしたので、通常の案件よりは動作チェックの意味では楽だったと言えます。

スマートフォン向けの解像度では、ヘッダーにあるメニューが隠れてスライドボタンになるなど、Java Script を多用し、インタラクティブ性とユーザービリティを両立しています。

YouTube Live 機能

CyACでは大会をする際に、YouTubeのライブ配信サービスを利用してリアルタイムでゲームの実況中継を行なっています。しかし動画放送をする場合はTwitterやサイト上のお知らせ記事で告知するしか方法がありませんでした。

動画での広告収入がCyACを支えているため、視聴者数の拡大が急務でしたので、サイト上でもっと目立つ方法で告知する必要があると考え、独自のYouTube Live告知用のモジュールを開発し流入数を増やすことになりました。

NAST Homestay

NAST Homestay様のホームページリニューアルを行いました。

概要

愛知県で学生向けホームステイツアーを提供されている NAST Homestay(ナスト・ホームステイ)様のホームページリニューアルをご依頼いただきました。
クライアントは英語でのやり取りをご希望でしたので弊社の英語スタッフがディレクションを担当し、サイト構成・デザイン等については日本人スタッフも交えて進行することで、より日本人ユーザーにとって分かりやすいホームページを目指しました。
また、今回のリニューアルでレスポンシブWebデザインを採用することで、スマートフォンやタブレット端末からも見やすいホームページへと生まれ変わりました。

デザイン

サイトデザイン

配色

元サイトは茶色が主体のデザインとなっていましたが変更しても問題ないとのことでしたので、深みのあるグリーンをキーカラーに採用しサイトの雰囲気を一新いたしました。元サイトが持っていた落ち着いたクラッシックな雰囲気はそのまま受け継ぎつつも、すっきりとした白ベースを採用し、淡くやさしいグリーンとライトグレーを取り入れることで、爽やかな明るさと優しい印象を両立させました。

レスポンシブウェブデザインの採用

最近ご依頼を多くいただくようになったレスポンシブWebデザインをこちらのホームページにも採用いたしました。レスポンシブWebデザインは、ブラウザ幅によりレイアウトが変化するため、画面幅に応じてレイアウトを最適化することが可能です。一般的に若い世代のユーザーは、パソコン以外のスマートフォンやタブレット端末からアクセスする割合が多いため、主なユーザー層が学生となるこちらのホームページに採用することは、直帰率を下げページ滞在時間を増やすための効果的な施策として期待できます。

Web以外のデザイン制作

ホームページ制作と合わせてロゴデザイン制作、チラシデザイン制作のご依頼もいただきました。まとめてご依頼いただくことでデータの共有がスムーズに行えプロジェクトをスピーディーに進行することができました。また媒体の種類が異なってもブランドイメージが統一されるよう配慮して制作をおこないました。

機能開発

コンテンツ投稿機能

今後も更新される可能性が高い「ツアー情報」と「ステイ先情報」などのカスタムコンテンツタイプを設けました。 コンテンツのテンプレートに基づいて定められた情報を入力するだけで自動的にページが作成され、一覧ページやトップページなど任意の関連ページにも自動で表示されるため、更新が容易でクライアントにとってもユーザーにとっても便利で使いやすい仕様となっております。

スライドショー

ホームページのページ上部で留学先の様子を紹介するスライドショー機能を搭載しました。 jカルーセルという JavaScript / jQuery のライブラリと Drupal のモジュールを使用して実現しており、クライアント自身で好きな写真に入れ替えることができます。

お問い合わせフォーム

Drupalの機能の中でも人気の高い、「Webform」モジュールを使用し、お問い合わせフォームを構築しました。 学生向けのサイトですので、ユーザーの大学名や、学部・学科といった情報が入力できるよう設定しています。お問い合わせフォームによって、ユーザーが通常のメールには書かないと思われる情報を、ホームページを通じてお聞きすることが可能です。 サイト管理者にとって、利点はもう一つあります。お問い合わせフォームを使用することで、管理者のメールアドレスを公開する必要がありませんので、スパムメールの受信を防ぐことができます。

ブログ

今回クライアントからのご要望で、サイト内にブログを設置しました。文章、画像、You Tube動画を簡単に設置できるよう設定しております。写真や動画などのコンテンツと関連性の高いブログを更新すると、SEOへの効果も期待できます。

ブログの通知システム

クライアントから、ユーザーがブログの新着記事をすぐにチェックできる、通知システムの追加への強いご要望がありました。 Drupalの「Mailchimp」モジュールを使用し、サブスクリプション・インターフェースをサイトに追加することが可能となりました。投稿通知の登録者の管理は、無料サービス(2000人の加入まで)を通して、Mailchimp上で行われています。 「Rules」というDrupalモジュールを使用し、新しいブログが投稿されると、登録者にメールによる通知を送信する機能を設定しました。

サンリラクゼーション

サンリラクゼーション様の店舗ホームページのリニューアル作業を行わせていただきました。

デザイン

コンセプト

ホームページのデザイン上にも取り入れている「和」・「技」・「癒」。 このサンリラクゼーション様の魅力を端的に現した漢字3文字を、今回のサイトリニューアルのコンセプトとさせていただきました。

数あるリラクゼーションサロンの中でも特にサンリラクセーション様の個性となっている「和」のテイスト。 その魅力がユーザーに伝わるようなデザインを心がけ、縦書きのグローバルナビゲーションや和紙の質感を活かした背景など、ホームページデザインの随所に和のテイストを取り入れました。

また、お店の雰囲気をダイレクトにユーザーに届けることができるよう、トップページでは店舗の内観写真をスライドショーにしています。

配色

クライアントから配色に関するご要望として「リニューアル前と同じく、ダークカラーを用いた落ち着いた雰囲気のデザインにしてほしい」という内容を伺っておりましたので、ベースカラーにダークカラーを使用することを前提として配色計画を行いました。

ホームページのベースカラーに黒を使用する場合は、「かっこよさ」「スタイリッシュさ」は演出しやすくなりますが、その反面で、デザイナーやクライアントの意図に反して「近寄りがたい」「くらい」「怖い」などのネガティブな印象を与えてしまう場合があります。 今回の案件では、サイトを訪れたユーザーに「癒し」を感じさせるデザインを行う必要がありましたので、スタイリッシュで洗練された雰囲気は保ちつつも、近寄りがたい冷たい印象にならないよう、背景に和紙の素材を用いたり、随所に暖色系カラーを使用する等、「暖かみ」を感じさせる配色を意識して制作を行いました。

機能開発

今回のサイト制作では、以下のような機能を盛り込ませていただきました。

レスポンシブ・ウェブデザイン

HTML5 ・ CSS3 を用い、 PC ・タブレット・スマートフォンなど複数の画面サイズに対応した「レスポンシブデザイン」を採用しました。 レスポンシブデザインではどのような画面サイズの端末に対しても共通の HTML ファイルが使用されるので、中長期的なメンテナンスコストや SEO 効果の面で大きなメリットがあります。

今回は、画面サイズが小さな場合にはウェブ利用者の多くが馴れ親しんでいる王道的レイアウトを、画面サイズが大きな場合にはショップコンセプトを体現したラグジュアリー感の高いフリーレイアウトのデザインを採用いたしました。

Internet Explorer 8 などレスポンシブ・デザインには対応していないブラウザーにおいてレイアウト崩れを最小限に留める工夫もあわせて行っています。

既存サイトとのデータ連携

今回制作するサイトは単独サイトではなく既存のサイトと連携する部分があったため、「既存サイトからのデータの移行・データ連携」がひとつの課題でした。

今回は幸い既存サイトの方も Drupal ベースで作られていたので、この連携は比較的スムーズに行えたように思います。 既存サイトの方ではコントリビュートモジュールを用いてコーディングレスに JSON API を作成し、新規サイトの方ではその API を経由してデータを取得し、処理・表示する機能を独自開発する形で連携を行いました。

背景画像の自動スライドショー

画面サイズが大きな端末に対してページいっぱいに表示された背景画像が少しずつ順番に切り替わる機能を実装しています。 高精細な画像を画面いっぱいにスムーズに切り替えながら表示することで、ことばだけではなかなか伝えづらい店舗の雰囲気・空気感が伝わるような工夫をさせていただきました。

動画のハイライト表示

サイト内の動画を見やすくするため、動画がクリックされるとページ全体が暗転し動画だけが前面に表示される「ライトボックス」と呼ばれる機能を採用いたしました。 jQuery ライブラリと Drupal のモジュールを用いることで、動画再生における定番的な機能を確実・スピーディに導入することができました。