Stack Studio — Bento グリッド
SaaS の機能紹介サイトを、Apple 風の bento(弁当)グリッドで構成したサンプルです。各カードを違うサイズ・色・グラデで配置して、1 画面で世界観を伝えます。
SaaS、開発ツール、API サービス、AI プロダクトなど、「機能と数字でテンポよく見せる」種類のプロダクトサイトのサンプルです。
こんな方に向いています
- 開発者向けの SaaS や API プロダクト
- 機能を一覧で見せたいツール系プロダクト
- Apple 風の bento レイアウトに合うブランド
構成
全体を 6 カラムの bento グリッドで組み、HERO・統計・機能・コードブロック・テスティモニアル・プライシング・CTA を、サイズと色を変えたカードで配置しました。スクロールしながら段ごとに「画面が完結する」感じを狙っています。
live preview
プレビュー
related
関連するサンプル
IT・テック の他のサンプル、または 複数セクション HP の似た構成のサンプルです。
Tech Blog orca
IT・テック · 白・コード色・モノスペース 2026-05-07
Tech Blog orca
技術記事を継続的に積み上げていくスタートアップ向けの開発ブログ CMS サンプル。タグフィルタとシリーズ表示を備えた構成です。
タグフィルタシリーズRSS / Atomコードハイライト
IT・テック · ボールド・グラデ・大胆・ピンク × 紫 2026-05-05
TILT Creative — ボールドな広告代理店
尖った広告代理店・クリエイティブブティック向け。ピンクと紫のグラデと巨大文字で、攻めの姿勢を視覚化したサンプルです。
大文字キャッチケーススタディ 4 件サービスメニューメンバー
IT・テック · バウハウス・原色三色・幾何学・グリッド 2026-05-05
KREIS Inc. — バウハウス原色
デザインシステム会社のサイトを、バウハウスの三原色と図形(円・三角・四角)で組んだサンプルです。Helvetica 風の太いサンセリフと厳密なグリッドで構成しています。
サービスプロセスケースファクト
IT・テック · サイバーパンク・CRT・グリッチ・マゼンタ・モノスペース 2026-05-05
NULL.CITY — サイバーパンク密度
VTuber エージェンシーのサイトを、ターミナル UI と CRT スキャンラインで構成。ASCII アートでサイバーパンクの空気を出しました。
タレント一覧週間スケジュールサービスオーディション
このサンプルが気になったら
このサンプルをベースに、文章・写真・色味をお客さまの事業に合わせて作り直してご提供できます。
まずは 30 分の無料相談で、構成のすり合わせから始めましょう。