色、構図、触れたときの反応まで。体験から選ぶ、Webデザインの見本帳。
NEW / IMAGE-LED 08 写真からつくる、宿・商品・ブランドのトップページ。画像生成のプロンプトも公開。
49 見本 / 体験型 16 件 / 生成画像を使う事例 8 件
No. 01 NEW · IMAGE + INTERACTION
青い水平線を一面に敷き、余白とセリフ体で滞在の時間をつくる。客室選択から宿泊案内までがつながる小さな海辺のホテル。
体験できること客室タイプ切替と宿泊案内ダイアログ。風景をゆっくり拡大する一度限りの導入。
制作版 · 再現検証前
No. 02 NEW · IMAGE + INTERACTION
巨大な圧縮文字と硬質な商品写真。シューズの細部をフォーカスしながら仕様を読む、トレイル用品の製品サイト。
体験できること商品ディテール切替で画像の拡大位置と説明が同期。サイズ選択からバッグの確認まで操作できる。
制作版 · 再現検証前
No. 03 NEW · IMAGE + INTERACTION
淡いミントと緑のガラス、丸い写真窓。朝と夜の使い方を切り替えながら、日常の習慣として商品を紹介するスキンケアブランド。
体験できること朝・夜のルーティンタブ切替。商品情報と使用量を読み、セット内容をダイアログで確認できる。
制作版 · 再現検証前
No. 04 NEW · IMAGE + INTERACTION
細いセリフ体と非対称の写真配置。明るさのイメージを操作しながら、光を家具として選ぶ照明ブランド。
体験できること明るさスライダーで空間の印象を変更。設置場所に合わせた仕様選択と相談内容の確認。
制作版 · 再現検証前
No. 05 NEW · IMAGE + INTERACTION
コバルトの空間に鮮やかな花と大きな文字。ギフトの用途と大きさを選び、贈る場面まで想像できるフラワースタジオ。
体験できること用途とサイズを選ぶと、提案文・料金・注文確認が変わるギフトビルダー。
制作版 · 再現検証前
No. 06 NEW · IMAGE + INTERACTION
オレンジの全面写真と空色の缶、跳ねる巨大文字。飲料の楽しさを写真・短い動き・数量選択で伝えるD2Cブランド。
体験できること「POP」ボタンで商品ビジュアルが短く弾み、味の説明を切り替える。数量と価格が連動するケース選択。
制作版 · 再現検証前
No. 07 NEW · IMAGE + INTERACTION
夜の都市と銀のジャケットを、細長い文字とフィルムのような横回遊で見せる。服のディテールからサイズ選択へつながるファッションサイト。
体験できることルック・ジャケット・トラウザーの切替に応じて写真の注目位置と商品説明が変化。横スクロールのディテール閲覧。
制作版 · 再現検証前
No. 08 NEW · IMAGE + INTERACTION
紺のラボに白いロボット、精密な注釈と工程表示。用途に応じた動作フローを見せ、産業機器の導入検討につなげるサイト。
体験できること用途別の工程切替とステップ送り。写真の注目位置、作業段階、説明を同期するインタラクティブな製品紹介。
制作版 · 再現検証前
No. 09 INTERACTIVE
氷色の地図と黒い統計帯。地区選択が地図・指標・解説を連動させ、都市データサービスの価値を最初の画面で体験する。
体験できること同一地区の選択状態を地図・解説・数値へ同期。概念地図はCSS Gridで表現し架空データと明示。
制作版 · 再現検証前
No. 10 INTERACTIVE
黄色のポスターと紫のプログラム。日付を切り替えてタイムテーブルを読む、文字中心のデザインカンファレンス。
体験できること日付ボタンで同じタイムテーブルの内容を更新。aria-pressedとlive領域で状態を伝える。
制作版 · 再現検証前
No. 11 INTERACTIVE
白と赤の科学編集。粒子の密度を比較スライダーで切り替え、素材の構造変化を説明する研究組織のトップページ。
体験できることclip-pathの比較スライダーとstickyの研究テーマ。入力はキーボードでも操作可能、図の意味を本文で説明。
制作版 · 再現検証前
No. 12 INTERACTIVE
朱橙の巨大タイポグラフィと、展開すると配色が変わる実績リスト。ブランドの個性を行ごとに切り替えるスタジオサイト。
体験できることdetailsの展開で実績の配色と編集レイアウトを露出。単一展開アコーディオンと回転インジケーター。
制作版 · 再現検証前
No. 13 INTERACTIVE
黒とライム、画面を横断する波形。周波数を触る体験が、そのまま音響スタジオの技術紹介になる。
体験できることSVGの波形をrange入力で再計算。任意再生のrequestAnimationFrameをタブ非表示で停止。
制作版 · 再現検証前
No. 14 INTERACTIVE
ミント色の製品画面と等幅のイベントログ。シミュレーションを実行して、APIの応答を理解できる開発者向けサイト。
体験できること入力に対応するコードと実行ログを切り替えるローカルシミュレーション。通信や偽の実測レイテンシは使わない。
制作版 · 再現検証前
No. 15 INTERACTIVE
ピンクの余白と巨大な色面を、横方向に巡る展示サイト。色の作品ごとに説明を開き、視覚と文脈を行き来する。
体験できることscroll-snapによる横回遊。矢印・キーボード・スワイプで同じ展示へアクセス。detailsで作品解説を開く。
制作版 · 再現検証前
No. 16 INTERACTIVE
コバルトの巨大文字を直接編集。ウェイトと字間の操作が、書体の機能説明を兼ねるインタラクティブな見本。
体験できること文字入力・字間・太さを即時反映するプロダクト試用。色反転で背景への適応も実演。
制作版 · 再現検証前
No. 17
建築の実施設計図・青焼きの様式美をWebに。通り芯(十字マーク+一点鎖線)を基準線に、寸法線・引出線・断面ハッチングという製図の記法そのものを装飾にする。無彩色+藍1色、青焼き反転プレートは1箇所のみ。構造設計・建築設計・施工管理・測量・不動産デベロッパーに。

