セクションから探す

石川商店 · 01

告知バー・ヘッダー

茶色の送料無料告知バー、金色のロゴパネル、フリーダイヤル、キーワード検索、お気に入り・ログイン・カート、グローバルナビを2段で配置。

石川商店 · 02

メインビジュアル

季節の料理写真に縦書きのコピー（「食欲の秋」など）を重ね、右に新米特集・もちきびおはぎなどの特集をサムネ付きの縦リストで並べる。

石川商店 · 03

重要なお知らせ・人気のカテゴリー

角丸の告知バーと、写真にピル型ラベルを載せたカテゴリカードの横スクロール。

石川商店 · 04

石川商店について

収穫風景の写真に、縦書きのステートメント「石川商店はつくり手と食卓を繋ぐ米と雑穀の専門店です」と紹介文を重ねる。

石川商店 · 05

おすすめ商品・人気ランキング・お客様の声

ベージュの面に左サイドのカテゴリナビを置き、商品カード3列、タブで切り替えるランキングのカルーセル、レビューのカルーセルを続ける。

石川商店 · 06

ピックアップ・読みもの・レシピ

番号付きのピックアップ記事、注目の読みものと「よく読まれている記事」、所要時間付きの雑穀レシピカードを並べる。

石川商店 · 07

お知らせ・バナー

角丸カードのお知らせ一覧と田園の写真、HACCP・送料無料・メディア掲載などのバナーカルーセル。

石川商店 · 08

ご利用ガイド・フッター

01〜03の番号付きで送料・返品・支払い方法を案内し、フッターへ。

ワンス・アポン・ア・塊魂 · 01

ヒーロー

時代をまたぐ道が渦を巻く一枚絵の中央にロゴ、左下に「好評発売中」、右上に対応機種のロゴと新しい版の告知バナー。下のクリーム色の帯に角丸のボタンを5つ並べる。

ワンス・アポン・ア・塊魂 · 02

グローバルナビ

紺の市松模様の帯に、TOP・ものがたり・キャラクター・あそびかた・今回の塊魂・製品一覧・スペシャル・購入はこちらを星形の記号で区切って並べる。

ワンス・アポン・ア・塊魂 · 03

お知らせ

筆のイラストの横に、日付と更新情報を3件並べる。

ワンス・アポン・ア・塊魂 · 04

ムービー

砂漠の街の背景に巻物型の見出しを置き、YouTube動画のサムネイルを左右の矢印で送るカルーセルで見せる。

ワンス・アポン・ア・塊魂 · 05

ものがたり

星空の背景に、中央揃えのストーリー文とゲーム画面、宇宙を漂うオブジェクトのイラストを配置する。

ワンス・アポン・ア・塊魂 · 06

キャラクター

ピンクと水色の斜めストライプの背景に登場キャラクターを一面に散らし、新たな仲間を名前付きで並べる。

ワンス・アポン・ア・塊魂 · 07

あそびかた・今回の塊魂

水色の背景に「塊を、ころがして、くっつけて、大きくする！」のコピーと巻き込めるモノの素材を並べ、続いてゲーム画面のカルーセル。

ワンス・アポン・ア・塊魂 · 08

アイテム・カスタマイズ・製品情報

緑の枠のカードでアイテムやカスタマイズ機能を紹介し、製品一覧とスペックへ続く。

ワンス・アポン・ア・塊魂 · 09

フッター

権利表記や関連リンクを置いて締める。

Palazzo Sogni · 01

ヘッダー

左に THE PALACE / ROOMS & SUITES / DINING / SPA、中央にセリフ体のロゴ「PALAZZO SOGNI FIRENZE」、右に CONTACTS、ITA / ENG の切り替え、角を切り欠いた青い BOOK NOW ボタン。スクロール中も固定

Palazzo Sogni · 02

ヒーロー

フレスコ画の天井や大理石のバスルームなど館内の映像・写真を全画面で見せ、中央下に円形の矢印と SCROLL DOWN。

Palazzo Sogni · 03

イントロ・Welcome

