稲富滋のWebマスター探訪記 稲富滋のWebマスター探訪記

BtoB企業なのに一般向けWebサイトを作る理由とは?/日本ガイシのWebマスターに聞いてみた

2021年に開催された「第9回Webグランプリ」にてトリプル受賞を達成した日本ガイシ。サイト制作の経緯とアクセシビリティの取り組みについてWebマスターに聞いた。

Webマスターは料理人のようなもの。Webマスターが新規事業を作ったり、製品開発をしたりすることはありませんが、事業や製品、会社といった素材のよさをWebサイトの表現を通じて引き立て、より魅力的に、さまざまなステークホルダーに伝えることができます。

そう語るのは、日本ガイシのWebマスター・小原勇人氏だ。品質保証のスペシャリストとして2007年に同社へ中途入社。品質保証部で活躍したあと、2016年に現在の部署に異動となった。

日本ガイシ株式会社
コーポレートコミュニケーション部マネージャー 小原勇人氏

そんな小原氏が率いる日本ガイシのWebチームは、2021年に開催された「第9回Webグランプリ」にて、2サイトで3つの賞を受賞した。

今回は、サイト制作の経緯とアクセシビリティの取り組みを中心に話を伺った。

Webグランプリとは……デジタルマーケティング研究機構の主催するアワード。Webに携わる関係者のモチベーションを高め、サイトの健全な発展を願って映画のアカデミー賞を参考に、優れた功績を残した企業を表彰する。稲富滋は、その創設者で初代の事務局長を務めていた。

日本ガイシとは?

同社は、日本陶器(現・ノリタケカンパニーリミテド)のがいし部門を分離し、1919年に設立された。以前はエネルギーインフラ事業がメインだったが、近年はセラミックス事業を中心とするBtoB企業だ。

国内外のグループ企業も含め、運営するWebサイトは複数あるが、今回は次の3つのWebサイトを取り上げる:

これらのサイトは、構築はパートナー企業の制作会社に依頼をしているが、Webサイトの企画や要件定義などは小原氏が所属するコーポレートコミュニケーション部が担っている。

Webサイト①
わかりやすく、よりマニアックに『「がいし」とは』

「がいし」とは トップ画面

社名にもなっている「がいし(碍子)」とは電気を絶縁し、電線を支えるための器具のことである。

Webサイト『「がいし」とは』は、がいし(碍子)そのものを一般の方に知ってもらうことを目的としている。インターネットで「がいし」を検索しても専門的用語が並び、わかりにくいことから、同社のスペシャルコンテンツとして制作がスタート。2014年10月にバージョン1を公開した。

バージョン1では、一般の人に『がいし』をわかりやすく説明することを目指しました。しかし親しみを持ってもらおうと思うあまり、イラストをデフォルメしすぎて、電力のプロからは『違和感がある』と言われる恐れがありました。そこでバージョン2では、正しい情報をわかりやすく発信することを念頭に、電力のプロが見ても違和感なく楽しめるようにマニアックさも追求しました(小原氏)

がいし(碍子)について学べるWebサイトとなっている

2019年からスマホ対応なども含めたアップデートを開始。まずは挿絵のイラストを精査した。かわいらしい絵柄であっても、正確性を求めた。たとえば、次のような点だ:

  • 鉄塔と変電所のイラストで、電線のイン/アウトや電圧の違いによるがいしの長さをしっかり描き分けた
  • 電車のパンタグラフにも、がいしを描き加えた
  • 静止画のイラストで表現しにくい部分は、GIFアニメを用いた
かわいらしい絵柄だが、プロも納得するほど正確に描いた

説明文に関しても、専門用語を極力避け、プロが読んでも違和感がない表現を心掛けたという。たとえば、次のようなものだ。

  • (修正前)電線を絶縁し支持する「がいし」
  • (修正後)電気を漏らさず、電線を支える「がいし」

さらに、コンテンツ内に「がいしのトリビア」を設置し、詳しく知りたい方向けの深掘り情報も用意。クリックするとモーダルウィンドウが開き、気軽に読みたい方の邪魔をしないよう配慮した設計になっている。

