事例9|ウェブサイト改善

日本モンサント

http://www.monsanto.co.jp/

基本デザインを変えずに、細部の変更のみで大幅に質を向上

改善前の問題点

日本モンサントウェブサイト・改善前|製品ページ 日本モンサント株式会社(以下日本モンサント)は、米国に本社を置くグローバル企業である「モンサント・カンパニー」の日本支社です。もともと日本モンサントのウェブサイトは、基本的に本国のウェブサイト(現在はリニューアル済)のデザインと構成を踏襲し、日本語版にローカライズしたものでした。しかし、本来は英語のウェブサイトとしてデザイン設計されたサイトを、そのまま日本語に変換することで、ウェブサイト本来のデザイン性を大きく損なうものになっていました。これは、レイアウト処理(空間構成やマージンのとり方等)の細かい部分において、日本語と英語とでは美しく見える構成や手法が異なるためです。 さらに、以前にローカライズを担当した日本のウェブ制作会社の制作スタイルがとても古いものだったため、ウェブサイトの内部構造やSEO対策に大きな問題がありました。

改善案のご提案

日本モンサントからの条件は、「色やレイアウトなどは本国のデザイン構成に準拠すること」でした。改善前のウェブサイトも同様に本国に準拠した構成でしたので、この基本構成を全く変更しないという条件で、いかに見栄えを良くし、使い勝手を向上させ、機能性を高めるかが本案件の要点でした。
そこで当社がご提案した方針は、「微細なパーツの改善の集積により、より美しいサイトデザインに変更する」「不適切な内部構造を現在の技術で再構成する」「SEO対策の改善」の3点でした。内部構造に大きな問題があるということは、コーディングはほぼ一からやり直しを意味するため、「ウェブ改善」事案とはいえ、実質「全面的な作り直し」を意味します。
デザインの改善については、現状の問題点を洗い出し、具体的な改善案をご提案しました。

現状の問題点(当時)

1― メニュー部分:MSゴシックのテキストデータで、視認性や操作性が悪く、美しくない
2― 各記事の見出し部分:すべてテキストデータで、視認性・デザイン性を損なっている
3― 画像:本国のサイトにはない、不必要な画像処理(ドロップシャドウなど)
4― 全体のレイアウト:空間が少なく、文字が記事を埋め尽くしている。読みづらい、美しくない
5― ページ構成:ユーザーが今見ているページがどこなのか、分かりにくい

各改善箇所についての解説

本案件のデザインの作り直しにおいては、基本デザインが既に決まっているため、各パーツの作り直しとレイアウトの細かい調整を積み重ねるという手法をとっています。以下に列挙するのは、各見出し部分の修正の例です。丁寧なデザイン表現を心がけた修正を行うことで、全体の印象を向上させました。

各項目の文字を美しいフォントに変更、サブメニューは空間に余裕をもたせる
見出しテキストを美しいフォントに変更、見出し用に文字の間隔を調整
ドロップシャドウ等の画像処理を排除
揃えられるところは揃え、適切な余白を持たせる 線の色・太さにもメリハリをつけた
各ページの先頭にカテゴリ毎のトップイメージを挿入
改善後の効果

日本モンサントウェブサイト・改善後|TOPページデザイン上の改善によって、事業規模に相応しいデザイン品質となり、ユーザにとっても読みやすく使いやすいウェブサイトとなりました。また、内的なSEO対策も大きく改善したことにより、アクセス数は改善直後から数十%の増加がみられています。

制作ノート
プログラマ

前任の会社の制作したソースコード(プログラム)が拙劣なものであったため、改善したページは全て作り直しています。時代遅れとなっているテーブルスタイルを廃しただけでなく、各見出しの設定や画像の代替キーワード設定を行うなど、細かい作業を丁寧に行っています。改善直後からアクセス数が向上するなど、その効果は大きく反映されました。

デザイナ

ウェブサイトのデザインで多くみられるのは、細部のデザインに無頓着であることの集積によって、全体のデザインの完成度を著しく落としてしまっていることです。「揃えられるところは揃える」「適切な空間をとる」といった、デザインの最低限の基本をきっちりとするだけでも、サイト全体の見やすさ、美しさを大きく改善することができることがこの事例から理解いただけると思います。

サイトデータ
ナビゲーションタイプ

左袖ナビゲーション型

メインカラー

FFFFFF
A5BE0E
213C0F
666666

主なフォント
筑紫明朝B ヒラギノ角ゴシックW6 筑紫ゴシックB