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

  1. TOP
  2. はじめて相談室 : 第26回 スマートフォンで表示が崩れないポイント

エキスパートコラム

はじめて相談室

第26回:スマートフォンで表示が崩れないポイント

執筆:#fc0(株式会社エフシーゼロ)

2017年6月12日更新

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

閲覧数1,049views

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

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、スマートフォンで見た目が崩れてしまうというご相談です。

おたより

こんにちは。はじめてWEBに登録して、はじめてホームページを作りました。結構満足のいく出来になったので、先日公開してアドレスを友人知人に知らせました。
すると「スマホで見ると読みづらい」といろいろな人から言われ、自分でも確認してみたら、スマホでは大変なことになっていてすごくショックでした……。
Jimdoはスマホにも対応していると聞いていたのですが、違うのでしょうか。それとも作り方に何か問題があるのでしょうか?(ほたての貝柱さん)

ナビゲーターからの回答

ナビゲーター

ほたての貝柱さん、こんにちは。おたよりありがとうございます。
はじめてWEBでのはじめてのホームページ、うまくいったようで何よりです!が、パソコンで見たときはうまくいっているのに、スマホで見たときにうまくいっていないのですね。

Jimdoでは基本的にパソコンでページを作成していくので、スマホでの見た目を気にせずに作ってしまいがちなのですが、そういう落とし穴があるんですよね。今回は、スマホでも表示が崩れないようにするためのポイントをチェックしていきましょう。

Jimdoで作ったホームページのスマートフォンでの見え方

まずは、ホームページをJimdoで作ったときのスマホでの見え方を確認しておきましょう。

Jimdoで最初にホームページを作るときは、パソコンを使う方が多いと思います。アプリもあるのでスマホでも作れなくはないですが、パソコンと比べると機能が制限されますし、画面も小さいため、ちょっと作りづらいと思います。(スマホでは、ちょっとした更新はやりやすいんですけどね)

ホームページに載せる、見出し・文章・画像などの情報(コンテンツ)をパソコンで作ると、パソコンではもちろん画面で見たままで表示されます。そしてスマホでは「パソコンで入れた内容とまったく同じものが、スマホ用のレイアウトで表示される」というしくみになっています。

たとえば、こんな感じ。ちょっと小さいですが、全体の雰囲気を見てください。

パソコンでの見た目

スマホでの見た目

色などのデザインは一緒なのですが、結構違って見えますよね。

スマートフォンでの見た目が崩れない3つのポイント

このようなしくみを踏まえて、ホームページを作るときに注意しなければならないことがいくつかあります。

1. 文章の改行位置

よく、ちょっとポエムっぽい感じでレイアウトされた文章を見かけます。たとえばこういうの。

パソコンは画面の幅が広いので、このような表示をするといい雰囲気になりますね。でもスマホだと画面の幅が狭いので、行の途中で改行されてしまう場合があります。たとえばこんな感じで。

こうなるとちょっとかっこ悪いですよねえ。この対策はただひとつ。スマホできれいに見せたいなら「文章の途中での改行はNG!」です。改行をするなら「、」ではなく「。」の前にするときれいになります。そして中央寄せではなく左寄せにしたほうがスマホでは読みやすいです。

美しい翼がある天使が、貧しげな家の前に立って、心配そうな顔つきをして、しきりと内のようすを知ろうとしていました。

こうすると、スマホではこう見えます。さっきよりは文字が読みやすくなりましたよね。

これからの時代、スマホできれいに見えないと印象も悪くなりますし、ぜひ気をつけたいところです。

2.「空白文字(スペース)」を使ったレイアウト

これもわりとよく見かけるのですが、たとえばこういうレイアウトをしているパターンも、スマホでは崩れやすいです。

見た目だけでは「え?何がいけないの?」と思われるかもしれませんが、これをスマホで見てみると、こんな感じになります。

どうしてこうなるかというと、文字の前に「全角スペース」を入れてレイアウトをしているためです。わかりやすいように、スペースがある場所を□で表現してみます。

□第1条
□□□□1 ユーザーは,当社の保有する自己の個人情報が誤った情報で
□□□□□□□□ある場合には,当社が定める手続きにより,当社に対して
□□□□□□□□個人情報の訂正または削除を請求することができます。

さきほどもお話したとおり、Jimdoは「PCに載っている情報をそのままスマホで表示」するので、スペースもすべてスマホで反映されます。このため、画面の幅の狭いスマホでは、スペースが入っている分文字の位置がずれて、改行位置もずれてしまうのです。

この対策としては、一番いいのはレイアウト目的でスペースを入れないことですが、どうしてもこの見た目を実現したいときは、Jimdoの「インデント」「箇条書き」の機能を使うとよいです!

インデントは、文章の左にスペースを空ける機能です。見た目はスペースで空けたときと似ていますが、インデント機能を使うと、スマホで見てもいい感じに調整してくれます。また、箇条書きを使うと1つの項目が複数行になったときに自動的に2行目以降の最初の文字の前にスペースが空くので、読みやすくなります。

これを使って同じ状態を作ってみて、スマホで表示するとこんな感じになります。これなら問題ないですよね。

3. 文章の長さ

最後のポイントはちょっと難しいところもありますが、1段落あたりの文章の長さにも少し気を遣ってみると、スマホで読みやすくなったりします。

たとえばPCでこんな文章があったとしましょう。

パソコンで見るとそれほど違和感がないかもしれないのですが、これをスマホで見たときにはこうなります。

ほとんど画面いっぱいが文字になってしまって、見た人はちょっとびっくりするかもしれません。こんなときは1段落あたりの文章の量を少し抑えて、途中に空白の行を入れる工夫をすると、スマホで少し見やすくなるかもしれません。可能なら、文章を箇条書きにしてみたりするのも効果的です。

ホームページを作ったときは、スマホでも必ずチェックしよう!

これ以外にも、パソコンで作っていい感じに見えてもスマホで見るとちょっと読みづらい…ということは結構あります。ホームページを作ったら、公開をする前にぜひスマホでもチェックしてみることをおすすめします!

スマホ持ってない!という方は、Jimdoの「プレビュー」画面でスマホでの見た目をチェックしてみましょう。図の左から「パソコン」「スマートフォン(縦)」「スマートフォン(横)」の見た目を確認できます。スマホにはたくさんの機種があるので、すべてのスマホで同じ見た目になるとは限りませんが、だいたいの参考にはなると思います。

今回は、スマホでの見た目調整のポイントについて紹介しました。今回は文章の調整だけの紹介をしましたが、このあたりみなさん結構ハマってしまうようなので、よかったら参考にしてみてくださいね。

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

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

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

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

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

コラム週間アクセスランキング[期間:2017/8/6~2017/8/19]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!