2016年

6月

07日

スマホでも美しく使いやすい!Jimdoがレスポンシブを選んだ理由

メイン画像

Jimdoの39種類のレイアウトがすべてレスポンシブ対応になったのをご存知でしょうか?そのことで、喜んだ方も慣れないと不便に感じている方も両方いらっしゃるかと思います。

 

  • 何がどう変わったの?そもそもレスポンシブってなに?
  • パソコン表示が気に入ってたのにな〜
  • スマホでメニューが見つけにくいとユーザーから言われる

 

そんな方へ、これまでのモバイル表示との違いや、閲覧者にもやさしい、スマホでの上手な見せ方などをご紹介します。今のご自身のサイトがレスポンシブ対応かどうかをチェックする方法も載せています、ぜひご一読ください

INDEX

レスポンシブってどういう意味?

さて、まずレスポンシブ対応とはどういうことなのでしょうか。

 

「閲覧者の表示環境(パソコン・タブレット・スマホ)に合わせて、デザインが自動調整される」状態のことを言います。

 

これまでのモバイル表示はあくまで、パソコンで作ったWebサイトをスマホで少しでも見やすくするための、仮のデザインに近いものでした。 そのため、作ったWebサイトをありのまま見せるというよりは、スマホ用はスマホ用で近いデザインを表示させる、という感覚が近かったでしょう。

 

今回レスポンシブ対応になったことによって、作成したサイトをほぼそのまま、スマホユーザーにも見てもらうことができます。パソコンと変わらず、フォント・サイズ・カラー・背景画像(一部)が反映されるので、こだわって作ったデザインを大きく崩さずに見てもらうことが可能です。

レスポンシブ:イメージ画像
イメージ画:Jimdoのサイトトップにも載っている、フラワーデザイン助六さまのサイト

今は誰もがスマホ・携帯電話を持つ時代。朝の通勤電車・移動途中・寝る前のベッドの中など、SNSをチェックしたり、なにか記事を読むのはスマホやタブレットの方が多いかもしれませんね。

 

そんな時代背景もあり、JimdoのWebサイトもこの度レスポンシブ対応になりました。

旧レイアウト・前のバージョン から何が変わったの?

1. モバイル表示がなくなった

 昔の旧レイアウトの時代からJimdoを使っている方や、2014年8月にJimdoの新しいレイアウトが追加され、長く同じレイアウト使っている方はご存知かと思いますが、パソコンでの表示とは別にスマホではどんなデザインに見せるかを決められる、〔スマートフォン表示〕を選ぶことができました。

管理画面:スマートフォン表示
右側の管理画面「スマートフォン表示」
スマートフォン表示のテンプレート
スマホ画面のテンプレートを選べる

今現在、以上のように管理画面上に〔モバイル〕の項目が表示されるのは、旧レイアウトを使用中または新レイアウトのバージョンを最新版(レスポンシブ対応後)に更新していない方です。

 

現在、39種類すべてのレイアウトがレスポンシブ対応になっているので、以下でご自身のサイトをチェックし、まだの方はバージョンアップを検討して見てください。

▼自分のサイトがレスポンシブ対応かを確認!

1. 旧レイアウトを使っている ※レイアウト名が数字(例:F4202 )
2. 管理画面の設定の中に〔モバイル〕の項目が表示されている
3. レイアウト選択画面にアップデートのお知らせが出ている

→ひとつでも当てはまった方はレスポンシブ非対応です。
管理画面の〔レイアウト〕の選択画面で、使用中のレイアウト(もしくは新しいレイアウト)を選択しなおし、更新をお願いいたします。

※選択画面で〔保存〕を押すと非レスポンシブの状態に戻せません
旧レイアウトからの変更の場合は特に、プレビューで一度試してください

2. パソコン版の表示がなくなった

スマホで見た際、ページ下部にあった「パソコン版で表示」というボタンがなくなりました。

スマホ画面見本:パソコン版で表示

レスポンシブデザインは、表示環境によって自動で最適に調整されるため、パソコン・タブレット・スマホ問わず、作った元のサイトに近い綺麗な状態で見てもらうことができます。

3. サイドバーのコンテンツが表示されるように

旧レイアウトでは、スマホでサイドバーのコンテンツを見ることができませんでした。

 

2カラムと3カラムのデザインが多い旧レイアウトでは、縦割りのデザインを生かして、サイドバーにバナーや情報を多く載せるサイトが多かったです。

 

そうやって作られたサイトを、いざスマホで見ようとすると、メインコンテンツの下にサイドバーのコンテンツが来るため、とてつもなく長いページになってしまいます。(パソコン版ではなく通常のモバイル表示で見た場合)しかも、サイドバーはすべてのページに表示されるのですべてのページが長くなるということです。

 

そんな見辛さを防ぐべく、モバイル版ではサイドバーは非表示、という仕様になっていました。

 

以下は3カラムの旧レイアウトを使ったWebサイトの表示例です。

黄:ナビゲーションメニュー 中央:メインコンテンツ 赤:サイドバー
黄:ナビゲーションメニュー 中央:メインコンテンツ 赤:サイドバー

このサイトをモバイルで見ると…

モバイル表示:ナビゲーションは表示される
黄:ナビゲーションメニューはページ上部に表示されます(クリックすると全表示)
モバイル表示:サイドバーがない
赤:サイドバーはページ下部にも見当たりません

ご覧のとおり、どこにもサイドバーが表示されていません。

 

新レイアウトでは以下のようにサイドバーのコンテンツもすべて表示されるので、レイアウトを移行する際はページを整えた方が良いでしょう。

旧レイアウト:サイドバーの見え方
旧レイアウト:パソコンで見たとき
新レイアウト移行後:サイドバーの場所
新レイアウト移行後:パソコンで見たとき
新レイアウト移行後(モバイル):サイドバーの場所
新レイアウト移行後:モバイルで見たとき

例としてJimdoのロゴを使用していますが、このようにたくさんバナーを並べていたりメニューのリンクを付けていたりすると、スマホで見たときはすべてメインコンテンツの下に表示されます。

 

特にこの例で使用した新レイアウト「Prague」はサイドバーが下部にあるデザインですので、情報がメインコンテンツの外(下)に入っています。

 

スマホで見たときにページが長くなりすぎないように、サイドバー内のコンテンツの整理をおすすめします。縦並びだったコンテンツを短くするためには、カラムの活用が便利です。以下でもご紹介をしています。

4. ナビゲーションメニューがアイコン表示に

Webサイトの上部やサイドに表示されるナビゲーションメニュー。レスポンシブ対応では、スマホは全て「≡」このような三本線で画面上部に表示されており、タッチすることによってメニューが出現します。

パソコン:ナビゲーションメニュー
パソコンで見るとここにあるナビゲーションメニュー
スマホ:ハンバーガーメニュー
スマホでみると「≡」アイコンに
スマホ:ハンバーガーメニュー開
タッチすると開きます

このアイコンは「ハンバーガーメニュー」と呼ばれています。

ーまるでハンバーガーみたいだからとアメリカで名付けられたそう。

 

「目立たないから、メニューがどこにあるかわかりづらい!」そんな方へ、この記事の最後の見出しで、メニューの表示場所を補足する方法を提案しています。参考にしてみてください。

▼ちょこっと便利ワザ!

サイトを作成している途中で、スマホではどう見えるかチェックしたい!という時。「わざわざスマホをひらいて確認するのが面倒だな」と思いませんか?そんな時はパソコン上で、ブラウザをスマホの横幅サイズまで細長くしてみてください。レスポンシブ対応のサイトはブラウザの大きさに合わせて見え方を変えてくれるので、パソコン上でスマホの見え方をチェックすることが可能です。

レスポンシブ:ブラウザでの見方
ブラウザをスマホ・タブレットの幅にすることで、どのように表示するか見ることができます

3つのポイントを押さえて、スマホでも使いやすいページを作ろう

冒頭でも少し触れましたが、レスポンシブ対応になり、モバイル専用の表示やパソコン版表示ができなくなったことを、不便に思われる方もいるかもしれません。

 

ハンバーガーメニューのメリットは、メインのコンテンツを広く使う(見せる)ことができるということ。

 

Jimdoは、誰でも簡単にデザイン性の高いWebサイトが作れます。カラムや余白を使ったり、フォントやフォントサイズ・カラーも見たまま編集することができるので、こだわって作ったWebサイトをスマホの閲覧者にも綺麗に見てもらえるというのが、レスポンシブのメリットです。

 

せっかくのサイトをスマホでも綺麗に見てもらうために、押さえるべきポイントを紹介します。

1. 文章の改行に気をつける

見やすい文章にしようと句読点「。」ごとに改行をしがちですが、スマホで見てみるとどうでしょうか。

例:改行多め パソコン画面
例:改行多め パソコンで見たとき
例:改行少なめ パソコンで見たとき
例:改行少なめ パソコンで見たとき

例:改行多め モバイル画面
例:改行多め モバイルで見たとき
例:改行少なめ モバイル画面
例:改行少なめ モバイルで見たとき

赤線が入った図が、こまめに改行をした文章です。文字が詰まっていないので読みやすそうに感じますが、途中で何度も文が切れているので集中して読むことができません。

 

一方、ある程度の段落にまとめた方は、改行が少ない分ページも短く、全体的にすっきりしています。文章を詰めて長くなりすぎても読みづらいですが、話の切り替えの部分で改行があることにより、読みやすいリズムになります。

