MENU

レスポンシブデザインでのグローバルナビの表現方法

2016年11月10日

レスポンシブ デザイン の グローバルナビ

 

スマホでのグローバルナビの表現方法は次の2通り

 

※どちらも、優劣と賛否がある・・・

選択基準は、結局好み・・・ということになると思うが、・・・

 

私たちが、ご支援する

「スマホ最適化・集客サイト」のグローバルナビは、

 

  1. 1.スマホでは「MENU」のみ表示し
  2. 「MENU」をタップすることでナビメニューを下に開くパターン

(パソコン画面で見ると横1列に6個のグローバルナビメニューの表示)

スマホ画面とパソコン画面の比較

 

スマホ画面の右は、

お問い合わせのページで「MENU]をタップして

アコーデオンメニューを開いたところ

 

パソコン画面は、一般的な6つのグローバルメニュー表示

 

どのページにいてもタップで電話

スマホのイメージで、グローバルメニューを閉じた(通常)状態と、タップで開いた状態

一番の特徴は

スマホのどのページにいてもタップで電話を直ぐにできること。

                       

スマホとパソコンで見た場合、最初にどの様に表示されるかのイメージ スマホとパソコンで見た場合、最初にどの様に表示されるかのイメージ

 

 

  1. 2.スマホでは、横に3列、縦に2行、
  2. 計6つのナビメニューを表示させるパターン

(こちらもパソコン画面で見ると横1列に6個のグローバルナビメニューの表示)

 

スマホのイメージで、最初から固定のグローバルメニューを表示 スマホのイメージで、最初から固定のグローバルメニューを表示

 

実サイトで、スマホとパソコンの表示 実サイトで、スマホとパソコンの表示

 

 

 ・・プルダウン方式「1」は、

グローバルナビが最初は見えないので、開く必要がある、

 

しかし、メニュー分のスペースを取られないので、

最初に開いたコンテンツの表示スペースが広がる

 

 

 ・・固定表示方式「2」は、

グローバルナビが最初から見えているので、

どんなページがあるのか大凡のイメージがつく

しかし、スマホの限られた画面サイズの中で

ナビメニューの表示面積が・・・

 

 

 ・・ここからは筆者の独断となるのだが、

 

(スマホでは表示スペースが限られるので、初期表示が大事)という事。

 

インターネットが初期のころ、サイトにアクセスするには

