当社Webサイトのリニューアルについて

既にお知らせ「当社Webサイトをリニューアル」にありますように、先月23日、当社ミツエーリンクスの企業サイト（www.mitsue.co.jp、以下「当サイト」）をリニューアルしました。それまで、私が入社した2004年2月時点での情報構造やビジュアルデザインを維持してきましたから、少なく見積もっても8年以上ぶりのリニューアルになります。その間、Webの閲覧環境はもとより、デザインのトレンドや実装技術は大きく変化してきました。

2004年4月に当サイトのWeb標準準拠を実施し（コラム「Web標準に準拠する価値」参照）、以後も継続して運用に参加してきた立場ゆえ、早くリニューアルをしたいという思いは日常的に抱いていました。とりわけ自分の担当したマークアップ/スタイルシート設計について、「今の自分ならこうする」「最新の技術ならこう作れる」といった点は多く認識してきました。そうであればこそ、陳腐化した設計を「自らの手で」壊し、作り直すことにこだわりました。しかし、そのこだわりの強さが、リニューアルの大幅な遅延を招くこととなりました。その点につきましては、当サイトを日頃からご利用いただいている皆様、また社員の皆様に対し、この場をお借りして深くお詫び申し上げます。

なにぶん、8年以上もの長きに渡り大幅な改修を加えてこなかったわけですから、どうリニューアルしようと改善しないわけがない、という見方もあるかと思います。しかし、情報設計やビジュアルデザインといった各分野における社内のエキスパートの皆さんに参加いただけた甲斐あって、全体としては良いかたちにサイトを再構築できたように思います。積み残しの作業や今後取り組むべき課題は多くありますが、フロントエンドの設計と実装を担当した立場から、今回のリニューアルを総括しておきたいと思います。

HTML5の採用とレスポンシブWebデザイン

リニューアルのポイントは、大きくは HTML5 の採用とレスポンシブなデザイン実装の二点になります。以下、冒頭で触れたお知らせ文より引用します。

HTML5は、今まさに策定が進められている、次世代のマークアップ言語です。W3Cによる勧告はまだ先のことであり、策定途中の仕様を採用することには、一定のリスクを伴います。しかし、HTML5が将来のWebの基盤となるであろうことを見据え、採用しました。

レスポンシブWebデザインは、メディアクエリーと呼ばれる技術を用い、画面のサイズに応じてページのレイアウトや画像のサイズを変更する手法のことです。従来のパソコンに加え、スマートフォンやタブレット型端末など、Webの閲覧環境は急速に多様化してきました。そうした変化に対し、レスポンシブWebデザインには一定の有効性があると考えます。

HTML5については、今後の仕様変更の可能性やブラウザー/支援技術側のサポート状況などを踏まえ、新たに定義された要素や属性はあまり使っていません。具体的には以下に挙げるぐらいしか使用していないのが現状です。

そういう意味では、現時点では消極的なHTML5採用と言えるかもしれません。しかし、今後マークアップを見直すなかで新しい要素/属性についても使用を都度検討し、より意味的でHTML5ならではの価値を提供できるマークアップにしていければと考えています。

なお、HTML5と直接の関係はありませんが、リニューアルを通じ、よりコンパクトで有用なマークアップとなるよう配慮しています。たとえばmeta要素を使ったキーワードの提供をやめたり、画像を埋め込むimg要素でwidth/height属性を省くなどしています。前者はSEO上のメリットが薄くなった現状と運用負荷を踏まえ、また後者についてはレスポンシブWebデザイン上の都合から、そうした方針を採用しています。また、以前は個人情報の取り扱いやコンテンツのフィルタリングに関連して P3P と PICS に対応していましたが、いずれも有効利用されているとは言い難く、今後は対応しない方針です。

レスポンシブWebデザインについては、スマートフォン版のサイトを別途構築する計画を変更、リニューアルプロジェクトの途中から要件に盛り込んだものです。モバイルデバイス経由でのアクセスが増えてきたこと、そしてモバイルデバイスのスクリーンサイズの多様化が急速に進んできたことの二点が動機になります。

これを機に、従来であればデスクトップ環境上の主要なブラウザーに「ほぼ同一の」ビジュアルデザインを表示できるよう画像に頼っていたところを、できるだけスタイルシートで実装するようになりました。具体的には俗にいう「角丸」であったり、ボックスに対する影付け、グラデーションなどをCSS3で表示させています。

当然ながら、それらの仕様に未対応のブラウザーでの表示結果は、デザイン趣意と異なります。たとえば、IEのバージョン8以下では角丸の表現に使うborder-radiusプロパティに対応していないため、角張った見た目になるでしょう。そうした古いIE向けに、画像を使わず同じ表示を得るテクニックも存在するものの、敢えて採用は見送りました。バランスの取り方次第ではありますが、モバイルとデスクトップの分け隔てなくデザインを実装するうえで必要な割り切りのひとつと考えた結果です。

ほかにも、モバイルデバイスからのアクセスを踏まえ、複数のファイルに分割していたスタイルシートを一元化するようにしたり、またサイト内で使用するモジュール（見た目上の最小構成単位）のバリエーションを最小限にとどめるなどし、低速通信環境下でもできるだけストレスなく表示されるよう配慮しています（さすがにトップページは表示完了まで待たされてしまいますが…）。

HTML5の採用とレスポンシブWebデザイン以外では、以下の各項がフロントエンド周りでの主要な変更点になります。

• 文字コードの変更（シフトJISコードからUnicodeへ）
• MJLの採用
• スクリプトの読み込み位置の見直し
• IE8以下向けスクリプトの利用（ html5shiv 、 IE7.js ）
• SSIの採用による管理/運用負荷の低減

今後に向けて

先に述べましたように、積み残しの作業、今後取り組むべき課題は多くあります。短期的には以下の各項への対応を急ぐことになります（順不同）。

• 英語版や各種Blogをはじめとする旧デザインのままのコンテンツへの新デザインの適用
• ソーシャルメディアとの親和性の向上
• CMSの導入と古い設計のままのURLの見直し、メタデータの充実
• アクセシビリティのさらなる検証と改善
• 動画/Flashコンテンツの表示パフォーマンスの改善
• 画像の表示パフォーマンスの改善
• IE6に対するサポート状況の改善

Webサイトを運用なさっている方であればよくご存知のように、リニューアルはひとつの区切りにしか過ぎず、以後の運用のなかでどれだけ継続的改善を実行できるかが問われます。引き続き、Web制作会社のWebサイトとしての「あるべき姿」を模索しつつ、スマートなコミュニケーションの実現に向け尽力します。今後も当サイトをご活用いただければ幸いです。