スマホで気持ちよく読める、画像つきの12記事に整えよう
今日手元に残るもの
アイキャッチ・図解の計24画像、代替テキスト、公開候補HTML 12本、タイトル・要約・URLを持つメタデータ表、内部・外部リンク確認表
時間の目安
12記事の実表示とリンク検品まで 75〜110分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
アイキャッチ・図解の計24画像、代替テキスト、公開候補HTML 12本、タイトル・要約・URLを持つメタデータ表、内部・外部リンク確認表
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
BLG-06の全12記事、BLG-05の画像案、BLG-02の使用可能素材、BLG-03の内部リンクを使います。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方画像・音声・動画を何度も作り直すため、有料版がおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
12記事を、スマホでも気持ちよく読める実物にしたい。記事ごとにアイキャッチ1枚と内容が分かる図1枚、全部で24枚を作って、画像を見られない時の説明も付けて。12本をHTMLで開けるようにし、タイトル、短い要約、URL、記事同士のリンクもそろえて。まだ公開はしないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
アイキャッチ・図解の計24画像、代替テキスト、公開候補HTML 12本、タイトル・要約・URLを持つメタデータ表、内部・外部リンク確認表
まず自分で試す
HTML 12本をPC幅とスマホ相当の幅で開く
画像24点を原寸表示し、文字・人物・道具の崩れを見る
画像を非表示にして代替テキストで記事の流れを読む
内部リンクと出典リンクを確認表から一件ずつたどる
記事一件のタイトルと要約を変え、一覧表示へ反映する
追加のプロンプト
当てはまるものだけ、上から順に送ります。
最初の二記事と四画像ができたら
PC幅とスマホ幅で開き、見出し順、文字の大きさ、横はみ出し、画像の文字と人物・道具の崩れを確認する。ここで決めた記事ひな形を残りへ使って。
送った後に試す
二記事を360px相当で最後までスクロールする
12記事と24画像がそろったら
全画像を原寸で開き、代替テキストだけでも役割が分かるか読む。全URLと内部・外部リンクを一回ずつ開き、未取得URLや公開先は接続しないで。
送った後に試す
記事マップどおり中心記事から十一記事へ移動する
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
画像が飾りだけ
「図解は本文の三段階か比較二点を、画像だけ見ても分かるようにして」
スマホで長く見える
「一段落を短くし、二〜三画面ごとに内容を示す小見出しを置いて」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
12本のHTMLと24点の画像を実際に開けた
PC・スマホで見出し、本文、図、リンクを最後まで操作できた
画像なしでも代替テキストから各画像の目的を理解できた
メタデータ表とリンク確認表から実ファイル・移動先へ戻れた
Workで作った物を保存するプロンプト
HTML 12本、画像24点、代替テキスト、メタデータ表、リンク確認表を「07_画像付き12記事」へ保存して。スマホで直せた所、権利確認待ち画像、未公開状態も記録して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
既存サイトへ移すなら、中心記事一つだけを検証環境へ置き換え、現行デザインとの崩れを確認します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
古くならない更新と媒体展開を準備しよう
続けるための追加プロンプト
追加のプロンプト
制度、価格、統計、製品情報が古くなる前に直せるカレンダーにして。各記事からSNS用3本ずつとニュースレター3本も作るけど、出典と確認日を引き継ぎ、まだ投稿も送信もしないで。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
12記事、出典・確認日、更新優先度、画像、読者の質問を運用材料にします。
できるようになること
更新カレンダー、情報源監視、履歴、SNS投稿三十六本、ニュースレター三本ができます。
この内容を詳しく学ぶ教材
BLG-08「記事が古くならず発信も続く、更新カレンダーを作ろう」