# 創理公式サイトはこちら はい、どうもこんにちは。むなかたです。 このチャンネルでは今流行りのAIを使って、開発未経験からでもプログラミングを学ぼうというコンセプトで、 開発の基礎知識や最新のAIツールについてお話ししていきます。 今回はですね、AIプログラミングでウェブサイトを作った時にですね、 どうしてもイマイチだなという時に、おすすめの変更方法、 その後どうやってAIにお願いしていくかというところのコツを紹介していこうかなと思います。 まずですね、AIプログラミングっていうのを使うと、 AIにお願いをするだけで簡単にウェブサイト、好きなウェブサイトを作ることができるっていうのが強みなんですけれども、 そこで出来上がる見た目の部分が、どうしてもAIがある程度今まで学習してきたものの平均値みたいなものを取るので、 結構ですね、似たり寄ったりな見た目になるということが非常に多いです。 僕のメンバー限定のですね、ライブのところで、 AI、どんなウェブサイトが作れるかちょっとAIごとに試してみましょうみたいな会を先日やったんですけれども、 その時にも、それぞれAIによっても作られ方の特徴とかですね、 やっぱりその個人的な見解で言うとですね、 Gemini CLIはちょっと見た目がシンプルすぎる。 CodexもGeminiほどじゃないけれども、やっぱりちょっとデザインが一発目で出すとイマイチで、 クロードコードに関しては、ある程度やっぱりですね、 サイト内のグループ分けとか、ある程度文字の大きさとか、 下線を使ったりして、意味のある塊みたいなのをちゃんと分けてくれてるような印象ではあります。 他の2つ、Codex、Gemini、CLIに関してはグループ分けするんですけど、 大体その枠線で囲ったところで一塊みたいな感じの、 ちょっとシンプルすぎるとか単純すぎるグループ分けが多いかなという、 そういう特徴も実はあったりするんですけれども、 あくまでその一発出しの段階、最初に出した時点では、 全部それぞれですね、ちょっと微妙だなと。 あとあれですね、クロードコードの場合は、やたら顔文字、顔文字は絵文字ですね。 ロボットのマークとかですね、ロケットのマークとか、絵文字を使うんですけど、 それもサイトとしては非常に微妙だったりするので、 その辺を全部共通で、これ直すと結構オリジナリティ出るなっていうのが、 そのライブの時に分かったので、紹介していくんですけれども、 まず1つ目が、アイコンを使用するということですね。 ということが結構その時やっていて非常に有効でした。 クロードコードが絵文字を使ったのがすごいダサいのもありますし、 あとは他の2つですね、のAIが作ったサイトが非常にシンプルで、 カテゴリーが分かりづらいというか、そういうところがあったんですけれども、 アイコンっていうのを置くだけで、そもそもその塊でですね、 どんな内容を示しているかっていうのがパッと見で目に入るっていうのがあるので、 非常に分かりやすくなりますし、 絵文字のようなダサさがないというところがあるので、 アイコンを使うんですけれども、指示内容としては、 フォントオーサムと書いて、フォントオーサムという仕組みが結構有名で、 エンジニア内だったんですね。 なので、このサイトの表示をフォントオーサムのアイコンを使って、 もうちょっと見やすくしてくださいというようなことを書くと、 かなりそれだけで1つ、修正というか、見やすくなるかなというのが1個あります。 まずこれが分かりやすくできる1つ目ですね。 2つ目に関しては、フォントを入れるっていうのも1つ、 オリジナリティというか、雰囲気を出しやすくなるのに効果があるかなと思います。 さっきのフォントオーサムでフォントっぽいんですけど、 さっきのはアイコンを入れる仕組みで、 もう1個がGoogleフォントっていうものを使うと、 インターネット上からフォントデータをダウンロードしてきて、 どの端末でもフォントを適用して表示できるというような機能があるので、 非常におすすめです。 Googleフォントっていうものでも結構いろいろあるんですけど、 多分Googleフォントおすすめとかで調べると、 結構こういうの見やすいですよっていう紹介したサイトがいろいろあるので、 その辺を見ながら反映するのが良いのかなと思うんですけれども、 結構よく使われるのが、NOTSANSJPというのかな。 NOTSANSJPですね。 っていうのが多分非常に多くのサイトで使われているので、 これとか、僕がよく使うのはRoundedM+.みたいな名前のフォントですね。 っていうのがあったりして、これはすごい丸っこいかわいい感じのフォントなんですけれども、 そういったものを一つ選んで、 Googleフォントを使って、例えばNOTSANSJPのフォントをこのサイトに適用してくださいというふうに指示をしてあげると、 そのサイトのフォントがそれにまるっと変わるというようなことがあるので、 これだけでも結構印象は変わるかなというところがあります。 なので、2つ目としてはフォントですね。 お適用するっていうのがお勧めではあるんですけれども、 やっぱりフォントをダウンロードしてくるときに、 意外と1文字1文字に対応したデザインっていうのを持ってくるので、 結構ファイルサイズが大きくなっちゃいがちではあるので、 あんまりたくさんのフォントを同じサイトに入れるというのはお勧めしないですというのがありますね。 なので、こちらは入れるとしても1サイト1つぐらいがいいかなというところがお勧めではありつつ、 でも1個入れるだけで結構サイトの印象っていうのが変わるので、 何か自分のお勧めというか一押しのものを調べて入れてみていただくといいのかなと思います。 3つ目としては画像サイトです。素材サイトですね。 それっぽい写真とかイラストを持ってきて入れるというだけでも、 これまた印象がかなり変わります。 ライブのときに試したのはPixabayっていうサイトですね。 Pixabayというサイトがあって、そちらだと結構無料で使えるというところがあるものになっていて、 ちょっと通常細かい利用規約などは確認してほしいんですけれども、 こちらは実写の画像が結構よくアップロードされているもので、 実写の写真を入れるとかなり印象もプロっぽくなるというところがあるので、 真面目なサイトとかに良いですし、また素材やCNPとかクリプト、 忍者、パートナーズのキャラクターが非常に可愛くいろんなイラスト化されているサイト、 こちらもいくらでも使えるものになっているので、 この辺を入れて、サイトがもしビジネス向けであれば実写のものを入れたりとか、 もっと砕けた感じの可愛いものにしたいよということであれば素材やCNPを使うみたいな、 そういったことを入れ込むことで、 これら3つやるだけで相当印象が変わるので、非常にお勧めではあります。 改めて言いますと、1つ目が絵文字ではなくてアイコンを入れるということ。 この時にフォントオーサムのアイコンを適用してくださいというようなことを言ってあげると、 割と一発できれいにやってくれるかなというところと、 2つ目に関してはフォントですね。 これはGoogleフォントというのが有名で無料で使えるので、 Googleフォントを使って〇〇というフォントを適用してくださいというように言ってあげる。 3つ目に関しては素材サイトは普通にネットで検索してきてダウンロードして、 実際の自分のサイトを作っているところにポイッとVSコード上とかに投げてあげて、 この画像を使って表示してねというふうに言ってあげると、 この3つだけでもかなり印象がガラッと変わるので、 AIプログラミング、AIが使った風を一旦払拭する第一歩としては非常にお勧めかなと思います。 これら3つは結構小手先のテクニックで、それ以外にもいろいろ細かいところはあるんですが、 ちょっと具体例を示しながらのほうが分かりやすかったりはするので、 一旦ここでは省略して、またまとまった情報を考えられたら紹介したいと思います。 ただこちらは僕のメンバーライブで近々紹介しようかなと思っているので、 メンバーさんの方はこういうふうに指示したらこういうふうになるよということは見せたいと思いますので、 よろしければ見てください。 そんな感じで今回はAIっぽさを防ぐサイトの作り方について紹介をさせていただきました。 ということで今回は以上です。 本日も聞き下さいましてありがとうございました。