読み手に寄り添うレイアウト

私たちがサイトをデザインするときに気をつけていることに

読み手に寄り添ったものが提供できているか

を心がけています。

もちろん、美しい画像、美しいデザインも大切です。また、コンテンツの主はテキスト情報であって行間や両端揃えなどはSEOに直接結びつくものではないかもしれません。

しかし、実際にコンテンツを目にするのはSEOの採点をする機械やプログラムではなく人です。

人に寄り添ったものを作りたい。

さて、サイト訪問者の殆どは記事を流し読みしかしません。そんな訪問者により読みやすいものを提供することで、やっと読んでいただけるわけです。

レイアウトの原則に、余白・揃える・強調・まとめる・くり返すというのがあります。

よりよい環境づくりの一つに文章の行間であったり、段落の両端揃えであったり、細かい工夫をすることで少しでも読んでいただけるよう工夫します。

たとえば以下のレイアウト、記事抜粋部分の行間が若干狭いのが気になります。

ここで読ませる必要はないのかもしれませんが…この抜粋部分って記事へ誘導する(引き込む)とても大切なキャッチ部分だと思うんです。

日本語の横書き文章は左から右へ読み、読み終われば下の行に移ります。行間が文字サイズの0.5~1倍程度であることが読みやすい段落の条件です。

そこで、CSSに次のような記述をし、行間を広げてみます。

.entry-card-snippet{
line-height: 150%;
}

行間が拡がり文章が読みやすくなりました。

次に気になるのは行末の不揃いです。

2行目の「や」の文字が出っ張ってます。これをなんとかするのが両端揃えの機能です。

先ほどのCSSに2行追加します。

.entry-card-snippet{
line-height: 150%;
text-align: justify;
text-justify: inter-ideograph;
}

行末も綺麗に揃いすっきりしました。

このように、サイト(ホームページ)のレイアウトはCSSという仕組みを使って細かくデザインしていきます。

ぱっと見、見落とされがちですが、サイト訪問者に気持ちよく滞在してもらうためにサイト作成者が常に意識する必要があります。

行間がちょっと狭い、とか、行末が揃っていないことは、どうでもいいことではなく、対策しておかなければならないこと、だと思っています。

ちょっとした工夫の積み重ねが、完成物を洗練されたものに見せる結果となります。

ちなみに

text-justify: inter-ideograph;

は本来不要ですが、InternetExploreがまだ使われている限り必要になります。

コメント