DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • design_thing
  • 意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

design_thing

  • top
  • blog
  • design_thing
  • 意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

2021.09.08.

スポンサーリンク

スポンサーリンク

今回はボクがスマホ用にwebページをデザインするときに気をつけていることを紹介します。

それは何かというと、「テキストの改行」です。
昨今のwebサイトはレスポンシブデザインといって、1枚のwebページをPCモニターやスマホ画面それぞれでwebサイトを表示できるように、各デバイスごとにデザインを最適化して制作することが当たり前になっています。

例えば、あるwebサイトのPCモニターでの表示は左上にロゴ、右上にナビゲーションが表示されるようにしていますが、スマホの場合はモニター画面が小さいのでロゴを上部中央に配置し、ナビゲーションは右上のバーガーアイコンをタップして表示するようにする、などなど・・。webデザイナーはモニターのサイズによってできるだけ使いやすくするために工夫を凝らしながらwebサイトを制作しています。

ボクのこのwebサイトもレスポンシブデザインで制作していますので、PCブラウザでご覧の方はウインドウサイズを横に狭めてみてください。狭くなればなるほどサイトの表示が変わっていくと思います。

BUROKI designのwebサイトのPCモニターでの表示
ぎゅーっとマウスで横幅を短縮してみてください

ウインドウを最短まで狭くすると、スマホと同じ表示になります。

BUROKI designのwebサイトのスマホでの表示
どんどん変化していくので狭めてみると面白いですよ

そういうデザイン的にわかりやすい部分の最適化は意識している人が多いと思いますが、今回ボクが言いたいのはその部分ではなく文章の部分。テキストの最適化ができていないwebサイトをよく見かけるんです。

どういうことかというと、下記の画像をご覧ください。

テキスト部分のPCとスマホでの表示の比較
テキスト部分のPCとスマホでの表示の比較

この画像はレスポンシブデザインでつくられたwebサイトによくあるテキスト部分のPCとスマホでの表示の比較です。PCとスマホで同じデザインが施されていると、スマホでwebサイトを見た場合大体こんな感じの表示になります。

ですが、スマホのほうは文章の途中で不自然に改行されてあるように感じませんか?PCとスマホではPCは横型、スマホは縦型とモニターの形が違うので、同じような改行と揃え方では違和感のある文章になってしまうことがよく起こるんですね。

テキスト部分のスマホ表示の問題点
テキスト部分のスマホ表示の問題点

ここに違和感を持ち、スマホならスマホのテキストの表示を意識するとwebページが格段にレベルアップします。

BUROKIアイコン

webデザイナーであっても意外と気付かないポイント!

スマホの改行デザインの考え方

スマホを持っていない人はほとんどいないと思うので持っている前提でお話ししますと、スマホの画面は縦長で、横幅は狭いです。この「横幅が狭い」ということを念頭に置いてテキストの装飾をスマホはスマホで見直す必要があります。

スマホのみ改行を無効にする

webページを見やすくするために、長めの文章ならきりのいいところでbrタグを使って改行することはよくあります。

今回のサンプルもタイトルや文章をbrで改行しているので、PCはそのままにしておいてスマホのみbrでの改行を無効にします。すると下記の画像のようにテキストが表示されます。

テキスト部分の改行無効前と改行無効後
改行無効前と後の比較です

右側がbrタグを無効にして改行をなくしたものなのですが、余計な余白や不自然な改行がなくなり、目線の動きも左よりは抑えられています。このように、スマホでの表示のみ改行を制限することで文章にまとまりをつくることができ、見る人のストレスを軽減することができます。

ちなみに、brでの改行はcssで「display:none;」で無効にすることができます。

  • p {
    text-align:center;
    font-size:1.4rem;
    line-height:1.8;
    letter-spacing:0.1em;
    }
  • p br {
    display:none;
    }

レスポンシブの場合はスマホのみのcssに指定しましょう。

スマホで中央揃えをするときは文字数に注意

改行をなくしたことで読みやすくはなったのですが、タイトル部分と文章部分の両端の余白が気になりますね。

タイトルのこの文字数なら3行よりもテキストのサイズを小さくして2行にしたほうが読みやすいですし、PCとは違い中央揃えではなく左揃えのほうが読みやすいかもしれません。ということで、cssで調整してみます。

テキスト部分の調整前と調整後
テキスト部分の調整前と調整後

タイトルの文字サイズを2行になるように調整し、タイトルと文章を中央揃えから左揃えにしたので目線を左から右だけの動きに統一でき、全体的にまとまりが出ましたね。

