はじめて相談室 第26回 スマートフォンで表示が崩れないポイント 執筆 #fc0 株式会社エフシーゼロ はじめて相談室 では はじめてＷＥＢ を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターが お答えします こんなこと聞いていいのかな という方大歓迎の相談室です 今回は スマートフォンで見た目が崩れてしまうというご相談です おたより こんにちは はじめてＷＥＢに登録して はじめてホームページを作りました 結構満足のいく出来になったので 先 日公開してアドレスを友人知人に知らせました すると スマホで見ると読みづらい といろいろな人から言われ 自分でも確認してみたら スマホでは大変なこと になっていてすごくショックでした Jimdoはスマホにも対応していると聞いていたのですが 違うのでしょうか それとも作り方に何か問題があるので しょうか ほたての貝柱さん ナビゲーターからの回答 ほたての貝柱さん こんにちは おたよりありがとうございます はじめてＷＥＢでのはじめてのホームページ うまくいったようで何よりです が パソコンで見た ときはうまくいっているのに スマホで見たときにうまくいっていないのですね Jimdoでは基本的にパソコンでページを作成していくので スマホでの見た目を気にせずに作っ てしまいがちなのですが そういう落とし穴があるんですよね 今回は スマホでも表示が崩れな いようにするためのポイントをチェックしていきましょう Jimdoで作ったホームページのスマートフォンでの見え方 まずは ホームページをJimdoで作ったときのスマホでの見え方を確認しておきましょう Jimdoで最初にホームページを作るときは パソコンを使う方が多いと思います アプリもあるのでスマホでも作れなくは ないですが パソコンと比べると機能が制限されますし 画面も小さいため ちょっと作りづらいと思います スマホでは ちょっとした更新はやりやすいんですけどね ホームページに載せる 見出し 文章 画像などの情報 コンテンツ をパソコンで作ると パソコンではもちろん画面で見 たままで表示されます そしてスマホでは パソコンで入れた内容とまったく同じものが スマホ用のレイアウトで表示さ れる というしくみになっています たとえば こんな感じ ちょっと小さいですが 全体の雰囲気を見てください
パソコンでの見た目 スマホでの見た目
色などのデザインは一緒なのですが 結構違って見えますよね スマートフォンでの見た目が崩れない3つのポイント このようなしくみを踏まえて ホームページを作るときに注意しなければならないことがいくつかあります 1. 文章の改行位置 よく ちょっとポエムっぽい感じでレイアウトされた文章を見かけます たとえばこういうの
パソコンは画面の幅が広いので このような表示をするといい雰囲気になりますね でもスマホだと画面の幅が狭いの で 行の途中で改行されてしまう場合があります たとえばこんな感じで こうなるとちょっとかっこ悪いですよねえ この対策はただひとつ スマホできれいに見せたいなら 文章の途中での改行はNG です 改行をするなら ではなく の前にするときれいになります そして中央寄せではなく左寄せにしたほうがスマ ホでは読みやすいです 美しい翼がある天使が 貧しげな家の前に立って 心配そうな顔つきをして しきりと内のようすを知ろうとしていま した こうすると スマホではこう見えます さっきよりは文字が読みやすくなりましたよね これからの時代 スマホできれいに見えないと印象も悪くなりますし ぜひ気をつけたいところです 2. 空白文字 スペース を使ったレイアウト これもわりとよく見かけるのですが たとえばこういうレイアウトをしているパターンも スマホでは崩れやすいです
見た目だけでは え 何がいけないの と思われるかもしれませんが これをスマホで見てみると こんな感じになりま す どうしてこうなるかというと 文字の前に 全角スペース を入れてレイアウトをしているためです わかりやすいように ス ペースがある場所を で表現してみます 第１条 １ ユーザーは 当社の保有する自己の個人情報が誤った情報で ある場合には 当社が定める手続きにより 当社に対して 個人情報の訂正または削除を請求することができます さきほどもお話したとおり Jimdoは PCに載っている情報をそのままスマホで表示 するので スペースもすべてスマホ で反映されます このため 画面の幅の狭いスマホでは スペースが入っている分文字の位置がずれて 改行位置もずれてしまうのです この対策としては 一番いいのはレイアウト目的でスペースを入れないこと ですが どうしてもこの見た目を実現したいときは Jimdoの インデント や 箇条書き の機能を使うとよいです インデントは 文章の左にスペースを空ける機能です 見た目はスペースで空けたときと似ていますが インデント機能を 使うと スマホで見てもいい感じに調整してくれます また 箇条書きを使うと1つの項目が複数行になったときに自動的 に2行目以降の最初の文字の前にスペースが空くので 読みやすくなります
これを使って同じ状態を作ってみて スマホで表示するとこんな感じになります これなら問題ないですよね 3. 文章の長さ 最後のポイントはちょっと難しいところもありますが 1段落あたりの文章の長さにも少し気を遣ってみると スマホで読み やすくなったりします たとえばPCでこんな文章があったとしましょう パソコンで見るとそれほど違和感がないかもしれないのですが これをスマホで見たときにはこうなります ほとんど画面いっぱいが文字になってしまって 見た人はちょっとびっくりするかもしれません こんなときは 1段落あたりの文章の量を少し抑えて 途中に空白の行を入れる工夫 をすると スマホで少し見やすくなるかもしれません 可能なら 文章を箇条書きにしてみたりするのも効果的です
ホームページを作ったときは スマホでも必ずチェックしよう これ以外にも パソコンで作っていい感じに見えてもスマホで見るとちょっと読みづらい ということは結構あります ホー ムページを作ったら 公開をする前にぜひスマホでもチェックしてみることをおすすめします スマホ持ってない という方は Jimdoの プレビュー 画面でスマホでの見た目をチェックしてみましょう 図の左から パ ソコン スマートフォン 縦 スマートフォン 横 の見た目を確認できます スマホにはたくさんの機種があるので す べてのスマホで同じ見た目になるとは限りませんが だいたいの参考にはなると思います 今回は スマホでの見た目調整のポイントについて紹介しました 今回は文章の調整だけの紹介をしましたが このあた りみなさん結構ハマってしまうようなので よかったら参考にしてみてくださいね おたよりお待ちしています はじめて相談室 では みなさまからの はじめてＷＥＢ の素朴な疑問をお待ちしています こんなこと聞いたら恥ずかしいかも というご質問大歓迎です はじめてＷＥＢ ナビゲーターがなんでもお答えしちゃいます おまちしてまーす はじめてＷＥＢ でホームページを作成しよう はじめてＷＥＢ のホームページ開設支援サービスとは 7つのステップで簡単に無料で作成がで
き さらにその後1年間無料でご利用いただけるサービスです ホームページ公開の7ステップ
はじめてＷＥＢ サービス紹介 次回のコラムを見る» #fc0 株式会社エフシーゼロ JimdoExpert http://fc0.vc/ もっと多くの人に "Webへの入口"を をコンセプトに 中小企業や個人商店をメインとしたWebサイトの企画 制作 運営アドバイスなどの業務を行う また 主に初心者を対象とした講師 執筆も多数 主な著書に デザインの学校 これからはじめるFireworksの本 技術評論社 デザインの学校 これからはじめるDreamweaverの本 同 ああしたい こう変えたいが手にとるようにわかるCSS基礎 共 著 エムディエヌコーポレーション など Copyright 2019 はじめてＷＥＢ All Rights Reserved. https://hajimeteweb.jp/