「がいしのトリビア」はモーダルウィンドウで表示している
稲富の視点

小原さんの品質保証専門家としてのバックグラウンドが、サイト品質の向上に十分生かされているようです。いろいろと周りから雑音が聞こえたとしても、問題の本質を科学的に捉え一つずつ潰しながら検証することができる。これは簡単なことではありません。これからWebマスターを目指す人には一般教養としても品質保証の手法を学ぶことが必須になるかもしれません。

Webサイト②
社内向け教育資料から生まれた『がいしの歴史』

『「がいし」とは』を構築する過程で、がいしに興味を持った一般の方向けに、がいしの歴史がわかるコンテンツがあってもおもしろいのではないかと考え、『がいしの歴史』を制作することになりました(小原氏)

がいしの歴史 トップ画面
ファーストビューでペリーのイラストを配置し、訪問者に「なぜ?」と興味をもたせた

電気の歴史については、すでにインターネット上に情報が溢れているが、がいしの歴史については見かけない。だからこそ、日本ガイシが取り組むべきだと考えたという。そこで2019年に創立100周年を迎えた際に制作された社内教育用の資料を、社外向けに再編集。当初は『「がいし」とは』内の1コンテンツを予定していたが、かなりのボリュームとなったため、別サイトとして企画し直した。サイト制作にあたっては、次のような工夫をこらした:

  • 親しみやすいイラストを使用し、読みやすく感じさせるデザインにした
  • 各年代に見出しをつけ、適度な文章量で章を分けた
  • 時代背景を理解しやすいように、日本史・世界史の情報をひもづけた
誰でも読みやすい設計に

また操作性も重視し、次のような工夫をこらした:

  • 各ページの下部に簡易的な年表をスライドショーとして設置し、気になる年代に飛べるようにした
  • スマホ対応
  • 常時SSL化
各ページの下部に簡易的な年表をスライドショーとして設置。
​​​気になる年代に飛べるようになっている

設計段階でアクセシビリティにも配慮し、Webサイト監査ツール「Lighthouse」などのチェックをくり返し実施したという。そして「第9回 Webグランプリ」にて、次の2冠に輝いた:

  • 【企業グランプリ部門 BtoB賞】グランプリ
  • 【アクセシビリティ賞】準グランプリ

学習サイトとして誰でも楽しめること、自社の製品紹介ではなく、がいしの歴史を客観的なコンテンツとして作っていることなどが評価されました。評価者の方にも企画の意図が伝わってうれしいです(小原氏)

稲富の視点

しっかりとしたトーン&マナーがそれぞれの部門(ブランド)にも行き渡り、幅広い年齢層に受け入れられる親しみやすいサイトとなっています。親しみやすいと言っても手を抜いて簡単にしているわけではなく、BtoBサイトとして専門家の求めにも応えるコンテンツが最大もらさず用意され、しかもわかりやすい。日本ガイシの真摯な企業姿勢が読み手に伝わるサイトです。
Webサイトのあり方で、企業の印象がこれだけ良くなるのです(少なくとも私にとって)。たいしたものです。グランプリも当然の帰結でしょう。

Webサイト③ 日本語版コーポレートサイト

コーポレートサイト トップ画

コーポレートサイトは、構造についての見直しを行った。以前は、社内事情により事業部単位でのディレクトリ構成になっていたが、これでは顧客が必要な製品を探しにくいという課題があった。

そこで、プロダクトディレクトリ配下にすべての製品詳細ページを配置し、ユーザーはブログ記事を探すように、各種タグから各製品の情報を探せるようにした。また、各製品ページの下部には「おすすめ製品」「おすすめ製品特集」を表示し、目的の製品を探しやすいようにした。この取り組みが功を奏し、「第9回 Webグランプリ」にて【アクセシビリティ賞】優秀賞を獲得した。

プロダクトディレクトリ配下にすべての製品ページを配置し、
関連製品はタグで紐付けている