大文字のセリフ体で「Palazzo Sogni is a luxury boutique hotel...」のリード、筆記体の「Welcome」と刷毛跡、アーチ形の写真と紹介文。

Palazzo Sogni · 04

ロケーション

Via de' Martelli の立地を大きめのセリフ体で語る文章と、夜の外観写真を左右に並べる。

Palazzo Sogni · 05

Rooms and Suites

桃色がかった背景に筆記体の見出しと植物の線画、アーチ形の写真。続いて「An authentic hospitality experience」と、MAJESTIC SUITE などの客室カードを並べた横スライダー。

Palazzo Sogni · 06

ルーフトップ

ドゥオーモを望む夕景のテラス写真を全幅で見せる。

Palazzo Sogni · 07

Dining

淡い青の背景に筆記体の「Dining」、金色の「SEGRETO」ロゴ、レストランや音楽室の写真と説明を左右交互に配置する。

Palazzo Sogni · 08

Spa・サービス・フォーム

Wellness Rituals と Exclusive services の紹介、問い合わせフォーム、フッター。

太秦映画村 UZUMASA KYOTO VILLAGE · 01

ヘッダー

左に英字ロゴ、中央にイベント・ショー / アトラクション / フード・ショップ / 文化体験・着物 / 営業時間・料金 / 交通アクセスを線画アイコン付きで並べ、右によくあるご質問・Language・MENU。

太秦映画村 UZUMASA KYOTO VILLAGE · 02

ヒーロー

江戸の町並みで着物姿の来園者が笑う写真を全幅で敷き、中央に字間の広い英字ロゴと「太秦映画村」。直下に告知と、本日の営業時間・TICKET・SHOWを並べた焦げ茶の帯。

太秦映画村 UZUMASA KYOTO VILLAGE · 03

PICK UP

縦書きの「PICK UP おすすめ情報」の横に、茶道・和装レンタル・茶屋などの写真カードを横に並べるスライダー。

太秦映画村 UZUMASA KYOTO VILLAGE · 04

目的別バナー

「夜も楽しめる映画村」「家族で映画村を楽しもう」など、写真に英字の小見出しと大きな明朝の見出しを重ねた横長バナー。

太秦映画村 UZUMASA KYOTO VILLAGE · 05

カテゴリ別の章

壱〜肆の漢数字と縦書きの英字を振った、イベント&ショー・アトラクション・文化体験・着物・フード・ショップの各章。写真カードのスライダーと一覧へのリンクを置く。

太秦映画村 UZUMASA KYOTO VILLAGE · 06

江戸の町

濃いグレーの背景に町並みの写真を横に並べ、下端を弧で切り取って生成りの次の章へつなぐ。

太秦映画村 UZUMASA KYOTO VILLAGE · 07

映画村の楽しみ方

マガジン「映画村浮世文々」の記事一覧と、誰と楽しむ？ などを円形ボタンで選んでプランを探す「うずまさ案内帖」を左右に並べる。

太秦映画村 UZUMASA KYOTO VILLAGE · 08

楽しみ方から探す・お知らせ・ABOUT

円形のタグボタンが並ぶ「CHOOSE YOUR EXPERIENCE」、お知らせ一覧、施設紹介と団体旅行の案内。

太秦映画村 UZUMASA KYOTO VILLAGE · 09

フッター

アクセスやよくある質問への導線、施設情報を置いて締める。

Elva · 01

ヘッダー

左に角丸の枠で囲んだ「elva」ロゴ、右に半透明のピル型ボタン「Try Yourself」。左下に制作会社のクレジットバッジを固定表示。

Elva · 02

ヒーロー

黒地にぼかした巨大な英文コピーを敷き、中央にスマホのモックアップ。画面の中に人物の映像と「Meet Elva. A filmmaking crew in your phone.」を映す。

Elva · 03

ステートメント

「Every video holds a feeling. But it gets lost…」など、動画が埋もれる悩みからElvaの解決までを大きな英文で1文ずつ見せる。

Elva · 04

使い方

「Upload your videos and photos.」「Describe what you want」「Elva syncs your moments to music」「Pick a story.」の流れで手順を示す。

