1/10 文字組みについて デザイン日記vol.5

ここ数日で色々なサイトを見ていると、自分にとっても学びが色々とあります。今日は文章を扱うときに注意すべきポイントについてまとめていきたいと思います。webサイトのデザインをおこなうとき、長い文章や短い文章をデザインに組み込むことが大事になってきます。

基本の文字の揃え方

基本の揃え方は、左揃え・中横揃え・右揃えです。一般的には、横組みの場合は右揃え、縦組みの場合は左上から揃えていくのが一般的とされています。
文字を読む流れに意識する
デザインを凝ろうとしてつい意識から外れてしまうのが、文章を読む視線の流れです。一般的には、横書きのときは左上から右へよんていきます。
縦書きの場合は右上から左へよんでいきます。

文字サイズ、行間、行長を意識する

まず行間とは、文字列と文字列の隙間の間隔のことです。
一方、行長とは文字列の長さのことで、1列にMAXまで文字を入れたときの長さのことです。
行間を設定するときは、文字サイズに対して、150%~175%にすると読みやすい行間になるそうです。それぞれテキストボックスの大きさや全体のデザインとのバランスを見ながら調整していきます。

改行のポイント

webデザインのレイアウトを考えるときに考えなければいけないこととして、そのwebサイトを見る媒体によって幅が変わってしまいます。媒体によって見やすさが変わらないように文章のレイアウトを考えなければなりません。

注意すべきポイントは...
・文字サイズやmarginで、大体の文字幅を考える
・改行を多く入れない
・レスポンシブとweb版で文字のサイズや行間の見え方が変わってくる

実際のwebページから考察

-MOTO矯正歯科 81-web.com

こちらは縦書きで矯正歯科の思いを綴っています。改行の話が先ほどありましたが、このように長い文章でも、読みやすい長さで改行が加えられています。また、テキストボックスの間に余白を入れることで、それぞれを段落として捉えやすくなり、内容がすっと入ってきます。
またぱっと見、詩が書かれているように感じました。歯医者って怖いとかいきたくないとかネガティブなイメージを持ちがちだと思います。そんな中で、詩のようなスタイルでこの矯正歯科の思いを読むことができたら、なんだか心が落ち着くような感じがします。それが狙いなのでしょうか。
(また昨日の記事でも書きましたが、教科書でよく使われる明朝体が使われていますね！繊細や知的といったイメージ、長文でも読みにくくない！)

あづみのるベーカリー  http://azuminoru.com/

こちらも2枚見て頂けるとわかると思いますが、縦書きと横書きを混ぜ込んだ設計となっています。縦書きは見出しのような(文章ではなく一行区切り)使われ方をしています。反対に横書きは文章としてしっかり書かれています。またここではまとめていませんでしたが、禁則処理がわかりやすく目にとまります。改行をする直前に句読点を持ってくることでそれぞれの文章に規則性やまとまりが見えてきます。
また文章を左寄せで統一することで、安心感が生まれ引き締まったデザインであるように感じられます。絶景を望ながらのパン朝食、その名の通り朝気持ちを引き締めると同様に左寄せで引き締まったデザインですね。

VERMICULAR　https://www.vermicular.jp/

最後は中央揃え、横書きで統一されたVERMICULARのサイトです。全て中央に揃えることで、統一感があり読みやすい構成になっています。またテキストだけでなく画像も中央に揃えていて認識しやすい構成になっています。
今回は各画像も中央に揃えられているのですが、画像の対象物も中央に配置されていて、まとまりがわかりやすいので、販売サイトとして良いデザインだと感じます。

・中央揃えは左右対称になるのでバランスがいいのですが、文章を読ませたいときには不向き
・中央揃えは視線を集めたいコンテンツに対して使うのがベスト