No. 18
1920年代の構成主義ポスターの規律をWebに。円・三角・矩形はレイアウトの骨格として機能し、原色の面と対角線がコンテンツを運ぶ。黄黒ストライプの安直な様式記号に頼らず、非対称な構成でデザイン教育・アート系スクール・展覧会に。
No. 19
写真が主役、UIは黒衣。土と野菜と手仕事の写真を、裁ち落としと段差のあるbroken-gridで図鑑のように組む。生成りとテラコッタのアース配色、Plate番号の図録的キャプション。「オーガニック風の装飾」でなく写真の質と余白で語る。食品・農業・ライフスタイルに。

No. 20
スポーツ中継のテロップと運行管制画面を掛け合わせた、高密度の速報メディア。黒い舞台、蛍光黄緑の意味色、コンデンス体の大見出し、等幅数字、直角の罫線パネルで『いま何が起きているか』を一望させる。スポーツ・イベント速報・ライブ配信・エンタメ情報・運行状況サイトに。
No. 21
白背景・パステル・丸ゴシック・ぷっくりボタンの量産クリーンビューティー形に堕ちない、写真主役の透明感。細く硬質な幾何サンセリフと余白、締めの濃墨1色で「透明感の中の芯」を作る。スキンケアD2C・美容クリニック・ウェルネス系の定期購入モデルに。

No. 22
無彩色+深い青緑1色、人文ゴシックの誠実さと役割差のあるリッチなモーションで組む、中堅製造業の王道コーポレートサイト。3カラム機能カード・ロゴ雲・数字カウントアップを使わず、事業の中身と静止した実績数字で信頼を語る。
No. 23
温かい墨黒の闇に、骨色の文字とくすんだ真鍮の細線だけを置く写真非依存のダークラグジュアリー。青黒・グロー・グラデを排し、陰翳と余白で奢侈を語る。美容・香り・ジュエリー・建築・作家の工房に。
No. 24
19世紀の博物図譜・銅版画の趣で組む紅茶専門店。クロスハッチングの細密な自作SVG線画が主役、くすんだ多色、図版番号と丁付けのある誌面構成。丸ゴシックの温かいイラスト絵本とは対極の、大人の静けさと知的な佇まい。専門小売・工芸品店・博物館ショップ・大人向けギフトブランドに。

