japanese-webdesign

Name: japanese-webdesign
Author: ronantakizawa

github.com/ronantakizawaデザイン・UI5229 回インストール40 週間前に更新

japanese-webdesign について

Japanese Web Design Skillは、日本のユーザー期待に沿ったウェブサイト設計の参考スキルです。情報提示、ナビゲーション、信頼性の表示、フォーム、ローカライズを扱い、EC、SaaS、ポータル、モバイル向けのパターンを示します。

主な機能

01情報量の多いページ設計
02信頼性表示と確認フロー
03日本向けナビゲーションとフォーム
04EC・SaaSのデザインパターン
05タイポグラフィとローカライズの指針

活用シーン

01日本向けECの商品ページを設計
02日本のビジネスユーザー向けにSaaSの内容やフォームを調整
03日本向けモバイルナビゲーションを設計

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ronantakizawa/japanese-webdesign --skill japanese-webdesign

インストール後、Claude Code で/japanese-webdesignを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

marketplace.json

README.md

reference/

component-patterns.md

cultural-context.md

詳細

日本語 Web デザインスキル

概要

日本語の Web デザインは、西洋のデザインとは根本的に異なる原則に従っています。西洋の人には「ごちゃごちゃしている」ように見えるものも、日本の文化的価値観、信頼の構築、ユーザーの期待に合わせて最適化されています。

市場の状況：

楽天市場：GMV 6 兆円超、月間訪問者数 4 億 9,480 万人
Yahoo Japan Shopping：月間訪問者数 1 億 1,820 万人
日本の Web トラフィックの 60％超がモバイル
クレジットカードのみの決済では、購入者の最大 30％を逃します

参考ファイル

reference/component-patterns.md - HTML/CSS コンポーネントの例（商品カード、バナー、表、フッター、モバイルナビゲーション）
reference/cultural-context.md - 文化的要因の詳細（安心、人口統計、季節、敬語のレベル、避けるべき数字）

基本原則

安心（Anshin）- 情報による安心感

最も重要な概念は、予期せぬことをなくして安心感を与えることです。

すべての情報を最初から表示する - 隠すと疑念を招きます
購入を決める前に仕様をすべて提示する
ミスを防ぐために複数の確認ポイントを設ける

「すべて見せてくれないのなら、何を隠しているのですか？」— 日本の消費者によくある考え方

一目瞭然（Ichimoku Ryouzen）- ひと目でわかる

必要な情報はすべて、クリックや移動をしなくても見えるようにします。

ポンチ絵文化

日本のビジネスでは、ポンチ絵のスライドに関連する詳細をすべて 1 ページに詰め込みます。このアプローチは Web UI/UX への期待にも直接影響しており、余白を無駄にしません。

デザインパターン

1. 情報密度

西洋のアプローチ	日本のアプローチ
「少ないほど豊か」	「情報が多いほど信頼できる」
段階的な情報開示	すべて表示
すっきりした余白	空間を効果的に活用
単一の行動喚起	詳細な選択肢を複数提示
「詳細を見る」ボタン	情報をあらかじめ表示

効果がある理由： 漢字は音読しなくても意味が伝わるため、情報が密集したレイアウトをすばやく読み取れます。

商品カードに含める情報： ランキングバッジ、レビュー件数、配送情報、全仕様、通常価格／セール価格、割引率、ポイント、配送予定。

2. Bento Box レイアウト（弁当箱レイアウト）

現代の日本のデザインでは、弁当箱から着想を得たモジュール式のコンテンツブロックを使用します。

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  grid-auto-flow: dense;
}
.bento-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; }

ベストプラクティス： 情報量を保ちながら見やすさを確保するため、ボックスは 9 個以下に抑えます。

3. 視覚的な階層（大文字・小文字なし）

日本語には大文字・小文字がありません。次の方法で階層を作ります。

