今日は、レスポンシブウェブデザインで作成されたサイトについて探していたところ、ナビ部分が特に良くできていると思ったサイトを見つけましたので、紹介します。
レスポンシブウェブデザインってなんですか？という人はこちらをご覧ください。
スマホサイトを作成するならレスポンシブWEBデザインが必須
早速ですが、本日見つけたよさそうなサイトはこちらです。
https://www.chozai-ma.jp/index.html
私はこのサイトのトップのナビ部分が特に秀逸だと思います。
早速ブックマークしました。
今後、お客様に提案するサイトの１つとしてこのサイトを紹介したいと思います。
このサイトは全体的に白とグレーでレイアウトをとり、ポイントカラーの緑でまとまっています。
そして、ポイントカラーとは反対色の赤を問合せボタンの色に採用しています。
スマホ向けにレイアウトをゆったり目に取っているところも良いと思います。
全体的にスマホを意識したデザインなのですが、さらに私がいいと思ったポイントを３つあげておきますね。
１、PC、タブレット、モバイル用のヘッダーのレイアウトを変えている。
企業サイトでも今までここまで細かく手の込んだレイアウトを取っているサイトはあまり見た事がありません。
しかし、今後このような３つのレイアウトに変化するスタイルは増えていくと思いますし、是非真似したいポイントです。図はPCとタブレットとスマホで見たときのヘッダを抜き出したものです。
部品毎に赤枠で囲みましたのでそれぞれに変化に注目してください。
（１）ヘッダーキャッチコピー
（２）ロゴ
（３）問合せ案内
（４）メインメニュー
２、スマホの時だけ電話番号が押せるようになっている。
図の１を押すとメニュで電話（図の２）が出てきます
ここをタップすると電話をかけられる仕組みになっています。
PCサイトでも電話番号が出てきましたがこれは押せません。
スマホサイトになって初めて押せるようになっているところに、制作者の細かい配慮がうかがえます。
３、ヘッダー部分が常に上部に固定されているため、ユーザーを迷わせない作りになっている。
（１）サイトをスクロールしていっても
（２）タイトルは、常に上部に固定されて、ページ合わせてついてくる。
このようにメニューが固定化してあると、ユーザーがメニューを探す手間が省けて、他のページを見て回ってくれる可能性が上がります。
しかし、私が秀逸だと思った点は上記に加え、全ページがこのようになっているわけではなく、問合せページでは、固定されてないところです。
問合せページでは、通常のサイトのようにスクロールするとメニューも消えます。
問合せページはユーザーに問合せに集中してもらいたいので、他のページに移動させる事を避けたいです。
ここにも作者のこだわりが見えますので、このサイトを作った人はデザインの知識だけではなく、きちんと訪問者の事も考えられる優秀な制作者によるものと思われます。
是非、ウチで作っているCMSに取り入れたいです。
http://be-cms.com/
本日もお読みいただきましてありがとうございました。
ホームページ作成アドバイザーの田中がお伝えしました。
このブログの内容についてご質問はありませんか？
少しでも不安や疑問がありましたら、どうぞお気軽にご連絡ください。
あなたからのご連絡を心よりお待ちしております。
メッセージを送る！
今回の記事を気に入っていただけた方はこちらへ！