多言語

株式会社GEMSEKI

概要

株式会社GEMSEKI様は、創薬シーズの有効活用をお手伝いするプラットフォーム企業として設立された企業です。眠っている創薬資産を他社に導出したい企業と、それを引き継いで開発したい企業との橋渡しを行うことで、良い薬が無駄なく速やかに社会に供給されるような仕組みをご提供されています。

今回弊社に構築をご依頼いただいたWebサイトでは、株式会社GEMSEKI様の企業情報をはじめとしたいわゆる企業サイトとしてのコンテンツだけでなく、「創薬シーズ」をデータベース化し、さまざまな検索条件で検索可能な「創薬のポータルサイト」としての機能も実装させていただきました。

目的

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

  • 企業サイトとしてのコンテンツ提供
  • 創薬シーズの情報の投稿及び検索を行える機能の実現
  • 多言語切替機能の実装(日本語/英語)
  • 利用者を惹きつけるサイトデザインの実現

機能

創薬流通市場「薬市楽座」フィルター検索

期間指定及びキーワードにより「創薬シーズ」の検索が行える機能を実装いたしました。
当機能はDrupal標準のViewsの設定のみで行うことが可能です。

また、各創薬シーズごとにウェブフォームへ促すボタンを設置しています。
創薬シーズよりウェブフォームを表示した場合、お問い合わせ内容に自動で候補物質名が入力されるよう対応いたしました。
当機能は弊社が得意とするテーマ開発やカスタムモジュールを作成し実装を行いました。

お問い合わせ管理

お問い合わせ内容を管理画面上で管理し、CSVにて出力できるように設計いたしました。
当機能はDrupalのコントリビュートモジュールであるWebformを利用し機能構築を行いました。

多言語対応

日本語・英語に対応しています。CMS による翻訳管理機能の諸設定、言語ごとのURL設計、ユーザーインターフェイス上の言語切替機能の実装、多言語化が影響するページでのシステム調整作業を行いました。
本対応はDrupal標準で組み込まれている多言語化の機能を利用し構築しました。
標準でほぼすべての箇所の翻訳が可能ですので、機能開発をすることなく翻訳作業に集中してリソースを割くことが可能です。

デザイン

社名に込められた想いをカタチに

原石が宝石に生まれ変わりキラリと光出す様子をイメージしたキービジュアルイメージ

株式会社GEMSEKI様の社名には、素敵な由来があります。

GEMSEKI様の事業の目的は「磨けば光る創薬シーズ(=“原石”)を発掘し、有益な新薬(=“宝石”)になるのを助ける」こと。そこから、“原石”と、宝石は英語で”gem”であることから、「GEMSEKI」と名付けられたそうです。

Webサイトのデザインについてのヒアリングをさせていただいた際に、ご担当者様より、その社名に込められた想いをビジュアル面でも表現してほしいとご要望をいただき、今回のデザインをご提案させていただきました。トップページのメインビジュアル部分 中央に配置したイラストは、今回のプロジェクトのために描き起こしたオリジナルイラストです。情報同士がつながっていくネットワークのイメージと、原石が宝石に生まれ変わりキラリと光出すイメージを表現しました。

ポジショニングマップで認識を共有

株式会社GEMSEKI様 ポジショニングマップ

今回のプロジェクトでは、まず最初に競合やご要望のイメージに近いWebサイトを調査し、ポジショニングマップを作成させていただいた上でデザインイメージについてのヒアリングを行わせていただきました。新しいWebサイトが目指すべき方向性をポジショニングマップというツールを使って可視化し、方向性のすり合わせを行うことで、大きな認識のズレが起きることもなく、スムーズにビジュアル表現へと落とし込むことができました。

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

概要

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

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

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

概要

国立大学法人 滋賀医科大学様は、滋賀県大津市に在る県内唯一の医学大学です。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 での開発が多くなる見込みです。