スマートフォンサイトを表示する

  1. TOP
  2. 自分でできる!セルフJimdoリメイク塾 : 第10回 スマートフォンを意識したJimdoのデザイン手法

エキスパートコラム

自分でできる!セルフJimdoリメイク塾(全12回)

第10回:スマートフォンを意識したJimdoのデザイン手法

執筆:服部 雄樹(服部制作室)

2018年1月22日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,025views

このコラムをPDF形式でダウンロードする

Jimdoで作られたWebサイトのリメイクを累計100件以上担当した筆者が、リメイクをする際にどこを見ているのか、どう手直しすれば見やすいWebサイトになるのか、具体的な事例とテクニックを交えながら紹介する本コラム。

第10回目となる今回は、スマートフォンでの見映えを最適化する手法について解説します。

Jimdoのレイアウトはレスポンシブデザイン

Webサイトはパソコンだけで見るもの、という時代は終わり、現在ではスマートフォンやタブレットなど、様々な端末で利用されるようになりました。Jimdoではこれに対応するため、旧レイアウトや独自レイアウトと呼ばれる一部のレイアウトをのぞいて、基本的にすべて「レスポンシブデザイン」となっています。
これは、レスポンス=反応の言葉が示すとおり、閲覧者の端末に応じて表示を自動的に切り替えてくれる大変便利な機能で、Jimdoで作られたWebサイトは、特に難しく考えなくても自動で各端末に最適化して表示されます。

この機能は非常に良くできているので、これだけでも綺麗に表示されますが、いくつかのポイントを押さえておくと、さらに見やすく使いやすいWebサイトを作ることができます。

フォーカルポイントを設定する

まずはじめに気をつけたいのが背景画像の表示位置です。パソコンで編集したWebサイトをスマートフォンで見た時、背景画像の位置は正しく表示されているでしょうか。サンプルサイトを見てみましょう。

PC表示では特に問題なく表示されています。これをスマートフォンで見てみます。

赤い丸に注目してください。女性の顔が見切れてしまっています。画像によっては問題ないケースもありますが、このような人物画像の場合は、顔がしっかりと表示されていたほうが良いでしょう。こういった時に細かい表示位置を指定できるのが「フォーカルポイント」です。さっそく設定方法を解説します。

管理メニュー→デザイン→背景の順に進むと、現在設定されている背景画像が水色の枠で表示されます。この中にある歯車のアイコンをクリックします。

すると「画像設定」という画面になり、画像の中心に白い丸が表示されます。これがフォーカルポイントです。フォーカルポイントを設定すると、背景の中央に表示させたい位置を選択することができます。初期設定では画像の真ん中がフォーカルポイントになっています。

この白い丸をドラッグ&ドロップで少しだけ右側に移動させ、保存します。

パソコンの画面で表示を確認してみます。特に変化はありません。

ではスマートフォンでの表示はどうでしょうか。

先ほどは見切れていた女性の顔がしっかり表示されています。このように、フォーカルポイントを使えば背景画像の微妙な表示位置をコントロールできます。この女性の画像ではわずかな違いですが、例えば下のような画像ではどうでしょうか。

パソコンの大きな画面では特に問題はありません。しかしスマートフォンではこのように表示されてしまいます。

左側の籠を持った男性がほとんど写っていないため、何の画像か分かりません。この男性が写るようにフォーカルポイントを調整します。

いかがでしょうか。皆さまのWebサイトでも、スマートフォンで見た時に大切な人物や商品が見切れてしまっていないか確認してみてください。もし見切れている場合はフォーカルポイントの位置を調整しましょう。

カラムを使用する際は表示順を意識する

続いて確認しておきたいのがカラムについてです。カラムはコンテンツエリアを横に分割できる便利な機能ですが、スマートフォンでの表示時には左のコンテンツから ①→②→③ の順に縦に並んで表示されます。

カラムを1つしか使用していない場合は問題ありませんが、カラムを複数使用している場合は表示順に注意する必要があります。例えば以下のようなケースです。

このケースでは、カラムに画像を3つ並べて掲載し、その下にもうひとつカラムを設置してタイトル等のコンテンツを掲載しています。つまりカラムを2段に重ねて使っているのです。
「わざわざこんなことしないよ」と思われるかもしれませんが、カラムの使い方に慣れていないとよくやってしまうパターンで、実際リメイクを申し込まれる方の中にはこういった使い方をされているケースが非常に多く見られます。

この場合の表示順は一段目のカラムの内容が左から順に表示され、続いて二段目のカラムの内容が表示されます。

パソコンの画面では問題なく表示されていますが、これをスマートフォンで見ると以下のようになります。

ひとつ目のカラムに掲載されている画像が先に3つ並んで表示され、その下に3つのコンテンツが並びます。これでは、画像とコンテンツの関連性が不明瞭で、各画像が何を表しているのか分かりません。
このように、カラムを使用する際にはスマートフォンでの表示順を理解して、順番が不自然にならないように設置しましょう。

スマートフォンから先に考える「モバイルファースト」という考え方

今回はよく陥りやすいポイントとその改善点を解説しましたが、実際にはもっと多様なケースが考えられます。それらを改善するには、実機で何度も表示確認をするのが基本です。そして表示がおかしい所をひとつずつ修正する。この繰り返しに勝る方法はありません。

実機での検証が難しい場合、Jimdoのデバイス別プレビュー機能を使用すれば、より手軽に表示を確認することができるので、必要に応じて活用しましょう。

デバイス別プレビューを使用すれば、パソコン上でスマートフォン表示を確認できる

業種にもよりますが、2017年現在、スマートフォンからの閲覧がWeb全体の6割を占めるというデータもあります。このデータからも分かるように、今やWebの主役はパソコンではなくスマートフォンと言えます。これからは、パソコン表示をスマートフォンに合わせていくのではなく、先にスマートフォンの表示から考える「モバイルファースト」という考え方が基本になっていきます。スマートフォン対策はおまけではなく、そちらがメインという意識でWebサイトの作成をしていきましょう。

次回はページタイトルやページ概要等、SEOの設定方法について解説します。お楽しみに!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/5/13~2018/5/19]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