CSS3

QUICK ESG研究所

概要

日本を代表する金融情報ベンダー 株式会社QUICK様 が、アセットオーナーおよび運用機関にESG要因を考慮した投資が行われる仕組み、ならびに投資先企業と投資家をつなぐプラットフォームづくりを目指して設立されたQUICK ESG研究所様のポータルサイトリニューアルを担当させていただきました。

QUICK ESG研究所ポータルサイトは、QUICK ESG研究所アナリストによる、世界のESG(環境、社会、ガバナンス)課題に関する調査や取材レポート、責任投資に関する幅広い情報を提供するメディアサイトです。これまでWordPressで運営されていた既存サイトを、事業拡大に伴い全面リニューアルされる運びとなりました。

今回のリニューアルでは、ご担当者様が新システムの候補となるCMSをご自身で事前によく調査・検討いただいた上で、Drupal 8をプラットフォームとして開発されたいと弊社にご相談いただきました。お調べいただく中で、Drupalがメディアサイトに適したCMSであること、特に、会員限定コンテンツの管理が得意で、多様なコンテンツを定義できる柔軟性があるという点が決め手となったと伺っています。

プロジェクトの目的

新サイトでは、世界最先端の責任投資・ESG動向、企業のCSR活動などに関する情報を、より幅広く、より本質的な内容でタイムリーにお届けするために、新たなコンテンツタイプの拡充や機能面における利便性の向上を目指しました。

今回のプロジェクトの主な目的は次のとおりです。

  • 新たなコンテンツタイプの追加
  • デザインの刷新
  • 絞り込み機能の実装によるユーザーの利便性向上
  • 会員登録機能の実装

バックエンド

コンテンツ移行

Wordpress からXMLファイルとしてエクスポートされた300件超の既存記事のインポート作業を行いました。

最新バージョン Drupal 8 の採用

本案件では当初より Drupal 8 を使用して開発されたいというご要望をいただいておりました。弊社でもこれまでに複数の実案件で Drupal 8 での開発を経験し、十分にプロダクション用に使える品質に達していることを確認できておりましたので、今回も積極的に導入を行わせていただきました。

コンテンツ投稿

基本ページの他に下記6種類のコンテンツタイプをご用意し、お客様ご自身で更新いただけるように設定させていただきました。

  • ブログ
  • お知らせ
  • イベント
  • リサーチレポート/ニュース
  • メディア掲載情報
  • スライドショー

「リサーチ」では記事タイプを「News」または「Research Report」 のどちらかを選ぶことができ、選んだタイプに応じてサイト上で表示される場所が変わるように設計させていただいています。 また「イベント」では、「会員向けワークショップ」「外部セミナー」など6カテゴリからイベントの特色に合わせてカテゴリを選択することができ、選んだカテゴリに応じてアイコンが表示される仕組みになっています。

絞り込み機能

ユーザーの利便性を高めるため、リサーチレポートでは、著者やキーワード、カテゴリなどから記事を絞り込むことができる記事検索機能を実装しました。

デザイン

記事を引き立てるオリジナルテーマを開発

アースカラーやクラフト紙の背景素材を用いた、温かみや落ち着き、環境への配慮といった印象を与えるオリジナルのデザインテーマをご提案し採用いただきました。彩度を抑えた主張の少ない配色にすることで、柔らかな雰囲気は活かしつつも上品で落ち着いた印象に仕上げ、このサイトの主役である記事に集中いただきやすいデザインを目指して作成させていただきました。

マルチデバイス対応

今回の案件は元の既存サイトもマルチデバイス対応でしたので、引き続きどのような端末でもストレスなく閲覧いただけるようにレスポンシブWebデザインにて実装させていただきました。これにより、デスクトップPCに限らず、スマートフォン、タブレット等あらゆる画面サイズの端末で表示した際にも自動でレイアウトを最適化し、より記事が読みやすいサイト環境を実現しています。 弊社では、閲覧端末の多様化が進んでいる昨今のユーザー環境を考え、基本的にはすべての案件でレスポンシブWebデザインの実装を推奨させていただいております。

