メインコンテンツへスキップ

​
一般的な概念

  • AI (Artificial Intelligence): 機械、特にコンピューターシステムによって人間の知的な処理を模倣すること。学習・推論・問題解決などのタスクを可能にします。​
  • Prompt: AIモデルが出力を生成したり、特定のタスクを実行したりするよう指示するためのテキストや入力のこと。​ Lovable の中核機能の一つであり、アプリケーション内の特定のコンポーネントや要素を作成・変更する際に、このプロンプトを使用します。

​
Lovable 固有の用語

  • Chat Mode： Lovable は単にコードを生成するだけでなく、開発のあらゆるフェーズであなたをガイドするインタラクティブなアシスタントになります。ファウンダーが批判的に考え、効果的に計画し、効率的にデバッグし、自信を持ってリリースできるよう支援します。
  • Edit Mode： コンテンツやコードに変更・修正を加える操作。​
  • Edit： Tailwind ネイティブなビジュアルコントロールを使って、AI 主導で簡単に調整できるツールです。
  • History： 時間の経過とともに、アプリやコードへの変更を追跡・管理する仕組み。​
  • Knowledge： アプリの進化に合わせて変化し続ける「生きたドキュメント」に、重要なプロジェクトの詳細を記録します。
  • Labs： Lovable 内の実験的な機能群で、新規・革新的・開発中の機能をテストおよび紹介するためのエリアです。これらはいつでも変更されたり削除されたりする可能性があります。​
  • Remix： 既存の公開プロジェクトや自分のプロジェクトをリミックスできます。リミックスすると、プロジェクトの現在の状態を出発点として再利用し、その上に構築できます。新しいアイデアを試したり、調整を加えたり、元のバージョンを保ったまま別の変更で反復したりするのに最適な方法です。なお、Supabase が接続されているプロジェクトはリミックスできません。
  • Preview： 最終決定や公開の前に、ユーザーがインタラクティブにライブコンテンツや機能の動作を確認・体験できるようにします。
  • Diff： 2 つのファイルやコードのバージョン間の違いを表示する比較。​
  • /index： Web サイトやアプリのメインまたはデフォルトのページを指し、多くの場合 “index.html” や “index.js” という名前が付けられます。
  • Lovable API - Build with URL： Lovable API の Build with URL 機能を使うと、URL パラメータ経由でプロンプトや画像を渡してアプリケーションをプログラムで作成できます。これにより、Web サイト、社内ツール、自動化ワークフローとのシームレスな統合が可能になり、ユーザーは 1 クリックで Lovable アプリを生成できます。

​
プロダクトと開発の基本概念

​
プロダクトマネジメントと戦略

  • MVP (Minimum Viable Product) – アーリーアダプターのニーズを満たし、フルスケール開発の前にアイデアを検証するための、必要最低限の機能だけを備えたプロダクトのバージョン。
  • Roadmap – プロダクトのビジョン、方向性、今後追加予定の機能を時系列で示した大まかな戦略プラン。
  • Feature Request – プロダクトに新しい機能を追加するために、ユーザーやステークホルダーから寄せられる正式／非正式な提案。
  • User Story – エンドユーザーの視点から記述された、機能や要件に関する短くシンプルな説明。
  • User Journey: ユーザーがプロダクトやサービスの中で特定の目標を達成するために踏む、一連のステップ。
  • Persona: 調査に基づき、デザインや開発に関する意思決定を導くために定義された、ターゲットユーザーの架空の人物像。

​
エンジニアリングの基本概念

  • PRD（プロダクト要件ドキュメント）: プロダクトの目的、機能、仕様をまとめた、開発の指針となる包括的なドキュメント。​
  • API （Application Programming Interface）: 異なるサービス同士が通信するための仕組み。システム間でどのような情報を取得・送信できるかを定めたプロトコルだと考えるとわかりやすい。代表的な種類としては、多くのサイトで利用されている REST API と、より柔軟にデータをクエリできる GraphQL API がある。
  • リファクタリング（Refactor）: 挙動を変えずに既存コードの構造を見直し、可読性、保守性、パフォーマンスを改善するプロセス。
  • GitHub: Git を用いたバージョン管理と共同開発のための Web ベースのプラットフォーム。​

​
データとアナリティクス

  • A/B テスト – ユーザー行動に基づいて、どちらがより良い成果を出すかを判断するために、2つのバージョンのウェブページや機能を比較する手法。
  • コンバージョン率 – 会員登録や購入など、望ましいアクションを完了したユーザーの割合。
  • チャーン率 – 一定期間内にプロダクトの利用を停止したユーザーの割合。
  • リテンション率 – 時間の経過とともに、プロダクトの利用を継続しているユーザーの割合。
  • イベントトラッキング – 行動やエンゲージメントに関するインサイトを得るために、特定のユーザー行動（例：ボタンのクリック、フォーム送信）を計測・監視すること。

