NGOGO.NET — DESIGN DEMO PORTAL
DESIGNSHOWCASE®
業種別デモサイトのショーケースです。SWELLを土台にした構築と、親テーマを持たないオリジナルテーマの開発、いずれもデザイン・アニメーションはフルスクラッチで実装しています。実案件では、貴社のブランド・素材・要件に合わせてゼロから設計します。
SCROLL
Selected Works
デモサイト一覧
( 11 )
No. 01
DEALERSHIP5 PAGESCINEMATICFIGMA
Luxury Automotive
VELOCE｜プレミアム輸入車ディーラー
漆黒×シャンパンゴールドのシネマティック系。在庫車両カード・価格表示・買取/整備/ファイナンスの事業紹介・来店予約フォームまで、高級ディーラーに必要な一式を5ページで実装。
VIEW DEMO→
No. 02
CORPORATE5 PAGESSCROLL FX
Architecture Firm
KUON ARCHITECTS｜建築設計事務所
ダークトーン×明朝体のハイエンドブランディング。施工事例ギャラリー・設計思想・会社概要・問い合わせフォームの5ページ構成。パララックスと画像ワイプで「静かな高級感」を演出。
VIEW DEMO→
No. 03
RESORT5 PAGESFAQ ACCORDION
Glamping Resort
LUONTO RESORT｜グランピング
フルスクリーン写真で魅せる没入型リゾートサイト。客室ギャラリー・体験メニュー・ダイニング・アクセスFAQの5ページ。ヒーローのクロスフェードとパララックスが見どころ。
VIEW DEMO→
No. 04
CLINIC5 PAGESPRICE TABLE
Beauty Clinic
LUCE｜美容クリニック
アイボリー×ローズゴールドのエレガント系。アーチ型ヒーロー・円形ギャラリー・診療メニュー料金表・予約フローまで、医療系サイトに必要な要素を一式実装。
VIEW DEMO→
No. 05
EVENT LP1 PAGEPOP DESIGN
Event Landing Page
いぬsotodays｜イベント特設LP
手描き風ポップの単ページLP。丸ゴシック×カラフルロゴ×波型ディバイダーで「ワクワク感」を設計。イベント・キャンペーンの特設ページ想定のデモです。
VIEW DEMO→
No. 06
FINE DINING5 PAGES縦書き / 横スクロール
Japanese Restaurant
懐石 玄｜京都・料亭
墨黒×金の和モダン。縦書きヒーロー、スクロールで横に流れる室礼ギャラリー、お品書き・個室・主人の物語まで。飲食店に必要な「品格」をWebで再現した5ページ。
VIEW DEMO→
No. 07
BRIDAL5 PAGESPARALLAX
Wedding Venue
AOI TERRACE｜邸宅貸切ウェディング
アイボリー×セージのライト＆エアリー。写真が異なる速度で動くパララックスヒーロー、モザイクギャラリー、料金プラン3種、実例ストーリー、FAQまで実装。
VIEW DEMO→
No. 08
HIGH JEWELRY5 PAGESSCROLL SCALING
Jewelry Maison
瑠璃 RURI｜銀座ハイジュエリー
白磁×漆黒×瑠璃色のギャラリー的レイアウト。1文字ずつ立ち上がるヒーロー、スクロールで画面幅まで広がる大判ビジュアル、コレクション・工房・オーダーメイドの5ページ。
VIEW DEMO→
No. 09
荘厳 / SOLEMN1 PAGE緞帳アニメFIGMA
Symphony Orchestra
東京フィルハーモニア｜交響楽団
漆黒×ワインレッド×ゴールド。スクロールで緞帳が左右に開き、シーズンプログラムが姿を現します。定期演奏会・座席料金表・楽団紹介まで1ページに凝縮。
VIEW DEMO→
No. 10
モダン / MODERN1 PAGECOUNT UP
Coworking Space
STAND. TOKYO｜コワーキング
白×黒×ライムの大胆なグロテスク体レイアウト。スクロール進捗バー、逆方向に流れる2本のマーキー、数字のカウントアップ、料金プラン3種を実装。
VIEW DEMO→
No. 11
カジュアル / CASUAL1 PAGE注がれる演出
Craft Brewery
HOP & CO.｜クラフトビール醸造所
クリーム×アンバー×ターコイズのスラブセリフ。スクロールした分だけビールが注がれる帯、ABV/IBUメーター、回転バッジ、ジグザグ罫でクラフト感を演出。
VIEW DEMO→
+
NEXT PROJECT — COMING SOON
Scale & Stack
規模に耐える設計と、技術の選び方
( 05 )
サイトの規模は、ページを何枚描いたかではなく、増えても壊れない構造を持っているかで決まります。そして土台となる技術には、それぞれ得意な場面があります。まず選択肢の違いを整理し、そのうえで自社で開発・運用している4本の実例と、同じ設計をWordPressで組んだデモ1本をご紹介します。
管理画面から、誰でも更新できる
世界のWebサイトの約4割が採用しているCMSです。ページの追加、文章の修正、写真の差し替えを、専門知識なしに社内で行えます。
- 向いている場面
- お知らせやブログを社内で頻繁に更新したい／複数の担当者が触る／将来担当者が代わる可能性がある
- 強み
- 制作会社を変えても引き継げる。扱える人材が多く、機能追加の選択肢も豊富です。
- 気をつける点
- 表示速度は対策が前提。プラグインの更新と脆弱性対応が続くため、保守とサーバー費が継続的にかかります。
あらかじめ組み上げて、待たせない
閲覧されたその場で計算せず、公開前にページを組み立てて配信する方式です。結果として非常に速く、壊れにくく、配信コストがほぼかかりません。
- 向いている場面
- 製品・物件・比較データなど構造化された情報が数百〜数千件ある／表示速度とSEOを最優先したい／更新は定期的にまとめて行う
- 強み
- データを差し替えるだけで数千ページが一斉に更新されます。攻撃対象になる仕組みを持たないため安全性が高く、サーバー費もほぼ不要です。
- 気をつける点
- 管理画面は標準では付かないため、更新の仕組みを別途設計します（自動化してしまえば運用負荷はむしろ下がります）。
会員機能や予約など、動くサイトへ
人によって表示が変わる、状態がリアルタイムに動く——そうしたアプリに近いサイトを作るための仕組みです。
- 向いている場面
- 会員登録・マイページがある／予約や在庫がその場で変わる／管理画面付きのサービスを作りたい
- 強み
- 画面と裏側の処理を一つの土台でまとめて開発できます。
- 気をつける点
- 一般的なコーポレートサイトやLPには過剰です。制作費も、その後の維持・改修費も上がります。
使い分けの目安
| お知らせやブログを、社内で毎週更新したい | WORDPRESS |
|---|---|
| 商品・物件・比較データが数百件以上あり、一覧や絞り込みで見せたい | ASTRO WORDPRESS |
| 数千ページを、データ更新にあわせて一括で作り直したい | ASTRO |
| 会員登録・マイページ・予約など、利用者ごとに表示が変わる | NEXT.JS |
| ランディングページを1枚だけ作りたい | ASTRO WORDPRESS |
以下は、自社で開発し、現在も運用している4本です。うち3本はAstro製で、規模も目的もそれぞれ異なります。5本目は、同じ「絞り込みで見せる」設計をWordPressで組んだデモです。
SC. 01 — Data-Driven Site
不動産成約価格マップ｜成約相場
国土交通省の不動産取引データ125,382件を、市区町村・町名の単位まで再構成した相場データベース。公開ページは2,745ですが、1枚ずつ作ってはいません。テンプレートと分類を設計し、データが増えればページが増える構造にしています。更新は月次のバッチで自動実行。
自社サービスとして開発・運用中の実例です。
サイトを見る→
SC. 02 — Same Site, Two Stacks
RankBase｜商品比較・ランキングメディア
本番サイトはAstroで構築。加えて、同じ要件をWordPressのオリジナルテーマでも構築しています（下の「自社開発テーマ」枠）。市場を追加してもテンプレートは増えず、データを足せばページが生成されます。ランキングの更新は自動実行。
同一の要件を両方の技術で作っているため、違いを実感としてご説明できます。
サイトを見る→
SC. 03 — Structured Database
サブスク解約ナビ｜kaiyaku.net
動画配信・携帯回線・ジムなどの解約手順を、1サービス1ページにまとめた情報データベース。公開111ページ。サービス名の検索と目的別カテゴリの2系統で、探している情報へ最短で到達する導線を分類設計から組み立てています。
自社サービスとして開発・運用中の実例です。
サイトを見る→
SC. 04 — Logic in the Browser
退去費用チェッカー｜taikyo-check.jp
請求明細を入力すると、国土交通省「原状回復をめぐるトラブルとガイドライン」に照らして負担区分を判定するツール。入力内容は画面の中だけで処理し、外部へ送信しません（登録不要）。Astroは大量ページ専用ではなく、9ページの小さなツールでも速度と安全性の利点はそのまま効きます。
自社サービスとして開発・運用中の実例です。
サイトを見る→
SC. 05 — Same Idea, on WordPress
医療機器カタログ｜絞り込み検索デモ
上の3本と同じ「データで見せる」設計を、WordPressで組んだ場合のデモです。架空の医療機器メーカーの製品60点を、カテゴリ・法令上のクラス分類・設置場所・診療科の4軸で絞り込め、条件を足すたびに件数がその場で変わります。テーマもプラグインも自社で書き起こし、既製の検索プラグインは使っていません。絞り込んだ条件はURLに残り、そのまま資料請求フォームまで引き継がれます。
受注前にご覧いただくためのデモサイトです（企業・製品・承認番号はすべて架空）。制作の工程・期間・費用は、デモ内の「このデモについて」に掲載しています。
デモを見る→
Original Theme
自社開発テーマ
( 02 )
OT. 01
ORIGINAL THEMEMEDIAFULL SCRATCH
Comparison Media
RankBase｜商品比較・ランキングメディア
既成テーマを使わず、WordPressテーマ「rankbase-portal」をフルスクラッチ開発。「買う前に、条件で比べる。」をコンセプトに、記事型ではない独自のアーカイブ構造と比較カードUIをテーマ側で実装しています。
VIEW SITE→
OT. 02
ORIGINAL THEMECORPORATEFULL SCRATCH
Local Builder
デモ工務店｜地域工務店向けテーマ
工務店・住宅会社向けに開発したオリジナルテーマ「obriginy-koumuten」のデモサイト。施工事例・家づくりの流れなど工務店サイトの定番構成を、管理画面から更新できる形でテーマに組み込んでいます。
VIEW SITE→
Design Data
Figmaデザインデータ
( 02 )
コードとデザインを、どちらの向きでも扱えます。お預かりしたFigmaデータからの実装はもちろん、公開中のサイトからFigmaデータを起こすことも可能です。以下は、上記デモサイトのうち2本をFigmaに再構築したものです。
FD. 01 — Static Design File
VELOCE｜LPデザインデータ
No.01のトップページをFigmaで再構築。カラートークン9色を変数化して全レイヤーにバインドしているため、1か所の変更が全体へ反映されます。オートレイアウトで組んであり、文字量が変わってもレイアウトは崩れません。
配色・字送り・余白まで実装と同じ値で構築しています。
FIGMAで開く→
FD. 02 — Motion File
東京フィルハーモニア｜モーションデータ
No.09の動きをFigma Motionのキーフレームで設計。背景3枚のクロスフェードと見出しの時間差表示、緞帳が左右に開く演出の2ボード構成です。実装前に「どう動くか」を合意するための資料としてお渡しできます。
上の4コマは、実際のモーションデータから0.5秒／1.2秒／1.7秒／2.4秒を書き出したものです。
FIGMAで開く→
About
このポータルについて
( 03 )
01 — PURPOSE
実装力の見えるカタログ
「どんなサイトが作れるのか」を、言葉ではなく動くデモでご確認いただくためのショーケースです。デザインの方向性が異なる複数の業種を用意しています。
02 — STACK
SWELL活用も、自社テーマ開発も
国内シェア上位のテーマSWELLを土台にした構築に加え、オリジナルWordPressテーマのフルスクラッチ開発にも対応。いずれも納品後は管理画面から更新できます。
03 — NOTE
架空企業・フリー素材で構成
掲載中の企業・店舗・料金はすべて架空です。写真はUnsplash（無料商用ライセンス）を利用し、実案件ではご支給素材・有料素材に差し替えて制作します。