厳選・オープン・無料

June

創業者主導で温かみのあるエディトリアルページで、手書きのパーソナルなタッチを交えて会社の買収を発表しています。

01

デザイン DNA

上質の便箋に書かれた手書きの手紙

02

カラー

柔らかいオフホワイトの背景に対し、高コントラストの深いネイビーテキストと、単一の鮮やかなインディゴアクセント。

03

タイポグラフィ

geometric-sans · humanist-sans

• display56px · 900
• heading40px · 700
• subheading18px · 400
• caption12px · 700

04

余白

段落やセクション間に適度な垂直方向のパディングを設け、クリーンで息のやすいレイアウトを維持。

05

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

視覚的な重みを加えずにエッジを定義する、薄いグレー（#E9ECEF）の微細な1pxボーダー。

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 2px 10px 0px rgba(13, 19, 27, 0.1) · 0px 0px 2px 0px rgba(13, 19, 27, 0.2)

06

レイアウト

メインコンテンツにはシングルカラムのエディトリアルレイアウトを採用し、その下にフル幅のプロモーションバナーセクションを配置。

07

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

インタラクティブ要素上のスムーズなbackground-colorトランジション。

リンクやインタラクティブ要素上の微細な背景色の変化やopacityのシフト。 · すべてのクリック可能要素に対する標準的なポインターカーソル。

08

コンポーネント

• button ボーダーや背景のない、ミニマリストなテキストベースのナビゲーションリンク。
• card メイン記事コンテンツ用の、大型20pxの角丸を持つ柔らかいインディゴ色調のカード（#F0F0FE）。
• chip 視覚的なメタファーとして使用される、遊び心のあるデコラティブな航空券グラフィック。
• hero 深いネイビー色で巨大な中央揃えの見出し、その後に続く、大きな明るい色調のコンテンツカード。

09

文体と禁止事項

• トーン 透明で誠実、創業者主導。
• 見出し 大きく太字で感情に訴えかけるスタイル。ビジネスの裏にある人的ストーリーに焦点を当てる。
• CTA 控えめで情報的。攻撃的なマーケティング言語は避ける。

• 純粋なホワイト（#FFFFFF）の背景を使用しない — スクリーンショットでは、やや温かみのあるオフホワイト（#FAFAFA）が使用されている。
• シャープで四角いコーナーを使用しない — スクリーンショットでは、メインカードに大きな20pxのボーダーラジウスが採用されている。
• 冷たく無機質な美学を使用しない — スクリーンショットでは、コンテンツエリアに温かみのある、歓迎するような色調（#F0F0FE）が使用されている。
• デコラティブな高コントラストのカラーアクセントを使用しない — スクリーンショットでは、単一の柔らかいインディゴ（#6366F1）にアクセントを限定している。
• 小さく穷屈なタイポグラフィを使用しない — スクリーンショットでは、大きな、息のやすい18pxの本文フォントサイズが使用されている。
• 複雑なマルチカラムグリッドを使用しない — スクリーンショットでは、クリーンなシングルカラムのエディトリアルフローが維持されている。
• 避ける: 攻撃的なセールス言語
• 避ける: 過度に企業的な専門用語
• 避ける: ごちゃごちゃした混沌としたレイアウト
• 避ける: 冷たく無機質なデザイン

10

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

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

11

System Prompt

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