厳選・オープン・無料

Lpalo

個性的な子供向けポッドキャストに特化した、シュールでタイポグラフィを重視したプラットフォーム。

01

デザイン DNA

遊び心のある子供の絵本に、現代的なデジタルイラストレーションを融合させたもの。

02

カラー

温かみのあるパステルの背景に、高コントラストの黒タイポグラフィと遊び心のあるフラットなカラーアクセントを組み合わせる。

03

タイポグラフィ

slab-serif · humanist-sans

• display120px · 800
• body16px · 400
• label12px · 500

ディスプレイ用フォントは、巨大で視線を引く見出しにのみ使用する。 · 本文テキストは読みやすさを重視し、クリーンで無機質なサンセリフ体を維持する。 · ナビゲーション項目は、カプセルボタンと標準リンクを混在して使用する。

04

余白

大きなタイポグラフィが息づけるよう、余裕のあるオープンなスペーシング。

05

サーフェス (角丸 / 影 / 罫線)

ボタンやイラストには、太い2pxの黒い実線アウトラインを使用

06

レイアウト

要素が重なり、イラストが散りばめられた、遊び心のある非対称レイアウト。

07

モーションとインタラクション

UI要素のバウンシングなスプリング遷移。 · 背景イラストの微かな浮遊アニメーション。

ボタンの色の変化と微かなスケーリング。 · カスタムバウンシングイージングによる、バネのような感触フィードバック。

08

コンポーネント

• button 白またはアクセントカラーで塗りつぶし、太い黒いボーダーを持つピル形状のボタン。
• card ティール色の形状で暗示され、太いアウトラインと遊び心のあるイラストが特徴。
• chip サブナビゲーションに使用する小さなピル形状のラベル。
• hero パステルの背景に浮遊するイラストと共に配置された、巨大で左揃えのスラブセリフの見出し。

09

文体と禁止事項

• トーン 遊び心があり、シュールで、非常にエネルギッシュ。
• 見出し 大胆で、型破りで、大規模。
• CTA 明確で、実行可能で、ピル形状のボタンで提示。

• 標準のシステムフォントを使用しない — スクリーンショットでは太いスラブセリフとヒューマンサンスが使用されている。
• 微かな影を使用しない — スクリーンショットでは太い2pxの黒いアウトラインを持つフラットデザインが使用されている。
• 白い背景を使用しない — スクリーンショットでは一貫して温かみのあるパステルピンクの背景が使用されている。
• 細く繊細なタイポグラフィを使用しない — スクリーンショットでは極太で重厚なフォントウェイトが使用されている。
• 剛性のある厳密に揃ったグリッドを使用しない — スクリーンショットでは遊び心があり、重なり合う非対称なレイアウトが示されている。
• くすんだ灰色がかったカラーを使用しない — スクリーンショットではオレンジやティール色のような鮮やかで彩度の高いアクセントが使用されている。
• 避ける: Corporate
• 避ける: Stiff
• 避ける: Minimalist
• 避ける: Serious
• 避ける: Jargon

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko