Behind the build — Day 006

つくり方の全容

「AIサイト100連発」day6、中山道の宿場町「籠井宿(架空)」。海外からの旅行者も意識して、日本語を主に、英語を必ず併記した観光サイトです。素材(実在の宿場町の写真)と参考が良かったので、初稿から写真主役の編集的なレイアウトにはなりました。でも——きれいなだけで、どこかで見た。和の題材なのに、その良さを使えていない。ここから、縦書きを“構造”として使い、書体を選び、やりすぎては戻す、という詰めが続きます。以下は、その“直す前”の画面です。完成形は、いちばん下で。

01

整ってはいる。でも、
どこかで見た形だった。

初稿のファーストビュー — 編集的だが、よくある形
初稿 — 整っている。でも、想像の範囲

これが初稿。悪くはない。素材も参考も先に渡したので、写真を大きく使った、雑誌のような誌面にはなった。でも、「きれいだけど、どこかで見た」。せっかく中山道の宿場町という和の題材なのに、その良さ——たとえば縦書きの美しさ——を、まだ何も使えていない。整っているがゆえに、平凡。ここから、題材に固有の強さを足していく。

伝えたことまとまってはいるけど、想像の範囲を出ない。日本語の明朝は縦書きこそ美しいので、見出しを縦書きにするとリズムが生まれそう。

02

縦書きにしただけでは、
空白の無駄だった。

見出しを縦書きにしたが、上下と横に大きな空白ができた状態
直す前 — 縦書きの上下と横に、空白が余る

ここが良くなかった:見出しを縦書きにした——が、縦書きは天地に長い。見出しの上下に大きな空白の帯ができ、横にも空白が余った。ただ“縦にしただけ”で、スペースの無駄遣いになっている。直したのは、縦書きの見出しを「柱(はしら)」として本文や写真の横に通すこと。柱の高さを中身が受け止めるので、空白が消える。柱を左右交互に置けば、スクロールにリズムも出る。

出した指示ただ縦にしただけで、上下のスペースを取りすぎ。横の空白も無駄。柱のように、左右に組むなり、縦書きの横の空間を使う工夫がほしい。

03

構造はできた。でも、
書体が無難だった。

柱の構造はできたが、書体が当たり障りない状態
直す前 — 柱はできた。でも、字が当たり障りない

ここが良くなかった:柱の構造は決まった。でも、書体が当たり障りなくて、面白くない。そこで、役割ごとに書体を分けた——日本語の縦書き見出しは繊細な明朝(Hina Mincho)、英語の見出しはDIN系のグロテスク(Archivo)、写真脇の極小英字はタイプライター風(Space Mono)、ファーストビューの英字ワードマークはポスター体(Bebas Neue)。同じ文字でも、書体が変わると、急に表情が出る。

出した指示フォントが無難でつまらない。DINとかUbuntuみたいな、シンプルだけどちょっと印象に残るものがいい。極小英字はタイプライター風で。

04

番号も地図も、
一度、行き過ぎた。

通し番号を大きくしすぎ、地図も素っ気ない状態
直す前 — 番号は目立ちすぎ、地図は素っ気ない

ここで調整:見出しの上の通し番号が小さくて見えなかったので大きくした——ら、今度は目立ちすぎた。主役は見出しと写真なので、番号は控えめに戻す。地図も、最初はただの線で素っ気なかった。そこを、江戸の道中図のように家並み・山・川と橋を描き込んだ。行き過ぎたら戻し、足りなければ足す。“ちょうどいい”は、たいてい一度では決まらない。

出した指示番号は狙いはいいが目立ちすぎ。地図はもう少し作り込めるか、無理なら別の手で。ヒーローの英字も大きすぎるので、右の縦書きに勝たないように。

05

そして、完成形。

完成した全体(籠井宿)
完成 — 籠井宿 Kagoi-juku(全体)

中山道の宿場町を、日本語を主に英語を併記して、海外の旅行者にも届くように。縦書きの明朝を柱として通し、書体を役割で使い分け、地図まで描き込んだ。素材は良かった。でも「想像の範囲」から抜け出すのは、その先の詰めだった。前の四枚と、この完成形を見比べてみてください。全体像が右で見られます。

「縦にする」と、
「縦書きを使う」は違う。

整った初稿から一歩抜けるのは、題材に固有の強さ——縦書きの組み・書体の選び・地図の手描き——を、構造として使い切ること。やりすぎては戻して、ちょうどいいを探す。

サイトを見る →