パソコンでの見た目スマホでの見た目

(1)

はじめて相談室

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

執筆：#fc0（株式会社エフシーゼロ）「はじめて相談室」では、「はじめてＷＥＢ」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします！「こんなこと聞いていいのかな…」という方大歓迎の相談室です。今回は、スマートフォンで見た目が崩れてしまうというご相談です。おたよりこんにちは。はじめてＷＥＢに登録して、はじめてホームページを作りました。結構満足のいく出来になったので、先日公開してアドレスを友人知人に知らせました。すると「スマホで見ると読みづらい」といろいろな人から言われ、自分でも確認してみたら、スマホでは大変なことになっていてすごくショックでした……。 Jimdoはスマホにも対応していると聞いていたのですが、違うのでしょうか。それとも作り方に何か問題があるのでしょうか？（ほたての貝柱さん）

ナビゲーターからの回答

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

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

まずは、ホームページをJimdoで作ったときのスマホでの見え方を確認しておきましょう。 Jimdoで最初にホームページを作るときは、パソコンを使う方が多いと思います。アプリもあるのでスマホでも作れなくはないですが、パソコンと比べると機能が制限されますし、画面も小さいため、ちょっと作りづらいと思います。（スマホでは、ちょっとした更新はやりやすいんですけどね）ホームページに載せる、見出し・文章・画像などの情報（コンテンツ）をパソコンで作ると、パソコンではもちろん画面で見たままで表示されます。そしてスマホでは「パソコンで入れた内容とまったく同じものが、スマホ用のレイアウトで表示される」というしくみになっています。たとえば、こんな感じ。ちょっと小さいですが、全体の雰囲気を見てください。

(2)

(3)

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

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

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

1. 文章の改行位置

(4)

パソコンは画面の幅が広いので、このような表示をするといい雰囲気になりますね。でもスマホだと画面の幅が狭いので、行の途中で改行されてしまう場合があります。たとえばこんな感じで。こうなるとちょっとかっこ悪いですよねえ。この対策はただひとつ。スマホできれいに見せたいなら「文章の途中での改行はNG！」です。改行をするなら「、」ではなく「。」の前にするときれいになります。そして中央寄せではなく左寄せにしたほうがスマホでは読みやすいです。美しい翼がある天使が、貧しげな家の前に立って、心配そうな顔つきをして、しきりと内のようすを知ろうとしていました。こうすると、スマホではこう見えます。さっきよりは文字が読みやすくなりましたよね。これからの時代、スマホできれいに見えないと印象も悪くなりますし、ぜひ気をつけたいところです。

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

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

(5)

見た目だけでは「え？何がいけないの？」と思われるかもしれませんが、これをスマホで見てみると、こんな感じになります。どうしてこうなるかというと、文字の前に「全角スペース」を入れてレイアウトをしているためです。わかりやすいように、スペースがある場所を□で表現してみます。 □第１条 □□□□１　ユーザーは，当社の保有する自己の個人情報が誤った情報で □□□□□□□□ある場合には，当社が定める手続きにより，当社に対して □□□□□□□□個人情報の訂正または削除を請求することができます。さきほどもお話したとおり、Jimdoは「PCに載っている情報をそのままスマホで表示」するので、スペースもすべてスマホで反映されます。このため、画面の幅の狭いスマホでは、スペースが入っている分文字の位置がずれて、改行位置もずれてしまうのです。この対策としては、一番いいのはレイアウト目的でスペースを入れないことですが、どうしてもこの見た目を実現したいときは、Jimdoの「インデント」や「箇条書き」の機能を使うとよいです！インデントは、文章の左にスペースを空ける機能です。見た目はスペースで空けたときと似ていますが、インデント機能を使うと、スマホで見てもいい感じに調整してくれます。また、箇条書きを使うと1つの項目が複数行になったときに自動的に2行目以降の最初の文字の前にスペースが空くので、読みやすくなります。

(6)

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

3. 文章の長さ

最後のポイントはちょっと難しいところもありますが、1段落あたりの文章の長さにも少し気を遣ってみると、スマホで読みやすくなったりします。たとえばPCでこんな文章があったとしましょう。パソコンで見るとそれほど違和感がないかもしれないのですが、これをスマホで見たときにはこうなります。ほとんど画面いっぱいが文字になってしまって、見た人はちょっとびっくりするかもしれません。こんなときは 1段落あたりの文章の量を少し抑えて、途中に空白の行を入れる工夫をすると、スマホで少し見やすくなるかもしれません。可能なら、文章を箇条書きにしてみたりするのも効果的です。

(7)

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

これ以外にも、パソコンで作っていい感じに見えてもスマホで見るとちょっと読みづらい…ということは結構あります。ホームページを作ったら、公開をする前にぜひスマホでもチェックしてみることをおすすめします！スマホ持ってない！という方は、Jimdoの「プレビュー」画面でスマホでの見た目をチェックしてみましょう。図の左から「パソコン」「スマートフォン（縦）」「スマートフォン（横）」の見た目を確認できます。スマホにはたくさんの機種があるので、すべてのスマホで同じ見た目になるとは限りませんが、だいたいの参考にはなると思います。今回は、スマホでの見た目調整のポイントについて紹介しました。今回は文章の調整だけの紹介をしましたが、このあたりみなさん結構ハマってしまうようなので、よかったら参考にしてみてくださいね。

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

「はじめて相談室」では、みなさまからの「はじめてＷＥＢ」の素朴な疑問をお待ちしています！「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です！「はじめてＷＥＢ」ナビゲーターがなんでもお答えしちゃいます！おまちしてまーす！「はじめてＷＥＢ」でホームページを作成しよう！「はじめてＷＥＢ」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成がで

(8)

き、さらにその後1年間無料でご利用いただけるサービスです。

●

ホームページ公開の7ステップ

(9)

はじめてＷＥＢサービス紹介次回のコラムを見る » #fc0（株式会社エフシーゼロ） JimdoExpert http://fc0.vc/ 「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。主な著書に『デザインの学校これからはじめるFireworksの本』（技術評論社）、『デザインの学校これからはじめるDreamweaverの本』（同）、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』（共著、エムディエヌコーポレーション）など。

パソコンでの見た目 スマホでの見た目