No. 25
資産運用アプリのサービスサイト。金融サービスで多用されがちな暗い紺色やネオン表現に頼らず、明るい地色・等幅数字の可読性・淡い影の奥行きで『預けても大丈夫』という安心感を作る。手数料・分別管理・実績を明快に伝えたい資産運用・証券・保険・与信サービスに。
No. 26
モノクロ写真と明朝、圧倒的な余白で組む横スクロールの展示体験。UIは展示室の壁に徹し、写真の連なりが主役。scroll-snapによる横スクロール・ギャラリーとページ表示のインジケータ、額装のようにトリミングしない写真、図録様式のキャプションで構成する。現代写真ギャラリー・美術館・工芸作家のポートフォリオに。

No. 27
文字は読む前に、見る。タイプファウンドリの実験場を装い、白と黒と蛍光橙、装飾ゼロの舞台の上で活字そのものを動かす。スクロールで太さ感が変わる巨大グリフ、ホバーで散って組み直る文字、階段ディレイで立ち上がる書体見本。デザインスタジオ・クリエイティブ制作会社・カルチャー誌に。

No. 28
昭和の純喫茶が持つ、夜の帳のような落ち着き。焦茶とビロード緑、飴色の点使いだけで組む「暗い高級感」。メニュー帳の点線リーダーとマッチ箱ラベル風のヒーローが核。喫茶店・バー・老舗飲食・宿など、夜の物語性を持つ業種に。

No. 29
生成りの紙色とオールド明朝、罫線と朱の落款だけで組む、誠実さと年輪を感じさせるテイスト。老舗企業・製造業・士業・工芸のサイトに。
No. 30
地域フリーペーパーの誌面をWebに翻訳した高密度エディトリアル。パステルの『コーナー色』4色(桜=特集/空=店めぐり/若葉=催し/薄卵=コラム)が装飾でなく分類記号として機能し、雑誌の目次のようなファーストビューから始まる。写真もイラストも使わず、色面の耳付きタブと罫線だけで親しみのある高密度を作る。地域フリーペーパー・タウン誌・商店会や観光協会の情報サイトに。
No. 31
型染め風の自作SVG文様と、器・籠・徳利の手彫り風線画だけで組む「用の美」のテイスト。写真は使わない。生成りと柿渋・灰緑のアース配色、教科書体寄りのKlee One見出しとゆったり行間2.0の明朝本文。品目リストは回転させず少しずつ「ずらす」broken-grid。ヒーローは風呂敷の結び目構図(縦書き店名+文様の大面+帳面風一行、ボタンなし)。工芸店・伝統工芸の作り手・道具店に。
No. 32
写真もイラストも使わず、和文明朝の静けさと欧文グロテスクの硬さのコントラストと余白だけでコレクションを見せる。横スクロールのLOOK番号ページ(1画面5要素まで)とタイポグラフィ主導の雑誌の扉ヒーローで構成。受注生産アパレル・デザイナーズブランド・コンセプトショップに。
No. 33
太い黒罫・等幅・剥き出しの構造・蛍光ライム1色で組む高コントラストのデジタル・ブルータリズム。整えず、崩したグリッドと反転で生の勢いを設計する。音楽・イベント・カルチャー・クリエイティブに。
No. 34
丸ゴシックと温かいクリーム地、リソグラフ調の3色、手描き風の自作フラットSVGイラストで組む、絵本のように読み下すやさしいテイスト。Corporate Memphisや冷たいAIパステルを避け、まるさと余白で安心を伝える。保育・教育・NPO・子ども向けに。
No. 35
分譲マンションの落ち着いた高級感を、明朝と大きな写真、低彩度の配色で組む。金は塗らず細線と点だけに使い、間取り・専有面積・価格帯・徒歩分数・来場予約や資料請求といった物件サイトの実務を写真と同じ重さで扱う。左スティッキーレール+右スクロールのsplit-screenに、全幅写真+帯1本のヒーローを組み合わせる。

No. 36
新卒採用サイトの定型(集合写真+ロゴ+数字カウントアップ+3つの募集職種カード)を避け、人の写真と言葉を主役にする。丸ゴシックの親しみ、少し崩したグリッド(写真が段をまたぐ・名前タグが写真からはみ出す・数字が斜めに置かれる)、橙=CTA/情熱・黄緑青=職種タグという役割固定のビビッド配色で、採用サイト固有の躍動感をつくる。数字は静止で置きカウントアップしない。