URL(http://www.xxyyzz.comなど)を入力しなければならなかった。

 

 

今では、Googleなどの検索エンジンを利用し、

検索」からサイトを訪れることが出来る。

 

スマホで「URL」を入力する人は少ないはず

(と、いうか非現実的でもある)

 

URL」はサイト・ページを特定する上で必須のものではあるが、

 

今は、

パソコンからでさえ「検索」が主流で

「URL」を入れてサイトに訪れる人は少ない

 

・・・あなたは、どうでしょうか?

 

今では、

Googleなどの検索エンジンが進化したおかげで、

殆どの人が、キーワード「検索」でサイトを訪れる

 

もちろん

「グローバルナビ」や

「サイドカラムナビ」「フッターナビ」の

メニューを否定している訳でも、その有用性を否定している訳でもないが、

 

ナビMENUから、

サイト内のページを・・・(巡回)するより、

 

検索」から、

直接自分の欲求や悩みを解決したい利用者は、

直接該当ページを見ることが多い

(それゆえに、「検索」で訪れたページのコンテンツが重要になる)

 

✔ 訪れたページに、欲求を満たすコンテンツが無ければ、離脱するのです。

 

 MENUから、他のページに行き、

自分の求めるコンテンツを探すより、

他のサイト(「検索」結果から)を探す方が圧倒的なのです。

 

✔ だから、

 サイト内のコンテンツが大事

(キーワードにマッチした記事を書くことが大事)なのです。

 

✔ 特に、

スマホの限られた画面サイズの中で、

グローバルナビの「MENU」バーの占める面積は少ない方が良いと考えるのです。

 

毎回毎回

各ページにメニュー内容が表示されるのは

 

検索」でやって来た人には邪魔でしかないのです。

 

✔ かといって「MENU」が小さすぎても良くない

 

(よく見かけるのは一応「スマホ対応」※しているものです)。

 

一応「スマホ対応」※しているが、分かりにくいグローバルナビの例①、②、③ 一応「スマホ対応」しているが、分かりにくいグローバルナビの例①、②、③、いづれもハンバーガーメニュー

 

 

肝心の電話がかけられなかったり、

電話番号を探してかけたり、

電話をかけることが出来る位置(ボタン)表示が限られていたり、

スマホとパソコン様に2重開発だったり・・・

 

私たちのグローバルナビ「MENU」はこの様な形で、

ページの上段に一列で表示しています。

グローバルナビ「MENU」はこの様な形で、ページの上段に一列で表示しています

 

もちろん、全体的な色調(テイスト)に合わせて

「MENU」バーの色は変えられます。

 

そして、

「MENU」の内容を知りたい人(見たい人)だけが、

タップする(タップで表示できれば良い)と考えています。

タップで「MENU」を展開表示したイメージ(部分抜粋表示したところ) タップで「MENU」を展開表示したイメージ(部分抜粋表示したところ)

 

何故なら、

「検索」で、サイトを訪れる人は、明確な目的を持って、

 

自分の悩みや、欲求を解決したい・・・

 

その為に「関連する」キーワードで検索します。

 

検索キーワードにマッチしたサイトのページに直接やって来ます。

 

(今では、グローバルメニューから、サイト内を巡回する人は少ないと言われています。)

 

だから、

 

各ページ・各ページのコンテンツが大事になってくるのです。

 

そして、あなたのお客様になってくれるかも知れない人たちが、

 

検索」しそうなキーワードを含めた記事が大事なのです。

 

あなたのサービス・あなたの商品について

 

あなたのお客様になってくれるかも知れない人たちが、興味を持つように

 

お客様のベネフィット(それを買ったお客様にどの様な良い事)が

あるのかを伝えることです。

 

 

ここで、

勘違いをして欲しくはないのです。

 

グローバルナビや

サイドカラムナビ・フッターナビの「MENU」が

不要だと言っている訳ではありません。

 

 

あなたの、

お客様になってくれるかも知れない人たちの目線

それぞれの「MENU」の内容と順番を決める必要があります。

 

 

グローバルナビ「MENU」は、

 

あなたの、お客様になってくれるかも知れない人たちの為に一番必要とする情報に

 

特に、

地域ビジネス店舗型の場合は、

以下の6つです。

 

  1. 1.アクセス
  2.  (交通案内:Googleマップ必須)
  3. 2.お問い合わせ
  4.  (最適化されたメールフォーム必須。予約が可能な場合は予約用のフォームも)
  5. 3.お客様の声
  6.  (記入しやすいA4サイズのアンケート:手書き、顔出し・名前だしならマーケティングに最適です。)
  7. 4.選ばれる理由
  8.  (お客様の声から)
  9. 5.サービスメニュー
  10.  (あなたが提供できるもの(コンテンツ)、大まかな料金(明朗会計))
  11. 6.そして、これらを端的に伝える
  12.  Topページ(お客様へのメッセージやお知らせ、あなたのコンテンツの概要)

 

以下に、

私たちがご支援する

スマホ最適化・集客支援サイトの

 

レスポンシブデザインの事例をご紹介します。

 

(サイドカラムのメニューは、スマホではメインコンテンツに続いて縦に表示されます。)

 

 

1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホはプルダウン式メニュー」 1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホはプルダウン式メニュー」

 

1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホはプルダウン式メニュー」 1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホはプルダウン式メニュー」

 

1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホも固定式メニュー」 1つの記述で、スマホ・パソコン・タブレットに最適表示「スマホも固定式メニュー」

 

 

そして、

スマホのフッターナビの「MENU」表示例

 

スマホのフッターナビの「MENU」表示例、もちろん、表示させるメニューを選択できます。 スマホのフッターナビの「MENU」表示例、もちろん、表示させるメニューを選択できます。

 

 

これは、

私たちの「こだわり」・・・と言うより、

サイトに訪れた、あなたのお客様になってくれるかも知れない人たちへの

「利便性」を考慮したことの・・・結果でもあるのです。

 

 

あなたは、

この様なサイトをどう思われますか?

アコーデオンメニュー

どのページにいても「MENU]のタップで、

アコーデオンメニューを開くことができます。

 

スマホではどこからでもタップで電話できます。

 

これらを1つのHTML記述で実現します。

 

スマホ専用とか、パソコン用とかの区別はありません。

 

これがモバイルフレンドリーで

スマホにもパソコンにも優しい

最適化されたサイトです。

 

