厳選・オープン・無料
Gt Maru
フレンドリーなキャラクターを持つ、遊び心と温かみのある角丸のタイポグラフィスペシメン。
TypographyPlayfulConsumerWarmCalm
01
デザイン DNA
フレンドリー遊び心角丸日本風タイポグラフィ
柔らかく角丸のキャラクターのような、温かみのあるフレンドリーで遊び心のあるタイプスペシメン。
02
カラー
#FFC800Accent
#000000Ink
#0068FFBG
#B3D9FFBG quiet
#83BBFFMuted
rgba(0,104,255,1.0)Line
遊び心のあるピンクのアクセントと鮮明な黒のアウトラインを伴う、ハイコントラストのプライマリーブルーとイエロー。
03
タイポグラフィ
rounded-sans · rounded-mono
- display
158px · 400 - heading
53px · 400 - body
27px · 400 - caption
16px · 400
すべてのタイポグラフィは、角丸の末端とフレンドリーでカジュアルなトーンが特徴のGT Maruファミリーで設定されます。 · 大きな表示テキストの文字間隔はネガティブに設定し、緊密で一体感のある単語の形状を維持します。 · 本文の行間は十分に広く(約1.15-1.2)、可読性を確保します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
広々とした有機的なリズム。コンテンツブロックの周りに余裕のあるpadding(30px)を確保。
05
サーフェス (角丸 / 影 / 罫線)
sm · 5px
md · 10px
lg · 30px
pill · 999px
形状とテキストを定義する主要なデザイン要素として使用される、太い黒のアウトライン(2px-3px)。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
タイポグラフィが自由に息を吸えるよう、多量のネガティブスペースを備えた、広々としたオープンレイアウト。
07
モーションとインタラクション
100msmicro
250mssmall
400msmedium
cubic-bezier(1, 0, 1, 1)easing
レイアウト変化のための滑らかなmargin-topトランジション。 · UI要素のための繊細なopacityとtransformトランジション。
インタラクティブであることを示す標準的なポインターカーソル。 · 標準的なポインターアクション。
08
コンポーネント
- button 白い背景、黒のテキスト、黒のボーダーを持つ、シンプルな角丸長方形(5px radius)。
- card テキストコンテンツ用の、太い黒いボーダーを持つ白い角丸長方形(30px radius)。
- hero 太くアウトラインされたイエローのタイポグラフィと遊び心のあるキャラクターイラストを配した、フルワイドのプライマリーブルー背景。
09
文体と禁止事項
- トーン 角丸のタイポグラフィを反映した、フレンドリーでカジュアル、親しみやすいトーン。
- 見出し 巨大でアウトラインが特徴の、表現力豊かなスタイル。
- CTA シンプルで控えめな角丸長方形スタイル。
- 鋭角的で幾何学的なサンセリフフォントは使用しない — スクリーンショットは角丸でフレンドリーな末端を示しています。
- 細く控えめなボーダーは使用しない — スクリーンショットは太く目立つ2px-3pxの黒のアウトラインを示しています。
- 暗いまたは控えめなカラーパレットは使用しない — スクリーンショットは鮮やかなプライマリーブルーとイエローを使用しています。
- 密集した、ごちゃごちゃしたレイアウトは作成しない — スクリーンショットは広いスペーシングとネガティブスペースを特徴としています。
- 影で立体感を表現しない — スクリーンショットは实地のカラーや太いアウトラインに依存しています。
- セリフ体のタイポグラフィは使用しない — スクリーンショットはカスタム角丸サンセリフファミリーのみを使用しています。
- 避ける: 形式的または堅苦しい言葉遣い。
- 避ける: 鋭角的またはアグレッシブなビジュアル要素。
- 避ける: 密集したまたはごちゃごちゃしたレイアウト。
- 避ける: セリフ体または幾何学的なサンセリフ体のタイポグラフィ。
- 避ける: 控えめすぎたり、暗すぎたりするカラーパレット。
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
GT Maruタイプスペシメンにインスパイアされた、遊び心と温かみのあるフレンドリーなインターフェースをデザインしてください。鮮やかなプライマリーブルー(#0068FF)を背景に、明るいイエロー(#FFC800)をアクセントとして使用します。タイポグラフィは角丸サンセリフのみとし、太い黒のアウトラインと十分な文字間隔を確保します。レイアウトはオープンで広々としており、多量のネガティブスペースを確保します。重要な禁止事項:鋭角的で幾何学的なサンセリフフォント、細く控えめなボーダー、暗いまたは控えめなカラーパレット、密集したレイアウト、影、セリフ体のタイポグラフィは避けてください。全体的な雰囲気はカジュアルで親しみやすく、ビジュアル的には柔らかく、フレンドリーなキャラクターのようです。
en · zh-CN · zh-TW · ja · ko