No. 37
くすんだ緑一色と丸い書体、柔らかな色面で「怖くない医療」の静けさをつくる。動かないこと・単色に絞ることを演出でなく構造として成立させ、かわいさに逃げず医療機関の信頼と両立する。クリニック・カウンセリング・ケア施設に。

No. 38
新聞紙面・時刻表・官報の様式美をWebに翻訳する高密度の公共ポータル。罫線・帯・記号だけで大量情報に秩序を与え、探し物に最短で着かせる。無彩色+深藍1色、状態は信号色でなく◆■●+文字ラベル+深藍濃淡で色弱にも配慮。自治体・医療窓口・交通・図書館・金融法務に。
No. 39
福岡県八女市、標高320mの単一茶園から。浅蒸し・深蒸し・被覆栽培の煎茶3種と焙じ茶1種を、生成りと深緑の面だけで構成した和モダンD2Cサイト。金の飾りも雲紋も筆文字も使わず、縦書きと余白と罫線だけで淹れたての煎茶の静けさを語る。

No. 40
市民運動のポスターと新聞の意見面をWebに翻訳した、生成り・墨・朱の声明型デザイン。太い外枠、極太の和文見出し、直角の分割、番号付き論点、少し傾いた投書用紙で、感情の強さと論拠の冷静さを両立する。NPO・公共提言・啓発・地域活動・署名キャンペーンに。

No. 41
昭和30〜40年代の銭湯ポスター・相撲の番付表・ホーロー看板の様式美をWebに。にぎやかで人懐こいのに活字と罫線の規律がある。朱と藍のベタ塗りを恐れず、罫線の階層と縦書きで秩序を作る。『レトロ風の小綺麗なカフェ』でなく本物の大衆文化の圧。飲食・銭湯・商店街・観光に。

No. 42
オフホワイトと深い青緑、輪郭線+オフセットの版画風立体で組む、AIの手癖なしの王道SaaSサイト。紫グラデ・影・Interを使わずに清潔さと温かさを両立する。
No. 43
墨一色の濃淡と明朝の大小、たっぷりの余白だけで格を出す monochrome。色を一切足さず、1画面1メッセージの静けさで高級感を語る。高級和食・料亭・旅館・工芸・ギャラリーに。
No. 44
スイス・インターナショナル・スタイルの規律をWebに。厳格な12カラムグリッド、中立なグロテスク書体、無彩色+赤1色で、装飾なしに秩序と説得力をつくる。動かさない静止の強さ。B2B・製造・計測・コンサルに。

No. 45
旅人が宿帳に貼り込んだ切符・スタンプ・地図の切れ端。藁半紙と茶墨、土色の点使いだけで組む、几帳面な人の静かなコラージュ。回転は±1.5度まで、色は土系のみ、動きは一切なし。宿・旅館・ゲストハウス・喫茶・工芸店など、時間の積み重ねを語りたい小規模事業者に。
No. 46
単品通販の縦長ランディングページ。ざくろ色の熱と、根拠を添えた静止数字で勢いと誠実さを両立する。過度な煽りや点滅演出に頼らず、商品の特徴・利用場面・購入者の声・価格・よくある質問を一本道で読み進められる構成。美容・健康食品などの自社通販に。
No. 47
man page と README の様式美をそのままLPにする無彩色・等幅の静かなブルータリズム。装飾を足さず、目次・定義順の見出し・素のtable・反転ハイライトだけで信頼を作る。強調は色でなく反転のみ。開発者向けCLI/OSS/API/インフラ監視に。

No. 48
2000年前後の『未来』をノスタルジーとして再演する。クロームの金属光沢、ワイヤーフレーム球、楕円軌道、ピクセル/液晶表示。チープさは手抜きでなく意図的な様式で、線の精度・色数の抑制・組版の几帳面さで裏づける。音楽・ファッション・Z世代向けに。
No. 49
自主制作ZINEと切り貼りコラージュの様式をWebに。藁半紙の地に超極太の切り抜き文字と手書きの注釈、マスキングテープと値札、ハードオフセット影。整列させず、傾け、重ね、詰める。角丸ゼロ・ぼかしゼロの手づくりのエネルギー。アパレル・カルチャー・イベント・学生向けに。
該当するパターンがありません。