厳選・オープン・無料
Dialitdown Co Nz
遊び心のあるキャラクターを駆使し、温かい色使いでポジティブなオンライン行動を促す、エディトリアルサイト。
PlayfulEditorialConsumerWarmCuration
01
デザイン DNA
親しみやすいイラスト入りエディトリアルネットマナー遊び心のある
デジタルマナーについての、明確なレトロで遊び心のある個性を持つ、親しみやすいイラスト入りガイドブック。
02
カラー
#222222Ink
#A3F7F7BG
#F6F4EABG soft
rgba(34,34,34,1.0)Line
温かみがあり、親しみやすく、イラスト調で、激しいコントラストや攻撃的なネオン色调を避けます。
03
タイポグラフィ
transitional-serif · humanist-sans
- display
68px · 400 - body
16px · 400
見出しにはコントラストの高いトランジショナルセリフ体を使用します。 · 本文にはクリーンなsystem-uiまたはヒューマンサンセリフを使用します。 · 十分な行間を確保し、タイポグラフィをクリーンで読みやすく保ちます。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション間およびコンテンツブロック内に、十分な垂直方向の余白を設けます。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
プライマリインクカラーの細い実線ボーダー。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えの単一カラムコンテンツを基本とし、メディアやポスター用にグリッドへ変化します。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
スクロール時のフェードイン · hoverステートのトランジション · シンプルなキャラクターアニメーション
ボタンやインタラクティブ要素における、色の反転または繊細なスケール変化。 · わずかな下方向への移動や色の変化を伴う、アクティブステート。
08
コンポーネント
- button 高コントラストテキストを持つ、ピル型ボタン。
- card 本文背景色、太字タイポグラフィ、中央にイラストを持つ、ポスタースタイルのカード。
- chip ハッシュタグやキーワード用のオーバルタグ。
- input 細いボトムボーダーを持つ、ミニマルなテキストフィールド。
- hero その上または下に目立つキャラクターアイラストを配置した、大きな中央揃いの見出し。
09
文体と禁止事項
- トーン 親しみやすく、温かく、励ますような雰囲気。
- 見出し 言葉と遊び心のあるビジュアルを組み合わせた、太字でイラスト調の表現。
- CTA 直接的で惹きつけるような表現で、ハッシュタグや短いフレーズをよく使用します。
- ダークモードを使用しないでください — サイトは明るくカラフルな背景に依存しています。
- 激しいネオンカラーを使用しないでください — カラーパレットは柔らかく、暖かく、親しみやすいものです。
- 見出しに太めのサンセリフを使用しないでください — 見出しにはトランジショナルセリフ体を使用します。
- 複雑なマルチカラムグリッドを使用しないでください — レイアウトは基本的に中央揃いの単一カラムです。
- リアルな写真を使用しないでください — サイトはカスタムキャラクターアイラストを使用しています。
- 行間を詰めないでください — 十分な余白と行間が重要です。
- 避ける: 攻撃的な言葉遣い
- 避ける: 複雑な専門用語
- 避ける: 分量の多いテキストブロック
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
ポジティブなデジタル行動を促す、親しみやすく遊び心のあるエディトリアルサイトをデザインします。#A3F7F7や#F6F4EAのような明るく柔らかい背景色をダークインク（#222222）と組み合わせます。プライマリの見出しにはトランジショナルセリフ体を、本文テキストにはクリーンなヒューマンサンセリフを使用します。カスタムの遊び心のあるキャラクターアイラストを主要なビジュアルモチーフとして取り入れます。ダークモード、激しいネオンカラー、複雑すぎるグリッドは避け、代わりに十分な余白と中央揃いの単一カラムレイアウトに焦点を当て、遊び心のあるタイポグラフィとイラストを際立たせます。雰囲気は温かく励ますようなものにし、攻撃的な言葉遣いや分量の多いテキストブロックは避けます。すべてのインタラクティブ要素に滑らかなトランジションと明確なhoverステートがあることを確認します。
en · zh-CN · zh-TW · ja · ko