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

制作期間はどのくらいですか？

規模により約4週間が目安です。ヒアリング後に確定します。

公開後の更新はお願いできますか？

はい。月額の運用サポートで承ります。

SCROLL VIDEO

SCROLL SCRUB

スクロールで映像が進む

STAY SHARP

テキストはHTMLのまま映像的に見せる

SCROLL DRAW

HEARING

聞く

PLAN

組み立てる

DESIGN

つくる

PUBLISH

公開する

DRAW 0%

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 あア亜