FRANKY'S
スケートショップのカウンターにあるレトロゲームキオスク
Frankyのビジュアル言語は、レトロなアーケードゲームとスケートボードショップを組み合わせたものです。温かみのあるクリーム色のキャンバス（#f3e5df）を、硬質なピクセルの境界線で囲み、至る所に白黒の市松模様、そしてウェブサイト上のすべての単語に使用されている単一のピクセルフォント「Arcade」が特徴です。パレットは意図的に簡素で、残っているのは2つの有彩色（看板用のシグナルオレンジ#faa21fと購入ボタン用のリッチグリーン#128e44）のみ。全体の階層構造は、Arcadeフォントのウェイトを400から700に増やし、クリーム色の背景に黒を使用することで表現されています。表面は平坦で単調なままで、奥行きはボタンに挿入された1ピクセルのクリーム色の線と市松模様の色調の遊びによってのみ実現されています。構成要素は1990年代の店頭スプライトを彷彿とさせる。太い黒枠、6～12ピクセルの狭い角丸、4～8ピクセルのコンパクトなパディング、そしてクローム要素ではなくピクセル化されたアイコンのように見える3D/AR切り替えボタンなどだ。新しいページはアーケードゲームのような雰囲気を維持することを意図しており、オレンジ色のスクロールテキスト以外のグラデーション、柔らかな影、装飾的なタイポグラフィは一切なく、クリーム色の紙、黒いピクセル化された線、そして温かみのあるオレンジ色のみで構成されている。
デスクトップでは、商品ページは最大幅1200pxの全幅中央レイアウトで表示されます。上から下への流れは、オレンジ色のスクロールテキスト → 黒い線が入ったクリーム色のヘッダー → 2列分割（ホームページの55%が市松模様、45%が2列の商品カードグリッド） → フッターのクリーム色のストライプです。モバイルでは、ホームページは全幅の市松模様に縮小され、グリッドは1列レイアウトになります。カードは2列グリッドに均等に配置され、カード間には灰色のピクセル（#e5e7eb）の区切り線があります。セクション間の間隔は最小限（43～61px）で、インターフェースではページ全体の幅に渡る暗いストライプは使用されず、クリーム色のキャンバスが途切れることなく表示されます。
クリーム色の清潔感のある背景に、キャップを中央に配置し、画面いっぱいにトリミングした写真。下には柔らかなチャコールブラックの影が浮かび上がる。ライフスタイルもモデルも、文脈も一切なし。主役はキャップそのもの。メイン要素の背後には市松模様がグラフィック面として配置されている。イラストも、拡張現実の切り替えボタン以外に3Dレンダリングも、ロゴのピクセル化された十字以外に装飾的なアイコンも一切ない。
パレット
ブランド
- Marquee Orange
#faa21f— 画面上部の通知バー、アクセント要素、ブランディング。 - Buy Green
#128e44— 「カートに追加」ボタンが塗りつぶされています。これは、緑色でマークされた唯一の購入操作です。
中性
- Arcade Cream
#f3e5df— ページ背景、商品カード表面、ボタン挿入部。 - Ink Black
#000000— 本文、市松模様のレイアウト、すべてのUI境界線、カードのアウトライン、アイコンの境界線。 - Pixel Gray
#e5e7eb— 細い枠線、カード仕切り、グリッドセル間の構造的なルール。 - Charcoal
#333333— 二次表面色、市松模様の影の四角、影の色 - Carbon
#151515— イラストの塗りつぶしや、最も密度の高い市松模様のタイルに最適な、深みのあるニュートラルカラー。 - Muted Gray
#737373— ボタンと本文中のテキストを無効化/ミュートする
タイポグラフィ
10～18ピクセル・4段階
- Arcade — 交換： VT323 · 概要 400, 700 · インターフェース全体で単一のフォントが使用されています。見出し、ラベル、価格、ボタン、本文、アイコンはすべてArcadeフォントです。400から700への切り替えが、階層構造を作成する唯一の手段です。別のフォントを使用すると、キオスク端末のような雰囲気が損なわれてしまいます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 4-8px |
| ボタンの半径 | 6px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 43-61px |
| ページ幅 | 1200px |
AI がFRANKY'Sスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- teenage engineering — スタジオ照明の工業カタログでは、製品がページ上で唯一の重要な対象物であり、その他すべてはその製品を中心に説明されている。
- Custo — ガンメタルカラーのギャラリーに、巨大なフォントが配されている。落ち着いたグレーグリーンのトーンで統一されたショールームには、たった一つの暗いオブジェと57ピクセルのフォントが、それ自体で雄弁に語りかけてくる。
- Walden — 森の地面の静寂――すべての製品は石であり、すべてのピクセルは苔と静寂である。
- Fiverr — デジタルバザールの中心となるのは、暗い劇場の舞台を背景にした鮮やかな緑色の脈動だ。ネオングリーンのドットがロゴのアンカーとして機能し、それ以外はモノクロで、提供されるサービスの魅力を際立たせるようにデザインされている。
- Peloton — 漆黒の滑走路に浮かぶ赤い灯台。フィットネスショールームでは、広々とした暗い展示スペースを貫くように、鮮やかな赤いCTAの標識が一本だけ設置され、清潔感のある白い製品展示室へと導いている。
- HOUSEPLANT — リネン紙にナッツを載せた書店
- Adam Lippes — クリーム色の紙にモノクロームで印刷された編集スタジオ――ヴォーグ誌の見開きページで、唯一の装飾はレイアウトグリッドだけで、カラーパレットは一切使われていない。
- Elektron — 真夜中の機器操作パネルはほぼ真っ黒なキャンバスで、製品写真が鮮やかに映える一方で、インターフェースはほとんど見えない。
- Sigmaphoto — モノクローム精密機器ギャラリーは、静かで白い空間で、そこで重要な色は、見る人の行動を促す色だけだ。
- Channel Studio — サンゴ色のランプシェードが1つ置かれたスタジオ写真ラボ
- Specht Studio — 控えめな好奇心を掻き立てるギャラリーの壁。スタジオ独自のクロム仕上げは、白い表面に黒い文字があしらわれ、視覚的なインパクトはすべて、このプロジェクトのタイルワークの中に凝縮されている。