Behind the build — Day 005

つくり方の全容

「AIサイト100連発」day5、モロッコのアルガンオイルの単品LP「OR D'ATLAS」。素材と参考を先に渡したので、文章や構成は最初の出力でだいたい良かった。難しかったのは、その先の見た目です。「悪くないけど、もう一押し」——そこからが長かった。のっぺりした平坦さ、よくある色づかい、どこかで見たファーストビュー。直す方向はいくつもあって、緑を試して外したり、色を盛って戻したり、ファーストビューを何度も組み替えたり、行きつ戻りつしました。以下は、その“直す前”の画面と、何をどう変えたか。完成形は、いちばん下で。

01

中身は良い。でも、
見た目に二つ問題があった。

初回の出力 — 左に文章・右に全面写真のありきたりなファーストビュー
step00 — 中身は良い。でも、形がどこかで見たもの

これが最初の出力。文章も構成も、ほぼこのまま使える。産地の物語、価格、用途——伝える中身は、素材と参考を先に渡したぶん、一回で決まった。問題は見た目のほうで、二つあった。ひとつはファーストビュー。「左に文章、右に大きな写真」は、きれいではあるけれど、よく見る形でもある。第一印象で「またこれか」と思われると、その先を読んでもらえない。もうひとつは、全体がのっぺりしていること。ここから、同じ素材・同じAIのまま、見た目だけを詰めていく。

伝えたことコンテンツはいい。でも、デザインがもう一押し欲しい。今は単調で、のっぺりしている。色味もよくある感じ。ファーストビューも、ありきたり。

02

立体感は出た。
でも、差し色を外した。

細部のあしらいを足し、差し色に薄い緑を試した版(緑が浮いている)
直す前 — あしらいは効いた。でも、緑が浮いた

のっぺりの正体は、メリハリの不足だった。そこで、細い線と小さな番号をセクションの頭に置き、商品の仕様を枠で囲み、写真の隅に小さな英字を添えた。情報を増やすのではなく、強弱とリズムだけを足す。これで平面が立体になった——ここは効いた。ただ、同じときに奥行きを出そうと、写真の中にあった薄い緑を差し色に試した。これが外れ。狙っていた温度とずれて、ベージュの地と喧嘩した。写真の中の色をそのまま持ってくると、こうなることがある。

出した指示罫線や囲み、英語の極小文字であしらいを作って、リズムを出す。差し色は、写真の中の薄い緑を試してみる。

03

色を、
もう一度外した。

温かいオレンジを画面いっぱいの帯で使い、強すぎる版(修正前)
直す前 — 今度はオレンジを帯で使い、強すぎた

緑をやめて、温かいオレンジにした。色そのものは良かった。でも、今度は使う量を間違えた。「一本で、ぜんぶ」のセクションを、画面いっぱいのオレンジの帯にしたら、強すぎた。印象の強い色は、面で塗ると主張しすぎて、かえって安く見える。色は変えず、使う面積だけを大きく減らした。同じオレンジを、ラベルや番号や星といった小さな点だけに。強い色ほど、面積で抑える。

出した指示オレンジの色味はいい。でも面積が大きすぎる。印象の強い色だから、帯ではなく、ポイント使いに絞る。

04

ファーストビューを、
何度も作り直した。

ファーストビューを中央寄せにした版(間延びして決まらない・修正前)
直す前 — 中央寄せ。間延びして、決まらなかった

いちばん往復したのが、ファーストビュー。最初の「左に文章・右に全面写真」をやめて、まず中央寄せにしてみた——が、間延びして締まらない。写真を全幅の帯にしてもみたが、これも違う。行きつ戻りつして、最後に落ち着いたのは「左に写真・右に文章」。ただし写真は画面の端まで広げず、まわりに余白を残して“抜く”。押しの強い全面写真をやめ、余白と組版で見せる。第一印象は、ここでようやく「またこれか」を抜けた。

出した指示中央寄せはいまひとつ。左に写真(画面いっぱいにせず、余白あり)、右に文章。全面写真の押しの強さをやめて、余白で見せる。

05

そして、完成形。

完成した全体(OR D'ATLAS アルガンオイルLP)
完成 — OR D'ATLAS(全体)

産地の物語、成分、使い方、声、購入までを一枚に。細い線と小さな英字でリズムをつけ、暗い面の文字は重く見えないよう白に近づけ、スマホでは余白と段組みを詰めた。中身は準備で一回で決まったが、見た目の最後の詰めは、すんなりとはいかなかった。緑を試して外し、色を盛って戻し、ファーストビューを何度も組み替えて、ようやくここに着いた。完成した全体は、この画像のとおり。

「ちょうどいい」まで、
行きつ戻りつした。

中身は準備で決まる。でも、見た目の最後の詰めは、一発では決まらなかった。緑を外し、色を戻し、ファーストビューを作り直す——その地味な往復が、たぶんいちばん時間がかかる。

サイトを見る →