つくり方の全容。

初稿は、写真の余白を活かす方向で頼んだ。確かに余白は取れていたが、全体的に弱かった。FVに写真がなく、配色が青系で、序盤に入門イベントの——しかも川辺ではなく湖辺の——写真が出てきて「入門用の店」に見える。ポラロイド風の小さな画像、上品すぎるフォント。直してもらおうとした結果はもっとひどかった。全画面の写真ヒーローと、左右に画像と文章を並べた箱型のセクションを、上から下に積んだだけの「当たり前のウェブ」が出てきた。きれいではある。でも、ヘッダーがあって、ヒーローがあって、3〜4個の左右組の箱があって、フッターがある——どこにでもあるウェブサイトそのもの。day8で一番大きい方向転換は、ここでした。当たり前のウェブを捨てる。写真の上に文字を被せ、イラストを誌面に散らし、写真は片側を画面の端から裁ち落とし、不均等で組む——雑誌の一冊として作り直す。

出した指示写真はFVにほしい。色合いは青系でなく、褪せた自然色に。ポラロイド風は却下。フォントもお行儀が良すぎる。入門イベントの写真を序盤で出すと入門用の店に見える。しかも川じゃない。

全画面ヒーロー＋左右組の無難な箱型でなく、写真の上に文字を被らせたり、イラストを効果的に散りばめたりして、雑誌的なレイアウトを作っていきたい。当たり前のウェブじゃなく。

§01 マニフェスト

店主の季節眼を「道具（暦の器械）」にしたくて、季節 × 虫 × 毛バリの対応表＝ハッチ暦をツール風のUIにできないか試した。最初は季節タブと水温スライダー、その下に推奨フライを出すカード。スライダーといっても実質4択に値が飛ぶだけで、本物のスライダーである必要がない。次に、背景に川の写真を全面に敷いて、すりガラス越しに計器を載せる案も試した。それでも、結局はタブ型の普通のコンテンツの域を出なかった。結論として、機能（ツール）を急ぐ前に、まず形（雑誌としての誌面）を確定することにした。ハッチ暦は表として誌面に置けばいい。「店主の季節眼を道具にする」というアイデア自体は捨てずに、後でFVに店主の吹き出しを1枚だけ載せる別の形で取り戻すことにした（→ STEP 06）。

出した指示ツールにするのは今後色々入れたい。ただ見た目がイマイチで、使い方がわかりにくい。

スライダーっぽいのに4択に移動するだけ。スライダーである必要があるのか。背景に川の写真を全画面で敷いて、iOS風のすりガラスで計器を載せるのは?

これはツールというより普通のタブ型のコンテンツ。デザインがイマイチ。

§04 ハッチ暦（表として誌面に置く）

雑誌の方向に振った後でも、まだ何かバラバラだった。FVと§01の境界はただの直線、ページ全体の背景色は固定。下に行っても何も変わらない。そこで、FVと§01の境界に波を置いて、そこを水面ということにした。下にスクロールするほど、水中深くへ潜っていく。背景色がグラデーションで深緑へ沈んでいく。これで一気に良くなった。バラバラに見えた要素を、ひとつの仕掛けが束ねた。「読む」が「潜る」に変わった瞬間です。後で気泡を下から昇るアニメーションも足した。気泡の色を背景に寄せておくと、水面（写真）では溶けて見えず、深い層で浮かび上がる。動きが苦手な人のために、`prefers-reduced-motion` で自動的にオフ。

出した指示FVの境界に波。そこが水面で、FVが水上。下にスクロールするほど水中深くに入っていく。背景色がグラデーションで深くなって、最終的に深緑系の色に。

スクロールしていくと、水泡のようなものが下から上にブクブクっと上がっていくようなアニメーションを追加。

§03（水中へ潜る／白背景の毛バリが標本として光る）

§02の見出しに「源流から、海へ。下って、川を読む。」と出てきた。一見、川と一緒に下りていく詩的な表現に見える。でも、フライフィッシングは渓流で魚の上流方向に向かって遡るのが基本で、「下る」は逆。指摘して「遡る」に直してもらった。本文に出てきた「毛鉤」も馴染みがなかったので、わかりやすく「毛バリ」に。題材の言葉づかいや所作は、コピーが出てきた段階で確かめる。

