SHEET K-44

番号で指示できる見本帳

文字の見本市

文字の表現と組み方を52種類、架空のサイトの一場面として並べました。押すと大きく見られます。番号を伝えるだけで、制作の指示になります。

和文の組み方

縦組み・字間・ジャンプ率。日本語ならではの組み方で、品格や温度を出す。

  • 季節を、
    ひと口に。

    千本通にて 創業百年

    菓

    縦組みの明朝

    和菓子店の最初の画面

    向く場面
    和菓子・旅館・料亭など、品格と季節感を出したい時
    技術
    writing-mode: vertical-rl

    Shippori Mincho

  • 静けさを、泊める。

    箱根 仙石原 — 七室だけの宿

    字間を大きく開ける

    旅館のコンセプト

    向く場面
    静けさ・余白・ゆとりを伝えたい見出し
    技術
    letter-spacing

    Shippori Mincho

  • 余白は、
    設計できる。

    住宅・店舗・公共建築の設計。
    光と風の通り道から考えます。

    ジャンプ率の大きい見出し

    建築事務所のトップ

    向く場面
    主張をはっきり見せたい会社・作品の紹介
    技術
    見出しと本文の大きさの比を大きく取る

    Noto Sans JP

  • 米と水と人。

    純米吟醸 — 灘の蔵より

    漢字だけを大きく

    日本酒の蔵の見出し

    向く場面
    素材・原料・こだわりを一字で印象づけたい時
    技術
    文字ごとに大きさを変える（span）

    Shippori Mincho

  • 大正12年創業ちょうど100年目の、
    いつもの味。

    縦組みの中の横向き数字

    老舗の創業年

    向く場面
    縦組みで年号・数字を見せる老舗・歴史の紹介
    技術
    text-combine-upright

    Shippori Mincho

  • 一期一会いちごいちえ

    一服の、和敬清寂わけいせいじゃく。

    ルビを添える

    茶道教室の見出し

    向く場面
    難しい読みの言葉・作品名・専門用語
    技術
    ruby / rt

    Shippori Mincho

  • 詰めない新製品「ミライ」、ついに発売へ。

    詰める新製品「ミライ」、ついに発売へ。

    約物を詰める

    ニュースの見出し（詰めない／詰める）

    向く場面
    括弧や句読点が多い見出し。間延びを防ぐ
    技術
    font-feature-settings: "palt"

    Noto Sans JP

  • 濃厚、
    一杯入魂。

    麺

    豚骨醤油 ／ 創業 二〇〇四

    極太ゴシックのキャッチ

    ラーメン店のトップ

    向く場面
    飲食・セール・イベントなど、勢いと力強さ
    技術
    極太の和文書体

    Dela Gothic One

  • あそんで、まなんで、おおきくなる。

    やさしい丸ゴシック

    保育園のトップ

    向く場面
    保育・医療・子ども向け・地域のお店
    技術
    丸ゴシック

    Zen Maru Gothic

  • 朝いちばんのパンと、季節の野菜。
    台所に立つ人たちを訪ねました。

    台所の、
    四季。

    SPECIAL ISSUE

    縦組みと横組みを混ぜる

    雑誌の扉

    向く場面
    読み物・特集ページ・ブランドの物語
    技術
    writing-mode を要素ごとに切り替え

    Shippori MinchoNoto Sans JP

  • 3,980万円（税込）

    南青山 3LDK ／ 82.4㎡ ／ 最上階

    数字を主役に、単位は小さく

    不動産の価格表示

    向く場面
    価格・実績・面積など、数字で伝える場面
    技術
    数字と単位で大きさと書体を変える

    FrauncesNoto Sans JP

  • 神無月の献立

    • 秋刀魚の塩焼き
    • 松茸の土瓶蒸し
    • 栗ご飯
    • 柿の白和え
    • 銀杏の素揚げ

    散らし書き

    和食店のお品書き

    向く場面
    和食・季節の献立・手紙のような演出
    技術
    縦組みの行ごとに開始位置をずらす

    Shippori Mincho

欧文

