Behind the build — Day 001

つくり方の全容

「AIサイト100連発」day1、服部制作室の会社サイト。最初にAIが出してきたものは、正直よくなかった。動きや派手なエフェクトで“すごさ”を出そうとして、かえって安っぽい。そこから「ここが良くない」を見つけては直す——派手すぎ、上品すぎ、強すぎ、と行き来しながら、静かで端正な一枚にたどり着いた。各段階で何が良くなかったのか、そして何を指示して直したのかを、順番に並べる。完成形は、いちばん下で。

01

動きや派手さで、“すごさ”を出そうとした。

修正前 — 動き・エフェクト頼み
修正前 — 動き・エフェクト頼み

ここが良くなかった:制作会社だから「技術力を見せたい」と、トップに動く背景や光るエフェクトを足した。動きは派手だが、それっぽいだけで中身がない。凝った演出ほど“すごい”と思いがちだが、実際は逆——盛るほど、かえって安っぽく見える。動きで驚かせるのは、いちばん簡単で、いちばん効かない。

出した指示演出はぜんぶやめる。動くものも光るものも削除。大きめの上品な文字と、ゆったりした余白だけで見せる。背景は紙のような落ち着いた色、文字は黒。派手さでなく、文字組と余白の精度——組み方そのもので勝負する。

02

今度は、上品で柔らかくなりすぎた。

修正前 — おとなしすぎ
修正前 — おとなしすぎ

ここが良くなかった:演出をやめて組版に振ったら、今度は繊細で上品になりすぎた。きれいだが、ホテルか美術館のよう。静かすぎて、“ものを作る会社”の体温が感じられない。整ってはいるが印象が弱く、誰の顔なのかが伝わらない。

出した指示上品すぎる。もっと今っぽく、くっきりした文字に変更。左に大きな見出し、右に写真を大きく——左右で大きさを変えた、少し崩した構成に。整いすぎを避けて、都会的なスタジオの顔にする。

03

力強くしたら、今度は圧が強すぎた。

修正前 — 文字が強すぎ
修正前 — 文字が強すぎ

ここが良くなかった:くっきりさせようと太い文字を全部大文字にしたら、今度は圧が強すぎた。力強いが、ぐいぐい来てうるさい。強さと品は両立しにくく、これは強さに振れすぎ。欲しいのは“強さ”そのものより、力を抜いた“抜け感”だった。

出した指示文字が強すぎる。少し細くして、全部大文字をやめ、大小を混ぜる。写真は色を抜いて白黒にし、画面全体の調子を一つにそろえる。強さを足すより、引いて整える方向へ。

04

すっきりしたが、まだ冷たい。

修正前 — まだ硬い・冷たい
修正前 — まだ硬い・冷たい

ここが良くなかった:文字を整えて締まったが、白黒写真もあいまって、まだ硬く冷たい。スマートではあるけれど、人の気配や温度がない。あと一歩、あたたかみが足りなかった。引き算をしすぎると、今度は冷たくなる。

出した指示写真に少しだけ色を戻す(植物の緑がほんのり効く程度に)。見出しは上品な明朝系に戻して、品の良さと今っぽさを両立させる。ヘッダーは仮のものから、自社のロゴに差し替える。

05

そして、トップはこうなった。

完成したトップ(ファーストビュー)
完成したトップ(FV)

派手な動きはやめた。でも、動きをゼロにしたわけではない。よく見ると、写真はごくゆっくりズームし、スクロールすると背景がわずかに視差で動く。気づくか気づかないか、という控えめな動き。01で削ったのは“見た目だけの派手な演出”で、こういう上品でさりげない動きは、むしろ技術力と品の良さを感じさせる。動きは、消すか足すかではなく、効かせどころ。この考え方のまま、下のセクションも整えていく。

06

実績は「どんな業種か」より「何で作ったか」。

Works — 何で作ったかで並べる
Works — 何で作ったかで並べる

気づいたこと:実績を「どんな業種か」で分類しかけたが、制作会社の場合、業種より「何で作ったか(技術)」のほうが価値が伝わる。同じ会社に何度でも頼める、という安心につながるからだ。最初はサムネを白黒にそろえたが、色が濁って実物の魅力が死んだ——これは逆効果だった。

出した指示実績は業種でなく「WordPress」「ジンドゥー」「HTML」など作り方でラベル付け。横スクロールにして、数の多さを体で感じてもらう。サムネのフィルターは外して実物の色のまま、クリックで原寸表示。

07

「今していること」と「これまで」を、ひと目で。

Profile — 著書・受賞・認定
Profile — 著書・受賞・認定

考えたこと:見込み客が知りたいのは、この人が「今なにをしていて、これまで何をしてきたか」。経歴・著書・受賞は、信頼の裏づけになる。旧サイトを見直すと、そういう良い情報が、古い体裁のまま眠っていた。捨てるのはもったいない。

出した指示プロフィールは旧サイトの文章を叩き台に、整理し直す。著書は表紙を小さく並べて、それぞれにAmazonへのリンク。受賞や認定も一覧で並べる。写真はイメージでなく、本人のポートレートに。

08

会社概要は、見出しと中身を「近づける」。

About — 縦積みにして直した後
About — 縦積みにして直した後

ここが良くなかった:会社概要を「項目|内容」の横並びにしたら、項目名が短くて間延びし、どれとどれが一組なのか分かりにくい。さらに、ここまで各セクションを別々に作ってきたせいで、見出しの大きさがページ内でバラバラになっていた。細部だが、こういう所で“雑な感じ”が出る。

出した指示項目と内容は横並びをやめ、縦に積んでペアを近づける。あわせて、ページ全体で見出しの大きさを数段階に整理してそろえ、本文や囲みの幅も統一。最後に全体の調子を合わせて、締める。

09

ひとつずつ直して、ここへ。

完成した全体
完成形 — 全体

派手さでも、上品さでも、強さでもない。行ったり来たりの末にたどり着いたのは、静かで端正な一枚だった。トップ画面だけでなく、すべてのセクションを同じやり方で直していく——「ここが気になる」を見つけては、具体的に指示して直す。その地味な繰り返しだけで、ここまで来る。特別な技術や発想ではなく、これが品質の近道だった。

品質の正体は、
アートディレクションだった。

AIは、ディレクション次第で品質が決まる。

サイトを見る →