AIっぽいデザインにならないようにするための強烈な整列！
「この番組は、エンジニアの成長は楽しい学びからをモットーに、昨日より少しだけ成長できるような内容をお届けする、エンタメ系テックラジオでございます」
「でございます。いかにエンタメ要素を出していくかですね」
「そうなんです」
「うーん、頑張ります」
「やっぱエンタメといえばSNSじゃないですか」
「そうですね」
「うん。で、最近思うんですよ。え、最近Xとか見ます？」
「ちょっと見ます」
「あ、ちょっと。あの、悲しい時代になってるなと思って」
「あー。えー、世界情勢の話してますか」
「あ、いや、してないっす」
「してない、あ、そこまで話してます」
「えー、情報商材屋さんの話ですか」
「あ、違います」
「あ、違いますか」
「違います。それ悲しくないっす。スレッドとかあるじゃないですか、なんかちょっと話題になってるツイート、ツイート、ポストのスレッドとかあるじゃないですか」
「はい」
「はい」
「あれさ、8割ぐらいもうAIで作ったようにしか見えなくない？」
「あー、なるほどね。分かる」
「そんなしゃべり方する人いないでしょ、みたいな、なんか謎の違和感を感じるというか」
「あー、そこまで見てないかもしれない」
「あ、でもどうだ。なんか、僕ちょっと変かもしんないんすけど」
「うん」
「やばいかな、これ言うの」
「一旦言ってみようか。一旦、はい」
「一旦言ってみてやばかったら、ちょっと突っ込んでほしいんですけど。突っ込んでくれたら救われるんで」
「はいはい」
「はい。なんかあの、X民」
「え？」
「X民」
「X民、はい」
「なんかいわゆる、いわゆる、あの、治安の悪いほうの」
「治安の悪いほうの？」
「はいはい」
「はいはい」
「そう。X民がなんかわあわあ言ってるのと、なんかAIがなんか言ってるのは、なんか一緒です、僕の中で。なんか」
「あー、なんだよね」
「あー、なんだよね。あー、突っ込んでくれた。じゃあ良くなかったのかな」
「ちょっと待って、えーと、品質がってこと？」
「品質っていうか、なんか、人間が言ってるとは思ってないというか」
「あ、そういうこと？」
「はい」
「え、待って。俺の見てるAIのなんか質感と違う気がするな、なんか」
「あ、でもなんか、なんて言うんでしょう、その、のりさんはその時代が変わったっていう話なのかなと思ってて」
「うん」
「なんか、僕はなんか確かにAIに変わりつつ、時代が変わったというか、登場人物が増えたなぐらいの」
「あー」
「感覚みたいなニュアンスです。はい」
「いや、まあでもAIによる変身はなんかね、こう、なんだろうな、こっちの心がざわつかないというか」
「あー、なるほど、血が通ってないというか、なんて言うんでしょうね」
「なん、なんて言うんだろうな、いや、そんな驚き方する人いるみたいな。なんか例えば猫のさ、かわいい画像、動画があったとして、うわー、これはかわいい猫だね、びっくり、みたいな、なんか、から始まって、え、その動画の説明をした、したのをちょっと言い換えたような文章が続いてるというか」
「それは確かに。それは確かに」
「で、なんかおもしろくもないし、なんか心ざわつくこともないんだけど、そういうのがすごいたくさん連なってるのをいっぱい見るなと思ったりとか」
「うんうん」
「あと、動画とか画像を見たときに、うわー、これ、これすげー、こんなのあるんだ、じゃなくて、これはAIか、どう、どっちだ、みたいなところから入るようになってしまったとか」
「あー、それは」
「それは分かる」
「それは思う」
「ね」
「うん」
「っていうのがあって、すごい僕は悲しい時代が来たなと思ってるんですよ」
「うん」
「しかし、我々は、あの、これからもウェブサイトを作っていかないといけないじゃないですか」
「はい」
「で、その中で、えーと、もちろんAIのフルパワー、パワーをフル活用してくわけですよね」
「はい」
「はい。じゃあ自分たちの生成物というか作った成果物がAIっぽかったらめっちゃださいんじゃないかと思って」
「あー、そういうこと？」
「はい」
「それはださいというか言いやすっすね、なんか」
「あー、ま、結局、ま、AIが作ったかどうかじゃないんですよ。AIっぽいかどうかっていうところ」
「うん」
「それが問題だなと思ってて」
「うんうん」
「もし仮にSNSからそのAIっぽさの違和感が消えたら、まあそれはそれで盛り上がってるように見えるしいいんじゃないかなとも思う」
「うんうんうんうん」
「しかし、現状、え、使い方をあまり、あ、使い方があまりうまくないとAIっぽさがまるまる出てしまう」
「うん、そうっすね」
「今回はですね、AIっぽくないデザインをAIで作る方法」
「うん」
「をお話していこうかなと思ってます」
「おお、ありがたいぞ、それは」
「デザイン」
「はい」
「めっちゃAIっぽくなるもん、個人開発してると」
「なるよね」
「で、僕はそれがなんなのか分かんなくて」
「うん、そうなんだ」
「なおかつなんか自分だけのものになってしまってるから、まいっかってなっちゃってます」
「なっちゃってんだ」
「はい」
「この前なんか紹介してたあのスティッチを使ったりしたらみたいなあったと思うんすけど、それとはまた別で」
「スティッチはあのAIっぽくないと思う。でもアメリカンではあると思う」
「アメリカンではある。ど、どういうことですか」
「なんかちょっと日本っぽくないものができるというか」
「うーん」
「なんとなく俺の中であの日本っぽいサイトと海外っぽいサイトの違いがあのイメージしてるものがあるんですけど」
「うん」
「うん。やっぱなんか海外のサイトってさ、あのタイポグラフィーがあの豊富にあるからさ、文字で見せれるサイト作りやすいと思うんだよね」
「あー、なるほどね。確かにそう、文字で見せますよね。なんか」
「そう」
「本、本の表紙とかもめっちゃそうっすよね」
「そうそうそうそう。でも日本語のフォントってさ、なんかもちろんまああのあんまデザイナーっぽい仕事してないんでそんなすフォント深掘りしてないっすけど、マジで明朝とゴシック以外大体同じ、あーとの2種類しかないように見える」
「なんかめちゃくちゃおしゃれな漢字とひらがなのフレーズ作りづらそうっすよね、なんか」
「作りづらいと思う」
「うん」
「うーん」
「なるほど」
「大体明朝がゴシックで落ち着くじゃん」
「うん」
「っていうふうに思っているから、なんかそこがこうスティッチのデザインのセンスと若干ずれが生まれるのかなっていう感覚は少しあるんすよね」
「うんうん」
「うーん。ただ、ま、確かにスティッチ使ったほうが絶対きれいなものはできると思う」
「うん」
「うん。でもそこの言語化ができないとやっぱね」
「うん」
「あれじゃないっすか」
「はい」
「で、えーっと、っていうのを言った手前、えー、これを見せて、いやAIっぽいじゃんってなったら恥ずかしいんですけど、ちょっと今ですね、2人にURLを送りました」
「お、これは今聞いてる方も説明欄から見れるんですか」
「説明欄の概要に貼ろうと思ってるんで。間違えた。説明欄にURLを貼ろうと思ってるんで」
「うん。おお」
「赤いちにはこれもう見せたんですけど、先週というか」
「おお」
「これを見たうえで、ちょっとじゅんぺいのまずAIっぽい判定をしてほしいわ」
「えー」
「言いづらいぞ」
「あー、なるほど。判定。えー。えー、いいえっぽいかどうかですよね。100点満点中」
「100点満点中にしよう。で、えっと100点だったら、待って、AIっぽいで聞いちゃったからわけわかんねえな。とりあえず、えーっとAIっぽくないどう判定をしてほしいから、100点だったらこれは人間が作っている。0点だったら、いやどう見てもAI」
「あー、オッケーです。100点です、それは」
「マジで？」
「え、AIっぽくないなって思いましたよ」
「お、よかった。ありがとうございます。じゃあ、あの聞いてる方もこれあの今からがっかりせずに済むと思うんで、あのぜひリンクをクリックして、えー、まずAIっぽいかどうかをちょっとチェックしてみてください」
「うん」
「ただこれあのフルAIで作ってますと」
「おー。おー、フル？」
「フルっす」
「マジでちょっと僕も、ま、先週もちょろっと見たっちゃ見たんですけど、これあの僕もあんまりデザイン詳しくなくて、あんま参考になんないかもしんないんですけど、正直日本語とかのところ以外はもうよく分かんないっす、なんかAIっぽさは」
「日本語？」
「あー」
「文章がちょっとね、ちょいちょい」
「はいはいはいはい」
「なんか、なんか単なるチャットボット導入は自動化の入口にすぎません、みたいな」
「あー」
「なんか、あ、あんまり、なんて言うんだろうな。なんか日本語としては別に何も間違えてないんすけど」
「うんうん」
「うん」
「ちょっと草すぎるというか、なんか」
「そうそうそう、草すぎる」
「うん」
「はい。なんかそう、そう、そう」
「分かる」
「でもほんとにそのぐらいっすよね。うん。そういう、なんか、に、言語のところ？」
「うんうん」
「以外はもう僕はよく分かんない」
「なるほどね。じゃあちょっと今日はね、それをこう言語化できるようなエピソードにしたいなと思っておりますんで」
「ありがてえ」
「A、AIっぽいとは何かってことですか」
「そうそうそうそうそう」
「うんうん」
「ま、今見てるサイトはそのAIっぽさを取り除いた結果こうなってるってことっすもんね」
「そうです」
「うん」
「このサイトを作るのにあたって意識したこと、それはAIっぽさを取り除くことのみです」
「いやー、気になるぞ」
「うん。もう目的から全然外れてるんですけど、なんかAIっぽくないほうがいいなと思って。AIのサイトなのに」
「それってでもなんか、どうなんすかね。なんかエンジニアだけが感じるのか、なんかエンジニアじゃない普通にウェブページ見に来た人も思うのかも、まあ気になりますね。我々じゃあ答え出ないんすけど」
「まだ感じないかもね」
「うん。俺らは実際に作ってる経験があるから、なんとなくぽさは見えるだけなのかな」
「でもなんかそのクオリティーのまま出すサイトが増えてって、世の中の人がいっぱい見始めてからなんかAIっぽいなって感じるのかもしれない」
「うん」
「でもどうなんだろうな。裏のプロセス見えてないから分かんないかもな」
「うん。なんか、なんか言うちゃうと」
「これ言っちゃうと終わるのかな」
「これ言っちゃうと今から話すエピソードがあれなんですけど、なんかAIっぽくても別にいいんじゃないかっていう、5年後とかには」
「あー、なるほど」
「基本AIだからっていう」
「うんうんうん」
「気もしなくもないですけど」
「うんうんうん。もうそれはね、まあそうかもしれない」
「いや、まあどうなるか」
「いやもうオリジナリティーをどう出すかっすよね。埋もれちゃうからね、ほんとにAIっぽいとね」
「うん」
「他の人がAI使ってたらね」
「目的によるかなと思ってて、うん」
「うんうんうん」
「あのー、例えばだけどSNSとかの文章がAIっぽかったらさ、多分そこに対してこう心動かされる人っていないと思うんだよね、あんま」
「うんうん、確かに」
「ってなったときに、それだと目的が達成できないかなと思ってて」
「うん」
「だからこのウェブサイトとかも同じなんじゃない？なんかこう、ほかと比べてさ、同じ感じになってたら魅力って減ってくわけじゃん」
「うん」
「でもじゃあLPみたいなこうサービスを売ってくぞってなったときに、なんかそこでこう差別化できてなくて印象に残らないとかだったら、まあそれはちょっとマイナスかもなとは思う」
「確かに」
「ま、ていうので、えー、まずですね、そもそもAIっぽいデザインってどんなデザインなのっていう。そこから始めていいっすか」
「お願いします」
「はい。はい。ま、特徴ね、今回ざらっとね、10個くらい挙げたんですけど」
「うん」
「その1、紫色のグラデーション」
「そうなの。なんかちょっとすいません、今日のエピソードがちょっと分かってきたかもしれないな。これもうAIあるあるだな。AIあるある談義だな、これは」
「まあAIあるある談義になるかも」
「紫の」
「AIあるあるやん」
「紫のグラデーション」
「えー」
「いやー、めっちゃ分かるわ」
「なんなんだろうね、あの紫色のグラデーション」
「不思議だよね、あれ。なんか知らないけど、そう、ぜ、絶対さ、こう目立たせたい場所グラデーションにしてくるし。多くの場合は紫」
「ちょっと僕乏しいのであんまりピンときてないっすよ」
「マジで？」
「いやー、ちょっとあるかなー。ちょっとそ、それを急に見つけるのむずいんだけど」
「そうなんだ、紫色のグラデーション」
「ちょっと、うーん、むずいな、これ。公開されてるウェブサイトで見つけるのがむずい」
「うん。まあでもな、はい、大丈夫です」
「一応俺のローカルにはね、AIっぽいやつあるんだけど、それをちょっと画面共有して見せてもなんか音声だとあれだからなっていう」
「そうですね、あんまり見ないほうがいいな、我々も」
「うん。なんでちょっと想像力を働かせて、えー、思ってほしいんですけど、まず、えー、紫、グラデーション、AIっぽい。で、これ紫だと、あの、焼くまんっすね、これもう。完全焼くまんAI、これは」
「そんなに焼く乗ってるんだ、グラデーションで」
「乗る」
「うーん」
「もう紫乗せるだけで焼くまんになるね」
「なります。そして、角が丸いカード型のレイアウトに対して薄いドロップシャドウが付いていて、マウスをホバーしたら上にちょっとひゅって動くみたいなやつ」
「分かんない」
「ちょっとあの、すいません、あのー、専門用語を使わずに分かりやすく言ってください」
「はい。えー、角が丸いカードみたいなレイアウトをしていて」
「はいはい」
「えー、そのカードがちょっと浮いてるよっていう感じを出すために、あのー、バックグラウンドにシャドウがなんか入ってるというか」
「うんうん」
「でも露骨なシャドウじゃなくて、すっごいふわっと入ってるわけよ」
「うんうんうん」
「うっすら影みたいな。で、そこに対してマウスをね、上乗せるとね、なんかひゅって少し、あのー、三ピクセルぐらい上に上がるみたいな」
「うんうんうんうん」
「そういうアニメーションが付いてるカードレイアウトが、えー、三つぐらい並んで作られる」
「なんなんですかね、ほんとに。ま、海外でそういうサイトが流行ってるってことなんかな」
「まあでも、やっぱLPと、うーん、あれじゃないかな。グーグルのさ、マテリアルデザインじゃないかな」
「うーん」
「グーグルってなんかマテリアルデザインみたいな、あのー、デザインパターンみたいなやつを、なんかデザインパターンっていうのかな、デザインシステムなのかな、あれ。みたいなやつを多分公開してて。ま、それとかを元に多分マテリアルUIみたいなやつReactで作られてると思うんですけど、結構それに乗っ取ったレイアウトに近いような気はする」
「うんうんうんうん」
「で、それがめっちゃ使われてるから、まあ結局めっちゃ使われてるやつが使われるんじゃないかなとは思っている」
「うんうんうん」
「さらに」
「まあ正しいですね」
「まあ正しい。まあAIの理論上そうなのよ」
「うん」
「で、さらにこれに無難なアイコンが見出しの左とかに並んできたら、これもうねリーチですね」
「めっちゃ分かる」
「リーチ」
「あれなんなん？なんかあんま見たことないんですけど、その」
「うん。で、しかも例えば三つ並んでた場合、なんか知らないけど色変えてきたりすんのよ。青、オレンジ、緑みたいな」
「あーどうだったっけなー俺やったとき」
「でさらによ」
「はい」
「そのアイコン後ろがちょっと薄い色でアイコンの部分が濃い色になってるみたいな」
「あーうんうんうんうんめっちゃ分かる」
「もうこれはねビンゴっすね。ダブルビンゴ」
「急に競技変わるんすね」
「あー」
「それがあと八個か七個ぐらい出てくるという」
「これ来たらダブルビンゴっすよ」
「めっちゃ分かるなそのなんかアイコン付けてくんの。ちなみにそのアイコンの色、色じゃないな、えーなんだっけ、か、か、カードの色が変わってるって言いましたっけ？アイコンの色がそれぞれ違ってるって」
「えっとねカードの感じは同じなんだけどアイコンの色がなんか変わってるとかはあるね」
「あそれはちょっと見たことないかもな」
「でも同じ色で」
「カラーテーマ指定ししてもそうなる」
「え？」
「カラーテーマ指定してもなんかそんな感じだったっすか？なんか」
「あなるときはなる気がするな」
「あーそうなんだ。たまたまだったんかな。でもまあ分かるめっちゃ分かる」
「うん。でもあの同じ色で違うアイコンになることも全然ある」
「はいはいはい。なんかなんてん、まあでもあるかな。あるかな。なんかサイドバーとかでアイコン使うのはよくあると思うっすよ」
「サイドバーで、あーあるね確かに」
「うん。サイドバーとか、まあ検索ボタン、まあボタンとかか、あと」
「うん」
「ちょっと僕がなんか知識乏しいだけかもしんないんですけど、なんかカードで三つ並べてなんか説明するときに、まあない方ないかもしんないっすけど、なんかベーシックなアイコン持ってくるのなんかすごいAIっぽさ感じますね」
「あるね」
「うん」
「なんだろうね、このありもので作りました感というか」
「あそうそう。まあでも結局そうなのかな、なんか自分で変えてね前提なんすかね、その」
「いやー」
「ここはアイコンっていうイメージだからねみたいな」
「どうなんだろうな。まあでもそれはさ、もうAIの出力だからもうそんな意図はないんじゃない別に」
「まあそうだね」
「変えてねとも変えないでねとも思ってないというか」
「うん。まあ確かに」
「うん」
「まあそういうのが多いから」
「うん」
「で、なおかつ使えるもので出すみたいな」
「そうそうそうそうそうそう」
「普通に」
「まあこのへんが結構あの分かりやすいやつ」
「うん」
「で」
「あ分かる。今、今んとこ共感できてる」
「今んとこできてる。ちょっとこっからでもねちょっとマニアックそうに」
「おーさらに？」
「ほいほいほい」
「うん」
「まず、えー見た目の部分で言うと、まあこれは一緒に一気に言っちゃっていいかな。まずねジャンプ率が非常に低い。で、ジャンプ率っていうのはですね、デザイン用語なんですけど、例えば文字と文字の大きさの差みたいなイメージですね」
「え、見出しと本文みたいな話？」
「あそうそうそうそうそう」
「あー。うーわ気にしたことな」
「ないですね」
「あのなんて言うんでしょう。標準の今使ってるデザインが、その見出しとか、見出し一と二のジャンプ率どのぐらいとか気にしたことないな」
「うん。でもあのAIの成果物見ると分かるけど、このへんが結構ね、あの低いジャンプ率になってますね」
「うーん。あーじゃあ文字の大きさが一緒というかあんま変わんないんすね」
「まあ多少違いはもちろん見出しのほうがちょいでかいし、本文のほうがちょい小さいんだけど、大胆な差は作られない」
「うんうんうん」
「うん」
「へー。うわそれなんかちょっと実際に見ないと共感できないかも。だけどそうなんすねって感じですね」
「鳥さんの間めっちゃジャンプしてる」
「これはね、まああとでちょっとプロンプトの話もするんですけど、とにかく大胆に文字をでかくしろって言ってる」
「うーん。なんかデザイン的にもそっちのほうが、えLPとかだったら絶対いいっすからね」
「うん」
「どこを見てほしいとかってやっぱ文字の大きさ大事だからな。プレゼン資料とかはもちろんそうっすけど」
「そうそうそうそう」
「へー。そして、えー鬼のようにね中央揃えになりますね」
「分かる」
「すっごい中央揃え」
「あー分かるな。それ分かるわ」
「うん」
「あ、記憶あるな、直した」
「すっごい中央揃えいっぱい使ってきます」
「分かるなー」
「なんでこのへんとかも意識しないとちょっとAIっぽくなる原因かなっていう」
「日本語があんま中央揃え使わない言語なだけなんだろうなきっと」
「あーどうなろうね。えっとね」
「そんなことないかな」
「中央揃え云々の話に関して言うと、あのーちょっと前にさ、ノンデザイナーズデザインブック読んでるんですけどみたいななんか話どっかでしたような気がしてて」
「うん。はい、しましたね」
「したよね。で、あれ一応読み切ったんですけど、あのプロは中央揃えを使うなってめっちゃ書いてあった」
「プロはデザインのプロ？それともノンデザイナーズなりのプロ？」
「いや、もうデザインの、デザインやる人は中央揃えに逃げんなって言ってました」
「それなんで？」
「なんかすごい無難になるけどデザインとして突出したものにはならないっていう」
「あ、でも無難なんすね一応やっぱり」
「そう無難。そう。だから、えーとこれはもう仮説なんですけど」
「はい」
「えーとすごい無難になりやすいと中央揃えは」
「うん」
「だから世の中一般の人はデザインにあんまりこうこだわらないと基本中央揃えになると」
「うん」
「で、その量が多いから、えー結局AIはそこを学習して中央揃えにしちゃうんじゃないかなって思ってる」
「うーんなるほどね」
「うん」
「まあそういうのもあるか」
「だけど意図的にどっか端を揃えて、えーと整列を見せていかないと、まあプロっぽいデザインにはならないっすよとかっていうのは言ってて。ほんとに中央揃えをしたいなら、それがあの意図的に中央揃えになるようにしろっていうのはねすごい言ってますね。ノンデザイナーズデザインブックで」
「うんうんうん。ここはもう中央じゃないとだめなんだっていう」
「そう」
「状況じゃないと使っちゃだめだよってことですね」
「そう。逃げでなんかなんとなーくで理由のない中央揃えにはするなっていう」
「うーん。いい」
「で、えーっとね、ちょっとまあ残りは圧縮しちゃうんですけど、まあこれは文字系ですね」
「文字？」
「うん。まず、えー特徴のないフォント」
「フォント」
「え？でものりさん最初フォントで特徴ないって言ってたじゃないですか日本語」
「そう。だから日本語はむずい」
「むずい？」
「うん」
「まあでも英語部分もあるじゃないですか」
「うん。あーはいはいはい」
「で、えーまあでも、うーんそうね。まあフォントはでも日本語だとまあむずいっちゃむずいんですけど。えーとまあとりあえずでも無難なフォントが出てきますと」
「うん」
「さらに、えー文章の内容についてもまあ結構あるなと思ってて。ここに入れるにしてはあまりにも長いだろっていうテキストが出てくる」
「分かる」
「うん」
「分かる」
「見出し改行しまくっちゃってんじゃんみたいな」
「分かる」
「うん。このへんとかはちゃんと指示してかないとね長くなりがちっすね」
「うーん」
「うん。あとなんか急にカタカナみたいな」
「ん？」
「急にカタカナが入ってくるというか。なんだろうな不自然なカタカナの入り方とか英語の入り方がしてくる」
「えーる、ルー大芝みたいな話してますそれは」
「あそうそうそうそう。例えば、あのーこの広い海みたいな」
「うん」
「この広いオーシャンみたいな感じで書かれることがある気がする」
「あーなるほど」
「うん。まあちょっと今のはあの例えが悪すぎたんですけど」
「はいはい。まあでもちょうどいい塩梅のやつが」
「うん。なんかビジネス用語って言ってるから。いやこれはギリギリなんかビジネス用語としてあるかもしんないけどあんま聞いたことないなぐらいのさじ加減のやつが出てくる」
「まあなんだろうな。なんかコミットするよりもちょっと向こう行ってるやつですよね多分」
「うんそうそうそうそうそうそう」
「ちょ分かんない」
「なんだろうな。うーん。これがエッセンシャルみたいな」
「あー」
「いやちょっと違うな。あーまあんでもあるか」
「まあまあまああのさっきより全然いい分かりやすい」
「なんかこんぐらいのさじ加減のが出てくるイメージある」
「うんうん」
「あとねあのやたらとね説明書きの括弧が出てきます」
「うーん」
「なんかその文章の中でなんか単語があって、その後ろに括弧何々何々みたいななんかそのちょっと言い換えみたいなのを括弧でやりがち」
「えーウェブページの文章でもそうなんすね」
「そう。だからこの括弧を消滅させたほうがいい」
「うんうん」
「っていうのがまずこの映画っぽいデザインに出てくるね特徴たちですと」
「まあ割と共感できましたね」
「良かった」
「はい」
「でもうんそうね。でこれ」
「言語化はできてなかったけど」
「あーなるほどね」
「はい」
「これね言語化できるの大事っすよ」
「そうですね」
「うん。で、えーっとまあプロンプト。あのーじゃあこれ作るときにじゃあどういうふうに意識したかっていうところのプロンプトの部分っすね」
「はい」
「まず、えとにかくコントラスト付けるのをね徹底しました」
「コントラスト？」
「はい。で、コントラストはいろんな付け方があるんですけど、えー例えば」
「すいませんコントラストって明暗？」
「えっとねまあさ、砂糖持ってもらえれば。サブ」
「さ？なんの？」
「えーとねいろいろある」
「あいろいろな砂糖」
「いろいろあるんで、えーそれを言ってくんすけど」
「はい」
「まず一つはジャンプ率」
「うん。あーはいはいはい。テキストの混沌」
「うん。でこれはねしつこいぐらい言わないとねあのやってくんないっす」
「うーん」
「うんうんうん。で今回作ったサイトだと、えー特にファーストビューの見出しの部分とか」
「うん」
「えーまあその、うーんなんだ各所の見出しとか。あと料金表のプラン名の部分とかはめちゃくちゃでかくしろって三回ぐらい言ってやっとあの大きさになってる」
「うーん。いいっすね。なんかもう数字指定じゃなくてめちゃくちゃでかくしろ」
「めちゃくちゃでかくしろって言ってちょっとでかくなって、いやまだ足りないめちゃくちゃでかくしろって言ってちょっとでかくなって送り返してあのサイズになって」
「めっちゃいい」
「めっちゃいいです」
「めっちゃいい」
「そう。で料金プランのところだけはやりすぎだって思いました」
「そうだって数字指定したほうがいいですよね絶対。いやまあでもね数字って感じ」
「まあね。まあそうだよ」
「まあでデザイナーじゃないとやっぱポイント数とねほんとの大きさはね」
「うん。そう紐づかないから」
「紐づかないっすから」
「そう。まあ別にデベロッパーツールで数字いじればいいんですけど」
「うん」
「やっぱね」
「いやめっちゃいい」
「バイブコーダーとして言葉で伝えるっていう」
「うん。めっちゃいい」
「うん」
「こ、こそれ、それによってこのエピソード」
「できてますからやっぱりね」
「そう」
「うん。であと、えー余白」
「はい」
「余白は大胆に開けて」
「うん」
「言ってます」
「そ、それは結構大胆にやってくれたんすね」
「ま余白はちょっと俺もね怖くてあんまできなかったかもな。これはあのなんだろうな、えー俺にあのベストな余白が見えてないっていう問題があるかもしれない」
「うんうんうん。まあそう、それそうだよな。ま僕も絶対そうですね。デザインよく分かんないから」
「そう。一応指示に大胆に余白を開けろって入れてるけど、まあこんぐらい開けばいいかなっていうぐらいの感覚では作っている」
「うんうんうん」
「うん。であと見出しのフォントもねめちゃやりまくりましたねこれは」
「フォント？」
「うん。まとにかくぶってやつにしろって」
「す、すごいバイブコーダーだすごい」
「うん。力強い不程度でよろしくみたいな感じでやってます」
「まあねフォントとかねん、フォント名前分かんないからな」
「そう。分かんないな」
「どじくっつてもいっぱいあるしな」
「うん。そうなのよ。まだからそれでなんとなく感覚で伝えながら、まあぱ、見た目で選んでった感じっすね」
「いいなぶってえのになってるしなちゃんとな」
「ちゃんとぶってえのにしたからね」
「はい」
「うん。でこれによってあの通常の文字とのそのコントラストを付けて、えー見栄えを良くしていくみたいなことをやりましたと」
「うんうん」
「あとまあ中央揃え減らして整列のライン作るってのはねめっちゃ言いましたね」
「うんうん」
「で個人的にそんときにすごいね役に立ったのが、あのーま中央揃え多すぎるんで、えーととにかく、えー左右のどちらかで揃えて、えー強烈な整列のラインを作って、作るようにしてプロっぽいデザインにしてくださいっていう。このプロっぽいデザインにしてくださいってのめっちゃ言いまくった」
「プロっぽいデザインにしてくださいでそれっぽいデザインになるんすね」
「なる。一番万能かもしれないこれが」
「そうなんだ」
「うん。強烈な整列ってなんすか今日」
「ん？いやなんかねあのこれもノンデザイナーズデザインブックにあったんですけど、整列はなんかとにかく強烈なやつを作れみたいなの書いてあった記憶がうっすらあって。じゃあ強烈な整列だろうって」
「じゃあ強烈な整列ってなんすか」
「全然分かんねえ」
「強い、なんかね強い整列を作れってなんか左端をとにかくバーン揃えるとか」
「あーなるほど」
「線はないけど」
「それはなんかあの、ん？あいいっすかすいません。それはなんか整列したやつらのメンツを強烈なやつらで揃えろみたいな話じゃなくて」
「あ違います違います。その個性派で揃えろじゃなくて、あいつらマジで軍隊かよってぐらい揃えろっていうイメージっす」
「なるほど。なるほど。整列ってそういうもんなんじゃないっすか」
「いやまあまあまあまあまあ。でもとにかくあのー線はないのに線が見えるぐらいくっきりラ、ラインが見えるようにしろっていう」
「うんうんうん。言いますよね」
「あー確かにこう文字とかもなるほど」
「ちょっと関係あるか分かんないんですけど」
「はい」
「あのき、なんだ、企業のブランドぜん、デザイン、例えば車の」
「うんうん」
「デザインロゴとかも。なんかホンダとか」
「うん」
「あ、あるじゃないですか」
「日産とか」
「例えば。なんかああいうのも結局強烈な整列でできていて」
「うん。え？」
「なんか解きほぐすと丸と四角で。なんかラインが全部出るようになるっていうんですか。なんか結構幾何学的にデザインすることによって人間がすっと」
「うんうん」
「なんか記憶に残るようなデザインにしてるみたいで」
「へー」
「結構どこのロゴとかもそうみたいな。なんかチャムズのペンギンも確かそうだったんすけど」
「そうなの？」
「うん。なんかお腹と口ばしのラインがなんか円になってるみたいな、なんかそんなんだった気がする。ちょっとうそ、うそで言ってる可能性大なんでちょっとあれなんすけど。結構デザイン、ん？ブランドのロゴってなんかそういうデザインの仕方してるみたいで」
「うーん」
「やっぱなんか強烈な整列ってやっぱ人間が見てぱっと理解するうえでめっちゃ大事なんだろうなって今のりさんの話を聞いて改めて思いました」
「あーでも黄金比とかもなんかもしかしたらそうなのかもね」
「あそうそうそうそうそう」
「はいはいはい。気持ちいい比率があるみたいな」
「あそうそうそう」
「うんうん。大事なんだなそういうの」
「ね。そういうのちゃんとなんかボキャブラリーとして言えるのが大事かなっていうのはねめっちゃ思う今の時代は」
「なるほどね。じゃやっぱ強烈な整列は言ってったほうがいいっすね」
「言ってったほうがいい」
「うん。ボキャブラリーとして」
「強烈な整列を作ってくれって」
「分かりました。そうであと、えーとまあほかにもいろいろ細かいプロンプトの試行錯誤をやってるんですけど、個人的にこれは聞いたなっていうのは、ボキャブラリーを増やすための壁打ちをGeminiで行うっていう行動っすね。これちょっと具体的なプロンプトじゃないけど」
「ボキャブラリーは言語の？」
「えーとねデザインの表現方法とかパターンかな」
「ああなるほど」
「うん。で今回のサイトだったら意識したのがそのファーストビューちょっとアニメーションみたいになってて」
「うんうん」
「で、えー最初これ、えーと指示出したときになんかAIに関するサービスなんで、なんかこうめっちゃ近未来的で、えーなんかあのかっこいいなんか未来的でなんかこう進歩的なやつにしま、してくださいみたいな」
「うん」
「ってやったんすよ」
「はい」
「でそしたらなんかね、星座みたいな。なんか」
「うん」
「てん、ちょっと星みたいなやつとそれがこう直線でつながって少しこう動いてるみたいな」
「うんうんうん」
「でそれがすごい流れ星みたいになっててダサかったんすよ」
「はい」
「はいはいはいはい。で、うわこれなんかめっちゃよく見るしなんかダサわと思って。でもどうやったらかっこいいアニメーションになるかが分かんなかったから」
「分かんない」
「だからGeminiにとにかくなんか未来的なこうテクノロジーを感じさせるような、まそれでいて洗練されたアニメーションってどういうのがあるみたいなのでこういろいろ調べさせて」
「うん」
「でそれで出てきたのがこうなんかじゃあ流体をなんかこうドロドロ動かすみたいなのとかありますよみたいな」
「うんうん」
「そうなんだと思って。なんか四パターンぐらい出てきたのねそれでボキャブラリー的なものが」
「はいはい」
「で、えーそれでまあ、まそっからはあと自分の中でイメージするしかないんだけど、まとりあえずこれ流体っぽいのが一番なんかかっこいいかもなと思って」
「すごいそれもはい」
「で、えー流体を作ってくれってCursorに投げたんすよ」
「はい」
「よっしゃ今のよく分かんないギザギザの輪っかができちゃって」
「なんかオーロラ」
「えこれそうなんだ」
「はい」
「二つが動いてる感じですよなんかオーロラみたいな」
「ああそうそうそうそうそう」
「流体」
「うん」
「でもなんかこうオーロラみたいでかっこいいしこれでいっかなと思って」
「いやこれでもすごいっすよ。これどうやって作るか分かんないっすもんこのアニメーションプロンプトで」
「俺も分かってない」
「どう見ても流体じゃないとは思っている」
「流体ではないっすね」
「うん」
「ま固体ではないんですけど。でもなんかもういわゆる流体ではないですね」
「なんかね最初ね怖い感じになりすぎてたなんかあまりにも」
「うん」
「なんかね暗くて色が」
「はい」
「全部のなんかさ絵の具のパレットってさこまめに洗ってましたちなみに小学校のときとか」
「ああ結構洗う派でした」
「マジか」
「俺」
「はい」
「あでもいますよね。今僕も結構洗う派でした」
「あマジか。俺洗わない派だったんですよ」
「あはいはいはい」
「でまとにかくカッピカピのいろんな色が付いたのがこうごっちり固まってて」
「うん」
「でたまーに洗うときに恐ろしい混ざったなんかどす黒いこう煙のような水が出てくるんですよ洗うと」
「はいはいはい」
「それみたいになっちゃって。綺麗好きの二人には分かんないかもしんないんですけど」
「まあまあまあでもき、汚い。汚いって言ったらあれか。まなんか、まあ、まあでもそぐわないっすよねなんか」
「まあ悪魔登場するんじゃないかなぐらいのなんか感じになっちゃって。だめだだめだもっと明るい色にしろっつったらなんかどんどんオーロラみたいになってったっていう背景なんすけど」
「あーまあでもなんかいいっすねちょっと」
「うん」
「アジャイルですねなんか」
「なんかあんま見たことないアニメーションだしこれいいかなと思って」
「うんいいいい」
「っていう感じでね作っていきましたね」
「うん」
「へー。デザイナーとじゃ絶対に無理なやり取りですねその」
「うん怒られるしぶっ飛ばされんじゃないかな」
「いやほんとにそれ。これはいいな」
「うん」
「いい時代」
「そう。で、えーまあこういうふうな感じでプロンプトで作っていきましたよと。でちょっと最後にですね、Claudeのさあスキルって使ったことあります？」
「ありません」
「Claudeのスキル、はい」
「まああれって簡単に言うと、まあプロンプト集じゃないっすか」
「はい」
「なんかこういう手順でやるんだよみたいな手続き書いたプロンプトを読ませてるだけじゃないっすか」
「はい」
「であれのデフォルトのスキルで、あのフロントデザイン、フロントエンドデザインっていうスキルがあるんですよ」
「うん」
「でこれ読んだときに、ま今回のなんかAIっぽさとかその意識したプロンプトみたいなのがね、なんか、あ、ClaudeのAnthropicの人もこう思ってんだなって思った部分が結構あったんで」
「うわめっちゃ気になるな」
「中にどういうのが書かれてるかっていうのを紹介して、あーちょっとこれがじゃあプロのデザインなのかっていうのをちょっと痛感してもらおうかなって思ってます」
「あーいい深掘りっすねそれ。最初に言ったらもっと良かったっすねなんか」
「最初に言った感じにならないかな」
「結構引きありますよ多分それ」
「そうか」
「めっちゃいいめっちゃ気になる」
「口玉にしてたんだけどちょっと良くなかったな。ま最初に離脱してないことを祈るけど、まポッドキャスト途中離脱少ないメディアだからいいんじゃないかな」
「まそうですねはい」
「までえーとまあ結構、うんボリューム的にはそんなにあるわけじゃないんですけど」
「はい」
「特徴としてはですね、もうとにかく平均的なものにならないようなメッセージが書かれまくってるんですね」
「へー」
「で、えーとありきたりなAIっぽいものを作らないでくださいってのがまず要所要所に散らばってて」
「それはAIっぽいものを作らないでくださいっていうプロンプトになってるんですか」
「なってる」
「へー。それで理解してくれるのかなまあはい」
「いや、あでもね、そ、それ、あ、ん、なってたっけ。ちょっと今急に怪しくなったな」
「まあでも少なくともAnthropicの人も課題に思ってて、それをどうにかしてって強い思いを持って何回か書いてるってことっすもんね」
「あ、ちなみにね書いてました普通に」
「うん」
「AvoidgenericAIslope.IASTICSって書いてる」
「へー」
「読み方分かんない単語出てきてちょっとびっくりしちゃったんすけど」
「いやいや最後のやつちょっと分かんなかったですけどでもなんとなく分かった」
「IASTICって書いてる。まちょっとこれもリンク貼っておきますわ」
「はい」
「うん。でまず一番最初にまず平均的な生成AIっぽいものにしないようにしてくださいねってのが書いてあって。でトンマナの指定とかあるんだけど、トンマナはえーと以下の中、あーと、あくまで事例ですが、えー極端なものを選ぶようにしてくださいってのが書かれてるんすよ」
「えーとすいませんトンマナってトーンと？」
「トーンとマナー？」
「いえマジで？」
「何マナー？」
「マナーじゃないのかな。なんか」
「トーンとマナーって」
「資料とかの雰囲気みたいな話？」
「なんか資料の色合いとか雰囲気のことトンマナって言ったりしないっすか」
「へー」
「え言わないこれ？」
「いやちょっとしーらないですね僕は」
「聞いたことあるはい」
「め、めちゃくちゃなんか普通に使ってたからあんまり浸透してない言葉だっていう認識がなかったな」
「いや浸透してる言葉だと思いますよ」
「あーマジか」
「ただまあ分かんない人いるのは、いるのはそうだと思うんで」
「うん」
「そしてほんとにトーンアンドマナーなんだ」
「おい」
「そうでこれトーンは極端なものから選んでくださいと。で例えばミニマリズムとか巻島、ま、巻、巻島イミズムみたいな」
「うんうん」
「とか、えー洗練されたやつとかなんかナチュラルなやつとかなんかいろんなトーンの事例があって。ただこれはあくまで事例なんでこっから選べという意味ではありませんみたいなプロンプトあったりとか」
「うんうん」
「でまあ最終的にはその、えっと選んだトンマナを全体的に統一感あるような形で仕上げて、えーと作ってくださいねとか。あと何がこのUIを忘れられないものにするのかを、え考えさせるようなプロンプトみたいな部分とか」
「へー。ちゃんとしてるなー」
「おう」
「プロンプト」
「でもっと具体的な部分見ると、えータイポグラフィーは汎用フォントを避ける。カラーアンドテーマは一貫したテーマを貫き平均的なものにしない。アニメーションはインパクトのあるものにする。空間構成は予測不能なレイアウト、非対称構成、オーバーラップ、斜めの流れ、グリッドからの逸脱、たっぷりとした余白、統制された高密度レイアウトとかね」
「のりさん言ってたの結構」
「うん」
「抑えられてますね」
「結構抑えられている」
「そう」
「うん。まというので、えーとまあ結構サクッと見れる分量ではあったんですけど、もう全体にわたって、えとにかく平均的なものから逸脱しようとしてるようなあれになってると」
「うん」
「うん。やっぱりAIが生成するものって平均的なものになっちゃうから、まそこをコントロールするように、えーとま極端な方向に、えーとま伸ばすようにしてるっていうのがねこのClaudeのフロントエンドデザインスキルのところから読み取れるんで」
「うん」
「ちょっとぜひねAIっぽくないデザインで作りたいなっていう人はこれもちょっと参考にしてみるといいかもしんないっすね」
「もうもはやClaudeのUIデザインを使えばいい」
「間違いないけどね。まあでもね別にみんながみんな」
「使ってるから」
「みんながみんなClaude使ってるわけではないと思うんで」
「まあそうっすねはい」
「うん。他の人、他のツール使ってる場合とかは、あでも極端なデザインにしようとすると、えーいい感じになるのかみたいな」
「うん」
「で最後ねまとめの魔法の言葉ですよ。プロっぽい感じにしてっていう」
「大好きそれ」
「ああ」
「めっちゃいいなあ」
「これでね、あの一気にデザイン良くなると思いますよ」
「そっすね」
「うん」
「僕、僕あなたにつき何円払ってると思ってるんですかって」
「うん」
「プロンプトを投げつつ」
「パワハラプロンプト？」
「はい」
「いいね。なんかあるよねたまに。これできないとなんか解約しちゃうよみたいなのをほのめかすと。なんかパフォーマンス上がるみたいな。うん」
「いやありがとうございました。なんかプロンプト、なんかすげー人が書いたプロンプト面白いな。すげー人が書いたプロンプトをひたすら読み続けるポッドキャスト番組とか面白そうですね」
「ああ」
「狭すぎるかな」
「いやまあでもねそれこそ、あのー、ま今挙げたさあのなんだっけ。フロントエンドデザインのスキルだけ読み、な、読みましたけど、ほかにも多分何十個かあるんで」
「スキルズもありますし」
「うん」
「OSSでもあるじゃないですか」
「うんうんうん」
「そういう。この前やったSDDもそうですし」
「そうだね確かに」
「うん」
「うーん」
「なんか無限にネタあるだろうし」
「うん」
「でAIエージェントなんてみんな使うだろうし」
「うんうんうん」
「面白そう」
「確かに」
「誰かお願いしまーす」
「おおー投げてきたー」
「いや、やらなかったら我々でやっちゃうかもしれないっすね」
「まそうだね」
「天下、天下取っちゃうかもしんないっすけどね」
「あーまあちょっとねどのプロンプトにするか悩みどころだけどな」
「まあね」
「あー」
「エンジニアも関係ないプロンプトをね取り扱えるとねより伸びそうですね」
「あーまあ確かにね」
「うん」
「いやだからこのへんのデザインのとか、デザインとかはさ」
「ちょうどいい。あまあはい」
「エンジニアに関係あるけどさ、エンジニアが知識として持ってない部分だから」
「あそうっすね」
「意味ありますよね」
「はい」
「そういう」
「まあでもデザイナーもね多分面白いと思うし」
「うんうんうん」
「なるほどね。勉強になりました」
「はい。まあというのでぜひ皆さん今回の内容を生かして、ま自分でこう開発するときとかAIを使って開発するときとかに、このデザインの法則をぶちまけてプロっぽいデザインのサイトを作ってみてくださいというエピソードでございました」
「ありがとうございました」
「試します。僕はちょっと個人がサイトやってみます」
「いいっすね」
「はい。ぜひやってみてください」
「オーディエンス向けのために個人サイト作ってるんで。面白っと思ったやつを試すためにやってるんで」
「あーまあ実験台なんだ」
「そう。サンドボックスなんだ」
「いいな。サンドボックスいいな」
「僕はまずAIっぽいサイト作ります」
「あまずはね」
「はい」
「確かにね。それも大事かもしれない」
「うん」
「逆にじゃあありふれたAIっぽいサイトを作ってくださいって言ったら一撃でできるかもしんないっすね。確かに」
「うん」
「はい。じゃあ締めていきますか」
「はい」
「はい。この番組ではSNS、Xで皆さんからの感想や質問などを募集しております。ハッシュタグ、ひまじんプログラマーで、えーポストしていただけると我々がエゴサーチをして見つけて、えー何かしらの感情を抱くことがあるので、えー気をつけてください」
「気をつけてください。まあそうっすね、あの悪いこと言われるとほんとに泣いちゃうんでやめてください」
「あーそうですね」
「あまあ甘坂リースってそのほんとに愛のある」
「あーそうね」
「指摘とかはもうマジでウェルカムなんで」
「確かに。じゃんじゃんお願いします」
「はい。お願いします」
「お願いします。またえー皆様からの質問なども募集しておりますので、えー何か僕たちに聞きたいこととか、えー何か感想とかある方は番組の説明欄のところにあるグーグルフォームから応募いただけると非常に助かります」
「助かります」
「はい。助かります。さらにオンラインSlackコミュニティ、ひまプロ談話室という、えーコミュニティも運営しております。こちらも。えーLTをやったりとか、エンジニアがこう切磋琢磨し合ったりとかいろいろなことをやってる場だったりするので、興味あるよという方は、ま、えー番組の概要欄のところから、これもグーグルフォームですね、で応募いただけると、まあ一週間以内をめどに発見して招待をお送りしてますので、えーお気軽にご応募ください」
「収録直前のLT会楽しかったです」
「あーですね。今日実はね収録前にLTをやって」
「うん」
「非常にいい雰囲気の会でした」
「楽しかった。勉強になった普通に」
「うん」
「順平が英語でLTするっていうナイスチャレンジしましたね」
「やってましたね」
「いやーギリギリでした」
「えーまた、えーこの番組は各種ポッドキャストプラットフォームで配信しておりますので、えーためになったよ、参考になったよという方はぜひともいいねしてくれたりするとうれしいなと思ってます」
「いいね」
「いいね」
「待ってまーす」
「はい。それでは皆さんまた次回」
「ばいばい」
「ばいばーい」
「あなたが落としたのはこの金のサーバーですか。それとも銀のサーバーですか」
「いいえ、私が落としたのは普通のウェブサーバーです。すみません」
「あなたは正直者ですね。全部のサーバーを上げましょう」
「正直者のエンジニアは不可分散ができるようになりました。それを見ていた欲張りな男がサーバーを落としました」
「あなたが落としたのはこの金のサーバーですか。へい。その金のサーバーを落としました。どうやらあなたは嘘つきのようです」
「そう言って女神は帰っていきました。欲張りな男は復旧できないサーバーの前でわんわん泣いていました」
「サーバーを落としたくないあなたへ、ひまじんプログラマーの週末エンジニアリングレッスン」