極太・長体・イタリック・等幅。英字の書体の選び方で、印象が大きく変わる。

  • PUSH
    YOUR
    LIMIT

    極太の大文字

    スポーツジムのトップ

    向く場面
    スポーツ・フィットネス・イベント
    技術
    可変フォントの最大の太さ

    Roboto Flex

  • MAISON KAGE

    AUTUMN / WINTER 2026

    細長く詰めた文字（長体）

    ファッションブランドのロゴ

    向く場面
    ファッション・建築・縦長の空間を活かす時
    技術
    可変フォントの幅の軸（wdth）

    Roboto Flex

  • Wine List

    • Chablis Premier Cru2,400
    • Barolo Riserva3,200
    • Champagne Brut2,800

    by the glass ／ Bar Lumière

    優雅なイタリック

    ワインバーのメニュー

    向く場面
    ワイン・ブライダル・美容・高級レストラン
    技術
    イタリック体

    Playfair Display

  • THE KASUMI

    KYOTO — EST. 1928

    町家を、ひと棟ずつ。

    字間を広げた大文字

    ホテルのロゴと見出し

    向く場面
    ホテル・不動産・高級品のブランド名
    技術
    letter-spacing + 大文字

    Fraunces

  • uptime
    99.982%
    requests / day
    1,284,302
    p95 latency
    142 ms
    regions
    03

    等幅の数字

    IT企業の稼働状況

    向く場面
    IT・データ・技術の数字。桁がそろって読みやすい
    技術
    等幅書体・tabular-nums

    JetBrains Mono

  • No. 42 — Autumn 2026

    The
    Quiet
    Issue

    静けさについての、12の話。

    セリフの大見出し

    出版社・雑誌の表紙

    向く場面
    出版・メディア・文化施設
    技術
    可変フォントの視覚サイズ（opsz）

    Fraunces

  • TRAIL
    WORKS

    EST. 2009 ／ HANDMADE OUTDOOR GEAR

    ステンシル

    アウトドアブランド

    向く場面
    アウトドア・工房・倉庫・軍用風
    技術
    ステンシル書体

    Big Shoulders Stencil

  • Roast& Rest

    焼いて、待つ。浅煎りの専門店。

    太さの差で語る

    コーヒー焙煎所のトップ

    向く場面
    カフェ・クラフト・小さなブランド
    技術
    同じ書体の極太と極細を組み合わせる

    Fraunces

和欧混植

和文と欧文の書体を組み合わせる。どちらを主役にするかで、雰囲気が決まる。

  • Wedding

    ふたりの、はじまり。

    2026.11.22 ／ 鎌倉にて

    明朝と欧文イタリック

    ブライダルの最初の画面

    向く場面
    結婚式・記念日・ギフト
    技術
    和文明朝＋欧文イタリック

    Shippori MinchoPlayfair Display

  • $ deploy --prod

    Build.
    Ship.
    改善。

    ゴシックと等幅

    スタートアップのトップ

    向く場面
    IT・スタートアップ・採用
    技術
    和文ゴシック＋等幅の欧文

    Noto Sans JPJetBrains Mono

  • 朝の一杯から、
    はじまる。

    珈琲と焼き菓子 ／ 7:30 open

    英字を背景に、和文を前に

    カフェのトップ

    向く場面
    カフェ・ショップ。英字を飾りとして使う
    技術
    大きな英字を重ねて背景にする

    Bebas NeueShippori Mincho

    • ライト¥980／月（税込）
    • スタンダード¥2,980／月（税込）
    • プロ¥9,800／月（税込）

    数字だけ欧文書体に

    料金表

    向く場面
    料金・スペック表。数字を美しく見せる
    技術
    数字だけ書体を変える

    Noto Sans JPFraunces

  • 夜更けの BAR

    夜更けの BAR

    横倒し正立

    縦組みの中の英字

    バーの看板

    向く場面
    和の空間に英字の店名を入れる時
    技術
    text-orientation（横倒し／正立）

    Shippori MinchoPlayfair Display

写真・素材で塗る

文字の形の中に、写真や光や素材を流し込む。

  • BREAD

    毎朝7時、焼きたてを。

    写真で塗る

    ベーカリーの見出し

    向く場面
    旅行・飲食・不動産など、写真で伝えたい業種
    技術
    background-clip: text

    Roboto Flex

  • MOTION

    映像で、現場の熱を伝える。

    動く写真で塗る

    映像制作会社のトップ

    向く場面
    映像・写真スタジオ・観光
    技術
    background-clip: text + 背景の移動

    動くRoboto Flex

  • Next Wave

    新サービス 2026.11 公開

    流れるグラデーション

    テック企業の新サービス

    向く場面
    IT・新製品の発表・イベント
    技術
    背景のグラデーションを動かす

    動くRoboto Flex

  • 和紙

    千五百年、手で漉く。

    和紙で塗る

    和紙工房のトップ

    向く場面
    工芸・和雑貨・旅館
    技術
    素材画像で文字を塗る

    Shippori Mincho

  • PRECISION

    公差 ±0.002mm の削り出し

    金属に光が走る

    精密加工の会社の見出し

    向く場面
    製造業・時計・高級品
    技術
    金属のグラデーション＋光の移動

    動くRoboto Flex

  • Night
    Gallery

    11.03 — 11.30 ／ 開館 18:00–23:00

    照らされて浮かぶ文字

    夜のイベントの告知

    向く場面
    イベント・ナイトスポット・展示
    技術
    カーソルに合わせた円形のマスク

    動くFraunces

  • HOME VS AWAY

    11.08 SAT ／ 14:00 KICK OFF

    2色で切り替わる

    スポーツチームの試合告知

    向く場面
    スポーツ・対決・比較の見出し
    技術
    境目のある背景で文字を塗る

    動くBebas Neue

動く文字

