DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

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

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

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

ブログ一覧

private

福島にある「THE VILLAGE OSAKA」で三度目の結婚記念日を祝う

4月22日は相方との結婚記念日。 今年で三度目の結婚記念日を無事、迎えることができました。皆さまのおかげです。いつもありがとうございます。 いつ…

2024.04.25.

think

SEO小話vol.01 検索エンジン対策で最重要のhtmlタグはこれです

少し前にシリーズとしてはじめることにした「SEO小話」。 今回はwebページを構成するhtmlの様々な役割を担っているタグの中でも一番重要なタグについ…

2024.04.23.

think

SNS全盛期時代だからこそ。webサイト運用のためのSEO小話はじめます

BUROKI designとして2024年から掲げている目標のひとつに「webサイト運用に関わらせていただく」というものがあります。 それはなぜかというと、僕は…

2024.04.18.

think

2024年3月の活動報告。3月はこんなデザイン制作をしていました

新年度がはじまりましたね。 エイプリルフールは今はSNSで何かしらのネタを披露する人が増えて、程よく盛り上がりを見せていましたが、中には本当の…

2024.04.03.

think

もうすぐ5周年。フリーランスデザイナーになってから気をつけていることは?

まだもう少し先なのですが、2019年5月にBUROKI designを開業して、もうすぐ5周年を迎えます。 さすがにもうすっかり会社員時代の習性などは抜け切っ…

2024.03.16.

think

2024年2月の活動報告。2月はこんなデザイン制作をしていました

今年の冬は異常なほどの暖冬だったそうですね。 でも最近は夏になれば例年以上の異常な暑さといわれることが多いですし、この気候の異常さが通常にな…

2024.03.07.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル