· 

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

    メイン画像

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

     

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

     

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

    1. レスポンシブとは?

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

     

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

     

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

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

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

     

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

    2. それによってなにが変わったのか?

    ①モバイル表示がなくなった

    古くからJimdoをご利用の方はご存知かもしれませんが、パソコンでの表示とは別にスマホでのレイアウトを選択することができる「スマートフォン表示」という機能がありました。

     

    編集画面上に「モバイル」の項目が表示されるのは、旧レイアウトを使用中または新レイアウトのバージョンを最新版(レスポンシブ対応後)に更新していない方です。

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

    ▼ 自分のサイトがレスポンシブ対応かを確認してみましょう ▼

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

    ひとつでも当てはまった方はレスポンシブに対応していないレイアウトを使用です。
    管理画面の「レイアウト」の選択画面で、使用中のレイアウト(もしくは新しいレイアウト)を選択しなおして、更新をするとレスポンシブに対応したレイアウトを使うことができます。

    選択画面で「保存」を押すと非レスポンシブの状態に戻せませんので、変更の場合はプレビューで一度試してから変更することをおすすめします。

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

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

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

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

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

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

     

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

     

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

     

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

     

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

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

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

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

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

     

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

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

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

     

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

     

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

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

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

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

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

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

     

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

    ▼ちょこっと便利ワザ!

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

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

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

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

     

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

     

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

     

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

    ①文章の改行に気をつける

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

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

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

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

     

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

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

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

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

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

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

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

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

     

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

     

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

     

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

    ・トップページ

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

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

     

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

     

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

    ・フッター

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

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

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

     

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

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

     

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

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

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

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

    コメント: 1
    • #1

      伊海田訓子 (木曜日, 21 2月 2019 10:21)

      スマートフォン表示をなくしたいが、上記にあった『レイアウトから更新』ができない。
      やり方を教えてください。