​
UI/UX およびフロントエンド開発のプレイブック

​
フロントエンド開発

  • フロントエンド: ソフトウェアアプリケーションのうち、ユーザーが直接操作する部分で、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）の要素を含みます。​
  • React: Meta（旧 Facebook）によって開発された JavaScript ライブラリで、特にシングルページアプリケーション向けのユーザーインターフェース構築に使われます。​
  • グラデーション: デザインにおいて、2 色以上の色や濃淡が徐々に変化していく表現。
  • Tailwind CSS: あらかじめ定義されたユーティリティクラスを幅広く提供する、オープンソースのユーティリティファーストな CSS フレームワーク。開発者はこれらのユーティリティクラスを要素に適用することで、HTML 内で直接カスタムデザインを組み立てられます。
  • デザインシステム: プロダクトやブランド全体で一貫性と統一性を保つための、再利用可能なコンポーネント、ガイドライン、標準の体系。

​
UI/UX デザインの基本概念

  • Accent Color（アクセントカラー）： デザイン内の重要な要素を強調するために使われる特徴的な色で、多くの場合はブランドのメインカラーと合わせたり補完したりして、視覚的な印象を高めます。​
  • Theme（テーマ）： 色、フォント、レイアウトなどを含む一貫したデザイン上の選択の組み合わせで、アプリケーションやウェブサイト全体の見た目とユーザー体験を形づくります。​
  • Responsive Design（レスポンシブデザイン）： さまざまなデバイスのサイズや向きに応じてコンテンツが自動的に最適化されるようにするウェブデザイン手法で、どの環境でも最適なユーザー体験を提供します。
  • Above the Fold（アバブ・ザ・フォールド）： ユーザーがスクロールせずに最初に目にするウェブページの領域で、注目を引き、重要な情報をすぐに伝えるうえで非常に重要です。​
  • CTA（Call to Action）： 「Sign Up」や「Learn More」のように、ボタンやリンクの形で表示されることが多い、ユーザーに特定のアクションを起こすよう促す要素です。​

​
ページ構造とナビゲーション

  • 見出し（タイトル）: コンテンツセクションを導入して整理するテキスト要素で、通常は複数レベル（例：H1、H2）で書式設定され、明確なコンテンツ階層を構築します。​
  • フッター: Webページの下部セクションで、一般的に連絡先情報、ナビゲーションリンク、法的な免責事項などの補足情報が含まれます。​
  • パンくずリスト: サイト階層内でのユーザーの現在位置を表示するナビゲーション補助で、横一列のリンクリストとして表現されることが多いです。​
  • Favicon（ファビコン） – ブラウザのタブ、ブックマーク、検索結果に表示される小さなアイコンで、通常はブランドやWebサイトを表します。
  • Meta Title（タイトルタグ） – 検索エンジンの結果やブラウザのタブに表示されるWebページのタイトルで、SEOとユーザーのクリック率に影響します。
  • Meta Description – 検索エンジン結果に表示されるWebページ内容の短い要約で、検索で見つけやすくし、ユーザーのエンゲージメント向上を目的としています。
  • Canonical URL – 検索エンジンのインデックスで重複コンテンツの問題を避けるために、優先されるWebページのバージョンを指定するためのタグです。
  • URL Slug（スラッグ） – 特定のページを判別する、人間が読める形式のURLの一部（例：example.com/product-name）。
  • サイトマップ – Webサイト内のページ一覧を提供する構造化ファイル（XML または HTML）で、検索エンジンによる効率的なインデックス作成を支援します。
  • ナビゲーションバー（Nav Bar） – Webサイトの主要セクションへのリンクを提供する水平または垂直のメニューで、スムーズなナビゲーションを可能にします。
  • スキップリンク – 繰り返し表示されるコンテンツを飛ばして、メインコンテンツに直接移動できる隠しリンクで、アクセシビリティを向上させます。
  • ページネーション – コンテンツを複数ページに分割する方法で、ブログ、検索結果、商品一覧などでよく使われ、ユーザー体験を改善します。
  • アンカーリンク – 新しいページを読み込むのではなく、同一ページ内の特定セクションへユーザーを移動させるハイパーリンクです。
  • 404ページ – 存在しないURLにアクセスしようとしたときに表示されるカスタムエラーページで、関連するコンテンツへの導線を提供します。

