Behind the build — Day 007

つくり方の全容

day7は、古い輸入7インチ=ドーナツ盤の中古レコード店「45s Donut(架空)」。汎用業種ではなく、自分が通ってきた音楽カルチャーを題材にする一本目です。メインビジュアルに「回るレコード型」の円形ナビを置きたかった。ただ「レコードを模した」と頼むと、AIは何度頼んでも盤そのものの絵を描いてくる。盤の描画をやめ、円に沿った文字だけを回す——そこからが本番でした。初稿は、かなりダサいです。直す前を順番に。完成形は一番下に。

01

盤を中央に描いて、
暗くて、重かった。

初稿。画面中央に大きなレコード盤の絵、暗く沈んだ写真、盤のまわりに散らばるナビ文字
初稿(step00)— 中央に“盤の絵”、暗く重い

「レコードを模した円形ナビ」と頼んだら、画面中央に盤そのものの絵が置かれた。写真は暗く沈み、ナビ文字は盤のまわりに散らばっている。配色も重さも、前に作ったガラスびん工場(day4)と似ていて、レコード店としての新しさが出ていない。狙っていた古いレゲエ/ダブ系のヤレた質感も、どこにもない。ここから直していく。

出した指示全体の配色とトーンを変えてください。前作のガラスびん工場(day4)と似た重さで、レコード店としての新しさが出ていません。古いレゲエ/ダブ系の褪せた質感に振ってください。

02

却下したのに、
また盤を描いてくる。

配色を暗いダブの方向に変え、左下にナビを移したが、やはりレコード盤の絵を描いた状態
直す前 — 色を変えても、AIはまた“盤の絵”を描く

配色を「褪せた赤を差し色とする暗いトーン」に変え、ナビを左下に移した。それでもAIは、溝もレーベルもトーンアームもある盤の絵をまた描いてくる。盤を描くとどうしても「素材集」っぽい顔になるので、何度でも却下した。盤の描画をやめて円に沿った文字だけを回す方向に切り替えたら、一気に良くなった。技術メモ:回転は SVG 要素ではなく、それを内包する <div> に掛ける。SVG に直接 transform を掛けると回転軸が左上に固定されて「動かない」と言われがち。

出した指示レコード盤のイラストはやめてください。欲しいのは、円に沿った文字(円形ナビ)が左下に常時表示され、スクロールに合わせて回転する状態です。盤そのものを描かず、文字だけが円を描いて回っているUIにしてください。

03

版の“温度”を足そうとして、
パワポになった。

見出しに赤いオフセット影(版ズレ)を付けて、パワポのような安っぽさが出た状態
直す前 — 見出しの赤い版ズレ=手っ取り早いが“パワポ感”

古いオフセット印刷の「版ズレ」感を出したくて、見出しに赤いオフセット影を付けた。手っ取り早いが、安っぽく見える。典型的なパワポ感が出てしまった。版の温度は影で足すものではない。残したのはハーフトーンの印刷ドットだけ。あとはレイアウトの崩しで出す(→ STEP 04)。

出した指示見出しに付けた赤い版ズレ影を外してください。パワポ的な安っぽさが出てしまっています。一方、ハーフトーンのテクスチャは活かしてください。古い印刷の温度感は、影ではなく構造で出していきます。

04

行儀よく幅に収まって、
音が聞こえなかった。

各セクションがコンテンツ幅にきれいに収まり、均等な正方形グリッドで遊びがない状態
直す前 — 整ってはいる。でも、遊び心がない

各セクションがコンテンツ幅にきれいに収まり、整ってはいる。が、これだけ遊べる題材なのに、紙面に音が聞こえてこない。直したのは「外し」——画像を片側だけ画面の端から裁ち落とす/グリッドを不均等にする/大きく薄い番号を一つだけ置く/写真を少し傾ける。イチオシの棚は箱に収めず、ブラウザの端から見切れる横スクロールに。結局、温度は影ではなくレイアウトの崩しから出た。

出した指示各セクションがコンテンツ幅にきれいに収まっていて、遊び心がありません。題材的にもっと遊んでください。具体的には「ズラし」「外し」——画像を片側だけ画面の端から裁ち落とす/グリッドを不均等にする/大きく薄い番号を一つだけ置く/写真を少し傾ける。イチオシの棚は、箱に収めずブラウザの端から見切れる横スクロールにしてください。

05

そして、完成形。

完成した全体(45s Donut)
完成 — 45s Donut(全体)

店名は VERSION から 45s Donut(ドーナツ盤=中央の穴が大きい7インチ)に変えた。象徴は、盤を描かず、円に沿った文字だけが回るナビ。温度は影ではなく、レイアウトの崩しで出した。イチオシ棚に並べたジャケット画像は実在のアルバムを使えないので、Midjourney で架空のものを作った(盤ではなく前面のジャケットを描く/タイトルは引用符で指定/古びすぎないよう年代と発色を指定)。初稿の盤と見比べてみてください。

「描く」より、
「引く」。

愛着のある題材ほど「いかにも」な記号に寄りやすい。ラスタカラー(赤・黄・緑)、盤の絵、セピアの掛けすぎ——何度却下しても、つい主題をそのまま絵にしたくなる。が、本物らしさは描き込みではなく、褪せた色と組版と、一点の差し色から出る。要は引き算。

サイトを見る →