株式会社DNPコミュニケーションデザイン
西日本CXデザイン本部
平野 隆大／Takahiro Hirano
行政機関やインフラ企業のWebサイトには、幅広い世代・立場のユーザーが安心して情報にたどり着けることが強く求められます。四国電力株式会社（以下、四国電力）様と、送配電事業を担う四国電力送配電株式会社（以下、四国電力送配電）様は、両社のコーポレートサイトについて、スマートフォン対応やWebアクセシビリティ改善を軸とした大規模なリニューアルを実施しました。
2社合わせて約700ページに及ぶ制作を、DNPコミュニケーションデザイン（以下、DCD）はディレクション、デザイン、コーディングを担当しました。インフラ企業に求められるさまざまな要件に向き合いながら、使いやすさと完成度をどのように両立させたのか。プロジェクトを担当した西日本CXデザイン本部の平野が語ります。
1. スマートフォン対応とWebアクセシビリティ改善 ― 大規模インフラサイトに突きつけられた課題
今回のWebサイトのリニューアルにあたって、クライアントにはどのような課題感があったのでしょうか。
四国電力様、四国電力送配電様ともに、前回のサイトリニューアルから約5年が経過しており、その間にユーザーの閲覧環境がPC中心からスマートフォン中心へと大きく変化していました。そのため、スマートフォンでの見やすさ・使いやすさを重視した設計への刷新が課題として挙げられていました。
また、サイトの更新・運用方法が特殊で難しいという課題があり、運用体制や環境の改善や「掲載するイラストに親しみやすさを持たせたい」というご要望、『障害者差別解消法』の改正をふまえたWebアクセシビリティへの対応も、リニューアルにおける重要なポイントとして共有されていました。
これらの課題に対して、DCDからはどのような提案をされたのでしょうか。
まず両社それぞれの特性に合わせて、コンセプトを分けて提案しました。四国電力様には生活者に身近な企業として「親しみやすさ・共感」を、電力を安定してとどける役割を担う四国電力送配電様には「信頼・安心」を軸としたデザインの方向性を提示しています。
また、既存のCMS環境や運用体制を踏まえ、セキュリティや運用負荷、導入コストとのバランスを考慮し、新たなCMSを追加導入しない標準的なHTMLベースでの制作とするシンプルな運用プランを提示しました。また、複数人でサイト更新を行うため、更新履歴やファイルの変更内容を管理できる仕組みの活用を提案。運用環境の構築から運用担当者へのレクチャーも行いました。
Webアクセシビリティについては、日本産業規格「JIS X 8341-3:2016」の適合レベルA（※1）の対応と、一部のページはレベルAA（ダブルエー）の準拠をめざす方針を掲げ、両者共通の方針としています。
- 注釈1 Webアクセシビリティの適合レベルは「A」「AA」「AAA」の3段階があり、「AA」は多くの公共機関や社会インフラ企業などが目標とする水準です。サイト全体で幅広い利用者への配慮が求められるため、対応の難易度が高い基準とされています。
2. 約700ページの大規模サイト制作とユーザビリティ向上の工夫
本プロジェクトにて、DCDが担当した業務範囲を教えてください。
本プロジェクトでは、大日本印刷（以下、DNP）がプロジェクトマネジメントを担い、システム開発はDNPデジタルソリューションズが担当しました。DCDはディレクション、デザインからコーディング、検証までを一貫して担当しています。
ほぼ全てのページをHTMLで制作するため、最初に主要な約100ページのデザインフォーマットを固め、下層ページについては、デザインフォーマットをベースに各ページの情報を整理し、コーディングに落とし込んでいく形で、合計約700ページの制作を担いました。
クライアントの課題を解決するために、具体的にどのような対応をされたのでしょうか。
スマートフォン対応については、デザイン・コーディングの両段階で、小さな画面でも情報を見やすく整理できるようレイアウトや文字サイズを調整しました。表組みなど横幅の大きいコンテンツには、横スクロールできることが一目でわかるアイコンを添えるなど、操作性にも配慮しました。
親しみやすさの向上には、インフォグラフィックス（IG）とユニバーサルデザイン（UD）を融合した当社独自のデザインメソッドである「IGUD（アイジーユーディー）」（※3）を活用しました。個人のお客様・法人のお客様といったメニューをアイコンと文字で直感的に認識できるようデザインしたほか、リンク箇所が一目でわかるよう表現を工夫しています。背景色でコンテンツの領域を区分し、個人向けページは丸みのある柔らかい印象に、法人向けページは端正でかっちりとした印象にするなど、ターゲットに応じたトーンの使い分けもコーディングに反映しました。
Webアクセシビリティについては、適合レベル「AA」への準拠をめざし、自動で切り替わるバナーを利用者自身が停止し、自分のペースで情報を読めるよう、一時停止ボタンを設けました。また、文字の視認性を高めるため背景色と文字のコントラストを高めるなど、障がいのある方々にも情報がしっかり届くよう、細部まで配慮してデザインしています。
- 注釈3 「IGUD」は、「DNPデジタルマーケティング時代のデザインメソッドIGUD」の略称です。
- 注釈3 「IGUD」は、大日本印刷株式会社の登録商標です（商標登録第6084988号）。
3. 妥協なきクオリティへ ― イラスト・フォント・写真に込めたこだわり
制作において、特にこだわった点を教えてください。
最も力を入れたのはトップページです。ファーストビュー（Webページを開いた際に最初に表示される範囲）のバナー下に、地域に根付いた印象を持っていただくために、四国の街並みを表現したオリジナルイラストを描き起こしました。建物のロゴマークや電柱・発電所など、細部に至るまでクライアントの要望に合わせて、デフォルメしつつも現実から離れすぎないよう丁寧に描写しています。
フォントについても、当初は環境依存のフォント（※4）で進めていましたが、「より美しく見せたい」というご要望を受けて、途中からWebフォント（※5）に切り替えました。この変更によって、閲覧環境を問わずフォントの見え方が統一され、視認性が向上しています。また、サイト内で使用する写真については、表示速度とのバランスを取りながら、できる限り高品質なものを採用できるよう対応しました。
制作全体を通して、クライアントの「良いものを作りたい」という熱い想いをしっかりと受け止め、その実現に向けてスタッフと緊密にコミュニケーションを重ねてきました。関係者との調整を丁寧に行った結果、クリエイティブの完成度を高めることができたと自負しています。
- 注釈4 環境依存のフォント：利用者の閲覧する端末によって文字が正しく表示されない場合があるフォント
- 注釈5 Webフォント：利用者の閲覧する端末に左右されず、意図した書体を表示できる仕組み
4. リニューアルがもたらした成果と、次なる展望
完成したサイトについて、どのような評価が得られましたか。
約700ページ、全ての検証を経てリリースにこぎつけた際には、クライアントのご担当者、委託先の制作パートナー、当社を含めた関係者全員で大きな達成感を共有できました。
また、当初課題としていたスマートフォン向け画面のユーザビリティについて、クライアントから外部の調査会社による計測を依頼した結果、リニューアル前と比較してチェック項目のスコアが向上したと伺いました。
今後、どのような案件で力を発揮していきたいと考えていますか。
今回のプロジェクトを通じて、インフラ企業の大規模Webサイト制作に携わることができ、部署としても大規模案件に対応するための知見やノウハウを蓄積できたと感じています。今後は、中四国エリアに加えて九州エリアも含めた西日本全域において、さまざまなWebサイト制作案件に柔軟に対応できる体制を強化していきたいと考えています。そのうえで、多様なクライアントに寄り添い、Webを通じた課題解決に伴走していきたいです。
- 注釈2026年11月時点の情報です。
この記事に関するお問合わせはこちら