とはいえ、コーポレートサイトはまだブラッシュアップの余地があるので、引き続き改善していく予定です(小原氏)

Webアクセシビリティの取り組み

2018年度から、日本語版のコーポレートサイトを中心に、Webアクセシビリティに取り組みはじめた。

当社のウェブサイトを訪れたすべてのステークホルダーの方に快適にご利用いただけるようウェブアクセシビリティの確保および維持、向上に取り組んでいます(Webアクセシビリティ対応の基本的な考え方

2018年度から「JIS X 8341のウェブアクセシビリティ適合レベルA準拠」を目標に、既存サイトを修正していった。

しかし、トップページ・企業情報トップなど主要26ページの修正をするだけでも、想定以上の工数・コストがかかったため、「既存サイトを修正する」対応では、サイト全体をWebアクセシビリティに適合させるのは無理だという結論になりました(小原氏)

サイト全体では、合格点に達していないページが多く含まれており、品質管理的には全数検査を適用しないと、サイト全体のWebアクセシビリティの適合と言えない状況であったという。

そこで2020年度は、同年に実施したコーポレートサイトリニューアル時に、適合レベルAAに準拠したパーツリストを作成した。パーツリストからページを作るようにして、制作時点で合格点に達したページを量産するように方針を転換。制作時の作り込みでWebアクセシビリティの適合を担保しているため、抜き取り検査を適用できるようにした。

そして「JIS X 8341-3:2016 試験実施ガイドライン」に沿って主要ページとサイト全体の抜き取り検査を行い、サイト全体の品質を保証した。

2021年度からは、英語版のコーポレートサイトのアクセシビリティに着手。日・英の両サイトで、適合レベルAAに準拠することを目標としている。

本取材はオンラインにて実施

ガイドラインの作成

2021年には、次のガイドラインを作成した:

  • デザイン
  • セキュリティ
  • アクセシビリティ

現行サイトの改定や新規サイト制作時には、ガイドラインに沿って設計する。加えて、グループ会社共通のテンプレートも作成し、グループ会社が工数をかけずにWebサイト制作ができるようになった。

ガイドラインは制定したばかりなので、グループ会社全体のWebサイトへの適用はこれからですが、今後対応するようにリニューアルを進めていきたいです(小原氏)

稲富の視点

品質管理の手法に精通している小原さんのアプローチは、なかなか他のWebマスターには見られないアプローチかもしれません。地道に問題箇所を一つ一つつぶしていくことも状況に応じて必要となることもありますが、最初からガイドラインを遵守したサイトの構成パーツを用意しておけば安心ですね。

Webマスターは、素材の魅力を引き出す料理人

現在、同社のWebチームは3名。同社が所有しているすべてのWebサイトの企画、運営、管理のほか、国内外のグループ企業サイトの管理も担当している。Webアクセシビリティ対応以外にも、SEO施策に力を入れており、「狙ったキーワードで検索結果が上位に表示されると達成感がある」と小原氏は語る。

ちなみに小原氏によると、Webマスター同士の交流から「Webグランプリ」の存在を知り、第6回からほぼ毎年応募していたという。

Webサイトのリニューアルや新規制作したタイミングで、力試しに応募しています。受賞できなくても、Webの専門家から忌憚のない意見をもらえるので、それが大いに参考になります。そのコメントを参考に修正している点も多々あります。より多くの人に素材(事業や製品)の魅力を伝えられるよう、Webマスターとしての腕をさらに磨いていきたいです(小原氏)

取材にご協力いただき、ありがとうございました!
稲富のまとめ

Webサイトについて「貴社の想定するステークホルダーは?」と質問を投げかけることが多いですね。確かにステークホルダー毎にそれぞれ情報の深浅などはあるにしても、「見やすく」「普通に使いやすく」「親しみやすい」ということは、どのステークホルダーにも共通すること。これを忘れてはいけません。小原さんとそのチームはそのことをしっかりと実践されていることがわかりました。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

カスタマージャーニー
顧客が製品・サービスを体験購入するまでのプロセスを示すもの。一連の流れを図式化す ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]