ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第19回目「スマホ表示で気をつけておきたいポイント」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第19回目は「スマホ表示で気をつけておきたいポイント」です。それでは、スタート!

ルドルフ

アリーナちゃん、見て見て見て見て!僕が運営しているホームページはスマートフォンでも表示できるんだよ!


ルドルフ

そうそう、Jimdoはスマートフォンに合わせた表示に自動で切り替わるから便利よね。


ルドルフ

なんだ~!これって僕のホームページだけが特別なわけじゃいんだね。


笑顔アリーナ

ルドルフくん、それ基本機能なのよ。スマートフォンユーザーもどんどん増えていくから、モバイル表示も意識して作ることが大事よね。


ルドルフ

やっぱりコツがあるの?


笑顔アリーナ

あるわ!いくつかコツがあるから紹介するわね。


【スマホ表示で気をつけておきたいポイント】

スマートフォンの普及に伴い、モバイル表示を意識する人が増えてきました。Jimdoは、自動的にスマホ表示に対応できる機能がついていますが、「パソコンで見たときにはあったはずのものが、スマートフォンにはない」「パソコン版と表示が違う」など、戸惑うケースも少なくないようです。

そこで、今回はスマホ表示で気をつけたいポイントの中から、代表的な以下の3項目をピックアップして解説します。

 

(1)サイドバー(フッター)の表示について

(2)カラム機能の表示について

(3)写真付き文章の表示について

 

(1)サイドバー(フッター)の表示について

Jimdoには大きく分けて2種類のレイアウトがあります。サイドバーの有り、無しで分かれるのですが、枠で囲んだ部分はスマートフォンで表示されなくなります。

この状態を回避するために、非表示になる領域を、ページのどこかに組み込んでおくようにしましょう。

 

例えば、サイドバー(フッター)に地図やお問い合わせフォームなどを表示させている場合


このようにサイドバーに重要な情報を掲載している場合は、地図やお問い合わせフォームのページを別途作成し、トップページからリンクを貼っておくとよいでしょう。


スマートフォンで表示したとき

※サンプルでは「ボタン機能」を使いましたが「文章機能」のリンクを使用しても良いでしょう。

 

「サイト概要」(有料版のみ)を利用する方法もあります。この機能については、後述します。

(2)カラム機能の表示について

カラム機能は、1つの項目を分割して、いろいろな要素を横並びにできる機能です。最大6個まで分割することができ、情報を効率よく見せることが可能です。

 

カラム機能については、第8回目 「 カラム機能を使って見やすく!」をご参照ください。

http://portal-jp.jimdo.com/study/one-point/vol8/

 

カラム機能を使っている場合、スマートフォンで表示させると、横並びだった項目が縦に並びます。

ここで注意しておきたいのは、カラムの使い方です。

例えば、以下のようなページがあったとします。パソコンで表示した時には、特に何も問題はありません。

このページをスマートフォンで見ると、以下のように表示されました。

この状態だと、正しい情報が閲覧者に伝わりません。そこで、カラムの使い方を以下のように直してみましょう。

※内容の区切りを考えずに、カラム機能を複数積み上げる形で見た目を整えてしまった例

※一つのカラム機能を用いて、各ブロックにそれぞれ関連性のある内容をまとめています。

このようにカラムの使い方を変更すると、スマートフォンで表示した場合に意図している表示になります。

このように、カラム機能を使う場合は、関連性のある情報をまとめるようにしましょう!

(3)写真付き文章の表示について

写真の横に文章を入れることができる「写真付き文章」は、ホームページを作る上で欠かせない機能の一つです。ここでも、パソコン版とスマートフォン版で表示の違いがありますので、意識しておきましょう。

写真の大きさによっては、右のように文字の表示スペースが狭くなって見にくくなる場合があります。そこで、以下のようにいくつかパターンを作って確認してみると良いでしょう。

この中から、ちょうどよい表示のものを選びましょう。

有料版のみの機能について

 ●「サイト概要ページ」機能をつかうと、重要な情報のみをコンパクトに表示できる!

 

「設定」⇒「モバイル」の中に「サイト概要ページ」という機能があります。店舗がある場合のページは、この機能を使用することで、重要な情報のみをコンパクトに表示することができます。

電話番号、メールアドレス、営業時間、住所等の必要情報を入力したら、「サイト概要ページを適用する」にチェックをつけます。

輝くルドルフ

アリーナちゃん、ありがとう!少し調整してみたら、見やすくなったよ!


ウインクアリーナ

バッチリね!スマートフォン表示、意識してみてね。


まとめ

スマートフォンユーザーの増加に伴い、年々スマホからのアクセスが増えています。普段パソコンを中心に作業していると、スマホで見たときに思いがけない表示になっていて驚くことも少なくありません。時々チェックしながら作業を行いましょう。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」