WORKS 制作実績

  1. HOME
  2. WORKS
  3. 各種団体・NPO他
  4. 公益財団法人かがわ産業支援財団 様

公益財団法人かがわ産業支援財団 様

公益財団法人かがわ産業支援財団様のホームページをリニューアルしました。


公益財団法人かがわ産業支援財団様のホームページをリニューアル

かがわ産業支援財団様は、香川県での新産業の創出、企業の経営基盤の強化、科学技術の振興などを目的とする地域企業を支援する団体です。
ホームページの使いやすさの改善やデザインの刷新を目指してリニューアルしました。


公益財団法人かがわ産業支援財団様リニューアル前のホームページ

リニューアル前のホームページ


ウェブアクセシビリティの適合レベルAAに準拠

ウェブアクセシビリティとは、「ホームページを利用する全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること」と定義されています。
かがわ産業支援財団様は公共団体であるため、そのホームページも高齢者・視覚障害者などを含む全ての人にとって読みやすく、使いやすいものである必要がありました。
その考えのもと、ウェブコンテンツのアクセシビリティの規格である「日本規格協会 JIS X 8341-3:2016」の基準に沿って制作しました。
適合レベルには「A」「AA」「AAA」の三段階があり、Aの数が多いほど達成度が高くなります。かがわ産業支援財団様のホームページは、全ページを「AA」に準拠、一部「AAA」の基準もクリアしています。


ウェブアクセシビリティの適合レベルAAに準拠

また、「JIS X 8341-3:2016試験実施ガイドライン」に基づいて、適合レベルAAを達成しているかどうかの試験を実施しました。試験結果はホームページ上に公開しています。

ウェブアクセシビリティ運用マニュアルの作成と講習会の実施

ホームページの全ページにCMS(簡易ブログシステム)を導入しています。公開後は、かがわ産業支援財団様が「新着情報」「香川県内企業・財団の取組」「支援事業について」などのコンテンツの更新をしていきます。
公開時にウェブアクセシビリティが確保されていても、その後に基準が守られなければ、ホームページ全体のウェブアクセシビリティは崩れてしまいます。

そのため、ウェブアクセシビリティ運用マニュアルを作成し、担当者様向けの講習会を実施しました。適切な運用方法を知ってもらうことで、担当者様が新たにページを作成した場合もウェブアクセシビリティの基準に準拠した統一性のある更新ができるようになりました。

機能性とデザイン性を両立

ウェブアクセシビリティの適合レベルAAを達成するためには、使用できる色も限られています。
とくに背景色と文字のコントラスト比の基準は適合レベルAAAを達成し、視覚障がい者(色覚障がいP型、D型も含む)に対応しました。
かがわ産業支援財団様のロゴマークは黄色ですが、黄色をメインカラーにするとアクセシビリティの基準が確保しづらいため、補色にあたるブルーをメインカラーとし、黄色をアクセントカラーに使用しました
アクセシビリテの適合レベルAAを達成しながらも単調にならないように、各所にアイコンを設置しています。


各所にアイコンを設置
各所にアイコンを設置

ユーザビリティを向上し、求める情報にたどり着きやすく

ユーザビリティとは、アクセスしたユーザーが目的とするページへ到達するための使い勝手のことです。「JIS Z 8521:2020」の定義に準拠して制作しました。
かがわ産業支援財団様が発信する情報は支援事業や研修会、助成金の案内など多岐にわたります。
ユーザーが求める情報にたどり着きやすいように6つの点で工夫しています。

(1)メインビジュアルにサイト内検索を設置
検索頻度の高いキーワードはあらかじめタグで表示し、利便性を高めました。キーワードをクリックすると、サイト内の関連ページが一覧で表示されます。
キーワードは担当者様で追加することもでき、また順番を入れ替えることも可能です。


メインビジュアルにサイト内検索を設置

(2)目的別のナビゲーションを設置
事業名になじみのない一般の方は、目的の支援事業が探しづらいという課題がありました。
そこで、「総合相談」「助成金活用」「販路開拓」などの分かりやすい言葉をメニュー名に採用し、それに従って事業を分類。利用者がクリックする先を迷わないように配慮しました。
メニューボタンは視覚的にイメージしやすいようにアイコンで表示。アイコンはデザイナーの@佐藤が、かがわ産業支援財団様のメニューにあわせて、オリジナルのものをデザインしました。


目的別のナビゲーションを設置

(3)新着情報のカテゴリ設定
「研修・セミナー」「商談・展示会」「補助・助成金」などのカテゴリで絞り込みができるようにしています。


新着情報のカテゴリ設定

(4)イベントカレンダーの表示
トップページにCMSをカスタマイズしたカレンダーを設置。新着情報で見失いがちなイベントを視覚的に発見できるようにしました。
カレンダーは担当者様で更新ができるため、タイムリーに情報を発信することができます。


イベントカレンダーの表示

(5)香川県内企業・財団の取組の実績紹介
支援事業の実績をトップページに掲載し、初めての方も事業を検討しやすいよう配慮しました。
リニューアル前はPDFやFLASHの機能を用いた電子本で掲載していました。しかし、スマートフォンでは閲覧ができないこと、SEOに弱いことが課題でした。リニューアル後はHTML化し、ウェブコンテンツとしてサイト内に蓄積しています。


香川県内企業・財団の取組の実績紹介

(6)下層ページにサイドメニューを設置
下層ページの右側にサイドメニューを設置しました。サイドメニューには、同じ階層に位置するページ名を表示しており、目次の役目を果たしています。これにより、ユーザーは今閲覧しているページの位置づけを理解しやすくなります。


下層ページにサイドメニューを設置

第2階層ページ

下層ページにサイドメニューを設置

最下層ページ

最下層にあるページのサイドメニューは、ページ内の目次になっています。
サイドメニューは担当者様が新規ページを作成した場合も、自動で生成されます。

担当者様の利便性を向上

支援事業ページの下には、該当する部署のお問い合わせ先が掲載されています。
リニューアル前は、ページを作成するごとに、お問い合わせ先を手動入力していました。リニューアルでは各部署の連絡先の「様式」を作成。新規ページを作成する際に、管理画面でお問い合わせ先の「挿入」をチェックするだけで、ページに掲載できるようにしました。部署名、電話番号が変更になった場合も、「様式」を変更すると全てのページに一括で反映されます。


支援事業ページにお問い合わせ先を掲載

公開後は、担当者様からも更新しやすくなったとの喜びの声をいただいています。
かがわ産業支援財団様のホームページを通して、香川県の企業・団体の発展につながるとうれしく思います。


クライアント 公益財団法人かがわ産業支援財団 様
URL https://www.kagawa-isf.jp/
公開日 2022年3月
デバイス
パソコン/スマートフォン
プロジェクトメンバー

よく似た実績はこちら

MORE VIEW

失敗しないホームページリニューアルマニュアル