Elva · 05

撮影機能

Pose Mirror、Real-time Guidance、Flow Arcs、Lighting Spot、Scene Sense を、見出しと短い説明で順に紹介する。

Elva · 06

クロージング

「Just shoot.」で始まる締めのコピーと、「Get the Elva app」のアプリ入手導線。

Elva · 07

フッター

問い合わせ・プレス・採用などの連絡先メールアドレスと SNS アイコン。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 01

FV

黄〜橙のグラデーションにキャラクターが宙を舞うキービジュアルとロゴ。右上に吊り看板型のMENU、左上にリボン型の「OFFICIAL X」、右端に丸いキャラクターバッジ。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 02

放送告知

テントを思わせる橙と空色の背景に、監督・キャラクター原案・シリーズ構成・制作の布陣と放送開始日時。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 03

NEWS

円弧に沿った小さな「GROW UP SHOW」と大きな英字見出し、日付をリボン型のタグにしたニュース一覧。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 04

MOVIE

テントの幕のシルエットで切り抜いた動画枠と、黄色の丸い再生ボタン。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 05

INTRODUCTION

左右に紅白の幕を配し、中央寄せであらすじを語る。下端に波打つ巨大な英字の帯。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 06

STAFF & CAST

アーチ形の黄色い面に、丸いメダル状の文字で「STAFF」「CAST」を掲げ、4列でクレジットを並べる。

TVアニメ『グロウアップショウ ～ひまわりのサーカス団～』 · 07

CHARACTER

左にスカラップ縁のアイコン一覧、中央に立ち絵、縦書きのセリフと名前、右にキャラクターペアビジュアルへの導線。

株式会社トヨックス 採用サイト · 01

ヘッダー

左にTOYOXロゴと「RECRUIT SITE」、右に角丸の枠で囲んだ4項目のドロップダウンナビ。スクロール後は白いカプセル型の固定ヘッダーになり、ENTRYボタンが加わる。

株式会社トヨックス 採用サイト · 02

ヒーロー

社員写真のスライドに、斜めに組んだ太いコピー「〇〇の未来につながる仕事」（モノづくり・地域・世界）と白い曲線を重ねる。左下にホワイト企業認定のバッジ、下部の波の上にNewsを1行表示。

株式会社トヨックス 採用サイト · 03

イントロダクション

「世界のモノづくりを支える、グローバルニッチNo.1企業へ。」の見出しとステートメント。背景に淡い世界地図を敷き、角丸の写真を左右に置く。

株式会社トヨックス 採用サイト · 04

工場の「血管」

山並みと街の写真を背景に、ホースがモノづくりの現場を支えていることを中央揃えの白文字で語り、事業紹介へ誘導する。

株式会社トヨックス 採用サイト · 05

会社を知る

雲形の淡いブルーの面に「私たちの歩み」「職種紹介」の2つの入口を置く。

株式会社トヨックス 採用サイト · 06

働く人を知る

縦書きの「社員インタビュー」見出しと、角丸の背景に切り抜いた社員写真のカルーセル。

株式会社トヨックス 採用サイト · 07

クロストーク

「#01」「#02」の番号バッジと角丸写真で、座談会とプロジェクトストーリーを紹介。

株式会社トヨックス 採用サイト · 08

働く環境を知る

福利厚生と教育（共育）制度の2つの入口を、雲形の面と写真で見せる。

株式会社トヨックス 採用サイト · 09

エントリー・フッター

青地に「トヨックスはまだまだ進化の途中。」のメッセージ、新卒・キャリア・インターンの角丸カード3枚、画面幅いっぱいに流れる「ENTRY」の文字。

『ぽこ あ ポケモン』公式サイト · 01

ヘッダー

赤い帯の中央にゲーム機のロゴ、右上に紫の丸いメニューボタン。

『ぽこ あ ポケモン』公式サイト · 02

ヒーロー

画面いっぱいにゲームの村を見下ろしたビジュアル。中央上にタイトルロゴ、左下に「好評発売中！」の購入吹き出し、右下に動画を開くボタン、左に有料追加コンテンツのバッジ。

