とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

クオリティの高いWebサイトは文節までこだわる!Webサイトのテキストの読みやすさを実現する文字組み実装の例

クオリティの高いWebサイトは文節までこだわる!Webサイトのテキストの読みやすさを実現する文字組み実装の例

文節、こだわってますか?

レスポンシブサイト/スマホサイトでは

文章の折返し位置がデバイスによって

変わりますよね。

 

そんなの細かく

いちいち調整してらんないよ、と思ってしまいますが、

クオリティの高いWebサイトではちゃんとやっている。

 

そんなツイートと良記事をご紹介。

ツイートはこちら。

 

単語/文節ごとでしっかり実装されています

単語/文節ごとでしっかり実装されています

「display:inline-block」を

指定しておくと

文字落ちせずに単語や文節ごとに

段落ちさせることができるので、

上記のサイトではまさにその手法が

使用されていて、文章がコントロール

されています。

 

読み手が読みやすいように、

見た目も美しく改行する。

意識していないとこういう実装には

ならないので、こだわりが伝わってきますね。

 

「display:inline-block」を使った手法は

過去に書いた記事があるので、気になる方は

こちらもどうぞ。 

www.toaru.jp

 

さて、Webサイトの文字組み実装で

忘れてはいけないのが、

AppleのWebサイトです。

 

AppleのWebサイトも

切れのいい、

きれいなところで

改行がはいるように、

テキストやタイトルは

しっかりと実装・設計されています。

 

少し過去の記事になりますが、

Appleのサイトで

タイトルの文字間に

並々ならぬこだわりの

実装がされていたこともあります。

こちらのサイトで紹介されています。

parashuto.com

 

1文字1文字spanでletter-spacingで調製されている

1文字1文字spanでletter-spacingで調製されている

https://parashuto.com/rriver/others/kerning-with-letter-spacing-on-new-apple-website

 

ものすごいこだわりですね。

ここまでやってのクオリティなのだなと納得です。

実装はしんどいと思いますけどね。

保守性や効率を考えるとよいとは

言えないかもしれませんが、

「神は細部に宿る」を実践しているかんじ。

 

最近のAppleは、spanで1文字ごとに

区切るのはやめたようです。

全ページ見たわけではないけど、

<br>タグが駆使されているようです。

<br>タグが駆使されて改行を調製している

<br>タグが駆使されて改行を調製している

ということで

今回はWebサイトの

文字組み実装のお話でした。

 

実装は面倒ですが、

こだわりの文章やタイトル、

キャッチコピー、リードテキストなどには

取り入れたい手法ですね。