​
通知とフィードバック要素

  • Toast: ユーザーにアクションの結果や簡単なフィードバックを一時的に知らせる、短時間表示で邪魔になりにくい通知。​
  • Snackbar – Toast に似ていますが、通常は画面下部に表示され、（削除したアイテムに対する「Undo（元に戻す）」などの）オプションの操作を含めることができます。
  • Tooltip – 要素にホバーしたりフォーカスしたりしたときに追加情報を表示する、小さなポップアップ。
  • Badge – 通知や件数、ステータス更新を示すために、アイコンやボタン上でよく使われる小さな視覚的なインジケーター。
  • Loading Spinner (Loader) – ページの読み込みやフォーム送信など、進行中の処理を表す視覚的なインジケーター。
  • Progress Bar – タスクや処理の完了割合を示す横方向のバー。
  • Skeleton Loader – 読み込み完了までの間、最終的なコンテンツのレイアウトを模したプレースホルダー UI で、体感的なパフォーマンスを向上させます。

​
オーバーレイとポップアップ

  • Popover（ポップオーバー）： 特定のUI要素に関連する追加情報やオプションを一時的に表示するオーバーレイで、通常はユーザー操作に応じて表示されます。​
  • Dialog（ダイアログ / モーダル）： メインコンテンツの前面に表示され、ユーザーの注意を引くウィンドウで、多くの場合、メインのインターフェースに戻る前に何らかの操作が必要になります。
  • Drawer（ドロワー / サイドバー・パネル） – 画面の端からスライドインして表示されるパネルで、メインコンテンツを遮らずにナビゲーションオプションや設定を表示します。
  • Lightbox（ライトボックス） – 背景を暗くしてフォーカスさせながら、画像やメディアを拡大表示するモーダルウィンドウです。
  • Alert Box（アラートボックス） – エラーや警告などの重要な情報をユーザーに知らせる、システムまたはアプリケーションによって表示されるメッセージボックスです。
  • Button: フォームの送信やダイアログの表示など、アクションやイベントを開始するためのクリック可能な要素。
  • Switch (Toggle): オン／オフなど、2つの状態を切り替えられるトグル型のコントロールで、物理スイッチのような見た目であることが多い。
  • Tabs – 同一のインターフェース内でコンテンツを別々のビューに整理し、ページ遷移せずにセクションを切り替えられるコンポーネント。
  • Stepper (Wizard) – 複数ステップのプロセスに使用され、現在のステップを表示しながら完了までユーザーをガイドするコンポーネント。
  • Pagination – コンテンツをページに分割するUIパターンで、検索結果やコンテンツ量の多いアプリケーションでよく使われる。
  • Breadcrumb – サイト階層内でのユーザーの現在位置を表示するナビゲーション補助で、横並びのリンク一覧として表現されることが多い。
  • Accordion – コンテンツを動的に表示・非表示にするために、展開または折りたたみができるセクション。
  • Dropdown Menu – ボタンやフィールドのクリックまたはホバー時に表示されるオプションのリストで、ナビゲーションや選択に多用される。

​
フォームと入力要素

  • Form: 連絡先情報や検索クエリなど、ユーザーがデータを送信できるように入力フィールドを構成したものです。​
  • Radio Group: 複数の選択肢の中から 1 つだけ選択できる、関連するラジオボタンのセットです。
  • Checkbox: オプションを選択または解除するために、ユーザーがチェックしたり外したりできるインタラクティブなボックスで、セット内で複数選択が可能です。​
  • Text Field (Input Field) – 検索バー、ログインフォーム、コメント欄などで、ユーザーがテキストを入力できる基本的な UI 要素です。
  • Text Area – 複数行のテキスト入力向けに設計された大きめの入力フィールドで、メッセージやフィードバックフォームによく使われます。
  • Select (Dropdown Select Box) – 定義済みリストから 1 つのオプションを選択できる UI 要素で、多くの場合ドロップダウンとして表示されます。
  • Date Picker – ユーザーが日付を手入力する代わりに、カレンダーから日付を選択できる UI 要素です。
  • Slider (Range Selector) – トラック上のハンドルをスライドさせて、範囲内の値を設定できるコントロールです。
  • File Upload Field – ユーザーが自分のデバイスからファイルを選択してアップロードできるコンポーネントです。
  • Autocomplete (Typeahead Search) – ユーザーの入力に合わせて候補を動的に提案し、検索時の使いやすさを高めるテキスト入力フィールドです。
目指したい特定のスタイルを説明するために、これらの用語をどのプロンプト内でも自由に使うことができます。
  • Neobrutalism（ネオブルータリズム）： 未加工でラフな要素、太いタイポグラフィ、強いコントラストを特徴とし、20世紀半ばのブルータリズム建築からインスピレーションを得たWebデザインのトレンドです。​
  • Retro（レトロ）： 過去の年代のスタイルやモチーフ、要素を取り入れ、ノスタルジーやヴィンテージ感を喚起するデザインです。​
  • Hacker（ハッカー）： DIYやオープンソース文化を反映したテイストで、等幅フォント、ダークな背景、ターミナル風インターフェースなどによく見られるスタイルです。​
  • Glass（Glassmorphism）： 半透明でフロストガラスのような要素に、さりげない影やボーダーを組み合わせて奥行きを表現するデザインスタイルです。​
  • Nudy（ヌーディー）： 肌色系やニュートラルカラーのパレットを活用し、柔らかく控えめな印象をつくるミニマルなデザイン手法です。​

