厳選・オープン・無料
Create
言葉を機能的なアプリ、サイト、ツールに変換するAIネイティブプラットフォーム。
aidev
01
デザイン DNA
AIネイティブアプリビルダークリエイティブ手軽
誰もがAIを使ってデジタルプロダクトを構築できる、遊び心とプロフェッショナリズムを兼ね備えたワークショップ。
02
カラー
#000000Ink
#18191BInk soft
#F9F9F9BG
#FFFFFFBG soft
#F2F2F2BG quiet
#6A6A6CMuted
rgba(187, 187, 187, 1)Line
クリーンで明るいニュートラルカラーを基調とし、フォトグラフィックなヒーローイメージと、プライマリアクションのコントラストとしてブラックを使用。
03
タイポグラフィ
transitional-serif · humanist-sans · monospace
- display
42px · 400 - heading
24px · 400 - body
16px · 400 - body-large
18px · 400
04
余白
4px
8px
12px
16px
20px
24px
30px
40px
4pxの基本间距を一定に保ち、セクション内にはゆとりのあるpaddingを設定。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 12px
lg · 20px
pill · 9999px
1px solid #BBBBBB
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えの単一カラムヒーローに続き、カードベースのセクションを配置。
07
モーションとインタラクション
150msmicro
300mssmall
700msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing
ホバー/クリック時の滑らかなトランジション · opacity変化のフェードイン
0.15秒のカラーバックグラウンドトランジション。 · トランジションによる即座のビジュアルフィードバック。
08
コンポーネント
- button 高コントラストのピル形状プライマリボタンと、より小さなセカンダリボタン。
- card 大きな画像を前面に出し、下に説明文を配置した、大きく丸みのあるカード。
- chip 明確には確認できないが、おそらくシンプルな丸みのある要素。
- input ヒーロー内にある、ユーザーのプロンプトを入力するための、大きく丸みのある白い入力フィールド。
- hero テキストと入力フィールドを中央に配置した、フルブリードのフォトグラフィック背景。
09
文体と禁止事項
- トーン 親しみやすく、力強く、かつ少し遊び心のあるトーン。
- 見出し セリフ体とサンセリフ体を混在させた、シンプルで直接的なステートメント。
- CTA 明確で行動を促すもの(例:「始めましょう」)。
- 純白の背景を使わない — スクリーンショットでは明るいグレー(#F9F9F9)の背景が使用されている。
- 純粋なサンセリフ体のロゴを使わない — スクリーンショットではブランド名の「Any」にセリフ体が使用されている。
- 鮮やかで彩度の高いアクセントカラーをプライマリ背景として使用しない — スクリーンショットではフルブリードのフォトグラフィーが使用されている。
- 主要要素に鋭角で四角いコーナーを使わない — スクリーンショットではカードや入力フィールドに20pxのborder-radiusが適用されている。
- 重く暗いシャドウを使わない — スクリーンショットでは非常に繊細で、低opacityのシャドウが使用されている。
- タイポグラフィを単色で均一にしない — スクリーンショットではディスプレイ用のセリフ体と本文のサンセリフ体のコントラストが示されている。
- 避ける: 説明のない技術用語
- 避ける: 不必要に複雑なレイアウト
- 避ける: 退屈で企業的な言葉遣い
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
言葉でアプリを構築するための、フレンドリーでAIネイティブなSaaSプラットフォーム。明るいグレー(#F9F9F9)または白(#FFFFFF)の背景、プライマリテキストとCTAにはブラック(#000000)、セカンダリテキストにはグレー(#6A6A6C、#ACADAE)の微妙なニュアンスを採用。タイポグラフィは、トランジショナルセリフ(ディスプレイ用)とヒューマニストサンセリフ(本文用)を組み合わせる。レイアウトは中央揃えで、クリーンかつスペースに満ちている。重要な禁忌:鋭角を避ける(最小8px radius)。重いシャドウを避ける。複雑なグリッドでインターフェースを雑踏させない。
en · zh-CN · zh-TW · ja · ko