タイトルの部分は文字数によってどうしても見づらくなったりはしますが、特にスマホの場合は中央揃えするなら1行で収まるくらいの文字数で考えたほうがいいと思います。中途半端に2行などになってしまうと目線が左から右、中央から右、といった風に散りがちになり、見る人にストレスを与えてしまう可能性があるからです。

改行をPCとスマホで使い分ける

最後はもう少し上級な改行テクニックです。

上に書きましたスマホのみ改行を無効にする「display:none;」のやり方もいいのですが、これではbrがすべて無効にされてしまい、ここだけはどうしても改行したい!という要望に応えることはできません。

文章が長くなってしまうとちょっと重苦しい印象を与えてしまい、文字の塊に見えてしまって読む気も無くしてしまいかねませんね・・。ということで、PCとスマホで改行するポイントを分けるやり方もあります。

それはあらかじめPCのcssに「.sp {display:none;}」を、スマホのcssには「.pc {display:none;}」といったclassを用意しておいて、brに割りふる方法です。

ちょっと専門的な話で申し訳ないですがそれぞれ説明しますと、PCのcssに「.sp {display:none;}」を設定し、
タグを挿入するときにclass=”sp”を割り振ると、class=”sp”がついたタグはPCでは改行は無効だよという意味になります。

スマホも同じく「.pc {display:none;}」を設定することでclass=”pc”はスマホ表示では無効ということを指定することができます。これを利用して文章にbrを割り振っていきます。すると最終的にはこのような文章のデザインが可能になります。

テキスト部分の最終調整前と最終調整後
テキスト部分の最終調整前と最終調整後

これでひとまずはテキストの調整が完了です。
左の調整前より縦に長くはなりましたが、適切な改行がされているので重苦しさは無くなり、まとまりのある中でスッキリとした印象を与えられていると思います。

テキストの最適化をはじめる前の文章と見比べてみると、全然違うデザインになっていることがわかると思います。テキストだけでもデザイナーによってはここまで手を加えることができるということです。

最適化をする前と最終調整後の比較
最適化をする前と最終調整後の比較

意外とここまで調整されているwebサイトは少なく、盲点だなと感じています。

違和感なく内容にすっと入れるデザインこそが優れたデザイン

今回はボクがよく意識しているwebページの改行テクニックを紹介しました。

いまはモニターのサイズも多岐にわたり、一概にこの方法が最適!とはいえない時代ではありますが、PCは横長でスマホは縦長と、双方で明らかにモニターの形状が違います。形状が違えば見せ方も違って当然です。ページ全体のデザインだけでなく、こういった文章の細かなところまで気を配れるようになるとよりデザイナーとして気づきを得ていけるのではと思います。

webサイトのデザインが目立ち、デザインが評価されることよりも大事なのは記載されているテキストや写真であって、webサイトは各クライアントさまが抱いている目的達成や問題解決のための手段であるということを忘れないようにしたいですね。

BUROKIアイコン

これを参考にし、自分なりの方法を見つけるのもいいですね。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

意外と簡単?chocoZAPのセルフ脱毛サービスを利用開始しました

2023年の1月から初心者向けスマートライフジム「chocoZAP(チョコザップ)」に通い始めたことは以前このブログに書きましたが・・。 デスクワークで…

2025.06.15.

private

家二郎を極めたい。家庭用二郎系ラーメン「鬼を超えろ」を美味しく作る方法

月に1度くらいのペースで食べたくなってしまう二郎系ラーメン。3月に行ったときに書いた「歴史を刻め 日本橋店」のブログは検索上位にランクインし、…

2025.06.10.

private

これから行く人へ。大阪・関西万博の体験談と注意点をまとめました

前回のブログで「大阪・関西万博」の各国パビリオンの写真館ブログを書きました。 建築デザインがいい感じ!大阪・関西万博の各国パビリオンの外観写…

2025.06.04.

private

建築デザインがいい感じ!大阪・関西万博の各国パビリオンの外観写真館

5月28日の水曜日。 平日ではありますが、いま大阪で一番アツいイベント「大阪・関西万博」へ行ってきました。 朝9時に夢洲駅に到着し、夜の20時くら…

2025.05.31.

think

SEO小話vol.08 ドメインにも歴史あり?取得する際の注意点

昨年の4月より不定期に更新している「SEO小話」シリーズ。 各テーマに分けてできるだけ手短に、僕の過去のSEO施策体験からきている内容を書くことを…

2025.05.27.

think

5月13日、BUROKI design開業6周年と個人的なお知らせ

2025年5月13日(火)。 本日、BUROKI designは無事に開業6周年を迎えることができました。 ついに税務署にて個人事業の開業届と青色申告承認申請書を…

2025.05.13.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル