写真と3色で「この会社らしい」雰囲気を作ろう
今日手元に残るもの
メイン画像1枚、サービス用の画像3枚、メインの色・ボタンの色・背景の色と文字の雰囲気を1枚にまとめた「見た目ルール」
時間の目安
最初の完成まで 25〜35分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
メイン画像1枚、サービス用の画像3枚、メインの色・ボタンの色・背景の色と文字の雰囲気を1枚にまとめた「見た目ルール」
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.74の「本文セクション.md」で決めた3つのサービスと、Lv.72の設計カードの「使っていい写真」欄を見ながら選びます。Lv.20で保存した「発信スターターキット」が手元にあれば、そこで決めた色と文字の雰囲気も並べて見ます(無ければ教材の素材だけで進めます)。
必要なファイルは、下からダウンロードできます。
この課題で使うファイル
ひだまり美容室の架空データから、必要なものだけ用意しました。
材料の入れ方前の完成物を使う ／ TXTはコピー ／ 資料はこのページから取得
- 1上に書かれた方法で、前の完成物を用意する
- 2TXTはこのページで中身をコピーし、入力欄へ貼る
- 3上の一覧から指定された資料だけを取得し、入力欄へ添付する
- 4材料がそろったら、下のプロンプトを送る
Chatの入力欄を使います。
ドラッグできない時は、入力欄のクリップまたはファイル選択を使います。スマホは「ファイル」から共有できます。
AIが資料を読めない時は、必要部分を貼るか添付し直します。読めない内容を推測させません。
ChatGPTの設定と詳しい使い方ChatGPTの無料版で始めやすい課題です。上限に達したら、時間を置いて続けます。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。前の完成物と今回の材料をそろえてから、下の文を送ります。
この画像の希望メモと会社案内で、サイトの一番上に置く画像を1枚と、サービス3つ用の画像を3枚つくって。色は落ち着いた感じで、派手にしないで。メインの色と、押すボタンの色と、背景の色の3つに決めて、文字の雰囲気も一緒に1枚のルールにして。人が写るなら実在に見えない描き方で、隅に小さく練習用と分かる印を入れて。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
メイン画像1枚、サービス用の画像3枚、メインの色・ボタンの色・背景の色と文字の雰囲気を1枚にまとめた「見た目ルール」
まず自分で試す
4枚を1枚ずつ大きく開き、手や建物や道具に不自然な所がないか近くで見る
メインの色とボタンの色を並べて、押す場所がすぐ見つかるか確かめる
見た目ルールの3色を、会社案内のPDFの雰囲気と見比べる
追加のプロンプト
当てはまるものだけ、上から順に送ります。
4枚と色のルールが出てきたら
4枚を横に並べて見せて。同じ会社の写真に見えないやつがあったら、それだけ作り直して。
送った後に試す
4枚を並べ、明るさと色味がそろっているか見る
画像の中に文字が入ってしまったら
画像の中の日本語がにじんでる。文字は入れずに作り直して、言葉はあとでページ側に載せるから。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
他社の写真と見分けがつかない
「よそでも使えそうな写真になってる。うちの仕事の道具か場所が写るようにして」
色が多くて散らかる
「使う色は3つだけ。強調したい所だけボタンの色を使って、あとは背景と文字で」
写真が固い
「かしこまりすぎ。お客さんが実際に来た時の明るさに近づけて」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
4枚を1枚ずつ開き、崩れや不自然な所がないことを自分の目で確かめた
メインの色、ボタンの色、背景の色の3つが1枚のルールに書かれていた
4枚を並べて、同じ会社の雰囲気に見えることを確かめた
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
Workで作った物を保存するプロンプト
このメイン画像1枚とサービス用3枚、3色と文字の雰囲気を、完成フォルダの「会社サイト」へ「見た目ルール」としてまとめて保存して。どれがAIで作った画像かの一覧も付けて。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず会社の封筒やチラシで使っている色を1色だけこのルールの色に合わせ、並べて違和感がないか見ます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
決めた言葉と画像を、見本のページへ全部入れ替えよう
続けるための追加プロンプト
追加のプロンプト
この3色と画像で、公開側の見本の色と写真を先に入れ替えてみて。文章はまだ見本のままでいいから、色と画像だけ変わった状態を見せて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今決めた3色と4枚の画像を、見本ページの飾りと写真の差し替え先にします。
できるようになること
見本のままだった画面が、自分の会社の画面に変わります。
この内容を詳しく学ぶ教材
Lv.76「見本のホームページを、自分の会社のホームページに変えてみよう」