全国対応年中無休 24時間電話受付 携帯・PHSからも通話可能
0120-900-584 0120-900-587
簡単一括見積はこちら

【最新】勝手にホームページリニューアル分析~IMJ編~

【最新】勝手にホームページリニューアル分析~IMJ編~

【最新】勝手にホームページリニューアル分析~IMJ編~

IMJ」がコーポレートサイトをリニューアルしました。
IMJは、国内有数のデジタルマーケティング企業です。
参考にすべき要素が多々見受けられます。
どのようなリニューアルになったのか、分析しながら紹介します。

ホームページ制作.jpってどんなサービス?

  1. 運営10年!老舗のホームページ制作無料一括見積サービス。
  2. 審査済優良ホームページ制作会社のみに見積もり依頼ができる。
  3. お見積もり無料。何度でもご相談無料お断り代行も無料
  4. 訪問無しのオンライン相談可能
  5. しつこい営業は一切致しません!

全国通話無料

受付:年中無休/24時間電話受付

0120-900-587

私たちが全力でサポート致します!

宇野(うの)

宇野(うの)

田丸(たまる)

田丸(たまる)

真中(まなか)

真中(まなか)

無料見積ホームページ制作.jp無料一括見積フォームはこちら

真中 淳一

記事監修者の紹介

真中 淳一

墓石、屋根、外構、防水工事の一括見積メディア運営を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検索での上位表示を重視するなら、レスポンシブデザイン導入は有効です。

リニューアル制作の費用などの詳しい内容はこちらをご覧ください。
ホームページリニューアル制作の費用や料金相場などをまとめて解説