システムの安定性とセキュリティの堅牢性

今回開発したポータルサイトを利用される会員の方は、金融機関やメーカーをはじめとする事業会社のユーザーが多いこともあり、システムの安定性やセキュリティ面においての堅牢性というのもCMSを採用されるにあたっての重要なポイントのひとつでした。

Drupal は、ホワイトハウスをはじめとする多くの政府機関や大企業、有名大学等での実績が豊富で、こうした高度なセキュリティを要するサイトで採用されることにより、さらに高強度なセキュリティ技術がコミュニティに還元されるという良循環が生まれています。

また意見交換が活発な大きなコミュニティに支えられたオープンソースであるという点もセキュリティ面においては大きなポイントです。「オープンソースはセキュリティが心配」と言われることがありますが、実は「オープンソースソフトウェアは商用ソフトウェアと同等あるいはそれ以上に安全である。」と言われており、ホワイトハウスがDrupalを採用した際にも「オープンソースを利用することでセキュリティの強化を図れること」が理由のひとつとして挙げられています(※)。

もちろん「すべてのソフトウェアには何らかのバグがある」と言われるように、 Drupal にもバグがないわけではありません。そのため、セキュリティアップデート等のセキュリティ対策は他のCMSと同様に必ず必要ではありますが、コントリビュートのルールが整っていること、セキュリティ対応の体系だったプロセスによる管理体制が整っていること、活発で巨大なコミュニティに支えられていること、有名サイトでの実績が非常に豊富なこと等、セキュリティ面においても安心してご利用いただけることが今回Drupalをご採用いただいたひとつのポイントになったのではないかと思います。

The security implications of open source software

メディアサイト運営に最適なプラットフォーム Drupal

今回の事例では、ご担当者様が事前にDrupalがメディアサイトに適したプラットフォームとなることをご自身で調査いただいた上でご依頼いただいた案件でしたが、Drupalは「強力なコンテンツモデリングシステム」と「Viewsモジュールで提供される柔軟な表示機能」を標準で備えたCMSであるため、ニュース、ブログ、記事など多様なコンテンツを持ったメディアサイト運営に非常に適したCMSと言えます。

スタジオ・ウミでは、本案件の他、制作実績として公表していないDrupalによるメディアサイトの開発実績も多数ございます。また、Drupalを用いたより効果的なソリューションを提供するためのコンサルティングから、UI設計、開発まで、幅広く柔軟にご対応しております。メディアサイトの新規開発/リニューアルをご検討の際は、ぜひお気軽にご相談ください。

公益財団法人 滋賀県国際協会

概要

公益財団法⼈ 滋賀県国際協会様のホームページリニューアルを担当させていただきました。滋賀県国際協会様は、県⺠の国際理解を深め、国際協⼒思想の⾼揚を図るとともに、経済・技術・⽂化等幅広い分野の国際交流を積極的に推進し、国際化に対応した地域社会の振興に寄与することを⽬的に設⽴された団体です。

Drupalが非常に得意とする多言語対応が第一の要件でもありましたので、Drupalのもつ多言語化機能を十分に活かした形で開発を行うことができました。デザイン面では、さまざまな端末に対応したレスポンシブWebデザインを採用し、幅広いユーザー層が利用することを考慮したシンプルなデザインのオリジナルテーマを開発しました。

目的

滋賀県国際協会様は2003年にWebサイトを立ち上げ、広く県民に情報提供を行ってこられました。当時発売されていたオーサリングソフトを使ってこれまで運営を続けておられましたが、提供すべき多様な情報にサイト構造が追いつかず、多言語での情報整理も困難になってきたことから、これらの課題を解決した運営環境の再構築を目的として本プロジェクトを始動されました。

基本方針と具体的な改善施策