2. カラムの見え方を理解する

パソコン表示で、コンテンツを横並びにすることができるカラム。スマホではカラムが左から1列ずつ、縦並びで表示されます。そんなとき、列と列の間に、少し空間が欲しいなと思ったことはありませんか?

パソコン画面:カラム
パソコンで見たとき:カラムに入れて3つ横に並ぶように
スマホ画面:カラム
スマホで見たとき:左の列から順に縦に並びます。赤線のところに空間がほしい…

どこに余白を入れたらちょうど間の位置に反映されるんだろう、と思った方もいるかもしれません。カラム内のそれぞれの列の最後に余白を入れると、列が変わるごとに余白ができ、スマホでの縦並びの空間を綺麗に見せることができます。

カラム:列間の余白の入れる場所
カラム内の、列の最後に余白を入れる
カラム:列間の余白の入れ方
ここに余白が入りました!

3. メニューの表示場所を増やしてみる

上記で紹介したハンバーガーメニュー、近頃は一般的になってきたナビゲーションメニューの表示方法です。メニューを使うときだけ表示させることによって、狭いスマホ画面の中でもコンテンツを大きく見せてくれる効果があります。

 

一方「≡」が何を表しているのかわからず、メニューがどこにあるかわからない、といった声はよく上がります。

 

サイトのターゲットを考え、メニューのわかりやすさ(場所)を優先したい場合、トップページもしくはフッターにメニューを補足するのはいかがでしょうか。

 

高齢者を対象としたWebサイトや、普段インターネットをあまり使わない業界の方へ向けたサイトを運営されている方は、参考にしてみてください。

・トップページ

パソコン表示:サポートセンターTOP
パソコンで見たとき:サポートセンターTOP
モバイル表示:サポートセンターTOP
モバイルで見たとき:サポートセンターTOP

たとえばこのJimdoのサポートセンターのトップページは、「はじめに」「ブログ」「SEO」など、アイコン+説明文とともにリンクを貼っています。

 

Jimdoのサポートセンターの場合はナビゲーションメニューではなく、よく検索される項目をトップページに載せているのですが、スマホで見ても縦並びで表示されるので目につかないことはありません。

 

ただし、スマホユーザーには親切ですが、パソコンで見ると同じページに重複した内容を載せることになりページの情報量が増えてしまうので、検討が必要です。

・フッター

フッター内の最下部にメニューを小さく載せることによって、メインコンテンツを邪魔することなく、ハンバーガーメニューを探す手助けができます。

パソコン表示:フッターの最下部にメニューを追加
パソコンで見たとき:フッターの最下部にメニューを追加
スマホ表示:フッターの最下部のメニュー
スマホで見たとき:フッターの最下部のメニュー

パソコンでせっかく綺麗に整えたページ、スマホでもデザインにこだわっていきたいですね。また、綺麗なだけでなく使いやすいサイトを作るために、自分のWebサイトを使ってほしい人・使ってくれる人が求めていること、を考えながらデザインしていくと良いでしょう。

 

基本はレスポンシブ対応のおかげで表示領域によって最適に調整されるので、サイトを作る際にスマホでの見え方を少し意識するだけで、ぐっとかっこいいWebサイトになります!

レスポンシブ対応についてご紹介しましたが、いかがでしたでしょうか?以前のモバイル表示の仕様に慣れていらっしゃるユーザーさんは特に、はじめは馴れないかもしれません。

 

このレスポンシブ対応の良い面を引き出し、ターゲットが見やすく使いやすいWebサイトを目指してみてください。

レイアウトを変更したい方もこちらから。

※ご利用の環境によって、以上の内容と異なることがございます。

機能や仕様に関するお問い合わせは、Jimdoサポートセンターへお気軽にどうぞ。

関連リンクまとめ

レイアウトの移行:「レイアウト引越しの方法、完全版!」

スマートフォン表示:サポートページ

カラム:サポートぺージ


コメントをお書きください

コメント: 5
  • #1

    user (金曜日, 10 6月 2016 19:18)

    レスポンシブデザインは、旧レイアウトでは使えないのですか?

  • #2

    本木裕子 (土曜日, 25 6月 2016 18:21)

    パソコンでは外部リンクを開くことが出来ましたけど、スマホから外部リンクを開くことができません。

  • #3

    廣渡 省吾 (金曜日, 08 7月 2016 15:17)

    フッターの最下部にメニューを表示させる方法を詳しく載せていただきたいです。

  • #4

    石割定治 (金曜日, 08 7月 2016 22:18)

    ありがとうございます。

  • #5

    kiki (木曜日, 01 9月 2016 23:35)

    PCでは控えめに小さく表示している文字が、
    スマホでは大きくタイトルのように表示されてしまい
    とても不細工です。正直イライラします。