《あのWebサイトの裏側 Vol.4｜ビーワークス コーポレートサイト》当たり前の提供価値を具体化して伝える「ウェブアクセシビリティ」と「デザイン性」を両立

多くの企業にとって、ウェブアクセシビリティへの対応は重要な課題となっています。しかし、その達成基準と実制作の難易度には隔たりがあり、デザインとの両立は難しいという誤解もあります。ここでは、株式会社ビーワークスのコーポレートサイトのリニューアルにおける、ウェブアクセシビリティの取り組みをご紹介します。

話してくれた人

プロジェクト概要

ビーワークスのコーポレートサイトは、定期的にリニューアルを実施してきました。2011年はFlashからHTML5への移行、2014年は実績を部門横断で拡充、2018年はコーポレートアイデンティティの「Thoughtful design」を掲げました。

2024年4月1日の「改正障害者差別解消法」の施行を背景に、ウェブアクセシビリティの対応を急ぐ企業が増加しました。ビーワークスでは、コーポレートサイトのアクセシビリティ対応で得た知見や取り組みを広く公開しています。

POINT①｜サイトリニューアルに伴い、アクセシビリティの取り組みを公開

ビーワークスは、ブランディングからUI/UX設計、業界や媒体を問わない多様なクリエイティブ制作を手掛ける総合デザイン会社です。Web制作以外にも、雑誌などの出版サービスや自社ブランドのゲーム開発など、事業内容はとても幅広いものとなっています。

2001年の創業以来、コーポレートサイトも時代やお客様のニーズに合わせて変化してきました。今回、6年ぶりとなるリニューアルでは幅広いユーザーが利用できるようにウェブアクセシビリティ（以下アクセシビリティ）に配慮したサイト設計と、誠実さ・しなやかさ・遊び心といったブランドパーソナリティが伝わるデザインの両立を目指しました。

アクセシビリティの向上は多くの企業で重要性が認知されるようになりました。しかし、「アクセシビリティのさまざまな基準をクリアすることはデザイン性を損なう」という誤解は、いまだに根強いものがあります。多くのクライアントのWeb制作を担うデザイン会社の使命としても、アクセシビリティと高いデザイン性を両立できることを示すのは重要と考え、コーポレートサイトのリニューアルに際しては、社内に専門のアクセシビリティ推進チームを立ち上げ、さまざまな制約や対応の重要度の分類、独自のチェックシートの作成、さらには継続的にアクセシビリティの理解促進と浸透を推進する体制を整えました。

POINT②｜ガイドラインの読み込みと独自のチェックリスト作成

アクセシビリティ推進チームは社内の有志8名がアサインされ、ディレクター、デザイナー、エンジニアといった専門分野を持つプロジェクトメンバーが集まりました。推進チーム全体の認識を合わせるため、プロジェクトではまずアクセシビリティの一般的なガイドラインである「WCAG（Web Content Accessibility Guidelines）」を読み込むところから始めました。

WCAGのガイドラインには3つの達成レベルがありますが、最初のステップとして「レベルA」と「レベルAA」の理解を目標とし、50個の達成基準とそれぞれの達成方法についての熱心な議論がなされました。

また、アクセシビリティの達成基準には、Webページの言語設定や画像のalt属性（代替テキスト）など、普段の業務において「当たり前」のものとしてやってきたものもあれば、動画のキャプションや問い合わせフォームの改善などサイト改修の工数に影響してくる内容もあります。これらの達成基準ごとの難易度を整理することは、納期や予算、クライアント独自のガイドライン遵守などの要件があるプロジェクトにおいて、アクセシビリティ対応の優先度を整理したり、段階的な導入プロセスを検討したりするするうえでも役立ちます。

さらに、JIS X 8341-3:2016におけるアクセシビリティの対応度合いを示す「準拠」「一部準拠」「配慮」のうち、「準拠」「一部準拠」は試験を実施する必要があります。ビーワークスでは、制作から試験までを社内で一貫して行える独自のチェックリストを作成することで、画像やテキスト、リンクといった対象ごとに適合しているかを対応度合いを効率的に検証できる環境を整えました。

POINT③｜ブランドパーソナリティの表現としてのフォント

コーポレートサイトのリニューアルにあたってアクセシビリティへの対応と同時に取り組んだのが、ブランドパーソナリティを表現するクリエイティブです。コーポレートロゴについては2021年の創業20周年の際にリニューアルを実施していましたが、今回のリニューアルではこれまで表現しきれていなかったブランドパーソナリティをより明確に表現することを目指しました。その取り組みの1つがコーポレートフォント「Beeworks Sans」の制作です。

このフォントは、ミツバチの蜜の「溜まり」を連想させるタイプフェイスによって、誠実さ・しなやかさ・遊び心といったブランドパーソナリティを表現しています。

POINT④｜「遊び心」の演出とユーザーインタラクションの妙

ビーワークスには、考え抜かれたデザインを提供する「Thoughtful design」というコーポレートメッセージがあります。メッセージの内容やビーワークスの強みがわかりやすく伝わるよう、コンテンツを追加しました。演出面では、トップページのモーションによって、しなやかさや遊び心、固いものを柔らかくして領域を広げていくイメージを表現しています。また、ページ内に重力の概念を取り入れ、ボールが落下する動きでスクロールを促しています。ほかにも、採用情報エリアにメンバーの顔写真を配置するなど、遊び心と親しみやすさ、ユーザーにとっての使いやすさのバランスが取れたWebサイトに仕上がりました。

POINT⑤｜フレームワーク化と社内への浸透促進

アクセシビリティ推進チームによる議論で深まった達成基準への理解や、制作時における注意点はチェックリストとして社内で共有されました。これまでも定石となるデザインパターンはフレームワーク化されてきましたが、ここにアクセシビリティの観点が加わることで、より配慮の行き届いた制作ができる体制となりました。

アクセシビリティ対応の本来の目的は、ただガイドラインの項目と照らし合わせて条件をクリアすることではありません。その条件が求められるようになった背景を正しく理解し、ユーザビリティやサイトの目的をふまえて、対応方針を検討してクリエイティブを制作する必要があります。

そして、この知見を社内に浸透させるために、アクセシビリティ推進チーム主催の社内ウェビナーを実施しました。アクセシビリティの達成基準や制作のポイントを解説したアーカイブ動画はいつでも社内で参照できるようになっています。

さらに、これまで十分に言語化や視覚化されてこなかった、「高品質な当たり前」というビーワークスが提供する価値を、社内で再認識できたこともリニューアルの大きな成果と言えるでしょう。

今後もWeb技術の研究を続け、クライアントワークにおいてもアクセシビリティと高いデザイン性を両立したクリエイティブを心がけていきたいと思います。

取材・文：栗原亮（Arkhē）
※本記事は「Web Designing 2024年12月号」に掲載された内容を一部修正・再編集して公開しています。