初心者向け・厳選306語
Web・システム用語を、
わかる言葉に。
AIと一緒に、より良いものをつくるために。
AIを活用してシステムやWebサイトをつくるとき、用語を少し知っているだけで、「何を、どのようにしてほしいのか」を具体的に伝えやすくなります。指示が明確になることで、目的に合った提案や、より良い制作物にもつながります。
このサイトでは、初心者がまず知っておきたいWeb・システム用語を、むずかしい言い回しを使わずにまとめました。また、制作中にAIへ相談しやすい用語には、そのままコピーして使える指示文も用意しています。
わからない言葉を調べるときにも、AIへ依頼するときにも、ぜひご活用ください。
用語名がわからなくても、気になる言葉で検索できます
もう少し詳しく
見出し、文章、画像、ボタンなどが「何であるか」をコンピューターに伝えます。
たとえば家づくりでいう柱や壁。まずHTMLで部屋の形を作ります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebフロントエンド開発の専門家です。以下のHTMLを、文書構造・意味の正しさ・アクセシビリティ・保守性の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のHTML:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
色、文字の大きさ、余白、並び方などを指定します。スマホ向けの表示調整にも使います。
たとえばHTMLで作った家に、壁紙や家具をつけるイメージです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはCSS設計の専門家です。以下のCSSを、レイアウト・再利用性・レスポンシブ対応・保守性の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のCSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ボタンを押したら表示を変える、入力をチェックする、データを読み込む、といった処理を担当します。
たとえばこのサイトで★を付けたり、検索結果を切り替えたりする部分です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはJavaScript開発の専門家です。以下のJavaScriptコードを、正しさ・読みやすさ・例外処理・パフォーマンスの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のJavaScriptコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ブラウザに表示される画面や、ボタンを押したときの動きなどを指します。
たとえばネットショップの商品一覧や購入ボタンはフロントエンドです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはフロントエンド設計の専門家です。以下の目的と現状を踏まえ、画面側の構成と実装方針を設計してください。利用者の操作・状態管理・通信・アクセシビリティ・保守性を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
データの保存、会員情報の確認、注文の計算など、利用者から直接は見えない仕事をします。
たとえば購入ボタンの後ろで、在庫を確認して注文を記録します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはバックエンド設計の専門家です。以下の目的と現状を踏まえ、サーバー側の構成と処理の流れを設計してください。責務分担・データ整合性・安全性・障害時の動作・拡張性を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ボタン、入力欄、メニュー、文字の見やすさなど、画面上で触れるもの全体です。
たとえば押しやすい大きなボタンや、迷わないメニューも良いUIの一部です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはUI/UX設計の専門家です。以下の画面仕様を、分かりやすさ・操作性・アクセシビリティ・一貫性の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の画面仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
わかりやすい、早い、安心できるなど、使う前から使った後までの感じ方を含みます。
たとえば予約が3分で迷わず完了し、確認メールも届く。これは良いUXです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはUX設計の専門家です。以下の利用者の体験と操作の流れを、目的達成までの迷い・負担・安心感・完了後のフィードバックの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の利用者の体験と操作の流れ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
同じWebサイトを、パソコン・タブレット・スマホで見やすく表示します。
たとえばパソコンでは横3列、スマホでは縦1列に並べます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはレスポンシブWeb設計の専門家です。以下の画面仕様またはコードを、スマホ・タブレット・PCでの読みやすさ・操作性・情報の優先順位の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の画面仕様またはコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
Webサーバーから受け取った情報を、人が見られるページとして表示します。
たとえばChrome、Safari、Edge、Firefoxなどがあります。
この用語をもっと知る
もう少し詳しく
ボタンや商品カードなどを部品として作り、複数の画面で使い回します。
たとえばレゴのブロックのように、部品を組み合わせて画面を作ります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはUIコンポーネント設計の専門家です。以下の目的と現状を踏まえ、適切な部品分割とインターフェースを設計してください。責務・再利用性・状態・アクセシビリティ・テストしやすさを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
決められた形式でお願いを送ると、別のシステムがデータや結果を返します。
たとえば天気APIに東京の天気を聞くと、気温や降水確率が返ります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはAPI設計の専門家です。以下の目的と現状を踏まえ、APIの仕様を設計してください。利用目的・入出力・認証・エラー・互換性・利用制限を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
商品、顧客、注文などの情報を、あとから探したり更新したりしやすい形で保管します。
たとえば表計算ソフトよりも、大量のデータを安全に共同利用しやすい仕組みです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータベース設計の専門家です。以下の目的と現状を踏まえ、データ構造と保存方針を設計してください。重複・整合性・検索方法・更新頻度・権限・バックアップを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
データを探す、追加する、書き換える、削除するといった操作に使います。
たとえば「今月の注文だけを新しい順で見せて」とデータベースに頼みます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはSQLとデータベース性能の専門家です。以下のSQLクエリを、結果の正しさ・安全性・読みやすさ・実行効率の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のSQLクエリ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
名前と値の組み合わせで情報を表し、多くのWebサービスで使われます。
たとえば「商品名:りんご、価格:150」のように項目をそろえて渡します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはAPIデータ設計の専門家です。以下のJSONデータを、項目名・型・必須項目・入れ子・欠損時の扱い・将来の変更の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のJSONデータ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ログイン状態や表示設定など、小さな情報をWebサイトとブラウザの間で保持します。
たとえば次にサイトを開いたときも、選んだ言語が残っている場合などです。
この用語をもっと知る
もう少し詳しく
いつ、誰が、何を変えたかを残し、以前の状態と比べたり共同作業したりできます。
たとえばゲームのセーブポイントのように、作業の節目を記録します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはGit運用の専門家です。以下の症状と状況から、履歴やブランチで起きている問題を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
コードの保管、レビュー、課題管理、自動テストなど、開発チームの仕事を助けます。
たとえばオンライン上の「コード置き場+共同作業スペース」です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはGitHubを使ったチーム開発の専門家です。以下の目的と現状を踏まえ、リポジトリの運用ルールを設計してください。ブランチ・レビュー・課題・自動確認・権限を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
書き間違いだけでなく、考慮不足や別機能との組み合わせで起きることもあります。
たとえば「保存」を押したのに内容が消えてしまう、などです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはソフトウェア品質と原因分析の専門家です。以下の症状と状況から、不具合の原因を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
起きる条件を確認し、記録やコードを追いながら原因を絞り込みます。
たとえば体調不良の原因を、症状や検査から探すことに似ています。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはソフトウェアデバッグの専門家です。以下の症状と状況から、問題の発生箇所と原因を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
よく使う仕組みや作り方があらかじめ用意され、ゼロから作る手間を減らします。
たとえば家づくりでいう工法や組み立てキットのようなものです。
この用語をもっと知る
もう少し詳しく
ブラウザからのお願いを受け、Webページやデータを返します。実物の機械とは限りません。
たとえばレストランで注文を受け、料理を出す厨房のような役割です。
この用語をもっと知る
もう少し詳しく
数字の住所であるIPアドレスを、人が覚えやすい名前にしたものです。
たとえばexample.com の部分がドメインです。
この用語をもっと知る
もう少し詳しく
通信方法、ドメイン、ページの場所などを組み合わせた文字列です。
たとえばhttps://example.com/news の全体がURLです。
この用語をもっと知る
もう少し詳しく
サーバーや保存場所などを自社で持たず、必要な分だけ借りて使えます。
たとえば水道のように、必要な量のIT設備をサービスとして使います。
この用語をもっと知る
もう少し詳しく
完成したプログラムをサーバーなどに配置し、利用者がアクセスできる状態にします。
たとえば舞台裏で練習した演目を、劇場で公開する瞬間です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはリリース運用の専門家です。以下の目的と現状を踏まえ、安全なデプロイ手順を設計してください。事前確認・段階的な反映・監視・問題時に元へ戻す方法を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
開発中に試す環境とは分け、安定性や安全性を重視して運用します。
たとえば練習場ではなく、お客さんがいる本番の舞台です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは本番運用の専門家です。以下の本番環境の構成と運用手順を、権限・設定・監視・バックアップ・変更手順・障害対応の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の本番環境の構成と運用手順:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ブラウザとWebサイトの間で送るパスワードや個人情報を、第三者に読まれにくくします。
たとえばURLが https:// で始まり、鍵マークが出るサイトで使われます。
この用語をもっと知る
もう少し詳しく
パスワード、確認コード、指紋などを使い、本人であることを確認します。
たとえば建物の入口で身分証を見せるようなものです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは認証とアカウント安全設計の専門家です。以下の目的と現状を踏まえ、本人確認の流れを設計してください。ログイン・失敗時の制限・復旧・セッション・監査記録を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
本人確認のあと、閲覧だけできる人、編集もできる人など、権限を分けます。
たとえば社員証を確認した後、入れる部屋を決めることに似ています。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはアクセス権限設計の専門家です。以下の権限ルールを、役割・対象データ・許可する操作・例外・権限変更時の扱いの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の権限ルール:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
公開前や変更後に、機能、表示、安全性などに問題がないか確認します。
たとえば注文できるか、間違った入力を止められるかを試します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはソフトウェアテストの専門家です。以下の仕様からテスト計画を作成してください。正常系・異常系・境界値・権限・失敗からの復帰を含め、各項目に優先度・前提条件・手順・期待結果を付けてください。仕様の曖昧さや不足は、テストケースを作る前に質問として整理してください。
対象の仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
故障、操作ミス、攻撃などでデータを失ったときに、元へ戻せるよう備えます。
たとえば家の鍵をなくしたときのために、合鍵を安全な場所へ置きます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはバックアップと災害復旧の専門家です。以下の目的と現状を踏まえ、バックアップ計画を設計してください。対象データ・頻度・保存先・世代・暗号化・復元テストを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
年齢や障害、利用環境にかかわらず、情報を得て操作できるよう設計します。
たとえば文字を読み上げられる、キーボードだけでも操作できる、などです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebアクセシビリティの専門家です。以下の画面仕様またはコードを、キーボード操作・読み上げ・色と文字・フォーカス・エラー通知の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の画面仕様またはコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ブラウザとサーバーが、何を送り何を返すかを決めた通信の約束です。
たとえばレストランの注文方法が決まっているように、Webにも共通の頼み方があります。
この用語をもっと知る
もう少し詳しく
人が覚えやすいドメイン名から、通信先のIPアドレスを調べます。
たとえば電話帳で人の名前から電話番号を探すような働きです。
この用語をもっと知る
もう少し詳しく
データを正しいコンピューターへ届けるために使われる識別番号です。
この用語をもっと知る
もう少し詳しく
常にインターネットからアクセスできるサーバーや保存場所を提供します。
たとえば作ったお店を出すために、営業できる場所を借りるイメージです。
この用語をもっと知る
もう少し詳しく
多くの場合、利用者のブラウザやスマートフォンアプリを指します。
たとえばレストランで料理を注文するお客さん側の役割です。
この用語をもっと知る
もう少し詳しく
毎回同じ情報を取りに行かず、手元のコピーを使って表示を速くします。
たとえばよく使う道具を倉庫ではなく机の上に置くイメージです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebパフォーマンスとキャッシュの専門家です。以下の目的と現状を踏まえ、キャッシュ方針を設計してください。対象・保存場所・有効期限・更新・古い情報・個人別データを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
画像や動画などのコピーを各地に置き、利用者へ素早く配信します。
たとえば全国の倉庫から一番近い倉庫を選んで発送するようなものです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWeb配信とCDNの専門家です。以下の目的と現状を踏まえ、CDNの設定方針を設計してください。配信対象・キャッシュ期間・更新・地域・障害時の動作・費用を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
決めたルールに従い、ネットワークへ入る通信や出る通信を確認します。
たとえば建物の入口で不審な人を止める警備員の役割です。
この用語をもっと知る
もう少し詳しく
情報を盗む、ファイルを壊す、勝手に操作するなどの被害を起こします。
たとえばウイルスやランサムウェアなどをまとめた呼び方です。
この用語をもっと知る
もう少し詳しく
本物に似せたメールやWebサイトへ誘導し、パスワードなどを入力させます。
たとえば宅配会社を装った偽SMSから、偽サイトへ誘導する手口です。
この用語をもっと知る
もう少し詳しく
プログラムの不具合や設定ミスなど、悪用される可能性がある部分です。
たとえば鍵が壊れかけたドアのように、放置すると侵入されるおそれがあります。
この用語をもっと知る
もう少し詳しく
正しい鍵を持つ相手だけが元の内容へ戻せるようにします。
たとえば手紙を鍵付きの箱に入れて送るイメージです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは暗号化と鍵管理の専門家です。以下の目的と現状を踏まえ、データを守る方法を設計してください。通信中と保存中・鍵の保管と交換・権限・復旧・性能を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
パスワードの保存や、データが変わっていないかの確認などに使います。
たとえばパスワードそのものではなく、変換後の値を保存します。
この用語をもっと知る
もう少し詳しく
パスワードに加え、スマホへ届くコードなどを使って安全性を高めます。
たとえば鍵と暗証番号の両方が必要な金庫に似ています。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはアカウントセキュリティの専門家です。以下の目的と現状を踏まえ、二要素認証の導入方法を設計してください。登録・確認・端末紛失・復旧コード・利用者への案内を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ログインしてからログアウトするまでなど、同じ利用者の操作を続きとして扱います。
たとえば買い物中の商品がカートに残るのもセッション管理の例です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWeb認証とセッション管理の専門家です。以下のセッション仕様を、有効期限・更新・ログアウト・複数端末・盗難対策の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のセッション仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
Webサイトを閉じても残したい小さな設定や情報を、使っている端末に保存します。
たとえばこのサイトの★はローカルストレージに保存されます。
この用語をもっと知る
もう少し詳しく
名前やメールアドレスの入力欄、選択肢、送信ボタンなどをまとめたものです。
たとえばお問い合わせ画面や会員登録画面がフォームです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはフォーム設計の専門家です。以下の入力フォームを、入力のしやすさ・エラー表示・必須項目・アクセシビリティ・完了確認の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の入力フォーム:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
サイト名、メニュー、検索など、よく使う案内を置きます。
たとえばこのページ上部のサイト名とお気に入りボタンの部分です。
この用語をもっと知る
もう少し詳しく
連絡先、利用規約、著作権表示、補助的なリンクなどを置きます。
たとえば本の奥付のように、サイトの基本情報をまとめる場所です。
この用語をもっと知る
もう少し詳しく
メニューやリンクをわかりやすく並べ、利用者が迷わないようにします。
たとえば地図の案内板のように、次に行ける場所を示します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは情報設計とナビゲーションの専門家です。以下のメニューと画面遷移を、現在地・名称の分かりやすさ・階層・戻りやすさ・スマホ操作の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のメニューと画面遷移:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
確認や入力など、いったん注意を向けてほしい内容を表示します。
たとえば削除前に出る「本当に削除しますか?」という確認画面です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはUI設計の専門家です。以下のモーダルの仕様を、開く目的・閉じ方・キーボード操作・背景の扱い・小画面での見やすさの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のモーダルの仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
色や写真を決める前に、情報の順番やボタンの場所を確認します。
たとえば家の間取り図のように、まず全体の配置を決めます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは情報設計の専門家です。以下の目的と現状を踏まえ、ワイヤーフレームの構成案を設計してください。利用者の目的・情報の優先順位・主要な操作・画面遷移を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
完成前に操作や流れを確認し、問題を早く見つけるために作ります。
たとえば紙の画面をめくって、アプリの動きを試すこともあります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはプロトタイピングの専門家です。以下の目的と現状を踏まえ、検証用プロトタイプの範囲と手順を設計してください。確かめたい仮説・最小限の機能・評価方法・捨てる範囲を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
色、文字、余白、ボタンなどを再利用できる形でまとめます。
たとえばどの画面でも同じ形のボタンを使えるようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデザインシステム設計の専門家です。以下の目的と現状を踏まえ、最小限のデザイントークンと共通部品を設計してください。色・文字・余白・状態・アクセシビリティ・運用ルールを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ブックマークや検索結果に表示され、サイトを見分けやすくします。
たとえば開いているタブのタイトル横にある小さな絵です。
この用語をもっと知る
もう少し詳しく
画像を見られない場合や、読み上げ機能を使う人に内容を伝えます。
たとえば猫の写真に「窓辺で眠る白い猫」と説明を付けます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebアクセシビリティの専門家です。以下の情報をもとに、画像ごとの適切な代替テキストのたたき台を作ってください。画像の目的と周辺文脈を踏まえ、装飾画像は空欄にする判断も含めることを満たし、未確定事項は決めつけず[要確認]と示してください。最後に、人が確認すべき重要ポイントを一覧にしてください。
前提・対象情報:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ページの内容や構造をわかりやすくし、検索結果に適切に表示されるよう整えます。
たとえばページごとに内容を表すわかりやすいタイトルを付けます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはテクニカルSEOとコンテンツ設計の専門家です。以下のWebページを、検索意図・タイトル・見出し構造・内部リンク・表示品質の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のWebページ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
コードを書かなくても、記事や画像を追加・編集できるようにします。
たとえば管理画面からブログ記事を投稿できる仕組みです。
この用語をもっと知る
もう少し詳しく
HTMLやCSS、通信、エラーなどを確認して問題を調べられます。
たとえば表示が崩れた原因をブラウザ上で調べるときに使います。
この用語をもっと知る
もう少し詳しく
プログラミング言語のルールに沿って、コンピューターへの指示を書きます。
たとえば料理でいうレシピのように、実行する手順が書かれています。
この用語をもっと知る
もう少し詳しく
目的に合わせてさまざまな種類があり、それぞれ書き方のルールがあります。
たとえばJavaScript、Python、Javaなどがあります。
この用語をもっと知る
もう少し詳しく
誰かが作った便利な処理を取り入れ、開発の手間を減らします。
たとえば必要な道具だけを借りられる工具箱のようなものです。
この用語をもっと知る
もう少し詳しく
状態が変わると必要な表示を更新し、複雑な画面を組み立てやすくします。
たとえばこのサイトもReactで画面の検索結果を切り替えています。
この用語をもっと知る
もう少し詳しく
同じ処理を何度も書かず、必要なときに呼び出して使えます。
たとえば材料を入れるとジュースを返すミキサーのような仕組みです。
この用語をもっと知る
もう少し詳しく
数値や文字などを保存し、あとで読んだり変更したりします。
たとえば「価格」という箱に150という数字を入れて使います。
この用語をもっと知る
もう少し詳しく
「もしAならこちら、違えばあちら」のように動きを分けます。
たとえば雨なら傘を持つ、晴れなら持たない、という判断です。
この用語をもっと知る
もう少し詳しく
入力ミス、通信失敗、プログラムの不具合などさまざまな原因で起きます。
たとえば存在しないページを開いたときの404もエラーの一種です。
この用語をもっと知る
もう少し詳しく
いつ何が起きたかを確認し、問題の調査や利用状況の把握に使います。
たとえば防犯カメラの記録のように、あとから出来事をたどれます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはログ設計と運用の専門家です。以下のログ出力の設計を、調査に必要な情報・個人情報・検索しやすさ・保存期間・費用の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のログ出力の設計:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
正しい答えへたどり着くために、操作や判断を順番に組み立てます。
たとえば料理のレシピも、手順を表したアルゴリズムと考えられます。
この用語をもっと知る
もう少し詳しく
データとその操作をひとまとめにし、複雑な仕組みを整理します。
たとえば車を、走る機能と色などの情報を持つ一つの部品として考えます。
この用語をもっと知る
もう少し詳しく
ページを見たい、データを保存したいなど、求める処理を伝えます。
たとえばレストランで店員へ料理を注文することに似ています。
この用語をもっと知る
もう少し詳しく
ページの内容、データ、成功や失敗の情報などがサーバーから返ります。
たとえば注文した料理や「売り切れです」という返事にあたります。
この用語をもっと知る
もう少し詳しく
名前、日付、金額などを基準にして、昇順や降順へ並べます。情報を探したり比べたりしやすくする操作です。
たとえば商品一覧を、価格の安い順や新着順に並べ替えます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータ表示と検索体験の専門家です。以下の目的と現状を踏まえ、一覧の並び替え仕様を設計してください。利用者が必要とする基準・初期順・昇順と降順・同順位・件数が多い場合の性能を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
URLなどで場所を示し、取得や保存などの役割ごとに分かれています。
たとえば/products は商品一覧を受け取る窓口、という具合です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはAPI設計の専門家です。以下の目的と現状を踏まえ、エンドポイントの役割と入出力を設計してください。URL・操作・認証・検証・成功と失敗の応答を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
URLとHTTPの方法を組み合わせ、データへの操作をわかりやすく表します。
たとえば商品を見る、追加する、直す、消すを決まった方法で表します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはREST API設計の専門家です。以下のAPI仕様を、URL・HTTPメソッド・状態コード・エラー形式・再実行時の安全性の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のAPI仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
利用する側が欲しい項目を選び、一度の問い合わせで取得できます。
たとえば商品名と価格だけ欲しい、と項目を指定してお願いできます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはGraphQL API設計の専門家です。以下のスキーマまたはクエリを、型・取得範囲・エラー・認証・性能・将来の変更の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のスキーマまたはクエリ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
条件を指定して、必要な情報だけを取得するときなどに使います。
たとえば「東京に住む顧客だけを見せて」という問い合わせです。
この用語をもっと知る
もう少し詳しく
列に項目、行に一件分のデータを入れて整理します。
たとえば顧客テーブルに、名前やメールアドレスを保存します。
この用語をもっと知る
もう少し詳しく
表の一行にあたり、一人の顧客や一つの商品などを表します。
たとえば商品テーブルの「りんご・150円」という一行です。
この用語をもっと知る
もう少し詳しく
同じ値が重ならないIDなどを使い、目的のレコードを正確に見分けます。
たとえば同姓同名でも区別できる会員番号のようなものです。
この用語をもっと知る
もう少し詳しく
項目をカンマなどで区切り、多くの表計算ソフトやシステムで扱えます。
たとえば顧客一覧を別のシステムへ移すときによく使います。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータ移行と品質管理の専門家です。以下のCSVデータを、文字コード・見出し・型・空欄・重複・日付・取り込みエラーの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のCSVデータ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
項目を開始と終了の印で囲み、階層のある情報を記述します。
たとえば<name>りんご</name> のようにデータを表します。
この用語をもっと知る
もう少し詳しく
作成、読み取り、更新、削除の英語の頭文字を並べた言葉です。
たとえば商品を登録し、見て、直して、削除する一連の機能です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは業務システム設計の専門家です。以下の目的と現状を踏まえ、CRUD機能と操作の流れを設計してください。権限・入力確認・削除の安全性・履歴・エラー時の復帰を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
必須項目や文字数、メールアドレスの形などをチェックします。
たとえば電話番号欄に文字が入っていたら、入力し直してもらいます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは入力検証とセキュリティの専門家です。以下の目的と現状を踏まえ、バリデーションルールを設計してください。必須条件・形式・境界値・エラー文・画面側とサーバー側の分担を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
どんな項目があり、どの種類の値を入れるかなどを定めます。
たとえば顧客には名前とメールアドレスが必要、と決めます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータモデリングの専門家です。以下の目的と現状を踏まえ、スキーマを設計してください。項目・型・必須条件・関係・制約・将来の変更を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
サービスを動かしながら、項目の追加や形式の変更を順序立てて行います。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータベース移行の専門家です。以下の目的と現状を踏まえ、安全なマイグレーション計画を設計してください。既存データ・停止時間・後方互換性・検証・元へ戻す手順を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
一つの製品やプロジェクトに関するファイルを整理して管理します。
たとえばプロジェクト専用の、履歴付きフォルダのようなものです。
この用語をもっと知る
もう少し詳しく
何を変えたかの説明を付け、あとから履歴を確認できるようにします。
たとえばゲームで「ここまで進んだ」とセーブするイメージです。
この用語をもっと知る
もう少し詳しく
ほかの作業に影響を与えず、新機能や修正を進められます。
たとえば同じ原稿をコピーし、別案を試すようなものです。
この用語をもっと知る
もう少し詳しく
変更内容を見せ、確認や話し合いをしてから統合します。
たとえば修正版の原稿を編集長へ確認してもらうイメージです。
この用語をもっと知る
もう少し詳しく
間違い、安全性、読みやすさなどを公開前に確かめます。
たとえば文章を公開する前に校正してもらう作業に似ています。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはソフトウェア設計とコードレビューの専門家です。以下のコード差分を、正しさ・安全性・読みやすさ・性能・テスト不足の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のコード差分:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
決められた条件のもとで、利用、調査、変更、再配布などができます。
たとえば多くの人が改善に参加できる公開レシピのようなものです。
この用語をもっと知る
もう少し詳しく
機能や必要な情報を一つにまとめ、簡単に追加できるようにします。
たとえば必要な道具と説明書が入ったセットのようなものです。
この用語をもっと知る
もう少し詳しく
利用するライブラリや、その正しいバージョンなどを管理します。
たとえば料理を作るために、材料や調理器具が必要な関係に似ています。
この用語をもっと知る
もう少し詳しく
必要なライブラリを追加したり、決めた作業を実行したりします。
たとえば部品カタログから必要な部品を取り寄せる役割です。
この用語をもっと知る
もう少し詳しく
決められた命令を入力し、ファイル操作や開発用の作業を行います。
たとえばボタンの代わりに「この作業をして」と文字で伝えます。
この用語をもっと知る
もう少し詳しく
コードの変更をきっかけに、確認、組み立て、デプロイなどを自動化します。
たとえば原稿を送ると自動で校正し、問題なければ公開する流れです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはCI/CD設計の専門家です。以下の目的と現状を踏まえ、自動テストと公開の流れを設計してください。実行条件・品質チェック・秘密情報・承認・失敗時の通知と復旧を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
短い期間ごとに計画、開発、確認を繰り返し、変化へ柔軟に対応します。
たとえば最初から全部を完成させず、まず使える小さな版を作って育てます。
この用語をもっと知る
もう少し詳しく
文字や数字などの種類をあらかじめ決め、書き間違いを開発中に見つけやすくします。
たとえば価格の欄へ文字を入れようとすると、公開前に間違いを知らせてくれます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはTypeScript開発の専門家です。以下のTypeScriptコードを、型の安全性・読みやすさ・保守性・過度な複雑さの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のTypeScriptコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
Web開発、データ分析、AI、自動化などに使われ、初学者にも比較的学びやすい書き方です。
たとえば表の集計を自動化したり、Webサービスの裏側を作ったりできます。
この用語をもっと知る
もう少し詳しく
さまざまな環境で動かしやすく、大規模なシステムでも長く利用されています。
たとえば銀行のシステムや会社の業務アプリなどで使われます。
この用語をもっと知る
もう少し詳しく
サーバーで動き、フォームの処理やデータベースとの連携などを行います。
たとえばブログの記事をデータベースから読み出してページに表示します。
この用語をもっと知る
もう少し詳しく
操作のわかりやすさ、覚えやすさ、間違えたときの戻りやすさなどを考えます。
たとえば初めての人でも説明なしで予約を完了できる画面を目指します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはユーザビリティ評価の専門家です。以下の操作手順または画面を、学びやすさ・効率・間違いの防ぎやすさ・復帰のしやすさの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の操作手順または画面:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
端末へ大きなソフトを入れず、契約してブラウザなどから機能を使います。
たとえばWebメールやオンライン会議、顧客管理サービスなどがあります。
この用語をもっと知る
もう少し詳しく
バックアップや変更履歴を使い、故障や操作ミスの前の状態へ戻します。
たとえば誤って消した顧客データを前日の控えから戻します。
この用語をもっと知る
もう少し詳しく
漏えい、改ざん、停止などを防ぐため、技術と運用の両面で対策します。
たとえば強い認証、更新、バックアップを組み合わせて備えます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは情報セキュリティの専門家です。以下のシステム仕様を、守る情報・脅威・認証・権限・通信・記録・復旧の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のシステム仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ブラウザの外でもJavaScriptを実行でき、APIや開発用ツールを作れます。
たとえば問い合わせフォームの内容を受け取るサーバーを動かします。
この用語をもっと知る
もう少し詳しく
ページの表示、移動、サーバー処理など、Web開発に必要な機能がまとまっています。
たとえば会社サイトと管理画面を一つの仕組みで作れます。
この用語をもっと知る
もう少し詳しく
画面を部品に分け、データの変化に合わせて表示を更新しやすくします。
たとえば入力に合わせて合計金額が変わる画面を作ります。
この用語をもっと知る
もう少し詳しく
機能の追加、不具合の修正、安全性の改善などを端末やサーバーへ反映します。
たとえばブラウザを最新版にして、見つかった弱点をふさぎます。
この用語をもっと知る
もう少し詳しく
色や余白などを表す決まった名前をHTMLへ付け、素早くデザインを整えます。
たとえば余白を広げる、文字を青くする、といった指定を組み合わせます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはTailwind CSS設計の専門家です。以下のスタイル指定を、重複・読みやすさ・レスポンシブ対応・デザイントークンの一貫性の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のスタイル指定:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
今の作業へ注意を向けてもらい、選択や確認が終わると元の画面へ戻ります。
たとえば削除の前に「本当に削除しますか」と確認します。
この用語をもっと知る
もう少し詳しく
JavaScriptから見出しやボタンを探し、内容や見た目を変更できるようにします。
たとえばボタンを押したら説明文を表示する処理で使います。
この用語をもっと知る
もう少し詳しく
見出し、ナビゲーション、本文などに適切なタグを使い、構造を明確にします。
たとえば見た目だけでなく、見出しには見出し用のタグを使います。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはセマンティックHTMLとアクセシビリティの専門家です。以下のHTML構造を、要素の意味・見出し階層・ランドマーク・読み上げやすさの観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のHTML構造:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
二次元の区画を作り、カードやページ全体を整然と配置できます。
たとえば商品カードをパソコンでは3列、スマホでは1列に並べます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはCSSレイアウトの専門家です。以下の目的と現状を踏まえ、CSS Gridを使った配置案を設計してください。列と行・画面幅の変化・余白・要素の最小幅を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
横並びや縦並び、間隔、中央揃えなどを柔軟に調整できます。
たとえばロゴとメニューを左右に分けて一列に並べます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはCSSレイアウトの専門家です。以下の目的と現状を踏まえ、Flexboxを使った配置案を設計してください。並ぶ方向・折り返し・揃え方・画面幅の変化を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
一定の横幅を境に、列数やメニューの見せ方などを変更します。
たとえば画面が600pxより狭くなったら1列表示にします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはレスポンシブ設計の専門家です。以下の目的と現状を踏まえ、適切なブレークポイントと切り替え方を設計してください。コンテンツが崩れる幅・端末に依存しない基準・操作性を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
表示や移動をなめらかにし、操作の結果や注目する場所をわかりやすくします。
たとえばメニューがふわっと開き、どこから現れたかを伝えます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはUIモーション設計の専門家です。以下のアニメーション仕様を、目的・分かりやすさ・速度・酔いやすさ・動きを減らす設定の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のアニメーション仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ログイン中か、何を選んだかなどの情報を管理し、表示へ正しく反映します。
たとえばカートに入れた商品の数を、どの画面でも同じに表示します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはフロントエンド状態管理の専門家です。以下の目的と現状を踏まえ、状態の持ち方と更新の流れを設計してください。状態の置き場所・依存関係・非同期処理・エラー・テストを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
トップ、商品詳細、設定など、アクセス先ごとに適切な画面や処理へつなぎます。
たとえば/products/10 を商品10番の詳細ページへ案内します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebアプリのルーティング設計の専門家です。以下の目的と現状を踏まえ、URLと画面遷移の構成を設計してください。分かりやすいURL・戻る操作・権限・存在しないページ・共有しやすさを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
必要なデータだけを読み込み、アプリのようになめらかに画面を更新します。
たとえばメール画面で一覧から本文へすばやく切り替わります。
この用語をもっと知る
もう少し詳しく
ホーム画面への追加や、通信が弱いときの利用などに対応できます。
たとえばWebサイトをスマホのホーム画面からアプリのように開きます。
この用語をもっと知る
もう少し詳しく
完成に近いHTMLを先に返すため、最初の内容を早く見せやすくなります。
たとえばニュース記事の本文をサーバーで作ってブラウザへ送ります。
この用語をもっと知る
もう少し詳しく
あらかじめ完成したファイルを配るため、速く安定して表示しやすくなります。
たとえば会社案内の各ページを公開前にまとめて作成します。
この用語をもっと知る
もう少し詳しく
JavaScriptがデータを受け取り、利用者の端末で表示を更新します。
たとえば検索条件を変えると、ページ移動なしで一覧が変わります。
この用語をもっと知る
もう少し詳しく
利用者の端末に同じ書体がなくても、意図した文字の雰囲気を見せられます。
たとえばサイト専用の丸みのある書体を見出しに使います。
この用語をもっと知る
もう少し詳しく
文字を補い、検索、削除、設定などの機能をすばやく見分けやすくします。
この用語をもっと知る
もう少し詳しく
基本色、強調色、背景色などを決め、画面全体に統一感を持たせます。
たとえばブランドの青と、文字用の黒、背景用の白を決めます。
この用語をもっと知る
もう少し詳しく
書体、大きさ、太さ、行間などを調整し、情報の順序や雰囲気を伝えます。
たとえば見出しを大きく、本文の行間を広くして読みやすくします。
この用語をもっと知る
もう少し詳しく
トップから今のページまでの道筋を表示し、上の階層へ戻りやすくします。
たとえばホーム > 商品 > 文房具 のように表示します。
この用語をもっと知る
もう少し詳しく
アイコンなどへカーソルを合わせたり、注目したりしたときに表示します。
たとえばごみ箱アイコンに「削除」と説明を出します。
この用語をもっと知る
もう少し詳しく
画面の端などに現れ、保存の成功や通信の失敗を短く伝えて自動で消えます。
たとえば保存後に「変更しました」と数秒間表示します。
この用語をもっと知る
もう少し詳しく
一度に見せる件数を抑え、前後やページ番号で続きを移動できるようにします。
たとえば検索結果を20件ずつ、1・2・3ページに分けます。
この用語をもっと知る
もう少し詳しく
サービス側が利用者を確認し、利用量や許可された機能を管理するために使います。
たとえば地図APIを呼ぶときに、契約者を示す鍵を一緒に送ります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはAPIセキュリティの専門家です。以下のAPIキーの管理方法を、発行・保存・権限・利用制限・交換・漏えい時の対応の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のAPIキーの管理方法:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
利用者が同意した範囲だけ、写真や予定などへのアクセスを認めます。
たとえばGoogleでログインし、名前とメールだけの利用を許可します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはOAuthと外部サービス連携の専門家です。以下の目的と現状を踏まえ、認可フローを設計してください。必要最小限の権限・同意画面・期限・取り消し・エラーを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
内容が途中で書き換えられていないか確認でき、ログイン状態の確認などに使われます。
たとえば入館証のような短い文字列をリクエストに付けて送ります。
この用語をもっと知る
もう少し詳しく
どのWebサイトからAPIを呼べるかをサーバー側で決めます。
たとえば公式サイトからのデータ取得だけを許可します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebセキュリティとブラウザ通信の専門家です。以下の症状と状況から、CORSエラーの原因を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
利用者の権限を悪用し、知らないうちに送金や設定変更などを実行させます。
たとえば偽のリンクを開いただけで登録メールが変えられる攻撃です。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebアプリケーションセキュリティの専門家です。以下の重要な操作の実装を、CSRF対策・Cookie設定・トークン・同一オリジンの確認の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の重要な操作の実装:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
入力欄などから不正なコードを表示させ、情報を盗んだり偽の画面を見せたりします。
たとえば掲示板の投稿に危険なJavaScriptを埋め込みます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebアプリケーションセキュリティの専門家です。以下の入力と表示の処理を、出力時の無害化・危険なHTML・URL・外部スクリプト・防御設定の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の入力と表示の処理:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
データベースへの命令を入力に混ぜ、情報の閲覧や変更を狙います。
たとえばログイン欄へ特別な文字列を入れ、確認をすり抜けようとします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはデータベースセキュリティの専門家です。以下のデータベース操作コードを、パラメーター化・入力検証・権限・エラー表示・記録の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象のデータベース操作コード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
長く推測されにくい文字列を使い、サービスごとに分けて管理します。
たとえば玄関の鍵のように、他人へ教えず安全に保管します。
この用語をもっと知る
もう少し詳しく
見るだけ、編集できる、管理できるなど、必要に応じてできることを分けます。
たとえば一般社員は閲覧のみ、担当者は編集もできるようにします。
この用語をもっと知る
もう少し詳しく
氏名や住所などを適切に扱い、必要以上に集めたり漏らしたりしない配慮が必要です。
たとえば会員登録で受け取った名前やメールアドレスを安全に保管します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはプライバシーとデータ保護の専門家です。以下の個人情報の取り扱いを、収集目的・最小化・同意・保存期間・権限・削除・外部提供の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の個人情報の取り扱い:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
集める情報、利用目的、保存方法、問い合わせ先などを説明します。
たとえば会員登録前に、メールアドレスを何に使うか知らせます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはプライバシー情報の整理の専門家です。以下の情報をもとに、プライバシーポリシーのたたき台を作ってください。収集項目・目的・保存期間・第三者提供・利用者の請求・問い合わせ先を含め、法務確認が必要な箇所を明示することを満たし、未確定事項は決めつけず[要確認]と示してください。最後に、人が確認すべき重要ポイントを一覧にしてください。
前提・対象情報:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
利用できる条件、禁止事項、責任の範囲などを利用者へ示します。
たとえば投稿できない内容や、退会時の扱いを説明します。
この用語をもっと知る
もう少し詳しく
相手が正しいWebサイトかを確かめ、送受信する内容を第三者から守ります。
この用語をもっと知る
もう少し詳しく
家庭や会社の中から世界中のインターネットまで、決めた経路でデータを届けます。
たとえばパソコンとプリンターを同じWi-Fiにつないで使います。
この用語をもっと知る
もう少し詳しく
本人確認や権限にもとづき、許可された操作だけをできるようにします。
たとえば担当者だけが売上データを編集できるようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはアクセス制御の専門家です。以下の目的と現状を踏まえ、役割と権限の一覧を設計してください。最小権限・対象データ・操作・例外・承認・定期的な見直しを考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
文章、画像、動画、音声など、見たり読んだり使ったりする情報を指します。
たとえば会社サイトの商品説明や写真、ニュース記事などです。
この用語をもっと知る
もう少し詳しく
見つかった脆弱性をふさぐ修正を、OSやアプリへ適用します。
たとえばスマホに届く重要な安全更新を早めにインストールします。
この用語をもっと知る
もう少し詳しく
開発中と公開先の環境差を減らし、同じ状態で実行しやすくします。
たとえば料理と必要な道具を一つの箱に入れて、どこでも同じように調理します。
この用語をもっと知る
もう少し詳しく
アプリの動作環境を設定ファイルでそろえ、開発や公開をしやすくします。
たとえばチーム全員が同じデータベース環境をすぐに動かせます。
この用語をもっと知る
もう少し詳しく
ソフトウェアで独立したOSや資源を用意し、複数の環境を分けて動かします。
たとえば一台のサーバー上で、別々の会社向け環境を動かします。
この用語をもっと知る
もう少し詳しく
アプリと機械の間に入り、画面、ファイル、通信などを管理します。
たとえばWindows、macOS、Linux、Androidなどがあります。
この用語をもっと知る
もう少し詳しく
中身が公開されており、安定性や柔軟性から多くのWebサービスを支えています。
たとえばクラウド上のWebサーバーをLinuxで動かします。
この用語をもっと知る
もう少し詳しく
秘密の鍵や接続先などをコードへ直接書かず、環境ごとに切り替えます。
たとえば開発中と本番で異なるデータベースの住所を設定します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはアプリケーション設定と秘密情報管理の専門家です。以下の環境変数の一覧を、用途・必須条件・秘密情報・環境差・初期値・漏えい防止の観点でレビューしてください。改善案を優先度順に最大5件、理由・具体例・期待できる効果を添えて提案してください。情報が足りない場合は推測せず、最初に確認事項を挙げてください。
対象の環境変数の一覧:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
利用者向けの本番とは分け、変更や失敗を安全に試せるようにします。
この用語をもっと知る
もう少し詳しく
本番に近い条件で操作し、表示やデータ処理に問題がないか確認します。
この用語をもっと知る
もう少し詳しく
公開直前の版を置き、設定や動作を本番に近い条件で確認します。
たとえば一般公開の前に、担当者が実際の手順で注文を試します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはリリース前検証の専門家です。以下の目的と現状を踏まえ、ステージング環境の構成を設計してください。本番との一致・テストデータ・権限・外部連携・公開前の確認を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
サーバー、ネットワーク、保存場所、監視などをまとめて指します。
たとえば建物でいう電気、水道、道路のようにサービスを下から支えます。
この用語をもっと知る
もう少し詳しく
一台に負担が集中しないようにし、故障時は正常なサーバーへ案内します。
たとえば混んだ窓口を避け、空いている窓口へお客さんを案内します。
この用語をもっと知る
もう少し詳しく
サーバーの性能や台数を調整し、アクセスの増加や減少へ対応します。
たとえばセール中だけレジを増やし、混雑が終わったら戻します。
この用語をもっと知る
もう少し詳しく
故障が起きても止まりにくく、すぐ復旧できるように設計・運用します。
たとえば一台が故障しても予備へ切り替え、サービスを続けます。
この用語をもっと知る
もう少し詳しく
影響を確認し、原因を絞り、応急処置や修正を行って再発を防ぎます。
たとえばサイトが開けない連絡を受け、記録を調べて復旧します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはインシデント対応の専門家です。以下の症状と状況から、障害の影響範囲と原因を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
応答速度やエラー数などを継続して確認し、異常があれば知らせます。
たとえばサイトが開けなくなったら担当者へ通知します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはシステム監視の専門家です。以下の目的と現状を踏まえ、監視項目と通知ルールを設計してください。利用者への影響・しきい値・通知先・誤通知・対応手順を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
サービスの止まりにくさを数字で表し、運用の目標や評価に使います。
たとえば一か月のほとんどで利用できた状態を99.9%などと表します。
この用語をもっと知る
もう少し詳しく
画面表示やAPIの速さを測る指標で、短いほど利用者は待たずに済みます。
たとえば検索ボタンを押して結果が出るまで0.5秒かかります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはWebパフォーマンスの専門家です。以下の症状と状況から、応答が遅い原因を切り分けてください。原因候補を可能性の高い順に並べ、各候補の確認方法・安全な対処・再発防止策を示してください。事実と推測を分け、追加で必要な情報があれば最初に質問してください。
症状:
[ここに記入]
発生条件・変更点・記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
距離や通信経路、処理の待ち時間などにより発生します。
たとえば遠い地域のサーバーへつなぐと、反応が少し遅くなります。
この用語をもっと知る
もう少し詳しく
同じ名前のものがあっても、重ならない値を付けて正確に区別します。
たとえば会員番号12345で、同姓同名の利用者を見分けます。
この用語をもっと知る
もう少し詳しく
IPアドレスが建物の住所なら、ポートは目的の部屋番号のような役割です。
たとえばWeb通信は443番の入口を使うことがあります。
この用語をもっと知る
もう少し詳しく
送る順番や形式を決め、異なる機器やソフトでも情報をやり取りできるようにします。
たとえば会話する人同士が同じ言語と話し方を決めるようなものです。
この用語をもっと知る
もう少し詳しく
新しい情報をすぐ受け取り、画面を更新する必要があるサービスで使います。
たとえばチャットの新着メッセージや試合速報をすぐ表示します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはリアルタイムシステム設計の専門家です。以下の目的と現状を踏まえ、通信方式と更新の流れを設計してください。接続切れ・再接続・順序・重複・負荷・画面への通知を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
登録したURLへデータを送り、定期的に確認しなくても処理を始められます。
たとえば支払い完了をきっかけに、注文システムへ通知します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはシステム連携の専門家です。以下の目的と現状を踏まえ、Webhookの送受信仕様を設計してください。署名確認・再送・重複処理・順序・失敗時の記録を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
その場ですぐ実行する必要がない集計や変換を、決めた時間などにまとめます。
たとえば毎晩、その日の売上を集計して報告書を作ります。
この用語をもっと知る
もう少し詳しく
メール送信や画像変換など、開始から完了までを一つの処理として管理します。
たとえば注文後に領収書PDFを作る仕事を登録します。
この用語をもっと知る
もう少し詳しく
大量の依頼をいったん受け止め、システムが扱える速さで順番に進めます。
たとえば印刷待ちの文書を並べ、先に来たものから印刷します。
この用語をもっと知る
もう少し詳しく
順序がわかりやすい一方、時間のかかる作業では画面が待つことがあります。
たとえば支払い確認が終わってから完了画面を表示します。
この用語をもっと知る
もう少し詳しく
通信や重い作業の完了を待つ間も、画面操作などを続けられます。
たとえば画像の送信中でも、説明文を入力し続けられます。
この用語をもっと知る
もう少し詳しく
種類によってできる操作が異なり、正しく区別すると間違いを防げます。
たとえば「150」という文字と、計算できる数値150を分けて扱います。
この用語をもっと知る
もう少し詳しく
同じ種類の値を一つの名前で管理し、順番に取り出したり追加したりします。
たとえば買い物リストに、りんご、牛乳、パンを順番に入れます。
この用語をもっと知る
もう少し詳しく
持つデータとできる操作をまとめ、同じ形のものを複数作れるようにします。
たとえば商品という設計図から、りんごやパンの商品データを作ります。
この用語をもっと知る
もう少し詳しく
処理を安全に止めたり、別の方法を試したり、利用者へ状況を伝えたりします。
たとえば通信に失敗したら「もう一度試す」ボタンを表示します。
この用語をもっと知る
もう少し詳しく
変更や再配布、商用利用ができるかなど、作った人が定めたルールを表します。
たとえば公開されたコードを製品へ組み込めるか条件を確認します。
この用語をもっと知る
もう少し詳しく
人が書いたプログラムを、機械や別の環境が理解できる形式にまとめます。
たとえばTypeScriptをブラウザで動くJavaScriptへ変えます。
この用語をもっと知る
もう少し詳しく
コードの変換、ファイルの整理、容量の削減などをまとめて行います。
たとえば開発中のファイルから、公開用のWebサイトを作ります。
この用語をもっと知る
もう少し詳しく
コードを読み取り、計算やメモリ管理など、実行に必要な働きを提供します。
たとえばNode.jsはJavaScriptをブラウザの外で動かすランタイムです。
この用語をもっと知る
もう少し詳しく
ライブラリ、説明書、サンプルなどがまとまり、機能を組み込みやすくします。
たとえば決済SDKを使い、支払い機能をアプリへ追加します。
この用語をもっと知る
もう少し詳しく
入力補助、エラー表示、実行、デバッグなどを一つの画面で行えます。
たとえば文章作成、校正、確認を一つにした開発用の作業机です。
この用語をもっと知る
もう少し詳しく
ブラウザや開発用アプリに入れ、標準にはない便利な働きを増やします。
たとえばコードを自動で整える機能を開発用アプリへ追加します。
この用語をもっと知る
もう少し詳しく
関数や部品を個別に動かし、決めた入力から正しい結果が出るか確認します。
たとえば消費税を計算する関数だけをさまざまな金額で試します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは単体テスト設計の専門家です。以下の仕様から単体テストケースを作成してください。代表値・境界値・異常系・依存先の扱いを含め、各項目に優先度・前提条件・手順・期待結果を付けてください。仕様の曖昧さや不足は、テストケースを作る前に質問として整理してください。
対象の仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
個別には動く部品同士をつなぎ、データの受け渡しに問題がないか確認します。
たとえば注文画面からデータベースへの保存までをまとめて試します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは結合テスト設計の専門家です。以下の仕様から結合テストケースを作成してください。部品間のデータ受け渡し・失敗・再実行・外部連携を含め、各項目に優先度・前提条件・手順・期待結果を付けてください。仕様の曖昧さや不足は、テストケースを作る前に質問として整理してください。
対象の仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
実際の使い方に近い形で画面を操作し、システム全体がつながって動くか確認します。
たとえば会員登録から商品購入、完了メールまでを通して試します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたはE2Eテスト設計の専門家です。以下の仕様から利用者目線のE2Eテストケースを作成してください。主要経路・権限・入力エラー・通信失敗・完了確認を含め、各項目に優先度・前提条件・手順・期待結果を付けてください。仕様の曖昧さや不足は、テストケースを作る前に質問として整理してください。
対象の仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
外部サービスや未完成の機能の動きをまねし、目的の部分だけを確認します。
たとえば実際に決済せず、成功したという仮の返事を使って注文を試します。
この用語をもっと知る
もう少し詳しく
テストだけでなく、作り方や確認手順も整え、不具合を予防して改善します。
たとえば公開前の確認項目を決め、毎回同じ基準でチェックします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
あなたは品質保証の専門家です。以下の目的と現状を踏まえ、継続的な品質確認の計画を設計してください。品質目標・確認工程・担当・自動化・公開判断・改善の記録を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。
目的:
[ここに記入]
現状・制約:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ページを見るたびに内容を作り直さないため、構成がシンプルで表示も速くしやすい作り方です。
たとえば会社案内やキャンペーンページをHTMLファイルとして公開します。
この用語をもっと知る
もう少し詳しく
サーバーのプログラムやブラウザのJavaScriptが、利用者や入力内容に応じてページを作ります。
たとえばログイン中の人ごとに購入履歴が変わる会員サイトです。
この用語をもっと知る
もう少し詳しく
text、email、checkbox、submitなどを指定し、表示や入力の扱い方を変えます。
たとえばtype="email"にすると、メールアドレス用の入力欄になります。
この用語をもっと知る
もう少し詳しく
お問い合わせ内容や備考など、長めの文章を入力する欄に向いています。
たとえばお問い合わせフォームの「ご相談内容」欄に使います。
この用語をもっと知る
もう少し詳しく
option要素で候補を用意し、通常はドロップダウン形式の入力欄として表示します。
たとえば都道府県や希望する連絡方法を一覧から選びます。
この用語をもっと知る
もう少し詳しく
画面に見せる文字と、送信する値を分けて指定できます。
たとえば「東京都」と表示し、送信値を「tokyo」にします。
この用語をもっと知る
もう少し詳しく
選択と解除を切り替えられ、複数の項目を同時に選んでもよい場面で使います。
たとえば興味のある分野を「Web制作」「集客」から複数選びます。
この用語をもっと知る
もう少し詳しく
同じname属性を持つ候補はひとつのグループとして扱われます。
たとえば連絡方法を「メール」か「電話」のどちらか一つ選びます。
この用語をもっと知る
もう少し詳しく
文字と入力欄を正しく結び付けると、文字を押しても入力欄を選べ、読み上げにも意味が伝わります。
たとえばメールアドレス欄の前に「メールアドレス」と示します。
この用語をもっと知る
もう少し詳しく
type="submit"のボタンなどで作り、押すと入力値の確認や送信処理が始まります。
たとえばお問い合わせ内容を確認し、「この内容で送信」を押します。
この用語をもっと知る
もう少し詳しく
入力を始めると消えるため、必ず伝えたい項目名の代わりには使いません。
たとえば電話番号欄に「090-1234-5678」と入力例を表示します。
この用語をもっと知る
もう少し詳しく
対応する入力欄が空のまま送信されるのを、ブラウザが止めてくれます。
たとえば返信に必要なメールアドレス欄を必須にします。
この用語をもっと知る
もう少し詳しく
サーバーはnameと入力値の組み合わせを使って、どの項目に何が入ったかを判断します。
たとえばname="email"とした欄は、emailという名前で送信されます。
この用語をもっと知る
もう少し詳しく
GETは検索条件などURLに表れてもよい情報、POSTは登録や変更などを送るときによく使います。
たとえば商品検索はGET、お問い合わせの送信はPOSTを使うことが多いです。
この用語をもっと知る
もう少し詳しく
フォルダとほぼ同じ意味で、コード、画像、設定ファイルなどを役割ごとに整理します。
たとえばimagesディレクトリにサイトの画像をまとめます。
この用語をもっと知る
もう少し詳しく
検索結果、Webサイト、SNSなどに掲載し、関心や行動に合わせて届けられます。
たとえば検索したキーワードに合わせてサービスの広告を表示します。
この用語をもっと知る
もう少し詳しく
クローラーが集めたページをインデックスに整理し、検索内容に合う結果を並べます。
たとえばGoogleやBingで「Web用語」と検索します。
この用語をもっと知る
もう少し詳しく
検索結果での表示を改善するSEOと、検索連動型広告などを含む考え方です。
たとえばSEOで長期的な流入を育てながら、広告ですぐに告知します。
この用語をもっと知る
もう少し詳しく
日本のWeb制作では、商品やサービスを一ページで説明し、申し込みなどへ導くページも多く指します。
たとえば広告を押すと、特徴から申し込みまでを説明する長いページが開きます。
この用語をもっと知る
もう少し詳しく
文章、画像、ボタン、情報の順番などを見直し、訪問者が行動しやすくします。
たとえば申し込みボタンの文言を変え、A/Bテストで効果を比べます。
この用語をもっと知る
もう少し詳しく
検索エンジンなどがリンクをたどり、ページの内容や更新を見つけるために使います。
たとえば新しい用語ページをクローラーが見つけ、検索用に収集します。
この用語をもっと知る
もう少し詳しく
関連する情報へ移動しやすくし、検索エンジンにサイトの構造を伝える役割もあります。
たとえば用語「SEO」のページから「クローラー」へリンクします。
この用語をもっと知る
もう少し詳しく
他サイトから自分のサイトへ向かうリンクは、被リンクやバックリンクとも呼ばれます。
たとえば参考にした公的機関のページへリンクします。
この用語をもっと知る
もう少し詳しく
どのページが見られ、どこから訪れ、どんな行動につながったかを分析して改善に使います。
たとえばお問い合わせ前に多くの人が離れるページを見つけます。
この用語をもっと知る
もう少し詳しく
訪問者数、流入元、ページでの行動などを計測し、レポートで確認できます。
たとえばどのページからお問い合わせに進んだかを確認します。
この用語をもっと知る
もう少し詳しく
サイトのコードを毎回直接編集せずに、タグを追加・変更して動作条件を設定できます。
たとえば送信完了ページが表示されたときだけ計測タグを動かします。
この用語をもっと知る
もう少し詳しく
同じ人が複数ページを見たり、同じページを見直したりすると、その分も数えられます。
たとえば一人が3ページ見たら、3ページビューです。
この用語をもっと知る
もう少し詳しく
同じ人でも、時間を空けて訪れれば別のセッションとして数えられることがあります。
たとえば朝と夜に一回ずつ訪れたら、一人で2セッションになる場合があります。
この用語をもっと知る
もう少し詳しく
ブラウザや端末などを手がかりに推定するため、実際の人数と完全に一致するとは限りません。
たとえば同じブラウザで何度訪れても、一人として数える場合があります。
この用語をもっと知る
もう少し詳しく
表示された回数とは別の指標で、関心を持って次の行動をした量を見る目安になります。
たとえば広告が1,000回表示され、30回押されたらクリック数は30です。
この用語をもっと知る
もう少し詳しく
同じ人に何度表示されても、原則として表示ごとに数えます。
たとえば一人に同じ広告が3回表示されたら、3インプレッションです。
この用語をもっと知る
もう少し詳しく
同じ人が複数回見ても一人と数えるため、表示回数のインプレッションとは異なります。
たとえば広告が合計1,000回表示され、見た人が600人ならリーチは600です。
この用語をもっと知る
もう少し詳しく
使った広告費をコンバージョン数で割って求め、集客効率を確かめます。
たとえば10万円の広告で20件の申し込みがあれば、CPAは5,000円です。
この用語をもっと知る
もう少し詳しく
広告費をクリック数で割って求め、サイトへ一人呼び込む効率を見ます。
たとえば1万円で100クリックなら、CPCは100円です。
この用語をもっと知る
もう少し詳しく
表示回数を基準に、どれくらいの費用で広く届けられたかを比べる指標です。
たとえば5,000円で10万回表示なら、CPMは50円です。
この用語をもっと知る
もう少し詳しく
クリック数をインプレッション数で割り、広告や検索結果がどれだけ興味を引いたかを見ます。
たとえば1,000回表示されて30回クリックされたら、CTRは3%です。
この用語をもっと知る
もう少し詳しく
購入、お問い合わせ、資料請求など、サイトの目的に合わせて成果を定めます。
たとえば事業サイトでお問い合わせフォームの送信を成果として数えます。
この用語をもっと知る
もう少し詳しく
何を分母にするかは計測の目的で変わるため、数値を比べる前に定義をそろえます。
たとえば1,000セッションから50件の申し込みがあれば、CVRは5%です。
この用語をもっと知る
もう少し詳しく
広告経由の売上を広告費で割って求め、広告の回収効率を見ます。利益とは異なります。
たとえば10万円の広告で50万円の売上があれば、ROASは500%です。
この用語をもっと知る
もう少し詳しく
広告だけでなく、システム導入や事業投資などの効果を利益の観点から比べます。
たとえば100万円を投資し、それによる利益が20万円ならROIは20%です。
この用語をもっと知る
もう少し詳しく
検索エンジンがページの内容と検索意図をもとに並べた、広告以外の検索結果を指します。
たとえば検索結果の「スポンサー」表示がないリンクから訪れます。
この用語をもっと知る
もう少し詳しく
ボタンの文言など変える要素を絞り、同じ期間に分けて表示します。
たとえば申し込みボタンを青と緑の二案に分け、CVRを比べます。
この用語をもっと知る
もう少し詳しく
どのWebページや検索結果から訪れたかを知る手がかりになりますが、常に渡されるとは限りません。
たとえば別サイトの記事から来た訪問を、リファラーで確認します。
この用語をもっと知る
もう少し詳しく
HTMLのmeta要素に設定し、検索結果の説明文として使われることがあります。
たとえば用語ページの特徴を「初心者向けに意味と例を解説」と短く表します。
この用語をもっと知る
もう少し詳しく
ページの移転やURL変更時に、訪問者と検索エンジンを新しい場所へ案内します。
たとえば古いページへのアクセスを、新しい /words/ のURLへ転送します。
この用語をもっと知る
もう少し詳しく
監視、内容の更新、問い合わせ対応、バックアップ、不具合対応などを続けます。
たとえば毎月ページを更新し、表示の問題やセキュリティ情報を確認します。
この用語をもっと知る
もう少し詳しく
検索、記事、SNSなどを通じて、相手が関心を持った段階で訪れられる導線を整えます。
たとえば初心者向けの用語解説を公開し、検索から読者に来てもらいます。
この用語をもっと知る
もう少し詳しく
広告、電話、メールなどで、まだサービスを探していない相手にも情報を届けます。
たとえば対象に合う企業へ、サービス案内のメールを送ります。
この用語をもっと知る
もう少し詳しく
サイトの内容や訪問者に合わせた広告を表示し、条件に応じて運営者が収益を得ます。
この用語をもっと知る
もう少し詳しく
キーワード、地域、興味などの条件を設定し、検索広告や画像・動画広告を配信できます。
たとえば「ホームページ制作」と検索した人に広告を表示します。
この用語をもっと知る
もう少し詳しく
h1からh6までがあり、文章の階層と意味が読み手や検索エンジンに伝わるよう使います。ブラウザのタブなどのページタイトルを設定するtitle要素とは別です。
たとえば画面内の題名をh1、大きな章の見出しをh2にします。
この用語をもっと知る
もう少し詳しく
公開前の確認ページなどで使われますが、通信自体を守るためHTTPSと併用します。
たとえば制作中のサイトを、客先だけが確認できるようにします。
この用語をもっと知る
もう少し詳しく
画像、見出し、ボタンなどを組み合わせ、そのサイトが何を提供するかを短時間で伝えます。
たとえば事業の写真と「できること」を伝える見出しをトップに置きます。
この用語をもっと知る
もう少し詳しく
長い内容を折りたたみ、必要な部分だけを表示できます。開いている状態が分かる表現が必要です。
たとえばよくある質問で、質問を押すと回答が開きます。
この用語をもっと知る
もう少し詳しく
メインの内容とサイドバーのように、情報を一列または複数列に整理します。
たとえばパソコンでは3カラム、スマホでは1カラムにします。
この用語をもっと知る
もう少し詳しく
限られた幅で複数の情報を見せられますが、自動切り替えが早すぎると読みにくくなります。
たとえばおすすめ事例を左右のボタンで一件ずつ切り替えます。
この用語をもっと知る
もう少し詳しく
スマホの限られた画面にナビゲーションを収めるときによく使われます。
たとえば画面右上の三本線を押すと、ページ一覧が開きます。
この用語をもっと知る
もう少し詳しく
画面の大きさで範囲が変わるため、何のサイトかと次の行動を幅の違う端末で確認します。
たとえばスマホで開いたときに、サービス名と主な特徴がすぐ見えるようにします。
この用語をもっと知る
もう少し詳しく
年齢などの属性だけでなく、目的、困りごと、行動を根拠のある情報から整理します。
たとえば「専門用語に不慣れな小規模事業のWeb担当者」を代表的な利用者として考えます。
この用語をもっと知る
もう少し詳しく
ボタンの色を変えたり補足を表示したりできますが、タッチ操作では同じ状態がない場合があります。
たとえばパソコンでリンクにマウスを重ねると色が変わります。
この用語をもっと知る
もう少し詳しく
利用者がサーバーやソフトを自分で用意せずに使える考え方で、現在はSaaSという呼び方が広く使われます。
この用語をもっと知る
もう少し詳しく
商品紹介、カート、決済、注文管理など、購入に必要な機能を持ちます。
たとえば商品をカートに入れ、住所と支払い方法を入力して注文します。
この用語をもっと知る
もう少し詳しく
各ページにほぼ共通して置かれ、サイト全体の構成と重要な行き先を示します。
たとえばヘッダーに「サービス」「事例」「会社情報」「お問い合わせ」を並べます。
この用語をもっと知る
もう少し詳しく
会社概要、事業内容、採用、お知らせ、お問い合わせ窓口などをまとめます。
たとえば会社名を検索した人に、事業内容と連絡先を伝えます。
この用語をもっと知る
もう少し詳しく
人向けのページ一覧と、検索エンジン向けのXMLサイトマップがあります。
たとえば用語詳細ページのURL一覧をsitemap.xmlで検索エンジンに伝えます。
この用語をもっと知る
もう少し詳しく
ニュース、検索、社内ツール、地域情報など、多くのコンテンツへ移動しやすくまとめます。
たとえば社内ポータルから勤怠、経費、マニュアルへ移動します。
この用語をもっと知る
もう少し詳しく
クローラーに見つけられたページが分析され、検索結果の候補として登録されます。
たとえば新しい用語ページがインデックスされ、検索結果に出るようになります。
この用語をもっと知る
もう少し詳しく
滞在時間、クリック、シェア、繰り返しの利用など、媒体ごとに異なる指標で見ます。
たとえば記事を長く読み、関連ページへ進んだ訪問を関心の高い行動として見ます。
この用語をもっと知る
もう少し詳しく
解析ツールや設定で定義が異なるため、昔の「1ページだけ見て離れた割合」と単純に同じとは限りません。
たとえば広告から来た人がすぐ戻っていないかを、他の指標と一緒に確認します。
この用語をもっと知る
もう少し詳しく
検索連動型広告とも呼ばれ、検索意図に合う案内を広告枠に表示します。
たとえば「東京 ホームページ制作」の検索結果上部に広告を出します。
この用語をもっと知る
もう少し詳しく
ページごとに、その後別のページへ進まずサイトを離れた割合を確かめます。
たとえば入力フォームのページで離脱率が高くなっていないかを見ます。
この用語をもっと知る
もう少し詳しく
「お問い合わせ」「予約する」など、サイトの目的につながるボタンやリンク、案内文です。何ができるのかを短い言葉で伝え、押した先の内容とそろえます。
たとえばサービスの説明を読んだ人へ、「無料相談を予約する」というボタンを置きます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページの目的と対象者を踏まえ、主なCTAの文言・配置・押した先を提案してください。誤解を招く表現を避け、スマホでも行動が分かる案にしてください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページの目的・対象者・現在の構成:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
情報の順番、列の数、揃え方、余白を決めることで、読みやすさと使いやすさを整えます。同じ内容でも、パソコンとスマホで適した配置は変わります。
たとえばパソコンでは写真と説明を横に並べ、スマホでは写真の下に説明を置きます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画面を、情報の優先順位・読みやすさ・操作のしやすさから見直してください。PCとスマホそれぞれの配置案を最大3件提案してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
目的・画面仕様またはコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
見出しと文章、カードとカードなど、部品同士の距離を調整します。内側の余白であるパディングとは別です。CSSではmarginで指定します。
たとえば料金カードの下にマージンを付けて、次の説明との間を空けます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画面の外側の余白(マージン)を見直してください。部品同士の距離と情報のまとまりを整理し、PC・スマホに合う具体的な調整案を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画面仕様またはHTML・CSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
文字がカードの端に近すぎる、ボタンが窮屈に見える、といった状態を整えます。外側の余白であるマージンとは別です。CSSではpaddingで指定します。
たとえばボタンの文字の上下と左右にパディングを付け、読みやすく押しやすくします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画面の内側の余白(パディング)を見直してください。文字と枠の距離、ボタンの押しやすさ、スマホでの収まりを確認し、調整案を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画面仕様またはHTML・CSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
大きな画面で文章が横に長くなりすぎるのを防ぎます。幅を固定する指定とは異なり、狭い画面では上限より小さくできます。CSSではmax-widthで指定します。
たとえば本文の最大幅を960pxにし、スマホでは画面内に収まるようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページで、本文・画像・カードに適した最大幅を提案してください。大画面での読みやすさと、スマホで横にはみ出さないことを両立するCSS例も示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページ構成・現在のHTML・CSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
詰まりすぎると読みにくく、空きすぎると文章のつながりを追いにくくなります。CSSのline-heightは一行の高さを指定し、その結果として行間を調整します。
たとえば長い説明文を読みやすくするため、本文のline-heightを1.7にして確認します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の文章表示を、書体・文字サイズ・一行の長さと合わせて確認し、読みやすい行間を提案してください。本文と見出しを分け、文字を拡大した場合も考慮してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
表示する文章・書体・HTML・CSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
カード、画像、ボタンの雰囲気を整えます。丸める量をそろえると、サイト全体に統一感が出ます。CSSではborder-radiusで指定します。
たとえばカードと写真の角丸を8pxで統一し、ボタンはもう少し丸くします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画面のカード・画像・ボタンの角丸を整理してください。サイトの雰囲気と部品の役割を踏まえ、統一して使える数値とCSS例を提案してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
サイトの雰囲気・画面仕様またはCSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
「横:縦」を1:1や16:9のように表します。画像の細かさを表すピクセル数とは別です。比率を無理に変えると、人物や商品が横に伸びたり縦につぶれたりします。
たとえば商品写真を1:1の正方形でそろえ、画像自体は変形させずに表示します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画像と表示枠に適したアスペクト比を提案してください。画像を変形させず、PC・スマホで大切な部分が見える表示方法とCSS例を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画像の寸法・見せたい部分・表示枠の仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
不要な周囲を除いたり、表示枠に合わせたりするときに使います。元の画像ファイルを切り抜く方法と、ページ上で一部だけ見せる方法があります。顔や商品の大切な部分が切れないよう確認します。
たとえば横長の写真を正方形の枠に合わせ、人物の顔が残るよう見せる位置を調整します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画像を表示枠に合わせる方法を提案してください。人物や商品の重要な部分を残し、画像の変形を避け、PC・スマホ別のトリミング位置を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
対象画像・重要な部分・表示枠の寸法:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
URLの末尾に#と位置の名前を付けて、対応する見出しなどへ移動します。同じページの目次や問い合わせ欄への案内によく使います。別ページの特定の位置にもリンクできます。
たとえば「料金を見る」を押すと、同じページの料金欄へ移動するようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の長いページに、必要なアンカーリンクを設計してください。行き先の名称・id・リンク先を示し、固定ヘッダーに見出しが隠れないこととキーボード操作を考慮してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページ構成・HTML・ヘッダーの仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
フォーム送信だけでなく、表示の切り替えやお気に入り登録などにも使います。別のページへ移動するものは通常リンクを使い、見た目だけでなく役割に合うHTML要素を選びます。
たとえば「詳しく見る」は説明を開くボタン、「用語詳細へ」は別ページへ進むリンクです。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の操作部品を確認し、ボタンとリンクを役割に応じて使い分けてください。文言・操作後の状態・キーボード操作を含む改善案とHTML例を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
部品の目的・操作後の動作・現在のコード:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
背景と文字の色が近すぎると、読みにくくなります。明暗の差だけでなく、文字の大きさや太さも考えて確認します。状態や意味を、色だけで伝えないことも大切です。
たとえば白背景に薄いグレーの文字を置く場合、読める明暗差があるか確認します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の文字・背景・操作部品の配色を確認してください。判定できる箇所は色コードと文字サイズからコントラストを検証し、読みやすい代替色を提案してください。色だけで状態を伝えない案も示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
色コード・文字サイズ・画面仕様:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
Tabキーなどでリンクや入力欄へ移動すると、その部品が操作対象になります。枠や色の変化で現在地を見えるようにします。マウスを重ねるホバーとは異なります。
たとえばTabキーでボタンへ移動したとき、周囲に枠が表示されるようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画面をキーボードだけで操作する場合を確認してください。移動順・現在位置の見え方・開閉後の移動先を整理し、フォーカスを隠さない改善案とコード例を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
操作の流れ・現在のHTML・CSS・JavaScript:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
アイコンの絵の大きさと、実際に押せる範囲は同じとは限りません。操作範囲と周囲の間隔を確保すると、スマホでも押し間違えにくくなります。
たとえば小さな★アイコンの周囲にも押せる範囲を作り、隣のボタンと間隔を空けます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のスマホ画面で、タップ領域の大きさと間隔を確認してください。見た目のアイコン寸法と実際の操作範囲を区別し、押し間違いを減らす調整案を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画面仕様・部品の寸法・HTML・CSS:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ページの読み込みを軽くするために使います。表示上の大きさを小さくするだけでは、ファイル容量は減りません。用途に合う画像形式と設定を選び、画質も確認します。
たとえば大きな商品写真を、見た目を確認しながら圧縮して掲載します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の画像の用途・寸法・容量を確認し、画質を保ちながら軽くする方法を提案してください。圧縮・寸法変更・形式変換を区別し、実施後に比較する項目も示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画像形式・寸法・容量・掲載する大きさ:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ページタイトルとして、ブラウザのタブや検索結果の題名に関わります。画面内の見出しであるh1とは別です。ページごとに内容を表す題名を付けますが、検索結果では別の表現に変わることもあります。
たとえば問い合わせページのtitle要素を「お問い合わせ|会社名」と設定します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページごとに、内容を正確に表すtitle要素の文案を提案してください。画面内のh1と区別し、同じ題名の重複やキーワードの詰め込みを避けてください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
各ページの目的・内容・サイト名:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
.jpgと.jpegは同じ形式の拡張子です。容量を小さくしやすい一方、圧縮の設定によって画質が落ちます。背景の透過には対応しないため、用途に合う形式を選びます。
たとえば風景や人物の写真をJPEGで保存し、画質と容量のバランスを確認します。
この用語をもっと知る
もう少し詳しく
文字や図形、背景を透明にした画像に使われます。写真では容量が大きくなることもあります。透過できる形式はPNGだけではないため、画質・用途・容量で選びます。
たとえばロゴの周囲を透明にしたPNGを、色の付いた背景の上に表示します。
この用語をもっと知る
もう少し詳しく
単純なロゴやアイコンなどに向き、拡大しても輪郭をきれいに表示できます。写真向けの形式ではなく、複雑さによって容量も変わります。外部から受け取ったSVGは、安全性も確認して使います。
たとえば同じSVGのロゴを、スマホでは小さく、パソコンでは大きく表示します。
この用語をもっと知る
もう少し詳しく
写真や透過画像などを扱え、画質を変える圧縮と、元の情報を保つ圧縮の両方に対応します。必ずJPEGやPNGより小さくなるわけではないため、実際の素材で見比べます。
たとえば商品写真をWebPへ変換し、元のJPEGと画質・容量を比較します。
この用語をもっと知る
もう少し詳しく
表示位置に近づいてから読み込むことで、最初に必要なデータを減らします。最初から見えるメイン画像まで遅らせると、かえって表示が遅くなることがあるため、対象を選びます。
たとえばページ下部の事例写真は遅延読み込みにし、上部のメイン画像はすぐに読み込みます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページの画像で、遅延読み込みにする対象を判断してください。最初から見えるメイン画像は一律に遅延させず、表示のずれと実施後の計測も考慮したコード例を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
画像配置・現在のHTML・表示速度の記録:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
検索での表示回数・クリック数、ページが検索に登録されているか、クロールの問題などを確認できます。サイト訪問後の行動を調べるGoogle Analyticsとは役割が異なります。
たとえば新しい用語ページの登録状況を確認し、サイトマップを送信します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のSearch Consoleのレポートを読み、検索表示とページ登録の改善点を優先度順に最大3件示してください。計測された事実と推測を分け、確認方法と次の作業を説明してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
対象URL・期間・レポート内容(個人情報は除く):
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
題名・説明・画像・URLなどをページに設定し、共有カードの表示に利用してもらいます。どの情報を使うかはサービスによって異なり、設定どおりの表示を必ず保証するものではありません。
たとえば記事を共有したとき、記事名と内容に合う画像が表示されるよう設定します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページの共有時に使うOGPの題名・説明・画像方針・URLを提案し、meta要素の例を示してください。ページの内容と一致させ、各共有先での確認方法も説明してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページ内容・公開URL・使用できる画像:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
確認用ページなど、検索結果に載せたくないページに使います。閲覧を防ぐ機能ではありません。クローラーがページ上の指定を読める必要があり、robots.txtでの巡回禁止とは区別します。
たとえば制作中の確認ページをnoindexにし、本公開するときは必要なページから解除します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のページ一覧から、検索に載せるページとnoindexにするページを整理してください。閲覧制限とは区別し、クローラーが指定を読めるか、本公開ページを誤って除外しないかを確認する手順を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページ一覧・公開方針・現在の検索設定:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
検索エンジンへ正規URLの候補を知らせ、重複したページの整理に役立てます。閲覧者を移動させるリダイレクトとは別で、検索エンジンが必ず指定どおりに選ぶとは限りません。
たとえばwwwあり・なしの同じページでは、wwwありのURLを代表として伝えます。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の重複URLと内容から、適切なcanonicalの候補を提案してください。リダイレクトとの役割を区別し、内部リンク・サイトマップとの整合性と確認手順を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
各URL・内容の違い・代表にしたい公開URL:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
ドメインの直下に置き、巡回の許可・禁止やサイトマップの場所を伝えます。検索への登録を確実に防ぐものでも、秘密の情報を守るものでもありません。設定ミスで公開ページの巡回を止めないよう確認します。
たとえばhttps://www.lifeseeds.biz/robots.txtに、用語集のサイトマップの場所を記します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の公開方針とrobots.txtを確認し、必要な修正案と確認手順を示してください。ファイルはドメイン直下を対象にし、公開ページの巡回を誤って止めないこと、秘密保護やnoindexの代わりにしないことを確認してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
公開URL・巡回方針・現在のrobots.txt:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
CMSの一つで、管理画面からページや記事を更新できます。テーマで表示を整え、プラグインで機能を増やせます。WordPress.orgで配布されるソフトウェアと、WordPress.comのサービスは区別します。
たとえば会社案内を固定ページで作り、ニュースを投稿として更新します。
この用語をもっと知る
もう少し詳しく
文字・色・配置・ページの表示方法などをまとめて整えます。ページ単位の表示を決めるテンプレートとは同じものではありません。テーマや編集方式によって、変更できる設定と操作場所が異なります。
たとえば利用中のテーマを確認してから、ロゴの表示サイズを変更します。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のWordPressテーマで、希望する表示変更の実現方法を提案してください。標準設定でできる範囲とコード変更を区別し、テーマ本体の直接編集を避け、戻せる手順と確認方法を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
テーマ名・編集方式・希望する変更・現在の設定:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
検索欄、カテゴリー一覧、メニューなどを、テーマが用意する場所に置けます。サイドバー以外に配置できるテーマもあります。テーマや編集方式によっては、サイトエディターなど別の画面で管理します。
たとえば記事上部に表示されるメニューが、本文ではなくウィジェットから出ている場合があります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のWordPressの表示をウィジェットで追加・変更する方法を説明してください。テーマと編集方式を先に確認し、該当する配置領域と安全な操作手順を示してください。メニュー本体など別の場所への影響も確認してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
テーマ名・管理画面の状況・変更したい表示:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
WordPressで、会社概要・サービス・問い合わせなどの継続的な情報に使います。「固定」は静的HTMLファイルという意味ではなく、内容はデータベースで管理されます。
たとえば「会社概要」は固定ページ、「今月のお知らせ」は投稿で作ります。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下の目的と情報から、WordPress固定ページの構成案を作ってください。見出し・文章の要点・必要な画像・次の行動を整理し、投稿との使い分けも確認してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
ページの目的・対象者・掲載する情報:
[ここに貼り付け]
この用語をもっと知る
もう少し詳しく
日付・カテゴリー・タグなどを使って記事を整理でき、通常は新しい記事から一覧に並びます。ここではSNS投稿やフォーム送信一般ではなく、WordPressの記事を指します。
たとえばイベントのお知らせを投稿し、カテゴリー「ニュース」に分類します。
この用語をもっと知る
もう少し詳しく
WordPressでは記事URLの構造も設定できます。URLの一部分であるスラッグとは区別します。公開後の変更は、既存リンクや検索に影響するため、必要な転送なども確認します。
たとえば記事のURLを読みやすく決め、公開後は不用意に変更しないようにします。
AIに相談してみる[ ]の部分を埋めて、そのまま使えます。
以下のサイトで、分かりやすく維持しやすいパーマリンク構造を提案してください。公開済みURLは不用意に変更せず、変更が必要な場合のリダイレクト・内部リンク・サイトマップの確認手順を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。
サイト構成・既存URL・公開状況:
[ここに貼り付け]
この用語をもっと知る
見つかりませんでした
短い言葉に変えるか、絞り込みをリセットしてみてください。
どこから読めばいい?まずは、この3つから。
Webページの基本は、役割の違う3つの技術でできています。