出した指示「源流から、海へ。下って、川を読む。」フライフィッシングは川を上るのが基本なので、下るのは違う。「毛鉤」表記は「毛バリ」に。「いつ、何が出て、何を結ぶか。」改行なしに。

§02（源流へ、遡る。）

雑誌っぽくしたくて、写真の上に英語の引用を重ねたいと頼んだら、引用に白い帯（下敷き）を敷いて、写真のど真ん中に大きく置いてきた。下敷きは野暮ったい。しかも幅を細く指定したせいで、引用が何行にも折り返して、写真の柄に文字が食い込んで読めない。「下敷きをなくして、9割は写真の外、被るのは端の1割まで」と頼み直したら、ちゃんと外側に寄った。それでも被った部分はやっぱり読めなかったので、最終的には写真から完全に外に置くことにした。写真に重ねる文字は、被せるより「ぎりぎり外す」ほうが効く。技術的には、`whitespace-nowrap` で行を固定して、`right-full` で写真の外側（紙面側）に出すだけ。

出した指示写真に被りすぎで全く読めない。改行も多すぎる。90％は写真の外に出ていて、10%が写真に被るぐらい。2行のまま。

被っている部分、読めないので、やはり写真から完全に出しましょうか。

§01（引用は写真の外）

FVの右下に、最初は網（タモ）の彫版イラストだけが置いてあった。STEP 02でいったん見送った「店主の季節眼を道具にする」アイデアを、ここで別の形にして入れた。タモを「舟の上の店主」のイラストに差し替えて、その横に小さな吹き出し。中身は短く——「今週の犀谷川／水温 12℃。昼すぎから、ヒラタが流れ始めました。#14 のパラシュートをひとつ、瀬の肩へ。」店主が毎週そこだけ書き換える、生きた一言メモのつもり。静かな世界観のサイトに、店主の季節眼が1枚立つと、サイトの性格が変わる。説明文で「店主の選球眼が信頼できます」と書くより、こっちのほうが効く。

出した指示FVの右下にあるタモのSVGを「アセット6.svg」に替えて、吹き出しをつける。そこに店主からのメッセージを簡単に入れる。今週の〇〇川、水温:○度、どんな虫が出ていてどんなフライが有効か、簡単に。

もう少し全体的にテキストサイズを大きくして、改行はないほうがいい。SCROLLにかぶるので、位置調整。

FV 右下（店主の今週の一言メモ）

PCで完成してから、スマホで見たら一気に崩れていた。(1) §04のハッチ表が5列のまま横スクロールになっていて、右の2列（水温・サイズ）が画面の外に消えてデータが欠けて見える。横スクロールはできても、誰も気づかない＝無いのと同じ。(2) FVの中央寄せの英語サブタイトル「AN ANGLER'S FIELD JOURNAL — Issue 01」や、日本語のタグライン「釣るためでなく、川にいるために。」が、勝手に2行に折り返していた。これは中央寄せの absolute 要素が幅50%に制限される CSSの仕様で、`whitespace-nowrap` を足さないと折り返す。(3) FV左の縦書きコピーがスマホでは邪魔。(4) §01の薄い魚のイラストが画面の外に消えていた。PCで効いていた `-left-[6%]` という指定が、スマホの幅では画面外に出る。それぞれ、スマホ専用の指定で別に当て直した。スマホは「表の横切れ」「中央寄せの折り返し」「裁ち落としの画面外消失」が定番の崩れどころです。

出した指示改行が気になる箇所を4箇所。「AN ANGLER'S FIELD JOURNAL」が1行になっていない。「釣るためでなく、川にいるために。」は改行なしで1行に。FV左側の「季節に合わせる〜」はスマホでは削除。セクション1の魚のイラストが隠れてしまっているので、テキストの下に重ねるように配置。

魚の絵、少し下に移動して、左側にはみ出して。PCとイメージを近づけるため。

§04 SP（縦積みカードへ畳む）