『ぽこ あ ポケモン』公式サイト · 03

最新情報

黄緑の地面に木の看板の見出し、無料アップデートのバナー、カテゴリタグ付きの4枚のニュースカード、「もっと見る」ボタン。

『ぽこ あ ポケモン』公式サイト · 04

ストーリー導入

暗い洞窟のシーンに「すこしずつ、すこしずつ。作ろう、みんなで暮らす」のコピーを重ね、物語に入る。

『ぽこ あ ポケモン』公式サイト · 05

新生活の紹介

看板見出しの下に雲形の吹き出しの説明、主人公の2つの姿を矢印でつなぐ図、傾けて重ねたゲーム画面の写真。

『ぽこ あ ポケモン』公式サイト · 06

のんびり生活

空色の背景に切り替わり、ゲーム画面のスライダーと説明の吹き出し、「街でののんびり生活」のボタン。

『ぽこ あ ポケモン』公式サイト · 07

ポケモン紹介・特典

キャラクターの集合イラストと「くわしくはこちら」、早期購入特典への2つのボタン。

『ぽこ あ ポケモン』公式サイト · 08

商品情報・フッター

黄色いタイルの枠でパッケージ画像と仕様の表を並べ、フッターへ。

白骨温泉 · 01

ヘッダー / ファーストビュー

和紙のような地に、左端の縦書きキャッチ「静寂と四季の彩り、湯に浸り 人は本来の姿に還る」、中央の筆文字ロゴ「白骨温泉」と「還る場所、しらほね」、右の縦組みナビ（白骨物語・宿・施設について・湯について ほか）。下半分に湯の花がこびりついた岩と苔の接写を敷き、小さな写真の窓を重ねる。

白骨温泉 · 02

写真スライド

渓流や紅葉の写真を横長に見せるスライド。

白骨温泉 · 03

白骨物語

縦書き本文の白いカード「白骨物語」と、「守る人」「語る人」「集う人」の3つの読み物への入口を写真付きで並べる。

白骨温泉 · 04

湯について

湯けむりの写真の下に、縦組みの見出し「湯について」と「三日入れば、三年風邪をひかない。」などの縦書き本文、「詳しく見る」。

白骨温泉 · 05

宿・施設について

谷あいの温泉街の俯瞰写真と縦書きの紹介文に続き、宿や店を小さな写真・キャッチ・名前のリストで2列に並べる。

白骨温泉 · 06

周辺散策・近隣観光

左に紅葉や滝の写真グリッド、右にグレージュの地で『大菩薩峠』の一節を引いた縦書きの紹介文。

白骨温泉 · 07

お知らせ

日付とタイトルのリストの右に、縦書きの見出し「お知らせ」。

白骨温泉 · 08

交通アクセス

墨で塗ったような質感の地図にピンを立て、観光案内所の住所と行き方をカードで重ねる。

白骨温泉 · 09

フッター

木造の旅館の写真を背景にした締め。

The Pop-Up Hotel · 01

ヘッダー

左にメニューとBOOK NOW、中央に「STAY AT THE WORLD'S GREATEST EVENTS」、右にお気に入り・検索・アカウント・カートのアイコン。細い罫線で区切る。

The Pop-Up Hotel · 02

ヒーロー

イベント会場の場面を映すフルスクリーンのビジュアルに、中央の「THE POP-UP HOTEL」ロゴと、左右下の「Where Unforgettable Moments」「Meet Unparalleled Comfort」のイタリック。画面中央に縦の細線。

The Pop-Up Hotel · 03

イベント一覧

Monza Grand Prix を全幅で、Monaco Grand Prix・British Grand Prix・The Ryder Cup, Adare・During Glastonbury を2列の写真タイルで並べ、会場名を手書き文字で重ねる。

The Pop-Up Hotel · 04

Collaborators & Clients

罫線に挟まれた小さな見出しと、協業ブランドのロゴを横一列に並べる。

The Pop-Up Hotel · 05

Truly Unforgettable