​
デザインとアセットのリソース

  • 21st.dev: Tailwind CSS と Radix UI を基盤とした、ミニマルでモダンかつ再利用可能な React UI コンポーネントを提供するオープンソースのコミュニティレジストリで、デザインエンジニアが洗練されたユーザーインターフェースをより効率的に構築・提供できるよう設計されています。
  • Dribbble: デザイナーやクリエイティブ職のプロフェッショナルが作品を公開し、デザインのインスピレーションを得て、クライアント候補やコラボレーターとつながるための代表的なオンラインコミュニティです。
  • Noun Project: 無料のアイコンやストックフォトを多数提供するプラットフォームで、さまざまなプロジェクト向けのビジュアルリソースにアクセスできます。
  • SVG Repo: 50 万点以上のオープンライセンスの SVG ベクターとアイコンを収録した包括的なライブラリで、さまざまなプロジェクトに適したグラフィックを検索・閲覧・編集・ダウンロードできます。
  • Google Fonts: Web 向けに最適化されたフォントの無料ライブラリで、デザイナーや開発者がプロジェクトのタイポグラフィを強化するための幅広いフォントオプションを提供します。
  • Typewolf: トレンドの書体を紹介し、キュレーションされたフォントリストを提供することで、デザイナーがプロジェクトに最適なフォントの組み合わせを選べるよう支援するリソースです。

​
バックエンド開発とデータベース

​
バックエンドの基礎

  • バックエンド: アプリケーションのサーバー側インフラで、データの処理・保存やビジネスロジックを担います。​
  • Supabase: Postgres データベース、認証、即時に利用できる API、リアルタイム機能を提供するオープンソースの Backend-as-a-Service プラットフォームです。
  • Webhook – 特定のアクションが発生した際に、外部のアプリケーションへ通知するイベント駆動型の HTTP コールバックです。

​
データベースの管理とクエリ

  • CRUD (Create, Read, Update, Delete)： データベースやアプリケーション内のデータに対して実行される、4つの基本的な操作。​
  • SQL (Structured Query Language)： リレーショナルデータベースを管理・操作するために設計されたドメイン固有のプログラミング言語で、データのクエリ、更新、整理といったタスクを実行できる。
  • PostgreSQL – スケーラビリティ、拡張性、ACID 準拠で知られる、高機能なオープンソースのリレーショナルデータベース。

​
Supabase 固有のコンセプト

  • Edge Function: サーバーサイドで動作する TypeScript 製の関数で、ユーザーの近くにあるエッジにグローバルに分散配置されます。Webhook を受信したり、Supabase プロジェクトを Stripe、Anthropic、Resend などのサードパーティサービスと連携したりするために利用できます。
  • RLS (Row-Level Security): データベースの機能で、ユーザーのロールや属性に基づいてテーブル内の特定の行へのアクセスを制御できます。つまり、きめ細かな認可ルールを設定でき、固有のビジネスニーズに合った複雑な SQL ルールを記述できます。
  • Storage: 画像、動画、ドキュメントなど、あらゆる種類のファイルを保存および管理するためのサービスまたはシステムです。
  • Bucket: Supabase Storage において、bucket はファイルやフォルダを整理するための個別のコンテナで、アクセスモデル（公開または非公開）を決定し、最大ファイルサイズや許可されるコンテンツタイプといったアップロード制限を設定します。
  • Endpoint: Supabase のコンテキストでは、クライアントが RESTful API 呼び出しを通じてデータベースとやり取りできる特定の URL を指し、データの作成、読み取り、更新、削除といった操作を可能にします。
  • Authentication Provider: ユーザーの認証情報を検証し、アプリケーションやシステムへの安全なアクセスを可能にする仕組みやサービスです。Supabase の場合、Authentication Provider には、パスワードベースのログイン、マジックリンク、ワンタイムパスワード（OTP）、ソーシャルログイン、Single Sign-On（SSO）連携などが含まれており、柔軟かつ安全なユーザー認証を実現します。

​
セキュリティと認証

  • OAuth – Google、Facebook、GitHub などのサードパーティのサービスを使ってアプリケーションにログインできるようにする、広く利用されている認証プロトコルです。
  • 二要素認証 (2FA) – アカウントへアクセスする前に、2種類の本人確認要素の入力を求めるセキュリティ対策です。
  • CORS (Cross-Origin Resource Sharing) – どのウェブサイトやアプリケーションがサーバー上のリソースへアクセスできるかを制御するセキュリティポリシーです。