BRAND

TYPOGRAPHY

ENGLISH (Staatliches)

日本語(Noto Sans JP)

COLOR

#66CC33
brand

#121212
text

#6c757d
gray

#f8f9fa
light

BUTTON

Solid Outline Text
Default Button Button Button
Hover Button Button Button
Pressed Button Button Button
Disabled Button Button Button

ANIMATION

bbb hover

bbb disclosure

linear

ease

ease-out

ease-in

ease-in-out

easeOutExpo

SLIDE UP

.t-up

FADE IN

.t-fade

ONE BY ONE

.t-char

DESIGN & WEB

.t-band

.i-wipe

.i-zoom

.i-curtain

.i-blur

BORDER

BUTTON

DIAGRAM

NUMBER STATS数値強調

実績 件数 KPI

16

BASE PX

4

BREAKPOINTS

9

SPACE STEPS

BAR CHART横棒グラフ

数量比較 達成率 進捗

ITEM A82%

ITEM B54%

ITEM C31%

DONUT CHARTドーナツグラフ

構成比 割合 達成率
ドーナツグラフ 全体に対する割合68%を円弧の長さで示す図 68%

RADAR CHARTレーダーチャート

競合比較 評価バランス
レーダーチャート 5項目の評価バランスを2系列のポリゴンで比較する図 ITEM A ITEM B ITEM C ITEM D ITEM E

LINE CHART時系列グラフ

推移 増減 時系列
時系列グラフ 1月から6月までの主系列と比較系列の推移を折れ線で示す図 JAN FEB MAR APR MAY JUN

COMPARE TABLE比較表

商品 プラン 機能
ITEM Plan A Plan B Plan C
PAGES 5 10 15
PRICE 50 90 130
CHECK

VENN DIAGRAMベン図

集合 共通点 範囲
ベン図 2つの集合の共通部分と差分を示す図 A B BOTH

RELATION MAP相関図

依存 対立 相互関係
相関図 要素Aから要素B・要素Cへの影響を実線と破線の矢印で示す図 NODE A NODE B NODE C

NETWORK MAPネットワーク図

接続 中心と周辺
ネットワーク図 中心要素と5つの周辺要素のつながりを放射状に示す図 HUB

ROW HIGHLIGHT行ハイライト

一覧 行の識別
ITEM DETAIL
PLAN STANDARD
LEAD TIME 4 WEEKS
PAGES 5
SUPPORT 12 MONTHS

STEP LIST工程リスト

手順 順序
1 HEARING 課題と目的を伺う
2 DESIGN 構成と見た目を固める
3 PUBLISH 公開して運用へ

CHEVRON FLOWシェブロンフロー

段階 状態変化
START
ACTIVE
DONE

CYCLE FLOWサイクル図

改善循環 運用
サイクル図 計画・実行・改善の3段階が終点なく繰り返されるプロセスを円環で示す図 IMPROVE CYCLE PLAN DO ACT

PYRAMID LAYERS階層図

優先順位 段階構造

HIGH

MEDIUM

LOW

TREE CHART構成図

組織 構成 親子関係

HQ

SALES

CREATIVE

ADMIN

ROADMAP TIMELINEロードマップ

中長期計画 マイルストーン

2024

DEFINE

2025

Q2

LAUNCH

2026

Q3

ADOPT

POSITION MAPポジショニングマップ

立ち位置 2軸比較
ポジショニングマップ 価格と品質の2軸空間に自社と競合3社の位置関係を示す図 HIGH QUALITY HIGH COST bbb RIVAL A RIVAL B RIVAL C

FORM

入力欄（form-control）

チェック / ラジオ（form-check）

DISCLOSURE

ここをクリックすると開閉するデモです

開くとこのように複数行の文章が現れます。 閉じている間は見出しの一行だけが表示されるため、ページの縦を短く保てます。 長い説明や注意書きを、必要な人にだけ読んでもらう形にできます。

どんな場面で使いますか

よくある質問、料金の但し書き、仕様や対応環境の一覧など、 常に見せる必要はないけれど省けない情報に向いています。 ページの縦を伸ばさずに情報量を確保できます。

ページが重くなりませんか

追加のプログラムを読み込まずに動くため、表示の速さに影響しません。 スマートフォンでもタップで軽快に開きます。 開く動きはブラウザの標準機能とスタイルだけで作っています。

SCROLL VIDEO

SCROLL TO CONTROL

スクロールに連動して動画をコントロール

見せたい場面で、スクロールの手が止まる

SCROLL DRAW

DRAW 0%

FRAME

枠を引く

CONTENT

中身を置く

SCROLL

動かす

SLIDESHOW

画像のスライドショー

写真を複数枚並べ、一定の間隔で自動的に切り替わります

詳しくはこちら

アピール内容を大きく表示

最初に見てほしい一言を、画面いっぱいの文字で置けます

詳しくはこちら

クリックで詳細コンテンツに移動

ボタンの行き先は、問い合わせでも商品ページでも設定できます

詳しくはこちら

指でも矢印でも送れます

スマートフォンは横スワイプ、パソコンは左右の矢印で操作できます

詳しくはこちら

PRICING CARD

BASIC

まずは1ページから始めたい方へ。

¥30,000

MONTH

  • ITEM A 3
  • ITEM B 1
  • ITEM C
選択する
POPULAR

PRO

制作から運用まで任せたい方へ。

¥50,000

MONTH

  • ITEM A 6
  • ITEM B 2
  • ITEM C 4
選択する

PREMIUM

複数サイトをまとめて任せたい方へ。

¥80,000

MONTH

  • ITEM A 9
  • ITEM B 3
  • ITEM C 8
選択する

3 COLUMNS

ブランディング

想いやこだわりを、見える形へ。ロゴや色づかい、言葉のトーンまでを一貫して整え、覚えてもらえるブランドに育てます。

詳しく見る

ウェブ制作

伝える設計と、迷わせない実装。スマホでもパソコンでも快適に閲覧でき、ご担当者様が更新しやすい仕組みを整えます。

詳しく見る

運用サポート

公開後も並走いたします。アクセス解析やコンテンツ更新を通じて、サイトを長く使える資産へと育てていきます。

詳しく見る

6 COLUMNS

SIDEBAR

読みやすさを左右する、余白の設計

2026年5月10日

サイトの印象を決めるのは、写真でもフォントでもなく、じつは「余白」だと考えております。文字と文字のあいだ、見出しと本文のあいだ、写真の周囲に置く空気の量。これらが整っていれば、特別な装飾を加えずとも、内容が静かに伝わってまいります。

余白の設計は、画面サイズによって最適な値が変わります。スマートフォンでの読みやすさと、パソコンでの一覧性。両方を満たすバランスを、コンテンツごとに丁寧に調整いたします。

TYPE SCALE

.clamp100 可変 Aa亜
.clamp50 可変 Aa あア亜
.big50 50px Aa あア亜
.big45 45px Aa あア亜
.big40 40px Aa あア亜
.big35 35px Aa あア亜
.big30 30px Aa あア亜
.big25 25px Aa あア亜
.big20 20px Aa あア亜
.text18 18px Aa あア亜
base 16px Aa あア亜
.small15 15px Aa あア亜
.small14 14px Aa あア亜
.small12 12px Aa あア亜
.small10 10px Aa あア亜
.small8 8px Aa あア亜