スマホで見ても、文字も写真もきれいなページにしよう
今日手元に残るもの
スマホの幅で文字が切れず、画像がはみ出さず、ボタンを親指で押せるようにしたスマホ対応版と、直す前と直したあとを並べた画面写真
時間の目安
最初の完成まで 20〜30分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
スマホの幅で文字が切れず、画像がはみ出さず、ボタンを親指で押せるようにしたスマホ対応版と、直す前と直したあとを並べた画面写真
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.76のホームページ初版をそのまま開き、直す前の画面写真を先に撮って残しておきます。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
今のページ、スマホの細い幅で見ると崩れる。文字が途中で切れる所、画像が横にはみ出す所、ボタンが小さくて押しにくい所、上下がくっつきすぎてる所を順番に直して。直す前の画面と直したあとの画面を並べて見せて。パソコンの広い画面のほうは崩さないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
スマホの幅で文字が切れず、画像がはみ出さず、ボタンを親指で押せるようにしたスマホ対応版と、直す前と直したあとを並べた画面写真
まず自分で試す
ブラウザの幅をスマホくらいまで細くして、上から下まで指でスクロールする
一番押してほしいボタンを親指の腹で押し、隣のリンクに当たらないか確かめる
直す前と直したあとの画面写真を並べ、どこが変わったか自分で指さす
パソコンの広い幅へ戻し、前の見た目が崩れていないか見る
追加のプロンプト
当てはまるものだけ、上から順に送ります。
直したあとの画面が出てきたら
横にスクロールできちゃう場所がまだ残ってない?あったらどこか教えて、そこだけ直して。
送った後に試す
指で左右にスワイプして、横にずれないか確かめる
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
文字が詰まって読めない
「行と行の間を広げて、1行が長くなりすぎないようにして」
ボタンが小さい
「押すボタンだけ指1本分の大きさにして、上下に余白を足して」
写真で本文が押し出される
「画像は画面の幅に収めて、縦に長くなりすぎないよう上下を切って」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
スマホくらいの幅で上から下まで、文字切れも横ずれもなく読めた
一番押してほしいボタンを親指で押せた
直す前と直したあとの画面写真を並べ、違いを自分で言えた
広い画面へ戻しても、前の見た目が崩れていなかった
Workで作った物を保存するプロンプト
このスマホ対応版と、直す前後の画面写真を、完成フォルダの「会社サイト」へ保存して。直した場所の一覧と、実機のスマホではまだ見ていないことも残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず自分のスマホでよく見る同業のページを1つ開き、そこと同じくらいの文字の大きさになっているか並べて比べます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
読んだ人が次に進める場所を作ろう
続けるための追加プロンプト
追加のプロンプト
このページ、最後まで読んだ人は次に何を押せばいい?今のページに足りない進み先を挙げて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
スマホで読めるようになったページの一番下を、連絡へ進む場所として使います。
できるようになること
読み終わった人が、電話・地図・問い合わせのどこへ進めばいいか分かるようになります。
この内容を詳しく学ぶ教材
Lv.78「電話・地図・問い合わせへ、迷わず進めるようにしよう」