Style · レトロ
レトロWebデザインの参考例とAIプロンプト
過去の印刷物・商品パッケージ・広告の質感を現代Webに持ち込んだレトロ系AIプロンプト集。
レトロについて
過去の印刷物・パッケージ・広告の質感を現代Webに持ち込んだ表現。昭和・ミッドセンチュリー・70年代などの時代性を参照し、当時のフォント・配色・紙質感を再現します。効くのは、変わらず在り続けることを訴えたいとき。老舗、士業、長期契約型のサービスに、テック的な先進性とは別種の説得力を与えます。難所は再現の精度で、時代の混在はすぐ見抜かれます。参照する年代を1つに決め、書体・配色・角丸をその年代で揃えてください。中途半端に混ぜると、ただ古いだけのページになります。
レトロの視覚パラメータ
- #F4E4C1 紙
- #D94F3D 主色
- #2A9D8F 副色
- #264653 文字
- 書体
- 当時のディスプレイ書体。字間はやや詰める
- 形
- 角丸4〜8px。紙のテクスチャと印刷のズレを残す
- 動き
- 最小限。動かすなら等速で
よく使われる場面
- 飲食店・カフェ・喫茶
- クラフトブランド・日本酒
- イベント・フェス
- レコード・音楽系
- 世代マーケティングのキャンペーン
成功のポイント
- ディスプレイ書体は時代を明確に指定
- 紙質感・印刷ズレをテクスチャで再現
- 配色は当時のパレットを調査して採用
- アイコンも時代に合わせて選ぶ
- 若い世代にも読める可読性を保つ
このスタイルのデザイン
幾何形を組み替える空状態
赤い円・青い四角・黄色い三角の5つの図形だけで空の画面を成立させる空状態。ボタンを押すと同じ図形が配置を変え、待つ時間に小さな手触りを与えます。
植物標本図鑑風のポートフォリオ
19世紀の植物標本台紙（Herbarium sheet）を再構築したポートフォリオ。学名イタリック表記・採取地メタ・封蝋シール・古紙ノイズで「学術コレクション」の格を作る尖った設計。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
図書館カード目録風の検索結果
図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
マンガのコマ割りで読ませるブログ記事一覧
日本マンガのコマ割り・吹き出し・効果音文字を Web に持ち込んだ、白黒モノクロのブログ記事一覧。各記事を「ひとコマ」として配置する読者を惹きつける尖った設計。
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
バウハウス様式・幾何構成の原色ヒーロー
1919年バウハウス・ロシア構成主義を引用した、原色×幾何形×グロテスクサンセリフのヒーロー。20世紀モダンデザインの古典をWebに再構築する、教養と前衛が同居する尖った設計。
ストリートグラフィティ風の404ページ
コンクリート壁にスプレー塗料で殴り書きされた「404」を主役にしたストリートグラフィティ風 404 ページ。剥がれかけのポスター、タグ、スプラッタ、警告テープ。失敗ページすらブランドの遊び場にする尖った設計。
Memphis Group調・幾何カオスのCTAセクション
1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。
ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
新聞紙面風のブログ・記事一覧ページ
大見出し・多段組・太いセリフ書体で構成する新聞紙面風のブログ・記事一覧ページ。情報密度を魅力に変え、ジャーナリズムやドキュメンタリー系メディアの世界観を作る型。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
新聞風の3段階料金表
新聞の紙面を思わせるセリフ書体と罫線、二重線の枠、スタンプ色のアクセントで組んだ3プランの料金表。SaaSやサブスクのプラン提示で「レガシーなのに現役」なトーンを出したいときに。