サイズの変化（大きいほど重要）
背景色（セクションを色付きのボックスで表示）
枠線と囲み（明確な区切り）
アイコンとバッジ
太字（イタリック体は表示が崩れやすいため避ける）

4. 信頼のシグナル（信頼性）

必要な信頼性を示す情報：

カスタマーサービスの写真 - ヘッドセットを着けたスタッフを掲載し、人によるサポートが受けられることを示す
ISO／プライバシーマーク認証
創業年数（創業○○年）
顧客満足度（お客様満足度）
会社情報一式：住所、電話番号、FAX、代表者名
実際の本文を含むレビュー件数
配送バッジ - 「当日出荷」、「送料無料」を目立つように表示

5. フォームデザイン：最初にすべてを見せる

日本のユーザーは、入力を始める前にプロセス全体を確認したいと考えます。

誤り： フィールドを隠すステップ形式のウィザード
正解： 進捗表示付きですべてのフィールドを表示（入力項目：12項目中 0項目入力済み）

6. 確認の文化（確認）

複数の確認ポイントを設けます。

注文概要（注文内容確認）
明示的な確認ダイアログ
最終確認画面（最終確認）
次の手順を詳しく案内する完了画面

7. Color Usage

Common patterns:

Bright, saturated colors (red, yellow, orange for attention)
Section color-coding for organization
Seasonal colors (桜ピンク in spring, 紅葉 in autumn)
Blue themes for comparison/information sites (Kakaku.com style)
Orange/red for e-commerce CTAs and sale badges

:root {
  --sale-red: #e60012;
  --attention-yellow: #ffeb3b;
  --trust-blue: #0066cc;
  --kakaku-blue: #002d7a;
  --sakura-pink: #fcc;
  --category-purple: #6b5b95;
}

Site type color conventions:

E-commerce: Red/orange accents (Rakuten style)
Price comparison: Blue headers (Kakaku.com style)
Portals: Multi-color sections (Yahoo Japan style)

8. Navigation

Show all options—avoid hamburger menus:

Mega navigation with categories + item counts
Inline popular items and current promotions
Tab bars for mobile (not hamburger)

9. Category Grids (Kakaku.com Style)

Display categories as icon grids with subcategories inline:

Icon + category name in colored box
Subcategories listed below each main category
Item counts per category (パソコン 15,234件)
Blue/purple color coding for different sections

10. Trending Keywords (人気キーワード)

Show popular search terms as clickable tag buttons:

Colored background tags (red for 注目, blue for trending)
Displayed prominently near search bar
Updated frequently to show freshness

11. Portal Layouts (Yahoo Japan Style)

Multi-column layouts for portal/news sites:

3+ columns on desktop
Service sidebar with icons for each service
News section with thumbnail + headline
Topic tabs (経済, エンタメ, スポーツ, etc.)
Weather widget with location
"NEW" badges (新着) on fresh content
Login/account section in sidebar

Typography

Font Terminology

Serif = 明朝 (Mincho)
Sans-Serif = ゴシック (Gothic)

Font Stack

