厳選・オープン・無料

It's Nice That

ビジュアルジャーナリズムとキュレーションされたプロジェクトを通じて、グローバルなクリエイティビティを支援するリーディングオンライン出版物およびコミュニティ。

editorialdesign
It's Nice That のスクリーンショット
↓ デザインシステムをダウンロード (30 MB)OpenDesign で開く

オリジナル: https://www.itsnicethat.com

📦 パックの中身を見る →

01

デザイン DNA

クリエイティブインスピレーションデザインジャーナリズムコミュニティキュレーション

活力あるクリエイティブディレクターのムードボードが、日刊デジタル出版物として具現化されたもの。

02

カラー

#6219FFAccent
#2B2B2BInk
#676767Ink soft
#FFFFFFBG
#F4F4F4BG soft
#FFEDD1BG quiet
rgba(43,43,43,1.0)Line

高コントラストのモノクローム（白と黒）をベースとし、鮮やかな紫色のアクセントと、コンテンツキュレーション用の温かみのあるパステル色セクションを採用しています。

03

タイポグラフィ

transitional-serif · humanist-sans

大型で権威のある見出しやディスプレイテキストには、トランジショナルセリフ体を使用します。 · 本文コピーおよび機能的なUI要素には、高い読みやすさを維持するためヒューマニストサンス体を使用します。 · 大型のディスプレイテキストには、近代的なエディトリアル感を出すため、 tighten されたトラッキング（-1px）を維持します。 · 快適な読みやすさを確保するため、本文テキストには十分な行高（約1.5）を設定します。

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
96px

一貫した垂直リズムとコンポーネント間隔を確保するため、8pxのベースライングリッドを使用しています。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

構造的な区切りとして、ダークインクカラー（#2B2B2B）の最小限の1px実線ボーダーを使用しています。

0px 24px 38px 0px rgba(0, 0, 0, 0.08) · 0px 9px 46px 0px rgba(0, 0, 0, 0.08) · 0px 11px 15px 0px rgba(0, 0, 0, 0.08)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

クリーンなトップナビゲーション、水平フィード、および変化に富むグリッドベースのコンテンツセクションを備えた、クラシックなエディトリアルマガジンレイアウトです。

07

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

100msmicro
300mssmall
2000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

背景要素やUI状態に対する微妙なopacityトランジション。 · インタラクティブ要素に対する高速なbackground-colorおよびcolor変化。

リンクやボタンに対して、0.1s ease-inでbackground-colorおよびcolorの微妙なトランジションを適用します。 · 高速なbackground-color更新による即座のビジュアルフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

It's Nice That — 桌面首屏（hero）
桌面首屏（hero）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
It's Nice That — 移动首屏
移动首屏

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

11

System Prompt

It's Nice That にインスパイアされた、クリーンでエディトリアルなウェブサイトをデザインしてください。クリエイティブコミュニティ向けのプレミアムデジタル出版物として位置づけます。白色（#FFFFFF）をベースに、淡いグレー（#F4F4F4）と温かみのあるピーチ色（#FFEDD1）の背景を使用します。プライマリインクカラーはダークグレー（#2B2B2B）とし、鮮やかな紫色（#6219FF）を唯一の高彩度アクセントとして採用します。見出しにはトランジショナルセリフ体を、本文テキストにはヒューマニストサンス体を使用します。レイアウトは雑誌をインスピレーションとし、変化に富む画像アスペクト比と水平スクロールフィードを許容します。重要な禁止事項：決してダークモードをベースにせず、ディスプレイテキストにジオメトリックサンス体を使用せず、背景に刺激的で飽和した色を使用しないでください。インタラクションは0.1sのトランジションで高速に保ち、余裕のあるホワイトスペースと明確なタイポグラフィ階層に焦点を当ててください。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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