【最新】勝手にホームページリニューアル分析~IMJ編~
「IMJ」がコーポレートサイトをリニューアルしました。
IMJは、国内有数のデジタルマーケティング企業です。
参考にすべき要素が多々見受けられます。
どのようなリニューアルになったのか、分析しながら紹介します。
ホームページ制作.jpってどんなサービス?
- 運営10年!老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能!
- しつこい営業は一切致しません!
全国通話無料
受付:年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します!
宇野(うの)
田丸(たまる)
真中(まなか)
記事監修者の紹介
真中 淳一
墓石、屋根、外構、防水工事の一括見積メディア運営を6年間経験致しましたので、お客様対応からポータルサイト一からの立ち上げの経験は豊富にあります。また、その他にもオリジナルCMS開発、予約システム、プラットフォームのディレクターも5年経験を積んでいるので、幅広いシステム開発の要件の知識やノウハウもあります。これからホームページを作成されるお客様のお力になれれば幸いです。
1.リニューアルされたホームページと運営会社について
2019年7月に、IMJのコーポレートサイトがリニューアルしました。IMJは、Webサイト構築において、国内最大手とも言われている企業です。
1.コーポレートサイトをリニューアルした「IMJ」とは
IMJの正式な社名は、株式会社アイ・エム・ジェイです。IMJは、グループ企業から独立する形で、1996年に設立されました。2017年11月に本社を東京都港区に移転し、2017年12月にACCENTURE HOLDINGS B.V.の完全子会社となり、現在に至っています。
IMJのブランドスローガンは、「REINVENTING THE EXPERIENCE」です。日本語に訳すと「体験を再発明する」です。これは、リニューアルする前からのテーマであり、グループ企業のアクセンチュア インタラクティブと、共通のブランドスローガンでもあります。
IMJは、Webサイト構築に関する高い技術を保持するとともに、事業を拡大しながら成長している企業です。コーポレートサイトを見ると、事業内容はデジタルマーケティング事業となっています。
2.IMJのコーポレートサイトのリニューアルにおける3つのポイント
2019年7月に、IMJが行ったリニューアルは、洗練されたレスポンシブデザインを実現しています。レスポンシブデザインとは、画面サイズの異なるデバイスであっても、見やすく統合されたホームページを作成することです。今回のリニューアルでのポイントを、3つに分けてご説明します。
1.全てのデバイスに、共通の折り畳み式グローバルメニューを表示
ップページから開くと、最初に表示される画面は、3分の2をメインビジュアルが占め、3分の1はグローバルメニューです。グローバルメニューは、背景色が黒で、文字色が白のデザインです。カラフルなメインビジュアルと対照的であり、色彩的なバランスの良さを感じます。
またグローバルナビゲーションは、トップページ以外は折り畳まれていて、隠れている状態です。この仕様は、スマートフォンだけでなく、パソコンにも取り入れられています。2本線アイコンを、クリックするかタップすると、トップページと同じ位置に表示されます。表示位置は、パソコンが画面の右3分の1、タブレットとスマートフォンが下3分の1です。
リニューアル前は、PCサイトではメニューバーが採用されていました。メニューバーは、メニュー項目をボタンにして、バー状に並べるナビゲーション機能です。スペースを必要とするため、スマートフォン向きではありません。
2.トップページのメインビジュアルで世界観を表現
トップページを開くと、インパクトのあるメインビジュアルが表示されます。カラフルで、目を惹く、凝ったデザインの画像には、ブランドスローガンを基に、テーマ性を持たせています。
IMJのコーポレートサイトには、次のように記されています。
“ヒト、モノ、コト、情報、経験などあらゆる要素が集約された世界観をダイナミックに表現”(引用元:「IMJ、コーポレートサイトリニューアルのお知らせ」、URL:https://www.imjp.co.jp/news-report/news/information20190704.html)
ブランドスローガンとともに、メインビジュアルをトップページ上部に表示するスタイルは、リニューアル前も同様でした。ただし、メインビジュアルを含めたデザイン変更は、リニューアルのポイントの1つになっています。
3.カテゴリーの画像ブロックをタイル状に配置
トップページを下にスクロールしていくと、大カテゴリーへ移動するための画像ブロックが、隙間なくタイル状に配置されています。画像ブロックのカテゴリーは、グローバルメニューとほぼ共通する項目です。画像ブロックには、必要に応じてカテゴリーの概要が書かれています。
画像ブロックは、パソコンの場合は横に3等分されるレイアウトです。タブレットとスマートフォンでは、縦にのみ区分けする状態で表示されます。ニュースやトレンドは、読みたいコンテンツへの文字リンクを選択します。それ以外のカテゴリーは、画像ブロックを選択して、大カテゴリーへ移動する仕様です。
画像ブロックを用いるレイアウトは、ホームページ全体に採用されています。全体的に、操作が簡単で、使いやすいホームページに仕上がっています。
リニューアル前のPCサイトでは、メニューバーにサブメニューを展開させたり、メニューボックスを設けたりしていました。また、トップページでは、見出しを設けて、大カテゴリーを紹介するスタイルでした。
3.IMJのホームページはリニューアルによってどのように変わったのか
リニューアル後のIMJコーポレートサイトでは、ナビゲーション機能が大幅に簡略されました。ホームページ内を行き来する手段は、折り畳み式グローバルメニューと画像ブロックが中心です。それ以外は、フッターにある定型情報へのリンクや、記事コンテンツへのリンクが、多少残っている程度です。
1.洗練されたレスポンシブデザイン
レスポンシブデザインは、HTMLファイルを1つだけ用意し、デバイスの画面サイズに応じたレイアウト調整を、CSSで行う方法です。ホームページ制作では、パソコンやタブレット、スマートフォンなどのデバイスごとにHTMLファイルを用意する方法もあります。
しかし、Googleでは、モバイル対応済みページの検索順位を上げると発表し、方法としてレスポンシブデザインを推奨しています。つまり、レスポンシブデザイン導入は、SEO対策にも繋がるということです。
IMJのコーポレートサイトは、パソコンとタブレットとスマートフォンを使って利用していても、統一感があります。デバイスを変えながら閲覧していても、大きな差異を感じることはありません。
2.視認性の高いデザインによりホームページ閲覧時の負担を軽減
昨今は、パソコンよりスマートフォンで、ホームページを閲覧する人が増えています。また、画面サイズの異なる複数のデバイスでも、快適に閲覧できるマルチデバイス対応のホームページ制作が求められています。
IMJコーポレートサイトは、トップページ以外ではグローバルメニューを表示するために、2本線アイコンが右上に常時表示されています。この設計により、画面全体にメインコンテンツを表示できるようになりました。
3.高い操作性がホームページ内での快適な回遊を実現
今回のリニューアルでは、複雑なナビゲーション機能を省き、シンプルな構成に変更されています。旧PCサイトでは、メニューバーやサブメニュー、メニューボックスが設けられていました。
旧ホームページのように、グローバルメニューをはじめとする、ナビゲーション機能を充実させることにもメリットはあります。グローバルメニューなどは、サイト構造を認識しやすくし、目次のような役割を果たします。
しかし、ウェブサイトでの操作性を高めることで、最低限のナビゲーションでサイト内をスムーズに行き来できます。ホームページ内を回遊するために用意されているのは、2本線のアイコンや画像ブロック、「BACK」と「MORE」の文字リンクなどです。
4.まとめ
IMJコーポレートサイトのリニューアルは、レスポンシブデザインを導入する際のお手本になるでしょう。既に、レスポンシブデザインを導入済みでも、参考にすべきことがあるのではないでしょうか。レスポンシブデザイン導入は、Googleも推奨しています。Google検索での上位表示を重視するなら、レスポンシブデザイン導入は有効です。
リニューアル制作の費用などの詳しい内容はこちらをご覧ください。
ホームページリニューアル制作の費用や料金相場などをまとめて解説