ホームページ制作前に必見!レスポンシブWEBデザインの徹底解説。いまさら聞けないネット・パソコン用語シリーズ。

Pocket

レスポンシブWEBデザインとは、パソコン、スマホ、タブレット等のどの機器から閲覧してもバッチリ見やすく表示されるデザインです。

ホームページを見てるだけの方はレスポンシブWEBデザインとかなんとか気にしなくて全然OKですが、これからホームページを作ろうとお考えの方は絶対に必見です。

この記事をご覧頂いてる閲覧者の方も、パソコンでご覧頂いている方、スマホでご覧頂いている方、色々いらっしゃると思いますが、ご自分の見ている画面以外の、他の機器からだとどう映るのでしょうか。

じゃあ、実際にどの様に見えるか検証してみましょう!

まずは

パソコンで見るマモネットのホームページのイメージ画像がこちら。

1

スマホ(iPhone6s)で見たイメージはこちら

1

タブレット(iPad)で見たイメージはこちら(縦)

1

タブレット(iPad)で見たイメージはこちら(横向き)

1

この他にも同じパソコンでの表示でも、ノートパソコンとデスクトップでは画面の大きさが全然違います。

が、しかし!どの機器で閲覧しても同じ様に見えるのです。

文字や画像が小さくて見えにくい!なんてことにはならないのです!

それぞれの機器・画面に合わせた最適な大きさに表示してくれるのがレスポンシブWEBデザインです。

では、レスポンシブWEBデザインではなく、通常のパソコン用ページと「mフォルダ」と言われるスマホ用のページを別々にお作りしているタイプとはどう違うのでしょうか。

通常のパソコン用とスマホ用に分けているタイプはリニューアル前のマモネットのホームページで検証してみましょう!

マモネットではレスポンシブWEBデザイン用に2016年にリニューアルしました。(遅い!もっと早くリニューアルすればいいのに、自社サイトはついつい後回しになってしまいます)

古いタイプのマモネットのホームページはこちら。

1

悪くは無いと思います。(自画自賛(笑))

でも、画面いっぱいいっぱいに使っていません。

小さなモニターで閲覧されたときのことを思うと画面いっぱいに使うわけにはいかないのです。

この古いタイプの作り方だと、小さい画面で見たときに画像や文字が小さく見難くなります。

これがレスポンシブWEBデザインでは画面いっぱいいっぱいに使っても、常に閲覧する画面に合わせて最適化されるので、小さい画面の人も大きい画面の人も同じ様に閲覧されるのです。もちろん、画像や文字は小さくなりません。

では、古いタイプのスマホ用はどの様になっていたのでしょうか。

マモネットの古いタイプのスマホ用はこちら

1

全く別のデザインです。

そうです。スマホで見やすいように別に作っているので全然違うデザインです。

デザインだけじゃありません。

パソコン用と同じ内容にすると要領オーバーで表示出来ないので簡素化していました。

で、パソコン用にアップしている情報で、閲覧者に見てもらいたい、でもスマホ用では表示しきれない情報は、「PCサイトはこちら」と苦肉の策のリンク表示していました。

今は一人一台スマホを持っている時代と言われています。

で、パソコンでわざわざ見るのは面倒なのでスマホで検索してます。と言う人も多いのが現状。

絶対にスマホユーザーを無視できません!

家にパソコンはあるけど見ないわぁ。と言う声も聞こえてきます。

なので!このレスポンシブWEBデザインはものすごく重要なのです。

素敵なお店を探しましょう♪と思って検索してヒットしても、スマホ画面で見にくいとそのままスルーされてしまいます。

どんなに素敵なキャッチコピーも、どんなに素敵なUSPも見てもらえないと無意味になってしまうのです。

ウチはBtoB(企業同士のビジネス)だからスマホなんて関係ないよ。という、そこの社長さん!

本当ですか?

電車の中で、駅で、カフェで!スマホを熱心に見つめている人、見たこと無いですか?

「ゲームでもしてるんでしょう」と、決め付けないで!

忙しいビジネスマンは時間を惜しみます。

ランチタイムやカフェ、電車の中や駅のちょっとした時間に取引先を探していたり、これから訪問する取引先を探しているビジネスマンも絶対にいます!(言い切ります)

10年ほど前は、BtoB(企業間のビジネス)だからホームページなんていらないなんて言う中小企業も多かったんですが、今ではホームページも持っていない中小企業は看板や名刺を持っていない営業さんみたいなものですよね。

せっかくホームページを持つなら、忙しいビジネスマンがちょっとの時間で取引先を探していたり、これから訪問する会社を検索した時に、ちゃんと見てもらえるホームページ「レスポンシブWEBデザイン」で勝負しましょう!

ホームページ制作会社 マモネットは制作費無料ですが、レスポンシブWEBデザインのオリジナルデザインでお作りしています。

詳しくはぜひお問合せください→050-7100-0439

ホームページ制作 株式会社 マモネット

 

Pocket