Medium
夕暮れ時のクリーム色の新聞
Mediumは、ウェブ上に移植された文学的な読書室のような機能を持っています。温かみのあるクリーム色の背景（#f7f4ed）は、SaaSによく見られる無機質な白に取って代わり、長いテキストを印刷されたページのように感じさせます。ビジュアルシステムは徹底的にモノクロームで、UIのほぼすべての表面、テキスト、境界線は、#242424から#6b6b6bまでの狭い範囲の温かみのあるグレーで構成されているため、読者の注意は完全にコンテンツに集中します。唯一の特徴的なジェスチャーは、セリフ体の見出し（GT Super、120px、ウェイト400、文字間隔-0.055em）で、これは意図的にトレンドに逆行した選択です。大胆な幾何学的なサンセリフ体ではなく、ディスプレイ用に拡大された過渡期の書籍用セリフ体フォントは、ほとんど目立たず、「私たちはソフトウェアではなく書籍を出版しています」というメッセージを伝えています。ボタンはほぼ黒色の「ピル」で、ページ上で唯一のソリッドインクです。
ホームページは2つのカラムで構成されています。左側のカラムはページ全体の約55%を占め、見出し、サブテキスト、コールトゥアクションが縦方向に十分な間隔を空けて配置されています。右側のカラムはページ全体の約45%を占め、イラストパネルが配置されています。左側のカラムは左揃え（中央揃えではない）で、ページが読み手の軸に沿って配置されるようになっています。ホームページの下には、フッターに中央揃えのリンクが配置された、幅いっぱいのクリーム色の帯が1つあります。ホームページにはカードグリッド、特集セクション、交互のストライプはありません。ホームページはまさにページそのものです。コンテンツ密度は意図的に低く抑えられており、見出し1つ、文章1つ、ボタン1つ、画像1つとなっています。このページはダッシュボードではなく、あくまで表紙です。
イラストは体系的ではなく、編集的な要素とエピソード的な要素が混在している。メインページには、ゆるやかでやや素朴なタッチで描かれた手描きのイラスト（緑の花、幾何学的な手、星座の線など）が1点掲載されている。イラストは、常設のライブラリーから選ばれるというよりは、季節ごとに変わる依頼作品のように見える。メインページには写真もアイコンも一切なく、テキストロゴとテキストだけで全てが構成されている。ビジュアル言語は主にテキスト中心で、イラストは句読点のような役割を果たしている。
パレット
中性
- Newsprint Cream
#f7f4ed— ページキャンバス、メインウィンドウの背景、セクションの背景は、温かみのあるややクリームがかった色合いで、デジタルインターフェースというよりは印刷されたインターフェースのような印象を与えます。 - Paper White
#ffffff— カードの表面、隆起したパネル、フォームの入力欄、およびクリーム色のキャンバスから分離する必要のあるすべての表面。 - Ink
#242424— 本文、リンク、見出しなど、すべて純粋な黒よりもやや温かみのある色合いで、クリーム色の背景によく映えます。 - Body Gray
#333333— コントラストを損なうことなく、インクの色よりもわずかに明るい色が必要な場合、補助テキストの色とデフォルトの前景色が使用されます。 - Button Black
#191919— 補助的なUI要素、区切り線、および控えめなラベルには、ニュートラルカラーがサポートされています。ただし、行動喚起のメインカラーとして使用しないでください。 - Marginalia Gray
#6b6b6b— セカンダリUI、区切り線、および控えめなラベルにニュートラルカラーをサポート。
タイポグラフィ
13～120ピクセル・5段階
- medium-content-sans-serif-font — 交換： Inter · 概要 400 · medium-content-sansserif フォント - 抽出されたデータには含まれているが、AI によって説明されていない。
- GT Super — 交換： Playfair Display · 概要 400 · 見出しと本文には、極端に大きく、文字間隔を狭く、行間を0.83に設定した、過渡期的なブックセリフ体フォントが使用されています。120ピクセルで400ウェイト（太字ではない）を選択しているのは、このフォントの特徴です。文字の太さではなく、文字の形状そのものが重要な役割を果たしています。文字間隔を狭めることで視覚的な隙間が狭まり、「Human Stories and Ideas」はまとまりのあるタイポグラフィの塊のように感じられます。
- Söhne — 交換： Inter · 概要 400 · UIのサンセリフフォントは、ナビゲーション、ボタン、小見出し、および小さなタイトルに使用されます。ナビゲーションラベルとボタンには13～14ピクセル、小見出しとタイトル内の補助テキストには20～22ピクセルが適しています。人間的なプロポーションを持つすっきりとしたサンセリフ体は、小さいサイズでも読みやすく、大きいサイズでも目立ちません。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 16-24px |
| ボタンの半径 | 9999px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1200px |
AI がMediumスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Steep — 温かみのある紙におけるセリフ体フォントの分析
- Newformcap — 更衣室にある社説新聞
- Claude — 温かい羊皮紙に印刷された工芸品――骨紙にインク、粘土だけが唯一の色彩の息吹
- 11x– Digital workers — 映画のような編集上の荒廃地――風景のパノラマ写真が、高級雑誌の見開きページのような巨大なセリフ体の見出しを背景に配置されている。
- Revolut — 雲の写真をもとにしたモノクロの編集作品。白いインク、ピルボックスボタン、そしてモノクロの世界の中にぽつんと浮かぶ一本の青い線。
- Scheduling — クリーム色の紙に編集用インクで印刷
- Titan — 温かみのあるモノクロームアーカイブ
- Programa — 正午のスイスのデザインスタジオ。白いギャラリーの壁は、たった一つの黄色いテーブルランプによって照らされている。すべてがグレーの濃淡で統一されているが、ボタンやアイコン、あるいはアクセントとなるものが目に留まると、そのたった一つの黄色いアクセントが部屋全体を決定づける。
- Sana Agents — 白い背景にライムの輝きを放つ、編集記事
- Visual — 温かみのある編集版サミズダート。クリーム色の紙、セリフ体のポスター、モノクロの余白、黄色のマーカー1本。
- Midday — 羊皮紙に印刷された編集用パンフレット - 温かみのある石色の背景に72pxのセリフ体見出し、間隔を空けたサンセリフ体本文、ピル型のコントロール、影なし
- Chat for impact — 森のような緑色のクリニックに、パステルカラーの部屋が並んでいる。