上記目的をふまえ、本プロジェクトの基本方針と具体的な改善施策として以下を定めさせていただきました。

わかりやすいサイトへ

  • コンテンツを整理・発信しやすいデータ構造を実現し、より利用者が使いやすいウェブサイトへ
  • 利用者が必要とする情報へたどりつきやすく、利用者を迷わせないユーザーインターフェースの実現
  • マルチデバイス対応により、スマホやタブレット等、どの端末からでも見やすくわかりやすいサイトへ

管理しやすいサイトへ

  • 多言語対応に適したCMS(Drupal)導入によりサイト構造の最適化を行うことで、効率的でメンテナンス性に優れたコンテンツ管理を実現
  • ブログ感覚で扱える管理画面で記事更新時のストレスを軽減
  • サイト全体で使い回せるデザインパーツを予め用意しておくことで、サイト全体の統一感とクオリティを保持

効果的な発信をサポート

  • 滋賀県国際協会様がもっている様々なコンテンツを効率的に整理し、かつ可⽤性を⾼めることで、県内外の⽅々がより効果的に利活⽤できるようにする
  • コンテンツネゴシエーションにより、第三者が利用しやすいAPIを提供
  • Facebook等をはじめとするソーシャルメディアとの連携により、より効果的で活発な情報発信をサポート

機能開発

多言語切替

対応⾔語は、⽇本語、英語、ポルトガル語(ブラジル)、スペイン語(主にペルー)、タガログ語、中国語(簡体字・繁体字)、韓国語の計8⾔語に対応。Drupal 8 本体で提供される多言語・ローカライズ系のモジュールを駆使してコンテンツや機能が破綻することなく実現することができました。

これにより、リニューアル前のWebサイトでは⾔語を切り替えた際に都度トップページに戻る必要がありましたが、リニューアル後はページ上においては、見ているコンテンツをそのままにユーザーが簡単に言語切替が行えます。

更新担当者様がコンテンツごとに各⾔語への原稿⼊⼒を⾏われるため、そのデータ⼊⼒のインターフェースにおいては簡単に各⾔語の原稿が確認できるようになっています。また、Drupalの多言語化機能は、管理画⾯においても標準で各⾔語に対応しています。

OGP及びXMLサイトマップ生成への対応

Open Graph Protocol(OGP)やXMLサイトマップ⽣成に対応しました。OGPは任意の画像や⽂⾔を設定できるようにいたしました。

データの構造化 / コンテンツネゴシエーション

一部のコンテンツでは schema.org の語彙を使った RDFa 形式でマークアップされた HTML が出力されるようにし、データ構造化に対応。検索エンジンへの親和性を高めています。

Rest API を提供

サイト上に投稿されたコンテンツを JSON 形式で出力する REST API を独自に実装しました。言語の切り替えも対応し、第三者でも利用しやすいデータを提供できる機能が備わっています。

記事投稿

「お知らせ」「イベント」「読み物」など更新が頻繁に行われるであろうコンテンツは、更新担当者様専用のアカウントを用意し、作成・編集・翻訳などの各種更新作業を簡単な操作で行なっていただけるよう設定させていただきました。尚、通常の更新担当者様用アカウントとは別に、サイト管理者様用のアカウントも用意し、あまり頻繁な更新が無い静的ページにおいてもお客様側で編集いただける環境を構築させていただきました。

フリーワード検索

弊社からのご提案で、Drupalの検索機能を利用して、サイト全体の文章検索をすることができる機能を実装させていただきました。これにより利用者は任意のキーワードを検索フォームに入力することで、膨大なページの中から目的のページをすばやく探し出すことができます。一般ユーザーはもちろん、記事の翻訳担当者の方にも大変便利な機能です。

リビジョン管理

コンテンツ保存時のバージョン保存、コンテンツ更新履歴の確認、以前のバージョンへの復元が管理画面より簡単に実行いただける「リビジョン管理」機能も実装しています。コンテンツ内の画像もコンテンツ項目として定義することで、画像も含めた復元が可能です。 万が一、誤った情報を上書きしてしまった際も、この機能があれば安心です。

