ホーム/このサイトの作り方
Making特別編/ 00
AIが出した答えを、
止めた記録。
誰が読むかを決めて、どう動くかを決めて、
言葉を決めて、最後に見た目を決める。
その順番でしか作らない、と書いている以上、
このサイトも同じ手順を踏んでいます。
どこで最初の答えを止めたのかを、数字ごと公開します。
AIのままだと、同じ顔になる
このサイトは、実装（HTMLやCSSを書く作業）に生成AIを使っています。
判断はすべて人。
誰に向けるか、何を言うか、どの案を捨てるか。
割合でいえば、手を動かす前の判断が7割、画面を作る作業が3割。
AIが受け持っているのは、この3割のほうです。
AIを使えば、ホームページは誰でも作れるようになりました。
それでもこの仕事が成立するのは、そのまま出すと、全部同じ顔になるからです。
このページは、どこで「そのまま」を止めたのかの記録です。
書体も、太さも、色の数も、最初の答えのままなら、どこかで見たページになっていました。
判断の記録は、仕上がりよりも正直です。
読む人で、置くものが変わります
このサイトを開くのは、「頼んで大丈夫か」を確かめに来た人です。
ひとりで事業をしている方も、会社の経営者もいます。
共通しているのは、デザインの良し悪しを審査しに来たわけではないこと。
だから、きれいな写真を並べても意味がない。
作品ではなく、考え方と手順を見せる場所にしました。
写真を1枚も使っていないのは、そのためです。
一行のために、4案捨てました
最初に目に入る「デザインは、いちばん最後。」は、5つの案から選んでいます。
| 案 | 判断 |
|---|---|
| 目に留まって、伝わる。 | 外さないが、何をする人か分からない |
| デザインは、いちばん最後。 | 採用 |
| 読む人から、逆算する。 | 穏当だが、他の制作者も言える |
| 伝わる順番を、つくる。 | 「順番」が抽象に響く相手には届かない |
| デザインの前に、整理を。 | 分かりやすいが、余韻がない |
採用した一行を読むと、「最後だと言うなら、最初に何をするのか」という疑問がわきます。
その答えを、すぐ下に置きました。
作る前に、誰が・どこで見て・どう動くかを決める。
疑問を作って、すぐ答える。
この並びが、次を読む力になります。
言い方を変えて、置き直しています
このサイトのトップページには、画面の右端に縦書きの一行が立つ場所が3か所あります。
スクロールすると、同じ位置に順番に現れます。
冒頭の一行とあわせて、全部で4つ。
- 1デザインは、いちばん最後。
- 2どれも、見た目の話ではありません。
- 3きれいなデザインは、納品物の一部でしかありません。
- 4設計がひとつなら、どこに出しても揃います。
どれも同じ主張です。
デザインより先に、設計を決めるという話。
一度読んだだけで残る言葉は、多くありません。
だから場所と言い方を変えて、繰り返し置いています。
どれかひとつが残れば、それで足ります。
そのままにしなかったところ
ここから先は、見た目の話です。
多くの制作で最初に来る工程が、この順番では最後に来ます。
順番を守った結果、決めることはほとんど残っていませんでした。
中身が決まっていれば、見た目は中身に従うだけ。
無料の定番書体を、やめました
AIが最初に出してきたのは、無料で使える定番のゴシック体でした。
読みやすく、破綻もありません。
ただし、無料で誰でも使えるということは、誰でも使っているということ。
AIで作られたページほど、同じ書体が並びます。
有償の書体（秀英角ゴシック・大日本印刷）に差し替えました。
書体は、いちばん静かな差です。
太い見出しも、やめました
見出しも、最初はいちばん太いウエイトで出てきました。
太く、大きく。
自動生成の定番です。
手本にしたサイトを実測すると、逆でした。
大きい字ほど細く、小さいラベルだけが太い。
同じ向きに直しています。
増えたものを、減らしました
AIは、頼めば頼むだけ足していきます。
色も、強調も、動きも。
放っておくと、増える一方です。
朱色の指定は57か所ありました。
36か所まで減らしています。
強調が多いページは、どこが大事なのか分からなくなるからです。
AIは、見出しの横やカードの角に、意味のない絵を置きたがります。
「ホームページ」と書いてある横に、ブラウザの絵。
言葉ですでに伝わっているところに、同じ意味の絵が足されていました。
アイコンは6個ありましたが、すべて消しています。
背景を黒く塗った面も、4か所から2か所へ。
黒い面は「ここが山場です」という合図なので、多いと合図になりません。
動きの種類も、2つから1つに。
同じページで違う動き方をすると、そこに意味があるように見えてしまいます。
AIが出してこないもの
減らすのは、言えば減ります。
足すほうは、言わないと出てきません。
右端の縦書きの一行には、頭に薄い丸を敷いています。
文字だけだと、視線が本文から離れないからです。
視線を動かす仕掛けを、AIが自分から作ることはありません。
数字の高さも直しました。
和文と欧文では、数字の字面の高さが違います。
そのままだと「1年目」の1だけが沈む。
字面ごと揃えて、沈んだぶんを戻しています。
チェックリストの印と本文の高さも、揃っていませんでした。
区切りの線は、薄すぎて画面ではほとんど見えていませんでした。
引いた線が見えていなければ、引いていないのと同じです。
濃さを2倍以上にして、ようやく線になりました。
灰色の面の上では、さらに見えにくくなることも分かりました。
本文も小さく、1行に詰まりすぎていた。
1行42字まで広げ、サイズを1割上げています。
改行の位置は、パソコンとスマートフォンの両方で確かめました。
どれも、測るまで気づきませんでした。
ここまでは、デザインの精度の話です。
数字が少し沈んでいても読めますし、それで読まれなくなるわけでもありません。
効くのは、作る前に決めたことのほうです。
誰に読ませるか、どの順番で読ませるか。
このページの前半に書いたことが、本体です。
御社の案件でも、同じ手順で進みます。
違うのは、決める材料をヒアリングでお預かりするところだけです。