Japanese fonts require 7,000-16,000 glyphs (vs. ~230 for English).

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", "Noto Sans JP", sans-serif;
}
.formal-text {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

Typography Rules

Guideline	Recommendation
Font size	10-15% smaller than Latin equivalent
Line height	185-200% of font size
Line length	~35 characters optimal
Italics	Avoid - renders poorly
Bold	Use sparingly, prefer color/size

E-Commerce Patterns

Product Grid Layout

Dense thumbnail grids are standard:

Small thumbnails (80-120px) in tight grid
Price overlay on each thumbnail
Discount badges (50%OFF, セール) as corner ribbons
Category icons above product sections
Promotional banners interspersed in grid

Product Pages (商品ページ)

Must include:

Ranking indicators with date/category
10-20 product images (not 3-5)
Exhaustive specifications table
Shipping details (carrier, timing, costs)
Full return policy text (not just link)
Same-day shipping badge if applicable (当日出荷)

Price Display

Always show:

Original price with label (メーカー希望小売価格)
Sale price highlighted
Discount amount AND percentage
Tax status (税込/税抜)
Points earned

Payment Methods

Include all common options:

Credit cards (VISA, Master, JCB, AMEX)
コンビニ決済 (convenience store)
PayPay, LINE Pay, 楽天ペイ
銀行振込 (bank transfer)
代金引換 (cash on delivery)

SaaS & B2B Requirements

Key Differences

Extended trial periods expected
Detailed documentation required before sales calls
Formal language (敬語) required

B2B-Specific CTAs

Primary flow: 資料ダウンロード (document download) → 無料トライアル → お問い合わせ

Required Content

Comprehensive feature documentation with screenshots
Pricing with all tiers, features, and limits visible
Security certifications (ISO 27001, SOC 2, ISMS)
Support options with hours (日本語電話サポート: 平日9:00-18:00)
Extensive FAQ section

Language Formality (敬語)

Context	Casual (B2C)	Formal (B2B)
Submit	送信する	送信いたします
Error	エラーが発生しました	エラーが発生いたしました。お手数ですが、再度お試しください。

Mobile Design

Principles

Tab bars preferred over hamburger menus
Information density maintained on mobile
2-3 column grids (not single column)
Smaller font (12px) acceptable

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mobile-tab-nav { position: fixed; bottom: 0; display: flex; justify-content: space-around; }
}

Cultural Considerations

Mascot Characters (ゆるキャラ)

Use mascots to:

Make institutions approachable
Reduce anxiety about complex processes
Guide onboarding, errors, and help sections

Seasonal Content (季節感)

Update designs for seasons:

春: Cherry blossoms, graduation
夏: Cool blues, festival themes
秋: Maple leaves (紅葉)
冬: New Year, Valentine's

Error Messages

Japanese errors should be apologetic:

// Western: "Invalid email address"
// Japanese: "メールアドレスの形式が正しくありません。お手数ですが、再度ご確認ください。"

Localization Mistakes to Avoid

Translation ≠ Localization - translated English loses nuance
Machine translation - Japanese is too complex
Informal language - sounds strange to customers
Wrong Keigo level - damages brand perception
Credit-card only - loses 30% of buyers
No Japanese support - deters repeat customers
Cultural insensitivity - improper imagery causes backlash

Anti-Patterns

Don't Do This:

Hide information behind "Learn More"
Use hamburger menus as primary navigation
Minimize form fields
Skip confirmation steps
Use vague CTAs ("Get Started" → 「資料ダウンロード」)
Remove trust signals for aesthetics
Assume minimal = professional
Use italics for Japanese text
Rely on machine translation

Cultural Missteps:

Number 4 (四 sounds like 死 = death)
Number 9 (九 sounds like 苦 = suffering)
Red ink for names (funeral association)
Casual language in business contexts

2025 Trends

Neo-retro design - Y2K meets Showa nostalgia
Immersive 3D - tailored for precision
AI personalization - with human touch
Microinteractions - hover effects, scroll feedback
Bento layouts - modular, mobile-friendly
Collapsible sections - managing density

Key insight: Change is gradual. Japanese users adjust slowly—proven patterns are safer than innovation.

A/B Testing Reality

Test	Result
Rakuten: Clean vs. cluttered	Cluttered converts better
Yahoo Japan: Modernized design	Users complained, reverted
Amazon Japan: Added MORE info	Sales increased

Reference Sites

Rakuten (rakuten.co.jp) - E-commerce benchmark
Yahoo Japan (yahoo.co.jp) - Portal density
Kakaku.com - Price comparison
PayPay - Mobile payment design
Mercari - Mobile marketplace
LINE - Super app patterns

Quick Checklist

Markdown 対応

ログインしてコメント

基本情報

作者: ronantakizawa
リポジトリ: ronantakizawa/japanese-webdesign
カテゴリ: デザイン・UI
インストール数: 229
GitHub スター: 5

問題を報告