「重要なお知らせ」の固定表示

トップページやお知らせ一覧画面などにおいて、リスト表示されるお知らせは通常は更新日順に表示されますが、それらのお知らせのうち、特に重要な情報については、「重要」というラベルを付け、常にリストの最上部に固定することができるように設定させていただきました。 これにより、重要なお知らせが他の重要度の低い情報に埋もれてしまうことを避け、視覚的にも目立たせて表示することが簡単に可能になりました。

デザイン

デザイン面では下記の点に配慮して制作させていただきました。

直感的に操作しやすいUIデザイン

ひと目でわかる言語選択ナビゲーションやサイト構造を認識しやすいグローバルナビゲーション、マウスオーバー等のユーザー操作時に応じて見た目に変化を与える等、ユーザビリティに配慮した誰もが直感的に操作しやすいユーザーインターフェースを目指してデザインを設計いたしました。またグローバルナビゲーションなどにおいてアイコンやピクトグラムを効果的に使用し、視覚的操作性の向上を目指しました。スタジオ・ウミでは使用用途に応じて様々なテイストのイラスト・アイコン制作が可能です。

統一性・一貫性のあるUIデザイン

ウェブサイト全体を通して統一性・一貫性のあるUIデザイン設計は、利用者の負担軽減とウェブサイト全体のクオリティ維持につながります。どの端末で閲覧しても、どのページから流入しても、滋賀県国際協会様のウェブサイトであることが違和感なく認識でき、ストレスなく操作を行うことができるよう、事前にページ内で使用する各見出しやボタンなどの基本的なデザインパーツのスタイルを制定し、更新時にはそれらのスタイルがほぼ自動的に反映されるよう配慮したCSS設計を行いました。これにより、誰が更新してもウェブサイト全体で統一感のある見栄えを保持し、一定のデザイン品質が維持されるような環境を構築しています。また、協会のロゴマークで使用されている水色をキーカラーとして利用するなど、色彩構成の面でも統一感に配慮しています。

スタンダードながらも滋賀らしさを感じるビジュアル訴求

さまざまな年代・国籍の利用者に違和感なく受け入れていただきやすいよう「スタンダードさ」に重点をおきながら、「滋賀県らしさ」もさりげなく取り入れたデザインをご提案させていただきました。

メンテナンス性に優れたレスポンシブWebデザインを採用

今回のサイトでは、ブラウザ幅によりレイアウトが変化するレスポンシブWebデザインを採用しています。画面解像度に応じてレイアウトを最適化することができるため、パソコンからはもちろんスマートフォンやタブレット端末からでも見やすく操作しやすい設計を実現することができました。レスポンシブWebデザインでは、スマートフォン専用サイトを用意する場合と違い、一つのHTMLで全てのデバイスに対応することが可能なため、運用時のコストを大幅に削減することができます。 またユーザーエクスペリエンスを考慮し Retina ディスプレイにも対応。ユーザーは高精細な画像でウェブサイトを閲覧することができます。

多言語サイトに強いCMS「Drupal」

Drupalの強力な多言語機能は世界的にも定評があり、グローバル企業や国際機関のWebサイトにDrupalが広く採用されている理由のひとつでもあります。今回のホームページでも多言語対応の要件がまず第一にありましたので、Drupalに非常にマッチした案件でした。 今回のプロジェクトでは、多言語機能が強化され、RESTful API が使用可能になった最新のバージョン8を利用して構築を行っています。多言語化機能については、Drupal 8本体でサポートされる国際化機能を利用して実装しています。これによって以下のようなメリットがありました。

  • Drupal は初期状態で多くの多言語化に関する機能をサポートしており、データベースレベルから多言語に対応した設計となっているため、他の一般的な CMS に比べ特に汎用性が高く様々な拡張機能を組み合わせても問題が起きにくい安定したサイト構築を行うことができる。
  • 管理画面も標準で多言語化されるため、英語はもちろんのこと、ポルトガル語や中国語などの様々な言語で利用できる(※)。
  • 標準で多言語化をサポートしているため他のCMSに比べ翻訳管理画面が洗練され直感的な操作で更新作業を行うことができる。

