APP CREATION MANUAL
ChatGPTを使った
アプリ制作マニュアル
アプリワン設定編
画像パーツとコンテンツを管理画面へ登録する実務ガイド
ABOUT THIS MANUAL
このマニュアルの目的
本書は、基本編で作成したトップ画面の完成イメージと画像パーツを、アプリワンの作成管理画面へ登録するための手順書です。ログインから初期画面、メニュー、画像、リンク、販促機能、プッシュ通知までを順番に設定します。
管理画面は契約内容や更新により、項目名や配置が変わる場合があります。実際の管理画面に表示される名称と案内を優先してください。
最初に動画で全体を確認
画面操作の流れを動画とあわせて確認できます。
SETUP FLOW
設定の全体順序
対象アプリを選ぶ
編集するアプリ名が正しい基本情報とデザイン
ロゴ・色・トップ画像を確認メニュー・画像・リンク
各ボタンから正しく移動期間・対象者を設定
内容と日時を確認プレビュー・実機確認
誤字・画像・リンクを確認ログインと事前準備
設定作業を始める前に、使用する画像と原稿を一つのフォルダへまとめます。トップ画面の完成イメージを見本として開いておくと、メニューの順番や色を間違えにくくなります。
ログイン手順
- 案内されたアプリワン管理画面のURLを開きます。
- 発行済みのログインIDとパスワードを入力します。
- 複数のアプリが表示される場合は、今回編集するアプリを選びます。
- アプリ名、契約者名、現在の公開状態を確認してから編集を開始します。
ログイン情報は担当者ごとに適切に管理し、メールやチャットへそのまま貼り付けないでください。共有端末では作業後にログアウトします。
用意するファイル
| 種類 | 内容 | ファイル名例 |
|---|---|---|
| ロゴ | 背景透明のPNG | shop_logo.png |
| トップ画像 | 初期画面上部の写真やキービジュアル | top_main.jpg |
| メニュー画像 | 文字を含めない個別アイコン | menu_01_reserve.png |
| バナー | お知らせやキャンペーンへの誘導画像 | banner_campaign_01.jpg |
| 原稿 | 店舗情報、説明、注意事項、リンク先URL | app_contents_final.docx |
作業前チェック
- 編集するアプリが正しい
- 画像の使用許可がある
- URLを実際に開いて確認した
- 価格、期間、営業時間などの情報が確定している
初期画面の設定
初期画面はアプリを開いたときの入口です。基本編で作成したトップ画面画像を完成見本として、基本情報、色、画像、メニューの順に設定します。
設定手順
- 管理画面でアプリの基本設定またはデザイン設定を開きます。
- アプリ名、店舗名、説明などの基本情報を入力します。
- ロゴ、トップ画像、背景画像をそれぞれ指定された欄へ登録します。
- メインカラーと文字色を設定し、文字が背景に埋もれないか確認します。
- 保存または反映を実行し、プレビューを更新します。
登録の基準
| 項目 | 設定の考え方 | 確認ポイント |
|---|---|---|
| アプリ名 | 正式名称を短く表示する | 略称や表記ゆれがない |
| ロゴ | 背景透明PNGを使用する | 小さくても判別できる |
| トップ画像 | 完成イメージと同じ写真を使う | 顔や文字が切れていない |
| 色 | ブランドの主色を一つ決める | 文字との明暗差が十分にある |
| 背景 | メニューの読みやすさを優先する | 模様や写真が強すぎない |
トップ画面全体を一枚の画像として登録するのではなく、管理画面の項目に合わせてロゴ、背景、メニューアイコン、バナーを個別に登録します。
初期画面チェック
- 完成見本と同じメニュー順になっている
- ロゴとトップ画像が鮮明である
- 文字が背景上で読みやすい
- スマートフォン縦画面で上下左右が切れていない
メニューの登録
メニューは利用者を各コンテンツへ案内するボタンです。まずメニュー名と表示順を決め、次にアイコンと移動先を登録します。トップ画面の完成見本と同じ順番で作業してください。
メニューを一つ登録する手順
- メニュー設定を開き、新規追加または編集する項目を選びます。
- メニュー名を短く入力します。押した後の内容が分かる名称にします。
- STEP 2で抽出した該当アイコン画像を登録します。
- 移動先として、アプリ内コンテンツまたは外部リンクを指定します。
- 公開状態と表示順を確認して保存します。
- プレビューでボタンを押し、指定した移動先が開くか確認します。
表示順の例
| 優先 | メニュー例 | 配置理由 |
|---|---|---|
| 高 | 予約、購入、会員証 | 利用目的に直結し、使用頻度が高い |
| 中 | お知らせ、クーポン、ポイント | 再来店や継続利用につながる |
| 低 | 店舗情報、会社概要、規約 | 必要だが毎回は利用しない |
メニュー名の付け方
- できるだけ8文字以内にする
- 同じ意味の名称を混在させない
- 「予約する」「地図を見る」のように動作が分かる表現を使う
- 長い説明はメニュー名に入れず、移動先の本文へ記載する
確認
- 必要なメニューがすべてある
- 同じアイコンを重複使用していない
- 表示順が完成見本と一致する
- 非公開にすべき作成途中の項目が表示されていない
画像の設定
画像は、指定された登録欄ごとに適したファイルを使います。アップロードできない場合は、ファイル形式、容量、縦横比、ファイル名を順に確認します。
画像別の使い分け
| 画像 | 推奨形式 | 準備のポイント |
|---|---|---|
| ロゴ | PNG | 背景透明、周囲に適度な余白を付ける |
| メニューアイコン | PNG | 背景透明、文字なし、全アイコンの線や色を統一する |
| 写真 | JPEGまたはPNG | 明るさとトリミングを確認する |
| バナー | JPEGまたはPNG | 小さな文字を詰め込みすぎない |
| 背景 | JPEGまたはPNG | 文字やボタンの読みやすさを優先する |
登録手順
- 画像を登録する項目を開き、アップロードまたは画像選択を押します。
- 用途に合うファイルを選び、必要に応じて表示範囲を調整します。
- 保存後にプレビューを開き、画像の切れ、ぼやけ、余白を確認します。
- 問題がある場合は元画像を修正し、同じ項目へ再登録します。
画像がうまく表示されない場合
| 症状 | 確認すること |
|---|---|
| アップロードできない | 管理画面で許可されている形式と容量を確認する |
| 上下左右が切れる | 指定欄の比率に合わせて余白を含めて作り直す |
| 背景が白く見える | 透明背景PNGとして書き出されているか確認する |
| ぼやける | 小さい画像を引き伸ばしていないか確認する |
| 更新されない | 保存後にプレビューを再読み込みし、実機でも確認する |
リンクとコンテンツの設定
各メニューには、アプリ内に作成したページまたは外部サイトのURLを設定します。リンク先を登録しただけで終わらず、スマートフォンで実際に開けることまで確認します。
リンク設定の手順
- リンクを設定するメニューまたはボタンを開きます。
- 移動先の種類として、アプリ内ページまたは外部URLを選びます。
- 外部URLの場合はhttpsから始まる完全なURLを貼り付けます。
- 保存し、プレビューとスマートフォンの両方でリンクを開きます。
- 予約、決済、問い合わせなどは入力画面の直前まで動作を確認します。
主なコンテンツ例
| メニュー | 登録内容 | 確認事項 |
|---|---|---|
| 店舗情報 | 紹介文、住所、電話、営業時間、地図 | 最新情報か |
| 予約 | 予約ページURL、利用方法、注意事項 | スマホで予約画面が開くか |
| 商品・メニュー | 名称、説明、価格、写真 | 税込・税別表記が統一されているか |
| 問い合わせ | フォームURL、電話、受付時間 | 送信先が正しいか |
| SNS | 公式アカウントのURL | 個人アカウントでないか |
リンク確認チェック
- URLの前後に不要な空白がない
- ログインが必要なページは案内がある
- 別店舗や旧ページへ移動しない
- 電話番号や地図の情報が正しい
- リンク切れや404エラーがない
お知らせ・クーポン・ポイントの設定
販促機能は、内容だけでなく公開期間と利用条件を明確に設定します。登録後は利用者から見える表示と、運営側での扱い方の両方を確認します。
お知らせ
- タイトル、本文、掲載画像を入力します。
- 公開日時と終了日時を設定します。
- 必要に応じて詳細ページや申込先のリンクを登録します。
- 公開前に日付、曜日、価格、連絡先を読み直します。
クーポン
- 特典内容を一文で明確にする
- 対象商品、最低利用金額、併用可否などの条件を書く
- 有効期間と利用回数を設定する
- 利用済みにする操作や店舗での確認方法を担当者間で共有する
ポイント
- 付与条件と付与数を決める
- 利用開始条件と交換特典を決める
- 有効期限や失効条件を確認する
- 誤操作時の訂正方法と担当者を決める
公開前の共通チェック
| 確認項目 | お知らせ | クーポン | ポイント |
|---|---|---|---|
| 期間 | 公開期間 | 利用期間 | 有効期限 |
| 条件 | 対象者 | 利用条件 | 付与・交換条件 |
| 店舗対応 | 問い合わせ先 | 提示時の対応 | 付与・訂正方法 |
| 実機確認 | 本文とリンク | 表示と利用操作 | 残高と履歴 |
プッシュ通知の設定
プッシュ通知は利用者の端末へ直接届くため、送信対象、日時、文章、リンク先を確定してから予約または送信します。テスト送信が利用できる場合は、本番前に必ず確認します。
送信手順
- プッシュ通知の作成画面を開きます。
- 通知タイトルと本文を入力します。最初の一文で用件が分かるようにします。
- 対象者を選択します。全員送信か絞り込みかを確認します。
- 通知を押した後の移動先を設定します。
- 即時送信または予約日時を選択します。
- テスト送信で表示、改行、リンク先を確認します。
- 対象者と日時をもう一度確認して、本番送信または予約を確定します。
通知文の基本形
| 項目 | 記入例 |
|---|---|
| タイトル | 週末限定クーポンを配信しました |
| 本文 | 9月15日まで使える10%OFFクーポンです。アプリのクーポン画面からご確認ください。 |
| 移動先 | 対象クーポンの詳細ページ |
| 送信時刻 | 対象者が確認しやすく、店舗対応が可能な時間 |
全員への通知は送信後に取り消せない場合があります。対象者、日時、誤字、リンク先を二人で確認する運用を推奨します。
送信前チェック
- タイトルだけで内容が分かる
- 本文が長すぎない
- 終了済み情報ではない
- リンク先が公開されている
- 対象者と送信日時が正しい
保存と公開前の最終確認
設定が終わったら、管理画面のプレビューだけでなく、実際のスマートフォンでも確認します。一つの修正ごとに保存し、どこを変更したかを記録すると更新作業が安定します。
確認する順番
- トップ画面のロゴ、画像、色、メニュー順を確認します。
- すべてのメニューボタンを上から順に押します。
- 画像の切れ、文字の読みやすさ、スクロールを確認します。
- 外部リンク、電話、地図、予約、問い合わせを確認します。
- お知らせ、クーポン、ポイントの期間と条件を確認します。
- テスト端末でプッシュ通知の表示と移動先を確認します。
- 問題がなければ保存し、公開担当者へ確認を依頼します。
最終チェックリスト
| 区分 | チェック項目 |
|---|---|
| 基本情報 | アプリ名、店舗名、ロゴ、説明が正しい |
| 表示 | 画像切れ、文字化け、重なり、過度な余白がない |
| 操作 | メニュー、戻る操作、スクロールが正常 |
| リンク | 予約、電話、地図、SNS、問い合わせが正しい |
| 販促 | 期間、条件、価格、対象者が正しい |
| 通知 | 送信対象、送信日時、通知文、移動先が正しい |
| 未完成項目 | 仮文章、テスト画像、非公開情報が残っていない |
更新記録の例
| 日付 | 変更内容 | 担当 | 確認 |
|---|---|---|---|
| ____/____/____ | ______________________ | ______ | □ |
| ____/____/____ | ______________________ | ______ | □ |
| ____/____/____ | ______________________ | ______ | □ |
TROUBLESHOOTING
困ったときの確認
| 困りごと | 確認と対応 |
|---|---|
| 保存した内容が表示されない | 保存完了を確認し、プレビューとアプリを再読み込みする |
| 画像を登録できない | 許可された形式、容量、画像サイズ、ファイル名を確認する |
| 画像が切れる | 登録欄の比率に合わせ、重要部分へ余白を付けて作り直す |
| リンクが開かない | httpsを含む完全なURLか、公開中のページかを確認する |
| メニューが見つからない | 非公開設定、表示順、対象ユーザーの設定を確認する |
| 通知が届かない | 端末の通知許可、対象者、予約日時、送信状態を確認する |
| 操作名が本書と違う | 管理画面の最新表記と画面内ヘルプを優先する |
SUMMARY
設定編のまとめ
アプリワンの設定は、対象アプリを確認し、初期画面、メニュー、画像、リンク、販促機能、プッシュ通知の順に進めます。各項目を保存したら、その場でプレビューと実機を確認してください。公開前には、すべてのボタンとリンクを利用者と同じ操作で確認します。
日常運用の基本
- 更新前に、変更内容、公開日、担当者、確認者を決める
- 画像と原稿の元ファイルを、日付が分かる名前で保存する
- プッシュ通知は対象者と日時を二人で確認する
- 月に一度、外部リンクと終了済みキャンペーンを点検する
- 変更後は更新記録を残し、問い合わせ先を担当者間で共有する