Drupal 8

株式会社GEMSEKI

概要

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

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

目的

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

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

機能

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

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

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

お問い合わせ管理

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

多言語対応

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

デザイン

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

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

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

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

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

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

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

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

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 での開発が多くなる見込みです。