太さ・幅・傾き・現れ方が動く。可変フォントや Canvas を使った、驚きのための文字。

  • 太さが波打つ

    ブランドの最初の画面

    向く場面
    ブランドのキャッチ・ロゴの演出
    技術
    可変フォントの太さを1文字ずつ補間

    動くNoto Sans JP

  • 2026.08.15 – 17 ／ 舞洲

    幅が伸び縮みする

    音楽フェスの告知

    向く場面
    イベント・音楽・スポーツ
    技術
    可変フォントの幅の軸（wdth）を動かす

    動くRoboto Flex

  • SECURE_BY_DESIGN

    設計の段階から、守る。

    解読されて現れる

    セキュリティ企業のトップ

    向く場面
    IT・セキュリティ・研究開発
    技術
    JavaScript で文字を差し替える

    動くJetBrains Mono

  • 新作 美容液 ／ 11.01 発売

    1文字ずつピントが合う

    化粧品の新作

    向く場面
    美容・化粧品・香水
    技術
    1文字ずつずらした blur と移動

    動くShippori Mincho

  • 今年も、
    合格者128名。

    マーカーが引かれる

    学習塾の合格実績

    向く場面
    教育・お知らせ・強調したい一言
    技術
    背景の幅を伸ばす

    動くNoto Sans JP

  • FRESHLY ROASTED • SINCE 2015 • NAKAZAKI • K

    円に沿って回る文字

    カフェのスタンプ

    向く場面
    カフェ・ショップのロゴ・バッジ
    技術
    SVG の textPath を回転

    動くRoboto Flex

  • Open
    late

    Bar Midnight ／ 19:00 – 3:00

    ネオン管

    バーの看板

    向く場面
    バー・ナイトスポット・音楽
    技術
    重ねた光の影＋明滅

    動くPlayfair Display

  • 凪の宿

    伊豆 下田 ／ 海まで三十歩

    水面に映る文字

    海辺の宿

    向く場面
    海・湖・温泉・水に関わる業種
    技術
    SVG フィルターで揺らした映り込み

    動くShippori Mincho

  • 打ち込まれていく

    コンサルティング会社の問いかけ

    向く場面
    問いかけ・対話・AIやチャットの演出
    技術
    1文字ずつ表示＋カーソル

    動くNoto Sans JP

  • 仕組み笑顔まち未来仕組みを、つくる。

    言葉が入れ替わる

    採用ページの見出し

    向く場面
    採用・サービスの多様さを伝えたい時
    技術
    縦に送る帯

    動くNoto Sans JP

  • sweet &
    soft

    柔らかさが変わる

    焼き菓子店のロゴ

    向く場面
    菓子・パン・子ども向け
    技術
    可変フォントの SOFT・WONK 軸

    動くFraunces

  • カーソルを近づけてみる

    散って戻る文字

    ゲーム会社のトップ

    向く場面
    ゲーム・遊び・キャンペーン
    技術
    JavaScript で1文字ずつ動かす

    動くRoboto Flex

  • SALE 50% OFF ・ WINTER SALE ・ SALE 50% OFF ・ WINTER SALE ・

    流れる帯の文字

    セールの告知

    向く場面
    セール・キャンペーン・告知の帯
    技術
    逆向きに流れる複数の帯

    動くBebas Neue

  • RUN
    FAST

    傾きが変わる

    ランニング大会

    向く場面
    スポーツ・スピード感を出したい時
    技術
    可変フォントの傾き（slnt）

    動くRoboto Flex

  • 下から順にせり上がる

    建設会社のスローガン

    向く場面
    会社のスローガン・決意表明
    技術
    1文字ずつずらした移動

    動くNoto Sans JP

立体・装飾

輪郭・影・凹み・切り抜き。紙や印刷の手触りを、文字で表す。

  • FORM

    カーソルを載せると塗られる

    輪郭だけ

    デザイン事務所のトップ

    向く場面
    建築・デザイン・背景の飾り文字
    技術
    -webkit-text-stroke

    Roboto Flex

  • たのしい！

    重ね影の立体

    おもちゃ屋のトップ

    向く場面
    玩具・ポップ・子ども向けイベント
    技術
    text-shadow を重ねる

    Dela Gothic One

  • EXHI
    BITION

    写真の上の切り抜き

    写真展の告知

    向く場面
    写真展・ギャラリー・旅行
    技術
    mix-blend-mode で紙を切り抜く

    Roboto Flex

  • Kishida
    Press

    活版印刷 ／ 大阪・天満

    活版印刷の凹み

    印刷所の名刺

    向く場面
    印刷・紙もの・名刺・手仕事
    技術
    明暗の影で凹みを表す

    Fraunces

  • NOISE

    ずれる色（グリッチ）

    音楽レーベルのトップ

    向く場面
    音楽・ゲーム・ストリート
    技術
    色を分けた重ね＋ずれ

    動くRoboto Flex

02指示の書き方

番号で、組み合わせる。

場所と番号を並べるだけで伝わります。番号を押すと、番号と名前をコピーできます。

例）和菓子店のサイト

  • 最初の画面Y001（縦組みの明朝）
  • 季節の新作Y036（1文字ずつピントが合う）
  • 商品の名前Y006（ルビを添える）
  • 価格Y011（数字を主役に、単位は小さく）

03無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む