ChatGpt
ChatGPTは仕事を奪う存在か?相棒足り得るか?
世もすなるChatgpt。猫も杓子もChatGPT。
なんかすごいらしいぞ?というイメージだけでは流石にこれからのご時世、ということで、早速触れてみることに。
HTMLでサイト作ってみてよ
あまりにもぶん投げた依頼。それに対して「どんなのがいいですか?」などの質問は一切返ってこず、いきなり上げてきたのがこれ

サンプルと言うよりシンプル。シンプルと言うより、HTMLを学び始めた自分を彷彿とさせる。親近感すら感じる。
これは流石に指示が適当すぎたと、再度
画像とか入れて豪華にできない?
こりもせず適当を重ねるクライアント。良くも悪くもこちらにヒアリングもなにもせず健気に応えるChatGPT。

必要な画像リスト
以下の画像ファイルを images フォルダに配置して使用します。
hero.jpg– ヒーローセクション用の背景画像about.jpg– Aboutセクション用画像service1.jpg– サービス1用の画像service2.jpg– サービス2用の画像service3.jpg– サービス3用の画像
画像は、無料素材サイト(Unsplash、Pexelsなど)でダウンロードしてください。
たとえば、「Webデザイン」「サービス」「チーム」などのキーワードで検索すると適切な画像が見つかります。
先ほどとよりはだいぶ「らしく」なった。流石に画像は生成できないが、画像の入手先までおすすめしてくれている。(検索キーワードはお世辞にも適しているとは言えなかったが)
どこまで細かく答えてくれるか興味が出てきたので「上記の画像の適切なサイズは?」と質問を重ねてみる。以下解答
適切な画像サイズは、Webサイトのパフォーマンスを考慮しつつ、ビジュアルの美しさを保つために決定されます。以下に、それぞれの画像に適したサイズを提案します。
1. hero.jpg – ヒーローセクション用の背景画像
- 推奨サイズ: 1920×1080ピクセル(フルHD)
- 理由: ヒーローセクションはページ全体の横幅をカバーすることが一般的で、横長の画像が適しています。また、解像度が高すぎると読み込みが遅くなるため、適度な大きさが良いです。
- ファイル形式: JPEG(写真の場合)、WEBP(軽量化目的)。
2. about.jpg – Aboutセクション用画像
- 推奨サイズ: 800×600ピクセル(横長)
- 理由: コンテンツ横に表示されるため、そこまで大きな画像は必要ありません。横長のアスペクト比であれば、デザインにマッチしやすいです。
- ファイル形式: JPEG または PNG(背景透過が必要な場合)。
3. service1.jpg, service2.jpg, service3.jpg – サービス用画像
- 推奨サイズ: 600×400ピクセル(横長)
- 理由: カード型のサービスセクションで利用するため、コンパクトで横長の画像が適しています。このサイズはレスポンシブデザインにも柔軟に対応可能です。
- ファイル形式: JPEG または WEBP(軽量化目的)。
注意点: Web用画像の最適化
- 圧縮: サイトの読み込み速度を向上させるため、画像は圧縮ツール(例: TinyPNGやImageOptim)で最適化してください。
- 解像度: Retinaディスプレイ対応を考慮する場合は、2倍の解像度(例: 1920×1080ではなく3840×2160)を用意するのも有効です。ただし、ファイルサイズが大きくなりすぎないよう注意してください。
- 次世代フォーマット: Googleが推奨するWEBPフォーマットを使うと、さらに軽量化できます。
画像サイズ一覧まとめ
| 画像名 | 推奨サイズ | 用途 | 推奨ファイル形式 |
|---|---|---|---|
hero.jpg | 1920×1080 ピクセル | ヒーローセクション背景 | JPEG / WEBP |
about.jpg | 800×600 ピクセル | Aboutセクション画像 | JPEG / PNG |
service1.jpg | 600×400 ピクセル | サービス1画像 | JPEG / WEBP |
service2.jpg | 600×400 ピクセル | サービス2画像 | JPEG / WEBP |
service3.jpg | 600×400 ピクセル | サービス3画像 | JPEG / WEBP |
これらのサイズを守ることで、ページの読み込み速度が向上し、ユーザー体験を高めることができます!
…もう既に頼もしさよりちょっと怖いが勝ち始めている
何よりも怖いのは自信満々な点。「こうです!」と言われると「そうなんですか!」となってしまいそうになる。
正誤を判断できる知識や経験がないと使っているのはどっちだ?自分か?GPTか?となってしまうような危うさがある。古典SFみたいだ…
とはいえ上記に関してはそうそう的外れなことも言っていないようなので、言われるがままに画像を用意してはめ込んだものがこちら
なるほど、道具である。
というのも、「レスポンシブなWebサイトを製作します」と謳いながらレスポンシブ対応していないところがまさにAI。文脈や文責、一貫性といったものは存在しない。ここは「レスポンシブ対応もして」と言わなかった使う側(自分)が悪いのであり、使い方が下手であった、ということになる。
現状触った時点での感想は
- 詳細に条件を指定すればするほどクオリティは上がる
- 正誤の判断は己がしなければならない
- どこまでも作り手側に依存したツールである
といったところ。
しかし、何の指定もしていないのにWebサービスの宣伝サイトになったのは利用者の使用内容に一定以上の偏りがあるからだろうか。
今回生成されたアピールの文言はGPTが収集した膨大なデータの中で一定以上の割合を占めたものから生成されたであろうことから、いわゆる皆が選択する、しやすい表現であり、悪く言えば「ありきたりな表現」、となる。
それが安心感につながるか、逆に目を引かない一因になるか。
AI生成文が今後世に広まるにつれ、「無難なありきたりな文言」が与えるイメージは「AIくさい」になっていくのではないか。こういった点を次回はマーケティングの観点から考察していきたいと思う。