※翻訳サポートは各種拡張機能により翻訳のカバー率・品質が多少異なります。

このようにDrupalは多言語サイトに適した特徴をいくつも備えているため、メンテナンス性の高い多言語サイトを高品質・低コスト・スピーディに構築するための最も有力な選択肢のひとつとされています。多言語サイトの構築をご検討の際はお気軽にご相談ください。

株式会社中西園材

概要

株式会社中西園材様は、およそ一世紀にもわたり植物を商い続けてこられた造園材料総合卸の老舗店。CMSの導入、カテゴリ別絞り込み検索をはじめとした各種機能の充実、コンテンポラリーなUIデザイン設計、マルチデバイス対応、コンテンツ拡充等、様々な観点から時代に合わせた利便性の高いホームページへと刷新するため、弊社にWebサイトリニューアルをご依頼いただきました。

プロジェクトの目的

このプロジェクトの主な目的は次のとおりです。

  • 商品カテゴリ商品検索機能の実装によるユーザーの利便性の向上
  • CMS導入によるお客様ご自身で簡単に入荷情報等を発信いただける新着情報機能の実装
  • 商品ページと問い合わせフォームを連携させることによる業務効率化への貢献
  • マルチデバイス対応
  • デザイン刷新による新たなコーポレートイメージの構築

デザイン

老舗店に新しい風を吹き込むコンテンポラリーなUI設計

およそ一世紀にもわたり植物を商い続けてこられた老舗店としての中西園材様の「歴史の重み」と、プロの眼にかなう良い品物だけを扱われているという職人気質な「質へのこだわり」、そして、時代に合わせた「新しい価値」の提供。この3つを表現できるようなデザインを目指して制作させていただきました。

CI / VI 制作

Webサイトと合わせて企業のロゴマークのリニューアルも弊社にて担当させていただきました。福々しさを感じさせ、湖上を運行し物資を運搬する姿がお客様に品物を届けられている中西園材様のお仕事とも重なる「宝船」をモチーフに、「老舗らしさ」と「現代性」、相反する要素をひとつのマークに表現いたしました。

中西園材様のホームページでも、ロゴマークに込められた想いをご紹介いただいておりますので、よろしければご覧ください。
https://www.nakanishienzai.com/news/9241

バックエンド

基幹システムからのデータインポート

中西園材様が元々使用されていた既存の商品管理システムから1,500点を超える商品データのインポートを行いました。データの入出力を得意とする Drupal の特性を活かすことで、構築にかかる時間と費用を大幅に削減することができました。

絞り込み機能

データ管理が非常に得意なDrupalの特性を活かして商品カテゴリ別の絞り込み検索機能を実装しています。各商品カテゴリに応じた検索項目を表示し、利用者が目的の商品にたどり着きやすいWebサイトを実現しました。

また、リニューアル以前はお客様からのお問い合わせはほぼお電話で対応されていたため、お客様がどのような商品に興味があり、どのようなご要望を持たれているのかを事前に把握しにくいというお悩みを持たれていました。そのため、今回のリニューアルでは、商品紹介ページからすぐにWebフォームで問い合わせができるようにすることで、お客様の要望をスムーズに把握しやすくし、ヒアリングにかかっていた時間をできるだけ短縮できるような設計にさせていただきました。

国立大学法人 滋賀医科大学

概要

国立大学法人 滋賀医科大学様は、滋賀県大津市に在る県内唯一の医学大学です。2017年4月にウェブサイトを弊社でリニューアルさせていただきました。おそらく日本国内では初となる Drupal 8 で構築された大学のウェブサイトとなります。

