厳選・オープン・無料
Aaply
チームがモバイルアプリをデザインし、ユーザー中心の製品体験を構築するためのコラボレーション・ツールです。
SaaSProductivityApp UIBold TypographyPlayful
01
デザイン DNA
コラボレーションモバイルファーストデザインツール人間中心
モバイルワイヤーフレーミングのためのFigma
02
カラー
#e6e51eAccent
#000000Ink
#f2f2f2BG
#ffffffBG soft
#c4c4c4Muted
rgba(0,0,0,1)Line
ハイコントラストな白黒を基盤とし、プライマリアクションには鮮やかで高彩度のイエロー・アクセントを配します。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
56px · 700 - headline
31px · 500 - body
16px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション間にたっぷりと余白を設け、清潔で開放的な印象を維持します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 16px
md · 30px
lg · 50px
pill · 3000px
1px solid black
rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなタイポグラフィとたっぷりとした縦方向の余白を持つ、中央揃えのコンテナ。
07
モーションとインタラクション
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
ページ読み込み時のフェードインとスライドアップ · hover時の色とシャドウのトランジション
背景色のトランジションと、box-shadowによる微妙な高さの変化。 · スケールや色の微細な変化による、即座のフィードバック。
08
コンポーネント
- button ハイコントラスト(塗りつぶしの黒またはイエロー)な、大きなピル型ボタン。角丸に制限はありません。
- card コンテンツセクション用の、大きく白い角丸コンテナ。
- chip 目立っては使用されていません。
- input 目立っては使用されていません。
- hero インラインで絵文字を含む中央揃えのヘッドライン。その下にプライマリーおよびセカンダリーCTAが配置されます。
09
文体と禁止事項
- トーン 遊び心があり、率直で、人間中心のトーン。
- 見出し 会話的で表現力豊か。テキストに絵文字を直接組み込むことが多い。
- CTA アクション重視で歓迎的な印象。シンプルで明確な言葉選び。
- ダークテーマは使用しない — スクリーンショットでは明るいグレー(#f2f2f2)の背景に黒テキストが使用されている
- 細く繊細なタイポグラフィは使用しない — スクリーンショットでは大胆で幾何学的なサンセリフのディスプレイテキストが使用されている
- 角の尖った四角形は使用しない — スクリーンショットでは大きく丸みを帯びたピル型ボタンや角丸カードコンテナが使用されている
- 控えめでくすんだアクセントは使用しない — スクリーンショットではプライマリアクションに鮮やかで高彩度のイエロー(#e6e51e)が使用されている
- 密に詰め込まれたレイアウトは使用しない — スクリーンショットではたっぷりとした余白と大きく中央揃えのコンテンツが使用されている
- インラインビジュアル要素を避けない — スクリーンショットではメインヘッドラインテキストに絵文字が直接統合されている
- 避ける: 専門用語
- 避ける: 冷たくコーポレートな表現
- 避ける: 複雑な文章構造
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、モバイルアプリデザインツールのための、遊び心あふれるハイコントラストなSaaSランディングページです。コアアイデンティティは、明るいグレー(#f2f2f2)の背景、鮮明な黒(#000000)のテキスト、プライマリアクション用の鮮やかで高彩度のイエロー(#e6e51e)のアクセントで構築されています。タイポグラフィは、大胆で幾何学的なサンセリフのディスプレイフォント(Poppins)と、クリーンなヒューマニスト・サンセリフの本文フォント(Inter)を組み合わせています。レイアウトはたっぷりとした余白、中央揃えのコンテナ、大きく丸みを帯びたピル型のUI要素を使用しています。重要な禁止事項:ダークモード、細いタイポグラフィ、角の尖った形状、控えめなアクセント、密に詰め込まれたレイアウト、絵文字のない無機質なヘッドラインは避けてください。デザインは表現力豊かで、人間中心、そしてコラボレーティブなモバイルワイヤーフレーミングに焦点を当てています。
en · zh-CN · zh-TW · ja · ko