# 8/31(月) 12:00〜 Cloudflare無料ウェビナー はい、どうもこんにちは。 目の方です。 このチャンネルでは今流行りのAIを使って、 開発目経験からでもプログラミングを学ぼうというコンセプトで、 開発の基礎知識や最新のAIツールについてお話ししていきます。 今回はですね、AIで何か作らせるという時に、 大体ツールを作るにしてもサイトを作るにしても、 見た目のところが大事になってくるかなというところで、 それこそリツトさんがUIに指摘が入って、 リリース遅らせたみたいな話も流れてきましたけれども、 そんなところで、最近いろんな方の作ったサイトとかサービスとかを見ている中で、 ここ重要だなと思ったところがあったので、 その辺の話をさせていただければと思います。 というのもですね、僕も昔AIを使わずに作っていたサイトとか画面で、 これダメだったなって思ったことがありまして、 それが何かというと、特にパソコンで見たときに、 画面の横幅いっぱいまで情報を表示することみたいなことはですね、 避けたほうがいいかなっていうのを感じています。 先日もですね、このサービスぜひ登録してくださいという形でですね、 リアルでお会いした方から、多分AIとかを使って作られたサービスがありまして、 そちらで登録してたんですけど、何か違和感があるなと思ったら、 画面いっぱいにいろんなパーツが表示されているということですね。 ちょっとこれ、音声だとなかなかお話ししづらいところなんですけれども、 見やすいサイトというか、まずサイトを作るときって、 サイトでもツールでもいいんですけど、 画面のサイズっていうのは、見る人の環境によって結構変わるんですね。 っていうのがあって、大きいですね、外部ディスプレイがあれば、 それだけそのページはですね、大きく横幅いっぱい使って表示されますし、 そうではない場合ですね、もっと小さい端末を使っている場合とか、 またスマホの場合みたいなのがあって、結構ですね、 相手側の状況によって見え方っていうのが変わるんですけど、 結構スマホとPCみたいな感じで、まず画面を切り替えるっていう対応することを、 大きく分けるとレスポンシブ対応とか言ったりするんですけれども、 結構ですね、PCで見れるかどうか、スマホで見えるかどうかみたいなところは、 結構気にされる方も多いのかなというところで、 もしですね、その辺が特に気にしてないよという方は、 レスポンシブ対応してくださいというのをAIに言ってあげると、 いい具合にですね、画面サイズに合わせて違和感のない表示にはしてくれるんですけれども、 また作ったときに、やっぱり違和感になるところっていうと、 まず違和感というか、レスポンシブ対応してくださいって言ってあげると、 画面が切れるとかですね、なんか変なところに余白が生まれるとか、 そういう最低限の明らかに目で見ておかしいところっていうのは結構解消されるんですけど、 もともとですね、画面いっぱいに表示していたものをいきなり余白を作ってくれるとか、 そういうことはあまりなくてですね、ちょっと難しいなこの表現が。 なので、とにかくですね、そのサービスで登録したときに入力欄とかがあるんですけれども、 それが画面の横幅いっぱいにですね、すごい横長に表示されると、 どこからどこまでがその部分なのかわからないっていうことが結構あるんですね。 それは管理画面とかだと特に顕著にはなるんですけれども、 ツール系とかアプリ系とかウェブサイトとかでもそうですけど、 コンテンツを表示する横幅の上限を設定してあげるっていうのがかなりおすすめです。 もちろん画面いっぱいに表示してあげれば、それだけ多くの情報が伝わるんですけれども、 やっぱりその人の視界というか、視認できる範囲っていうのは決まっていて、 左から右に画面いっぱいに表示されているものって、漏れが生まれたりするようなんですね。 っていうのもありますし、やっぱりちょっと見づらさみたいなのも生まれるっていうのがあるので、 おすすめとしては、特に画面サイズの大きいパソコンの画面で表示するときには、 左右に余白をある程度設けるっていうのがめっちゃおすすめです。 僕も全然その辺の違和感というかがなかった時代は、 もうたくさん画面いっぱい表示したらいいんでしょうと思って横幅いっぱいに表示してたんですけど、 ある日、めっちゃ使いづらいな、この画面みたいなことを感じて、 既存の他の人が作ったようなサイトとかサービスとかをよく見てみると、 左右に何も表示されていない余白があるってことに気づいて、 やっぱりその部分はかなり重要で、画面サイズが大きいと余白が大きくなって、 小さくなってくと余白がどんどんなくなってゼロになって、 さらに小さくなってくると、そもそも配置がパソコン用からスマホ用に切り替わるみたいな、 そういう画面のサイズに応じた見やすい状態が常にキープされるというところが非常にいいので、 今日しゃべりたかったのはこれだけで、余白を設けましょうというところですね。 もう一個、僕もデザインの専門家ではないので、あくまでいろいろ作ってきた中で気づいたところというか、 こういうウェブページだと見づらいよねっていうところで言うと、 余白というか、やはり何かウェブサイトツールを作ったときって、 グループ分けみたいなものが非常に大事になってきて、 だいたいですね、例えばポートフォリアのサイトを作ったときとか、 LPのサイトを作ったときって、上から順番に項目が一個ずつ出てくると思うんですね。 LPで言うと最初にヒーローセクションという、一番最初に伝えたいことがあって、 じゃあうちのところに入ると、これを買うとどんなメリットがあるかっていう話とか、 料金プランとか問い合わせとか、そういう感じでいわゆるセクションに分かれているんですけれども、 そのセクションという区切り、一つ一つが一つのグループとして見せなきゃいけないはずなんですよ。 っていうのがあるんで、どんなサイト、どんなページ、どんなアプリもそうなんですけど、 どうやってそのグループであることを示すかということがかなり大事になってきて、 そのときに余白の設け方っていうのも結構重要になってきます。 なのでグループとグループの間の余白が小さすぎると、 これどこで区切れられているんだろうっていうところにもなりますし、 その一つのグループの中でもタイトルと本文の間の隙間とかですね、 その辺の余白をどう設けているか。 初心者の方というか作ったばかりの方で言うと、結構キツキツに情報をたくさん埋めたがるんですけれども、 やっぱりその中の情報を詰め込みすぎない、分量を増やしすぎないというところもそうですし、 やはりその余白みたいなものを設けてあげて、 それによってここはどこのグループに属しているかということを示してあげるのが、 2のデザインっていうイメージがなんとなくあります。 そういうグループ化を示すために一番有効なのというか、 目で見てわかりやすいのは、惑星ですよね。 惑星を設けて、惑星でくくるっていうと、 誰がどう見てもこれはここのグループだよねっていうのが見えるんですけれども、 結構最近のAIはわかんないですけど、 AIで作らせたサイトって惑星をやたら多用するんですよね。 この惑星で囲まれたグループを、一応専門用語で言うとカードとか言われたりするんですけど、 カードを多用しすぎて、惑星の中に惑星の中に惑星の中に惑星があるみたいな感じで、 線が増えすぎて結構見づらくなるっていうところもあったりするので、 もちろん情報を並べるときとかには、いわゆる惑星で区切られたアイテムを並べる、 カードで並べるっていうのはかなり有効なんですけど、 そのカードを使いすぎるとですね、すごい線ばっかりになってすごく見づらくなるというか、 そういうところもあったりするので、そういう区切りを線ではなくて余白で示してあげるっていうことも大事だったりするんで、 どう言っても僕もそんなに専門家ではないんですが、やっぱり既存のサイトとかアプリとかを見て、 これはよくできてるなっていうところのサイトで言うと、その辺の余白の設計とか、 あとは試しに自分の手元で画面のサイズとかを変えてみて、そのページがどう切り替わるかっていうのを見てみるとですね、 すごい勉強になるんでおすすめですね。 ウェブサイトの話ですけど、大体はパソコンの大きい画面で言うとメインコンテンツと、 あとは左右に何かしらサイドバーと言われるメニューがあるみたいな感じで構成してることも多くて、 さっきの余白の代わりに横にサイドバーというものを並べて、 そこでメインコンテンツの横幅を抑制するということもありなんですけど、 そういうことをやってて、画面が小さくなってくるとサイドバーが非表示になってですね、 メインコンテンツがそのまま表示されるようになってみたいな形で、 余白を設けつつも余白も全く使えないサイズになってきたら、今度は情報を省略するとか、 左右に並べていたものをスマホの場合は上下にしますよみたいな感じの見せ方もあったりするんで、 やっぱりいいものを作るためにはそれなりに自分がどういう見せ方をしたらいいのかみたいなものを知っておかないとですね、 AIが作ったものがいいのか悪いのかもわからないですし、 こういう作りにしてって自分が最初から言えたらですね、もう一発で作れちゃうので、 先日話したですね、画面を構成する部品の名前に関してもそうなんですけれども、 どういうサイトが見やすいんだろうっていうのを言語化しておくということで、 自分の中でこのサイトが見やすいっていう何かパターンを作っておけばですね、 非常にAIに支持するときのやりとりがしやすくなるかなというところで、 本当は言うべきことはめっちゃいろいろあるんですけれども、 今日はちょっと余白に関してですね、ピックアップしてお話をさせていただいております。 なので特にウェブサイトの中でずっと横幅いっぱいに横長のメニューというか、 項目がたくさん並んでいるようなやつだと結構見づらいというか、 なんか目が泳ぐじゃないですけれども、これどこまで続いてんだろうみたいなものがあったりすると思うので、 ぜひですね、身の回りのサイトがどんな感じになっているのかっていうのを普段観察してみると、 今後ですね、AIにお願いするときにそれが生きてくるんじゃないかなというところのお話でございました。 最後に宣伝で、宣伝全然し忘れてたんですけど、来週の月曜日ですね、 月曜日にクラウドフレアというですね、作ったサイトとかを公開するためのサービスで、 無料枠がめっちゃ多いやつなんですけど、それに関するまた無料ウェビナーをやりたいと思います。 これもちょっとノリで決めてですね、まだ全然用意はできてないんですけれども、 やるぞと決めたら僕はちょっと頑張れるタイプなんで、 月曜日までにですね、しっかり資料を作り上げて、 基本はですね、ちょっと前回のアプリが少し難易度が高かったんで、 よりですね、ちょっと難易度を下げつつお話をしていければなと思っておりますので、 よろしければポチッとですね、参加ボタンを押していただけると嬉しいなと思っております。 日時が8月31日の月曜日のお昼12時からですね、 といういつものお昼セミナーでPTXっていうサイトからですね、 参加ができて、申し込んでおくと後でですね、 アーカイブが送られるよといういつものパターンのやつなので、 よろしければポチッとですね、参加を押していただけると嬉しいなと思っております。 はい、ということで今回の話は以上になります。 本日もお聞きくださいましてありがとうございました。