2026-09-01

裏表診断を、墨と朱で押して進む画面に組み直した

表と裏の二面性を、紙色、墨の文字、朱い印で見せる診断へ全面更新。最初の設問から始まり、選択ごとに印が反転して次へ進む形に整えた日の記録。

九月一日は、裏表診断の画面を「墨と朱」の見た目へ全面的に組み直しました。人の表と裏を、説明の長い入口ではなく、最初の設問からすぐ選び始められる診断として見せ直しています。

画面の土台は紙の色にし、表は墨の活字、裏は少し傾いた朱い印として置きました。選択肢を選ぶと印を押すような反転の動きが入り、次の設問だけが入れ替わります。答える手触りも、診断の言葉と同じ方向へ寄せました。

結果では、表と裏を田の字のような四つの区画に分けて表示します。どちらか一方だけを善悪にせず、二つの面を並べて読むための枠です。診断コードもこの枠の中に収め、画面で読んだ内容と共有したときの印象が離れないようにしました。

共有カードも同じ視覚のルールで描き直しました。リンクを受け取った人が、結果本文の前に別の雰囲気の画像を見るのではなく、墨と朱、表と裏という作品の入口をそのまま受け取れるようにしています。

最後に、スマートフォンで決めた表と裏の構図をSVGの比率として持たせました。画面が広くなっても余白だけが伸びず、文字と印の関係が崩れません。答える画面から結果の一枚まで、ひとつの小さな診断として見えるように整えた日の工事です。

この日の作業

Gitのコミット記録からの抜粋です。

9月5日時点もこの見た目で公開中です。同日、全ページ共通のフッターにカテゴリナビと運営情報リンクが入りました。