GutenbergのColumns blockは横に並べる前にスマホの本文順と更新方法を決める

会社案内やサービス説明では、写真と文章、二つのサービス、料金と注意書きを横に並べたくなる。GutenbergのColumns blockは、その形を編集画面で作るための選択肢になる。ただし、横に並ぶ見た目を先に決めると、スマホで読んだときの本文順や、後から一部だけ直す作業が曖昧になりやすい。Columns blockを使う前に、どの順番で読ませ、誰がどこを更新するかを決める。

2月16日のGutenberg 2.2の案内では、block nestingとColumns blockが追加された。Columns blockは実験的な機能とされ、browser上の問題が残っていることも示されている。便利な編集部品として試せる段階だが、公開中の重要pageをいきなり組み替える理由にはならない。

横に並べる目的と読む順番を分ける

二つの内容を横に並べる理由は、比較しやすくするためである。たとえば、二つのサービスを同じ条件で比べるなら、見出し、対象者、できること、費用の考え方を左右でそろえる意味がある。一方、左に説明、右に問い合わせbuttonを置くだけなら、読者が先に理解すべき内容と操作したい場所が近すぎることがある。横並びが、説明を短くする理由にはならない。

スマホでは、左右のcolumnが縦に並ぶ形を考える必要がある。そこで先に、上から何を読ませるかを文章で並べる。サービスAの見出しと説明、サービスBの見出しと説明、比較の補足、問い合わせ先という順に、横並びを外しても意味が通るかを見る。この順で読んで判断できるなら、広い画面では比較しやすい配置にしても、狭い画面で情報の意味が崩れにくい。

反対に、左columnの途中まで読ませてから右columnの途中を読ませなければ結論が出ない構成は、スマホで読みにくい。二つのcolumnに文章を細かく分けるより、比較表を一つ置くか、見出しを分けて縦に説明する方がよい場合がある。横並びは情報を見せる手段であって、内容どうしの関係を代わりに説明するものではない。

一つのcolumnを一つの更新単位にする

Columns blockの内側には、見出し、段落、画像、buttonのようなblockを入れられる。nested blockを使えることは、見た目を細かく作れるということでもある。しかし、入れ子を深くするほど、更新したい文章がどこにあるかを、担当者が見つけにくくなる。

更新の多いpageでは、一つのcolumnへ一つの役割を持たせる。たとえば、左をサービスの説明、右を利用条件にする。左の文章を更新するときに、右の条件まで動かさない。画像を替えるときに、見出しの位置まで崩さない。編集画面で一部を選ぶと、どのcolumnの中の何を直しているか分かる形にしておく。

料金、受付時間、空き状況のように頻繁に変わる情報は、装飾のために複数のcolumnへ分けない。一つの正本を決め、必要な場所から読めるようにする。同じ金額を左右のcolumnへ二度書けば、後で一方だけ直り、古い案内が残る。columnsを使っても、同じ事実を複製してはいけない。

制作者が最初にpageを作り、所有者が後から文章を直す場合は、編集の手順も渡す。どのblockを開けば文章を直せるか、画像を替えるときにどこまでを触るか、公開前にどの画面幅を見るかを短く残す。外から見える完成形だけを渡しても、更新する人が困ればpageは古くなる。編集画面の構成も、siteを引き継ぐための一部である。

実験的なblockは検証用pageで試す

Gutenberg 2.2のColumns blockは実験的と案内されている。実験的な機能を使うときは、見た目が作れたことと、公開して運用できることを分ける。まず、公開していない検証用pageで、同じ文章と画像を使って組む。

確認するのは、編集画面だけではない。広い画面、狭い画面、文字が長い場合、画像がない場合を見て、columnの中身が読めるかを確かめる。次に、一度保存して開き直し、見出し、link、画像の説明、問い合わせ先が残っているかを見る。公開済みのpageを下書きへ戻す操作や、blockを消す操作を試すなら、本番の内容ではなく複製したpageで行う。

たとえば、二つのサービスを並べるpageなら、一方の見出しだけが長い場合を試す。写真を使わない場合も試す。片方だけに注意書きが増えたとき、左右を無理に同じ高さへそろえようとして本文を削らない。比較する条件が揃わないなら、columnを使うより、サービスごとの見出しを縦に並べる方が正確に伝わる。

検証して問題がなければ、どのpageに使うかを決める。全ての固定pageへ同じblockを広げる必要はない。更新する人が少なく、内容が安定していて、左右を比べる意味があるpageから使う。問い合わせ、規約、長い説明文のように、順番に読ませることが大切なpageは、通常の一列の本文を優先する。

公開前に見る順序

Columns blockを入れたpageは、次の順に確認する。最初に、横並びを外した本文順で読んでも、読者が判断できるかを見る。次に、広い画面で二つの内容が比較できるかを見る。その後、スマホ幅で見出し、説明、link、buttonが自然な順に続くかを見る。最後に、編集を担当する人が一部分だけを直せるかを確認する。

この順序では、pixel単位の位置を先に調整しない。本文が読め、必要な操作へ進め、更新する人が直せることを先に確かめる。位置の調整は、その後でも遅くない。Gutenbergの新しいblockを使う理由は、編集画面を新しく見せることではなく、必要な内容を無理なく保てるpageを作ることにある。

Columns blockは、二つの内容を比べる場面では役に立つ。一方で、横に並べられるからといって、全ての文章を二つに割る必要はない。スマホで読む順番、更新の正本、検証するpageを先に決める。その上で使うなら、見た目のために本文と運用を犠牲にせずに済む。