スマホで読みやすいおたよりメールと、文字だけで読める版をそろえよう
今日手元に残るもの
全4号のHTML版・プレーンテキスト版計8ファイル、画像・代替テキスト、モバイル見本、リンク・件名・差出人・配信停止の表示QA表
時間の目安
8ファイルのモバイル表示確認まで 60〜90分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
全4号のHTML版・プレーンテキスト版計8ファイル、画像・代替テキスト、モバイル見本、リンク・件名・差出人・配信停止の表示QA表
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
NWS-06の全4号、NWS-03の紹介画像、NWS-02のHTML構成と文体ガイドを使います。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ChatGPTの無料版で始めやすい課題です。上限に達したら、時間を置いて続けます。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
4号を実際のメールみたいに見たい。各号をスマホ向けHTMLと文字だけ版の二つにして、リンク、画像を見られない時の説明、差出人、件名、配信停止まで入れて。8ファイルを開いて比べたいけど、まだメールサービスにはつながないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
全4号のHTML版・プレーンテキスト版計8ファイル、画像・代替テキスト、モバイル見本、リンク・件名・差出人・配信停止の表示QA表
まず自分で試す
HTML版4通とプレーンテキスト版4通をすべて開く
HTMLをスマホ相当の幅・画像非表示・200%拡大で読む
リンク確認表から各号一件ずつ移動先を開く
差出人・件名・配信停止を二形式で照合する
HTMLの一段落を直し、文字版にも同じ変更を反映する
追加のプロンプト
当てはまるものだけ、上から順に送ります。
第1号の二形式ができたら
HTMLを狭い画面、画像なし、文字拡大で開き、文字版と意味が同じか比べる。リンクの表示文だけで行先が分かり、解除案内が隠れない形を残り三号へ使って。
送った後に試す
第1号を360px相当と200%拡大で最後まで読む
全8ファイルができたら
四号の全リンクを一回ずつ確認し、画像と代替テキスト、差出人、件名、配信停止を横断表へ。外部送信、追跡、登録解除の実接続はせず、未接続表示を残して。
送った後に試す
四号から一リンクずつ開き、戻れるか確認する
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
画像が大きすぎる
「画面幅を越えず、画像なしでも次の段落へ進める配置にして」
文字版が読みにくい
「見出し、短い区切り線、リンク先の説明で構造を残して」
06
やりがちなミス
見つけた数：0 / 6
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
全4号のHTML版・文字版、計8ファイルを開けた
スマホ・画像なし・200%拡大でも本文と解除案内を読めた
全リンク、画像説明、差出人、件名、停止表示をQA表から照合できた
二形式の修正がそろい、外部送信・追跡・解除処理は未接続だった
Workで作った物を保存するプロンプト
全4号のHTML・文字版、画像と代替テキスト、モバイル見本、リンク・表示QAを「07_全4号メール2形式」へ保存して。二形式で直せた所と、外部未接続・未送信も残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
画像を使わない配信なら、第1号だけを文字版中心へ置き換え、HTMLの解除導線は残して表示を比較します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
登録から歓迎・解除までの流れを動かそう
続けるための追加プロンプト
追加のプロンプト
登録した人が迷わないよう、登録ページ、同意、確認メール、歓迎メール、頻度の説明、設定変更、配信停止と削除依頼まで一続きで動くモックにして。まだ本物のアドレスや配信サービスは使わないで。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
おたよりの約束、頻度、二形式の見本、差出人、停止表示、個人情報の最小範囲を使います。
できるようになること
登録・同意・確認・歓迎・設定変更・解除・削除依頼を試せる外部未接続モックができます。
この内容を詳しく学ぶ教材
NWS-08「登録した人へすぐ届く、歓迎メールと案内ページを作ろう」