プロジェクトの目的

このプロジェクトの主な目的は次のとおりです。

  • 10年以上運用を続けたウェブサイトのデザインを近代化し、動画などのインタラクティブな要素を設け大学のイメージや魅力がわかりやすいデザインとすること。
  • 近年で主流となったスマートフォンやタブレットなどの様々なデバイスへの対応。
  • JIS-X 8341-3:2016 レベルAに準拠し、高齢者や障害者もとってもアクセスしやすいウェブサイトとすること。
  • 静的 HTML と CGI で構成されたウェブサイトを CMS 化し、運用コストを削減。

JIS X 8341-3:2016 ウェブアクセシビリティ レベル A 準拠への対応

滋賀医科大学様は準公的機関であるため、高齢者・障害者の利用を配慮した WCAG 2.0 を包含する JIS X 8341-3:2016 レベル A 準拠の達成が求められ、制作では、いかにデザイン性を崩さずにアクセシビリティを保って Drupal でシステム化することが大きな目標となりました。

弊社内でも音声読み上げソフト、スクリーンリーダーによるテストを実施し、サイト全体でセマンティックなマークアップを行ったことで、障害者の方へのアクセシビリティも十分に考慮した構造となっています。

ウェブアクセシビリティの対応状況などの詳しい情報は、滋賀医科大学様のウェブアクセシビリティ方針のページ をご覧ください。

デザイン

滋賀医科大学様ならでは魅力を表現

今回のホームページリニューアルにあたりデザインコンセプトとして掲げさせていただいたのは、「豊かな環境、豊かな教育、豊かな未来。〜地域に支えられ、地域に貢献し、世界へと羽ばたく〜」というキーワードです。

地域に貢献し、世界へと羽ばたく優れた医療人を育むことができるのは、琵琶湖をはじめとする豊かな自然と文化に囲まれた素晴らしい環境、そして、豊富なカリキュラムが用意された豊かな教育があってこそ。これらの豊かさが滋賀医科大学で学ぶ学生はもちろん、地域や世界の医療分野の豊かな未来をつくる礎となっており、滋賀医科大学様の大きな魅力のひとつであると考え、今回のリニューアルのデザインコンセプトとさせていただきました。 Webサイト全体を通して写真を豊富に使用し、「言葉」の表現にもこだわって、滋賀医科大学様ならではの「豊かさ」を随所に感じさせるデザインを目指したデザイン提案を行いました。

キャンパスマップ

キャンパスマップのイラストイメージ

キャンパスマップに掲載しているキャンパスマップのイラストも弊社で作成させていただきました。

ご提供いただいた俯瞰写真やGoogleMapの写真を元に、Adobe Illustrator CC というグラフィック制作用のソフトの遠近グリッドという機能を用いて作成しています。

こういった専門的なイラスト制作については外注されるWeb制作会社が多いかと思いますが、弊社では社内で一貫してご対応することができるため、無駄なコストをかけずにクオリティの高いイラストをご提供することが可能です。また、将来的に建物を増築された際のイラストのアップデートなどにも迅速にご対応させていただけます。

フロントエンド

オリジナルテーマ開発

Drupal 8 から搭載された Classy をベーステーマとして完全オリジナルのテーマを作成。サイト全体が5つのブレークポイントを使ったレスポンシブウェブデザインとなっており、どんな解像度のデバイスでもコンテンツを適切に閲覧することができます。

高精細ディスプレイへの対応

高精細ディスプレイに対応した際のイメージ

サイトの各所で使用される画像は高精細ディスプレイに対応する画像形式や最新のマークアップ方法でコーディングを行いました。高精細ディスプレイを搭載する iPhone や MacBook などの高精細ディスプレイを搭載した端末で閲覧しても、ジャギーが出ない美しい画像が表示されます。

メガドロップダウンメニュー

実装したメガドロップダウンメニュー

