AIっぽくないデザイン見本帳
DESIGN.md をコピペで使える、Webデザインのテイスト見本集。
33 見本
No. 01
青図の製図 Blueprint Drafting
建築の実施設計図・青焼きの様式美をWebに。通り芯（十字マーク＋一点鎖線）を基準線に、寸法線・引出線・断面ハッチングという製図の記法そのものを装飾にする。無彩色＋藍1色、青焼き反転プレートは1箇所のみ。構造設計・建築設計・施工管理・測量・不動産デベロッパーに。
- 書体
- 等幅書体
- 配色
- 無彩色＋差し色1色
- 情報量
- 標準
- レイアウト
- 整然とした格子
- 装飾
- 罫線・線画
- 動き
- 動きなし
No. 02
バウハウス構成 Bauhaus Kousei
1920年代の構成主義ポスターの規律をWebに。円・三角・矩形はレイアウトの骨格として機能し、原色の面と対角線がコンテンツを運ぶ。黄黒ストライプの安直な様式記号に頼らず、非対称な構成でデザイン教育・アート系スクール・展覧会に。
- 書体
- 幾何学的なゴシック体
- 配色
- 鮮やかな多色
- 情報量
- 標準
- レイアウト
- ずらし・重なりのある格子
- 装飾
- 幾何学図形
- 動き
- 動きが体験の一部
No. 03
植物と土 Botanical Earth
写真が主役、UIは黒衣。土と野菜と手仕事の写真を、裁ち落としと段差のあるbroken-gridで図鑑のように組む。生成りとテラコッタのアース配色、Plate番号の図録的キャプション。「オーガニック風の装飾」でなく写真の質と余白で語る。食品・農業・ライフスタイルに。
- 書体
- 読みやすいゴシック体
- 配色
- 自然色
- 情報量
- 余白広め
- レイアウト
- ずらし・重なりのある格子
- 装飾
- 写真中心
- 動き
- 控えめな動き
No. 04
速報シグナル Broadcast Signal
スポーツ中継のテロップと運行管制画面を掛け合わせた、高密度の速報メディア。黒い舞台、蛍光黄緑の意味色、コンデンス体の大見出し、等幅数字、直角の罫線パネルで『いま何が起きているか』を一望させる。スポーツ・イベント速報・ライブ配信・エンタメ情報・運行状況サイトに。
- 書体
- 和文と欧文の対比
- 配色
- 明暗差の大きい配色
- 情報量
- 情報量多め
- レイアウト
- 雑誌の誌面風
- 装飾
- 罫線・線画
- 動き
- 控えめな動き
No. 05
透明感のクリーンビューティー Clean Beauty
白背景・パステル・丸ゴシック・ぷっくりボタンの量産クリーンビューティー形に堕ちない、写真主役の透明感。細く硬質な幾何サンセリフと余白、締めの濃墨1色で「透明感の中の芯」を作る。スキンケアD2C・美容クリニック・ウェルネス系の定期購入モデルに。
- 書体
- 幾何学的なゴシック体
- 配色
- 彩度を抑えた多色
- 情報量
- 余白広め
- レイアウト
- 画面を左右に分割
- 装飾
- 写真中心
- 動き
- 動きが体験の一部
No. 06
自信のコーポレート Corp Confident
無彩色＋深い青緑1色、人文ゴシックの誠実さと役割差のあるリッチなモーションで組む、中堅製造業の王道コーポレートサイト。3カラム機能カード・ロゴ雲・数字カウントアップを使わず、事業の中身と静止した実績数字で信頼を語る。
- 書体
- 読みやすいゴシック体
- 配色
- 無彩色＋差し色1色
- 情報量
- 標準
- レイアウト
- 画面を左右に分割
- 装飾
- やわらかな影・ぼかし
- 動き
- 動きが体験の一部
No. 07
闇のアトリエ Dark Atelier
温かい墨黒の闇に、骨色の文字とくすんだ真鍮の細線だけを置く写真非依存のダークラグジュアリー。青黒・グロー・グラデを排し、陰翳と余白で奢侈を語る。美容・香り・ジュエリー・建築・作家の工房に。
- 書体
- 和文と欧文の対比
- 配色
- 暗色＋金属色・深色
- 情報量
- 余白広め
- レイアウト
- 画面を左右に分割
- 装飾
- 罫線・線画
- 動き
- 動きが体験の一部
No. 08
銅版画の紅茶商 Copperplate Tea Merchant
19世紀の博物図譜・銅版画の趣で組む紅茶専門店。クロスハッチングの細密な自作SVG線画が主役、くすんだ多色、図版番号と丁付けのある誌面構成。丸ゴシックの温かいイラスト絵本とは対極の、大人の静けさと知的な佇まい。専門小売・工芸品店・博物館ショップ・大人向けギフトブランドに。
- 書体
- 上品な現代的明朝体
- 配色
- 彩度を抑えた多色
- 情報量
- 余白広め
- レイアウト
- 雑誌の誌面風
- 装飾
- イラスト中心
- 動き
- 控えめな動き
No. 09
信頼のフィンテック Fintech Trust
資産運用アプリのサービスサイト。金融サービスで多用されがちな暗い紺色やネオン表現に頼らず、明るい地色・等幅数字の可読性・淡い影の奥行きで『預けても大丈夫』という安心感を作る。手数料・分別管理・実績を明快に伝えたい資産運用・証券・保険・与信サービスに。
- 書体
- 幾何学的なゴシック体
- 配色
- 無彩色＋差し色1色
- 情報量
- 情報量多め
- レイアウト
- 整然とした格子
- 装飾
- やわらかな影・ぼかし
- 動き
- 控えめな動き
No. 10
画廊の回遊 Gallery Kaiyu
モノクロ写真と明朝、圧倒的な余白で組む横スクロールの展示体験。UIは展示室の壁に徹し、写真の連なりが主役。scroll-snapによる横スクロール・ギャラリーとページ表示のインジケータ、額装のようにトリミングしない写真、図録様式のキャプションで構成する。現代写真ギャラリー・美術館・工芸作家のポートフォリオに。
- 書体
- 上品な現代的明朝体
- 配色
- 白黒・グレー
- 情報量
- 余白が主役
- レイアウト
- 横スクロール
- 装飾
- 写真中心
- 動き
- 動きが体験の一部
No. 11
動く活字 Kinetic Katsuji
文字は読む前に、見る。タイプファウンドリの実験場を装い、白と黒と蛍光橙、装飾ゼロの舞台の上で活字そのものを動かす。スクロールで太さ感が変わる巨大グリフ、ホバーで散って組み直る文字、階段ディレイで立ち上がる書体見本。デザインスタジオ・クリエイティブ制作会社・カルチャー誌に。
- 書体
- 個性的な見出し書体
- 配色
- 明暗差の大きい配色
- 情報量
- 標準
- レイアウト
- 中央に主役を置く
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 動き自体が主役
No. 12
純喫茶の憂愁 Kissa Melancholy
昭和の純喫茶が持つ、夜の帳のような落ち着き。焦茶とビロード緑、飴色の点使いだけで組む「暗い高級感」。メニュー帳の点線リーダーとマッチ箱ラベル風のヒーローが核。喫茶店・バー・老舗飲食・宿など、夜の物語性を持つ業種に。
- 書体
- 伝統的な明朝体
- 配色
- 暗色＋金属色・深色
- 情報量
- 標準
- レイアウト
- 1列の縦積み
- 装飾
- 紙・印刷の質感
- 動き
- 動きなし
No. 13
活版の実直 Letterpress Sincerity
生成りの紙色とオールド明朝、罫線と朱の落款だけで組む、誠実さと年輪を感じさせるテイスト。老舗企業・製造業・士業・工芸のサイトに。
- 書体
- 伝統的な明朝体
- 配色
- 自然色
- 情報量
- 標準
- レイアウト
- 雑誌の誌面風
- 装飾
- 紙・印刷の質感
- 動き
- 控えめな動き
No. 14
まちのしおり Town Almanac
地域フリーペーパーの誌面をWebに翻訳した高密度エディトリアル。パステルの『コーナー色』4色（桜=特集／空=店めぐり／若葉=催し／薄卵=コラム）が装飾でなく分類記号として機能し、雑誌の目次のようなファーストビューから始まる。写真もイラストも使わず、色面の耳付きタブと罫線だけで親しみのある高密度を作る。地域フリーペーパー・タウン誌・商店会や観光協会の情報サイトに。
- 書体
- 読みやすいゴシック体
- 配色
- パステルカラー
- 情報量
- 情報量多め
- レイアウト
- 雑誌の誌面風
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 動きなし
No. 15
民藝の手仕事 Mingei Teshigoto
型染め風の自作SVG文様と、器・籠・徳利の手彫り風線画だけで組む「用の美」のテイスト。写真は使わない。生成りと柿渋・灰緑のアース配色、教科書体寄りのKlee One見出しとゆったり行間2.0の明朝本文。品目リストは回転させず少しずつ「ずらす」broken-grid。ヒーローは風呂敷の結び目構図（縦書き店名+文様の大面+帳面風一行、ボタンなし）。工芸店・伝統工芸の作り手・道具店に。
- 書体
- 伝統的な明朝体
- 配色
- 自然色
- 情報量
- 余白広め
- レイアウト
- ずらし・重なりのある格子
- 装飾
- 手描き・手仕事の質感
- 動き
- 控えめな動き
No. 16
白場のモード Mode Hakuba
写真もイラストも使わず、和文明朝の静けさと欧文グロテスクの硬さのコントラストと余白だけでコレクションを見せる。横スクロールのLOOK番号ページ（1画面5要素まで）とタイポグラフィ主導の雑誌の扉ヒーローで構成。受注生産アパレル・デザイナーズブランド・コンセプトショップに。
- 書体
- 和文と欧文の対比
- 配色
- 白黒・グレー
- 情報量
- 余白が主役
- レイアウト
- 横スクロール
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 控えめな動き
No. 17
ネオン・ブルータル Neon Brutal
太い黒罫・等幅・剥き出しの構造・蛍光ライム1色で組む高コントラストのデジタル・ブルータリズム。整えず、崩したグリッドと反転で生の勢いを設計する。音楽・イベント・カルチャー・クリエイティブに。
- 書体
- 等幅書体
- 配色
- 明暗差の大きい配色
- 情報量
- 情報量多め
- レイアウト
- ずらし・重なりのある格子
- 装飾
- 無骨で構造的
- 動き
- 控えめな動き
No. 18
絵本のぬくもり Picture-book Warmth
丸ゴシックと温かいクリーム地、リソグラフ調の3色、手描き風の自作フラットSVGイラストで組む、絵本のように読み下すやさしいテイスト。Corporate Memphisや冷たいAIパステルを避け、まるさと余白で安心を伝える。保育・教育・NPO・子ども向けに。
- 書体
- 丸ゴシック体
- 配色
- パステルカラー
- 情報量
- 余白広め
- レイアウト
- 1列の縦積み
- 装飾
- イラスト中心
- 動き
- 控えめな動き
No. 19
プレミアム不動産 Premium Real Estate
分譲マンションの落ち着いた高級感を、明朝と大きな写真、低彩度の配色で組む。金は塗らず細線と点だけに使い、間取り・専有面積・価格帯・徒歩分数・来場予約や資料請求といった物件サイトの実務を写真と同じ重さで扱う。左スティッキーレール＋右スクロールのsplit-screenに、全幅写真＋帯1本のヒーローを組み合わせる。
- 書体
- 上品な現代的明朝体
- 配色
- 彩度を抑えた多色
- 情報量
- 余白広め
- レイアウト
- 画面を左右に分割
- 装飾
- 写真中心
- 動き
- 控えめな動き
No. 20
人が主役の採用 Recruit People
新卒採用サイトの定型（集合写真＋ロゴ＋数字カウントアップ＋3つの募集職種カード）を避け、人の写真と言葉を主役にする。丸ゴシックの親しみ、少し崩したグリッド（写真が段をまたぐ・名前タグが写真からはみ出す・数字が斜めに置かれる）、橙=CTA/情熱・黄緑青=職種タグという役割固定のビビッド配色で、採用サイト固有の躍動感をつくる。数字は静止で置きカウントアップしない。
- 書体
- 丸ゴシック体
- 配色
- 鮮やかな多色
- 情報量
- 標準
- レイアウト
- ずらし・重なりのある格子
- 装飾
- 写真中心
- 動き
- 動きが体験の一部
No. 21
静けさのクリニック Quiet Clinic
くすんだ緑一色と丸い書体、柔らかな色面で「怖くない医療」の静けさをつくる。動かないこと・単色に絞ることを演出でなく構造として成立させ、かわいさに逃げず医療機関の信頼と両立する。クリニック・カウンセリング・ケア施設に。
- 書体
- 丸ゴシック体
- 配色
- 彩度を抑えた多色
- 情報量
- 余白広め
- レイアウト
- 整然とした格子
- 装飾
- やわらかな影・ぼかし
- 動き
- 控えめな動き
No. 22
誠実な高密度 Honest High-Density
新聞紙面・時刻表・官報の様式美をWebに翻訳する高密度の公共ポータル。罫線・帯・記号だけで大量情報に秩序を与え、探し物に最短で着かせる。無彩色＋深藍1色、状態は信号色でなく◆■●＋文字ラベル＋深藍濃淡で色弱にも配慮。自治体・医療窓口・交通・図書館・金融法務に。
- 書体
- 読みやすいゴシック体
- 配色
- 無彩色＋差し色1色
- 情報量
- 情報量多め
- レイアウト
- 整然とした格子
- 装飾
- 罫線・線画
- 動き
- 動きなし
No. 23
青々（せいせい） Seisei Tea
福岡県八女市、標高320mの単一茶園から。浅蒸し・深蒸し・被覆栽培の煎茶3種と焙じ茶1種を、生成りと深緑の面だけで構成した和モダンD2Cサイト。金の飾りも雲紋も筆文字も使わず、縦書きと余白と罫線だけで淹れたての煎茶の静けさを語る。
- 書体
- 和文と欧文の対比
- 配色
- 和の伝統色
- 情報量
- 余白広め
- レイアウト
- 画面を左右に分割
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 控えめな動き
No. 24
市民ポスターの声明 Civic Poster Statement
市民運動のポスターと新聞の意見面をWebに翻訳した、生成り・墨・朱の声明型デザイン。太い外枠、極太の和文見出し、直角の分割、番号付き論点、少し傾いた投書用紙で、感情の強さと論拠の冷静さを両立する。NPO・公共提言・啓発・地域活動・署名キャンペーンに。
- 書体
- 幾何学的なゴシック体
- 配色
- 無彩色＋差し色1色
- 情報量
- 標準
- レイアウト
- 雑誌の誌面風
- 装飾
- 紙・印刷の質感
- 動き
- 動きなし
No. 25
昭和レトロポップ Showa Retro Pop
昭和30〜40年代の銭湯ポスター・相撲の番付表・ホーロー看板の様式美をWebに。にぎやかで人懐こいのに活字と罫線の規律がある。朱と藍のベタ塗りを恐れず、罫線の階層と縦書きで秩序を作る。『レトロ風の小綺麗なカフェ』でなく本物の大衆文化の圧。飲食・銭湯・商店街・観光に。
- 書体
- 個性的な見出し書体
- 配色
- 和の伝統色
- 情報量
- 情報量多め
- レイアウト
- 雑誌の誌面風
- 装飾
- 紙・印刷の質感
- 動き
- 動きなし
No. 26
柔らかなSaaS Soft SaaS
オフホワイトと深い青緑、輪郭線＋オフセットの版画風立体で組む、AIの手癖なしの王道SaaSサイト。紫グラデ・影・Interを使わずに清潔さと温かさを両立する。
- 書体
- 幾何学的なゴシック体
- 配色
- パステルカラー
- 情報量
- 標準
- レイアウト
- 画面を左右に分割
- 装飾
- やわらかな影・ぼかし
- 動き
- 控えめな動き
No. 27
墨と余白 Ink and Negative Space
墨一色の濃淡と明朝の大小、たっぷりの余白だけで格を出す monochrome。色を一切足さず、1画面1メッセージの静けさで高級感を語る。高級和食・料亭・旅館・工芸・ギャラリーに。
- 書体
- 上品な現代的明朝体
- 配色
- 白黒・グレー
- 情報量
- 余白が主役
- レイアウト
- 中央に主役を置く
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 動きが体験の一部
No. 28
スイスの精度 Swiss Precision
スイス・インターナショナル・スタイルの規律をWebに。厳格な12カラムグリッド、中立なグロテスク書体、無彩色＋赤1色で、装飾なしに秩序と説得力をつくる。動かさない静止の強さ。B2B・製造・計測・コンサルに。
- 書体
- 幾何学的なゴシック体
- 配色
- 無彩色＋差し色1色
- 情報量
- 余白広め
- レイアウト
- 整然とした格子
- 装飾
- 線と余白だけの最小限な装飾
- 動き
- 動きなし
No. 29
旅の帖面 Tabi Scrap
旅人が宿帳に貼り込んだ切符・スタンプ・地図の切れ端。藁半紙と茶墨、土色の点使いだけで組む、几帳面な人の静かなコラージュ。回転は±1.5度まで、色は土系のみ、動きは一切なし。宿・旅館・ゲストハウス・喫茶・工芸店など、時間の積み重ねを語りたい小規模事業者に。
- 書体
- 上品な現代的明朝体
- 配色
- 自然色
- 情報量
- 標準
- レイアウト
- コラージュ
- 装飾
- 紙・印刷の質感
- 動き
- 動きなし
No. 30
灯火の実直 Tanpin LP
単品通販の縦長ランディングページ。ざくろ色の熱と、根拠を添えた静止数字で勢いと誠実さを両立する。過度な煽りや点滅演出に頼らず、商品の特徴・利用場面・購入者の声・価格・よくある質問を一本道で読み進められる構成。美容・健康食品などの自社通販に。
- 書体
- 個性的な見出し書体
- 配色
- 鮮やかな多色
- 情報量
- 情報量多め
- レイアウト
- 1列の縦積み
- 装飾
- 写真中心
- 動き
- 控えめな動き
No. 31
ターミナル Terminal Mono
man page と README の様式美をそのままLPにする無彩色・等幅の静かなブルータリズム。装飾を足さず、目次・定義順の見出し・素のtable・反転ハイライトだけで信頼を作る。強調は色でなく反転のみ。開発者向けCLI/OSS/API/インフラ監視に。
- 書体
- 等幅書体
- 配色
- 白黒・グレー
- 情報量
- 標準
- レイアウト
- 1列の縦積み
- 装飾
- 無骨で構造的
- 動き
- 動きなし
No. 32
Y2Kクローム Y2K Chrome
2000年前後の『未来』をノスタルジーとして再演する。クロームの金属光沢、ワイヤーフレーム球、楕円軌道、ピクセル/液晶表示。チープさは手抜きでなく意図的な様式で、線の精度・色数の抑制・組版の几帳面さで裏づける。音楽・ファッション・Z世代向けに。
- 書体
- 個性的な見出し書体
- 配色
- 鮮やかな多色
- 情報量
- 標準
- レイアウト
- 中央に主役を置く
- 装飾
- 幾何学図形
- 動き
- 動き自体が主役
No. 33
ジン・コラージュ Zine Collage
自主制作ZINEと切り貼りコラージュの様式をWebに。藁半紙の地に超極太の切り抜き文字と手書きの注釈、マスキングテープと値札、ハードオフセット影。整列させず、傾け、重ね、詰める。角丸ゼロ・ぼかしゼロの手づくりのエネルギー。アパレル・カルチャー・イベント・学生向けに。
- 書体
- 個性的な見出し書体
- 配色
- 鮮やかな多色
- 情報量
- 情報量多め
- レイアウト
- コラージュ
- 装飾
- 手描き・手仕事の質感
- 動き
- 控えめな動き
該当するパターンがありません。