大小2枚の写真をずらして重ね、右に「Event Experiences Unlike Any Other」の見出しと紹介文、LEARN MOREボタン。

The Pop-Up Hotel · 06

レビュー

深緑の背景に新聞のロゴと推薦コメントのイタリック、右に写真のスライダーと「01 / 06」のカウンター、矢印ボタン。

The Pop-Up Hotel · 07

News & Insights

左にサムネイル付きの記事リスト、右に注目記事のカード、最下部にALL INSIGHTSボタン。

The Pop-Up Hotel · 08

フッター

チャット相談の導線、ホテル・部屋・コンタクトのリンク、ニュースレター登録、画面幅いっぱいの「THE POP-UP HOTEL」ロゴで締める。

2xA Studio · 01

ヘッダー

左に「2xA STUDIO」、中央寄りに「ATH(GR)」「AMS(NL)」と2拠点の時刻、右に ABOUT / PROJECTS / CONTACT。縦長の等幅書体で統一。

2xA Studio · 02

ヒーロー

黒地のキャンバスに、キリル文字を詰めたNの字形、ASCII文字のグラデーション、座標のような数字など、ジェネラティブな作品が切り替わりながら表示される。

2xA Studio · 03

ロゴ

角丸の短いバーを並べて組んだ巨大な「2xA STUDIO」を画面幅いっぱいに置く。

2xA Studio · 04

Generative Code Explorations

黒地に大見出しを分割して配置し、実験作品のサムネイルを不揃いなグリッドに散らす。

2xA Studio · 05

About

白地に「Code-Driven Design Studio Between Amsterdam & Athens」の大見出しと段組の本文を重ね、単語を画面幅に均等割りした「On Computation As A Way Of Thinking」の一行で区切る。

2xA Studio · 06

Selected Projects

「View All (5)」への導線と、ABR Festival・Buna Tetu・Miao World の作品写真と説明文を番号付きで並べる。

2xA Studio · 07

Awards & Achievements

黒地に大見出しを重ね、プロジェクト・組織・受賞・年の4列の表で受賞歴を並べる。

2xA Studio · 08

フッター

バー状の巨大なロゴの下に Instagram / Behance / メールアドレス / Privacy と「STUDIO SOUNDS」。

株式会社ADDICT · 01

ヘッダー

左にADDICTのセリフロゴ、右に黒い帯の中にABOUT・SERVICE・WORKS・NEWS・oneviewと、白いCONTACT・RECRUITボタン、メニュー。

株式会社ADDICT · 02

ヒーロー

モノクロのダッシュボード画面や赤い床のオフィス通路の画像に、「CREATE OBSESSION」「執着を創れ。」と巨大な「執着」の文字を重ねる。左下に最新ニュースの帯、右下にSCROLL DOWNと赤い菱形。

株式会社ADDICT · 03

WHAT WE DO

黒地に「美容に、狂気と論理を。市場に、抗えない熱狂を。」と会社紹介の文章、会社概要へのボタン。

株式会社ADDICT · 04

ワードマーク・実績紹介

石目調のライトグレーの地に画面幅いっぱいのADDICTのワードマークを置き、実績紹介のパートへつなぐ。

株式会社ADDICT · 05

ブランドロゴ

美容ブランドのロゴを2段で横に並べて流す。

株式会社ADDICT · 06

OUR SOLUTION（執着の2要素）

グレーの地に、赤い細線の図形で2つの要素を示す。

株式会社ADDICT · 07

NUMBERS・サービス

数字で見るADDICTと、サービス紹介のパート。

株式会社ADDICT · 08

ONEVIEW・ニュース・フッター

自社プロダクション「ONEVIEW」の紹介と、ニュース一覧で締める。

TVアニメ『キルアオ』 · 01

オープニング

黒いかすれ模様の地の中央に「KILL BLUE キルアオ」のロゴだけを置いたローディング画面。

TVアニメ『キルアオ』 · 02

ヒーロー

左に蛍光イエローの地でロゴ・放送日・NEWS／STORY／CHARACTER などの大きな目次と SNS、右にキービジュアルと縦書きのキャッチ。下に VISUAL CHANGE の丸いサムネイル3つ。