グローバルナビゲーションのメガドロップダウンメニューはフルスクラッチで制作。メガドロップダウンメニュー内のコンテンツや、メニューアイテムも Drupal の管理下にあり、管理画面上から簡単に変更することが可能となっています。

Drupal 8 CSS アーキテクチャへの対応

制作では Drupal 8 で新たに制定された SMACSS + BEM をベースとしたアーキテクチャに準拠し、それぞれの要素のスタイルは独立したコンポーネント(モジュール)となっていて、今後 CSS を拡張してもメンテナンス性が損なわれない堅牢な構成となっています。

タスクランナーによる効率化

Gulp.js のロゴ Sass のロゴ

また、フロントエンドの開発では Sass の利用に加え Susy、Autoprefixer などのツールを駆使し、それらのタスクは Gulp.js によって自動化。先進的な開発手法を取り入れることで開発スピードを大幅にアップし、品質の向上に時間を割くことができました。

管理機能

管理画面から不要な入力フィールドを排除し、できるだけシンプルな画面になるように設計しました。

スタイルガイド

本プロジェクトでは主要ページ以外のコンテンツは、滋賀医科大学様のウェブ担当者の方に作成していただいています。

弊社でデザインした要素のスタイルを、新たに作成するページでも再利用しやすいように、スタイルとコードを一覧化したスタイルガイドと言われるドキュメントを作成し、編集者はそれを参照するだけでスタイルが簡単に流用できるようにしました。

CKEditor Content Templates プラグインの利用イメージ

また、それらのスタイルは CKEditor の Content Templates プラグインを使うことで、編集フォーム上から簡単に選択して利用できる機能の拡張を行っています。

ナビゲーション構造の最適化

メガメニューや下層ページのナビゲーション、サイトマップなどは Drupal コアで提供されるメニュー機能の構造を工夫して実装を行い、メインのメニューツリーを一つアップデートするだけでほぼ全てのナビゲーションが連動して更新され、運用時の作業コストを削減することに成功しています。

承認ワークフロー

承認ワークフロー機能は Workbench モジュールにて実装し、複数の管理者用ロールを構成して記事の公開をスムーズかつシステマティックに行えるようなっています。なお、Drupal 8.2.x では、同等の機能を持つ Content Moderation モジュールが同梱されるようになりましたが、「試験的」な位置づけであるため利用を断念しました。

ちなみに Contnet Moderation モジュールは Workbench モジュールからアップグレードできるようにする予定もあるそうです。

サイトの多言語化

Drupal 8 から更に充実した多言語化機能を利用し、英語でのコンテンツ提供にも対応しています。管理者は日本語サイト・英語サイトを気にせずに同じ管理画面でシームレスにコンテンツを管理することが可能となりました。

Drupal 8 のプロダクション利用について

本プロジェクトは弊社にとって Drupal 8 を使った初めての案件です。(ちなみに案件ではない、この自社サイトは2年以上前のベータ版の頃に制作しました)Drupal 8 では内部の構造がほぼ丸々入れ替わったので今までのノウハウの半分くらいが使えなくなり、開発する方としてはかなり辛い場面がありました。Drupal 8 には細かなバグがまだ残っていますが、致命的なものは無く、カスタムモジュール等を開発することで、コアのプログラムを汚さずに何とかなることがわかりました。Drupal 7 に比べると開発スピードやコストではまだ劣るものの、Drupal 8 で搭載された多くの機能でより一層便利になり、十分にプロダクション用に使える品質に達した印象です。弊社の今後の案件では Drupal 8 での開発が多くなる見込みです。

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

概要

コニカミノルタ株式会社様は、複合機、プリンター、ヘルスケア用機器、産業用・医用計測機器、電子材料、照明光源パネル、機能性フィルム、光学デバイスなどの開発・製造・販売などをされている企業です。 国内・海外の販社に向けた情報共有サイトを所持されており、より使いやすいサイトにするために 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告知用のモジュールを開発し流入数を増やすことになりました。