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

公式サイトリニューアル
　　公益財団法人 滋賀県国際協会 ポータルサイトイメージ画像

概要

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

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

案件概要

クライアント名 公益財団法人 滋賀県国際協会 様
URL http://www.s-i-a.or.jp/
Drupal バージョン Drupal 8
ジャンル 法人・施設・団体サイト
デバイス PC／スマートフォン／タブレット
当社スコープ デザイン／Drupal導入／コーディング／システム要件定義／研修／プロジェクト管理
プロジェクト期間 約4ヶ月半