Googleのモバイルファーストインデックスにも対応しています。

 

 

新着記事

サイト統合のお知らせ

◇2018年12月19日◇

お知らせ 当サイトは年内を持ちまして以下のURLのサイトに統合いたします。 https://a-itc.info/ テーマ 統合先のテーマは、今まで通りです。 モバイルフレンドリー モバイルファー

サイトをリニューアルしました。といってもこのサイトではありません

◇2018年7月26日◇

当然ですが 今まで、他のテーマでアップしていたサイトの コンテンツを全面リニューアルです。今回のリニューアルに際して意識した点は、顧客視点。使いやすく、分かりやすいサイト。検索から訪れて来てくれた人たちのベネフィットがあること

あたりまえのアダムス

◇2018年4月22日◇

 もし、 あなたが、つねに改善を求めているのならば、 この本は、 あなたが今まで読んだ本の中でも最も興味深いものになるでしょう。          もし、 あなたが、 何らかの成果を求め続けているのならば、 私が今からお伝えす

自然言語検索があなたのWebサイト集客にもたらすもの

◇2018年4月8日◇

    「ググる」ということをあなたも行ったことがあると思います。   と、 言うか、 今ではほとんどの人が、 「ググる」ことなしに日々を過ごしているとは思えません。     それほど、日常生活に溶け込んでいます。    

MFI始まる。あなたのサイトは大丈夫ですか?

◇2018年3月30日◇

  いよいよ始まります。 Googleが長期にわたってテストと検証を行ってきた モバイルファーストインデックス もし、あなたがWebサイトをお持ちなら、 モバイルに対応する必要性をお感じなら、 この記事を読んでみてください。

あなたのサイトに自然言語検索がもたらす影響

◇2018年3月20日◇

あなたのビジネスはもっとWebを活用すべきです。Webなら大企業より小回りの利く地域ビジネスの方が断然有利です。自然言語検索の実現は、文脈を理解する技術をもたらします。あなたのお客様になってくれるかも知れない人たちに向けたコンテンツを作成し、検索エンジンに…

思いをつたえる

◇2017年12月2日◇

 あなたは、どの様にお伝えしていますか?あなたが、ご自分のサービスや商品を紹介するときサービスの特徴や商品の性能や機能の説明になっていませんか?「つたえる」伝わらない。人とひとをつなぐもの、それは、

人気記事

前の記事で、集客にはスマホ・サイトの充実が必要だと書きました。    何故、スマホ・サイトが必要かとお思いでしょうか? それは、既存のHP(ホームページ:サイト※1)は、   パソコンの大きな画面で見ることを前提に作られている

この記事の関連記事

まず質問です。 あなたは何故Webサイトをお持ちなのでしょうか?     あなたのWebサイトは、お役に立っていますか? いまはまだ課題を認識されていないのかも知れませんが、・・・   あなたのWebサイトには2つの問題になりうる

つたえる   伝わらない   人に何かを話した時   あなたは、こんな風に感じたことはないでしょうか?   または、     どんな風に 話したたら伝わるだろうかた考えたことは、   ありませんか?   たわいもない

当然ですが 今まで、他のテーマでアップしていたサイトの コンテンツを全面リニューアルです。今回のリニューアルに際して意識した点は、顧客視点。使いやすく、分かりやすいサイト。検索から訪れて来てくれた人たちのベネフィットがあること

    「ググる」ということをあなたも行ったことがあると思います。   と、 言うか、 今ではほとんどの人が、 「ググる」ことなしに日々を過ごしているとは思えません。     それほど、日常生活に溶け込んでいます。    

リスクヘッジ サイトオーナーがこれを知ったら夜も眠れない。   2017年1月僅週間あまりで155万ものサイトが改ざんされた。(エイプリル フール では、ありませんよ) 出典:米Feedjit これはWordPressのバージョン4.


最新記事

« 前123456...25次 »

アーカイブ

2018

お知らせ

 

お知らせ

こんにちは

会社情報

合同会社 アルファ・ITC

 https://a-itc.info

上記サイトは、新しいスマホ最適サイトです

 

 

このサイトは、

IT有資格者(ITコーディネータ)が、

 ご提案する 集客(顧客獲得)に特化したサイトの制作例です。

電話番号

080-4433-7227

所在地

〒230-0041
神奈川県横浜市鶴見区


© 2021 スマホ最適化ホームページで商売繁盛。あなたも! All rights reserved.