TVアニメ『キルアオ』 · 03

NEWS

小さな英字ロゴを重ねた見出しと、大きな日付＋タイトルの一覧を点線で区切り、MORE へつなぐ。

TVアニメ『キルアオ』 · 04

MOVIE

全幅の動画プレイヤーと、左右の PREV / NEXT の丸ボタン。

TVアニメ『キルアオ』 · 05

STORY

薄いグレーの地に斜めに走るピンク・水色の帯と巨大な英字を敷き、あらすじを配置する。

TVアニメ『キルアオ』 · 06

CHARACTER

顔アイコンを円形に切り抜いて並べたグリッドと、選んだキャラクターの名前・キャストを見せる詳細エリア。

TVアニメ『キルアオ』 · 07

STAFF&CAST

斜めの帯と巨大な英字を背景に、スタッフとキャストの名前を太い書体で中央揃えに列挙する。

TVアニメ『キルアオ』 · 08

COMIC

水色の背景に原作コミックスの書影と説明、試し読みボタン。

TVアニメ『キルアオ』 · 09

フッター

権利表記とリンクで締める。

KAMITSUBAKI WARS 2026 神椿横浜決戦 · 01

タイトル

黒地の上部に「KAMITSUBAKI WARS 2026」のステンシル調ロゴと「神椿横浜決戦 in ぴあアリーナMM」の副題を中央揃えで置く。

KAMITSUBAKI WARS 2026 神椿横浜決戦 · 02

DAY-1パネル

V.W.P 4th ONE-MAN LIVE「現象IV」のKVに、公演ロゴと大きな「DAY-1 »」を重ねた入口。

KAMITSUBAKI WARS 2026 神椿横浜決戦 · 03

DAY-2パネル

花譜の KAF 5th ONEMAN LIVE のKVに、公演ロゴと大きな「DAY-2 »」を重ねた入口。

KAMITSUBAKI WARS 2026 神椿横浜決戦 · 04

ゲート構成

トップはこの1画面（section#gate）だけで、各公演の特設ページへ振り分ける。

KAMITSUBAKI WARS 2026 神椿横浜決戦 · 05

SP版

2枚のパネルを縦に積み、公演ロゴと「DAY-1 »」「DAY-2 »」を半透明の枠に収めて下部に置く。

ある日、森のなか。［長野県信濃町］ · 01

ヒーロー

森の地面の写真に、動物が積み重なった白い切り絵、縦書きの「信濃町」「自然とともに未来を考えられる」と英文、左下にメディア名、右下にイベント・移住相談の告知カード。上部に 遊ぶ・学ぶ・行く・暮らす・読む のナビと「探索する」ボタン。

ある日、森のなか。［長野県信濃町］ · 02

お知らせ帯

サイトのリニューアルや仕事情報の更新を2行で伝える細い帯。

ある日、森のなか。［長野県信濃町］ · 03

イントロダクション

「旅する人も、暮らす人も、森の物語の登場人物。」から始まる文章と、田園・湖・雪山の写真を左右交互に配置する。

ある日、森のなか。［長野県信濃町］ · 04

町の紹介

舞い落ちる葉のイラストから、山並みとトウモロコシ畑の写真へ。町の概要文と「信濃町を学ぶ」の導線。

ある日、森のなか。［長野県信濃町］ · 05

数字の帯

人口、東京からの所要時間、夏の平均気温などを、大きな数字で横に並べて町を紹介する。

ある日、森のなか。［長野県信濃町］ · 06

あそぶ / くらす

写真と白い切り絵、縦書きの見出しを組み合わせた目的別の入口を、左右を入れ替えながら並べる。

ある日、森のなか。［長野県信濃町］ · 07

風景バナー

「自然とともに未来を考えられる信濃町」のバナーと、湖の横長写真。

ある日、森のなか。［長野県信濃町］ · 08

よみもの

縦書きの紹介文と切り絵の見出しの下に、少しずつ傾けた記事カードを横に並べる。