こんな事務所・企業に最適です
高い信頼感と洗練されたデザインで、専門性とブランドイメージを同時に伝えます。
税理士・会計士事務所
実績数値・サービス内容・スタッフ紹介を整理されたレイアウトで提示。信頼と専門性を同時に訴求できます。
司法書士・行政書士事務所
「敷居の低さ」と「確かな実力」を両立した設計。明瞭なCTAと問い合わせ導線が集客を後押しします。
コンサルティング会社
企業理念・サービス・チームを1ページで完結させるフロントページ構成。営業ツールとして機能します。
士業・専門職全般
医師・建築士・不動産鑑定士など、「資格と実績」で信頼を築く専門家のウェブサイトに。
ブランディング重視の中小企業
大企業に引けを取らないビジュアル品質で、競合との差別化とブランド価値の向上を実現します。
共通する要件
- — 信頼・安心感を最優先にしたい
- — デザインで競合と差別化したい
- — WordPress で管理したい
品格あるデザインシステム
Color Palette
#1A2A4A
ベースカラー。権威・信頼・深さを表現。テキスト・ヘッダー・ボタンに使用。
#B89C6F
アクセントカラー。品格・高級感・実績を演出。ライン・ボーダー・ホバーに使用。
#F8F8F6
バックグラウンド。温かみのある白でプレーンな白より読みやすく、上品な印象に。
Typography
Display / Heading
Playfair Display
Elegant & Timeless
見出し・コピーライティングに使用。エディトリアルな品格と古典的な権威感を持つセリフ体。
Body / UI
Montserrat
本文・ナビゲーション・ラベルなど UI
テキストに使用。
幾何学的で可読性が高く、セリフ体と好対照を生む。
CAPS — WEIGHT 300/400/500/600
Visual Details
グレインテクスチャ
ヒーロー・Philosophyセクション・フッターにフィルムグレインを重ね、デジタルを超えた印刷物のような質感を実現。
ダーク×ライトの対比
ページスクロールに合わせて White → Navy → Off White と背景が切り替わり、視覚的なリズムと奥行き感を生み出します。
ゴールドラインの演出
縦・横のゴールドラインが空間に繊細な骨格を与え、セクション境界や装飾として品格のあるアクセントになります。
収録テンプレート 10種
フロントページからブログ・404ページまで、実際の事務所サイトで必要なテンプレートをすべて収録。すぐに使える完成度で提供します。
フロントページ front-page
Hero・Services・Philosophy・Team・Contact の5セクションで構成された完成度の高いトップページ。
ブログホーム home
最新記事一覧ページ。フロントページとブログを分離したサイト構成に対応。
会社概要ページ page-about
事務所の歴史・理念・アクセスなどを掲載する専用レイアウト。
サービス詳細ページ page-service
サービス項目を詳述するためのページテンプレート。料金・フローなど柔軟に構成できます。
スタッフ紹介ページ page-staff
所長・スタッフのプロフィールページ。写真・資格・メッセージを整理したレイアウト。
汎用固定ページ page
自由度の高い汎用テンプレート。お知らせ・採用情報・よくある質問など幅広く対応。
個別記事ページ single
ヒーロー・本文・関連記事・前後ナビ・コメント・フッターを一式揃えた記事テンプレート。
アーカイブページ archive
カテゴリー・タグ・月別アーカイブ一覧。記事カードグリッドで整然と表示します。
検索結果ページ search
検索キーワードと件数表示、記事一覧、結果なし時のメッセージに対応。
404 エラーページ 404
デザインに統一感のある 404 ページ。ユーザーをトップページや検索へスムーズに誘導。
収録パターン（抜粋）
Hero Section
全画面・写真・テキスト・実績バッジ
Services
3カラムグリッド・アイコン・リスト
Philosophy
ダーク背景・引用・画像・メタ情報
Team
スタッフカード・プロフィール
Contact
フォームエリア・アクセス情報
Header
固定・フロストガラス・モバイルメニュー
Footer
ロゴ・ナビ・コピーライト・グレイン
Single 記事系
コンテンツ・関連記事・コメント・nav
洗練されたアニメーションとアクセシビリティ
Animation A
Clip-Path テキストリビール
H1 の各行が overflow:hidden
のラッパー内から下→上へスライドして現れる、映画のタイトルのような演出。cubic-bezier(0.16,1,0.3,1) で自然なデチェレレーション。
Animation B
スクロールトリガー Fade Up
IntersectionObserver API によるスクロール連動。各セクションの要素が画面内に入ったタイミングでフェードアップ。スタガー表示にも対応。
Animation C
カウントアップ
実績数値（25年・300社・98%など）がスクロール時に 0 からカウントアップ。easeOutCubic で自然に減速し、数値に重みを与えます。
Animation D
スクロールインジケーター
ヒーロー中央下部の縦ラインをゴールドの光が流れ落ちるループアニメーション。他の演出が落ち着いた 2.1 秒後にフェードイン開始。
Animation E
ボタン ゴールドスライド
ホバー時にゴールドが左からスライドして塗りつぶす CSS グラジエント技法。JS 不要・純 CSS のみで実現。
Animation F
装飾ラインの伸長
縦・横の装飾ゴールドラインがページ読み込み時に transform:scaleY/scaleX で伸びる演出。transform-origin で方向を制御。
Accessibility
- ✓ prefers-reduced-motion 対応 — すべてのアニメーションを即時表示に切り替え。動きに敏感なユーザーへの配慮。
- ✓ セマンティック HTML — 適切な見出し階層・landmark・aria 属性を徹底実装。
- ✓ キーボードナビゲーション — すべてのインタラクティブ要素でタブ操作対応。
- ✓ フォーカスインジケーター — ゴールドアウトラインによる明確なフォーカス表示。WCAG 2.1 AA 基準準拠。
- ✓ 装飾要素の aria-hidden — グレインテクスチャ・スクロールインジケーターなどに aria-hidden="true" を付与。
- ✓ 構造化データ（JSON-LD） — LocalBusiness / ProfessionalService スキーマを自動出力。SEO と検索体験を強化。
技術仕様
WordPress / テーマ
| テーマ名 | blanky-work |
|---|---|
| テーマタイプ | WordPress ブロックテーマ（FSE） |
| 親テーマ | blanky |
| WordPress 推奨 | 6.5 以上 |
| PHP 推奨 | 8.0 以上 |
| テキストドメイン | blanky-work |
| Plugin Update Checker | 対応（自動更新通知） |
フロントエンド
| JavaScript | Pure JS（ES6+）、フレームワーク不使用 |
|---|---|
| CSS | セクション別 CSS ファイル分割 |
| アニメーション | CSS Animations + IntersectionObserver |
| フォント | Google Fonts（Playfair Display / Montserrat） |
| モバイル対応 | モバイルファースト・レスポンシブ |
| ダークセクション | Philosophy セクション（Deep Navy） |
| グレインテクスチャ | SVG feTurbulence（CSS のみ） |
JS モジュール構成
| work-animations.js | スクロールアニメーション・カウントアップ |
|---|---|
| work-nav.js | ナビゲーション制御・モバイルメニュー |
| work-structured-data.js | JSON-LD 構造化データ自動生成 |
アクセシビリティ
| 目標水準 | WCAG 2.1 AA |
|---|---|
| reduced-motion | 全アニメーション対応 |
| キーボード操作 | 全インタラクション対応 |
| フォーカス表示 | ゴールドアウトライン |
| Landmark / ARIA | 適切なランドマークと属性を実装 |
信頼が宿るサイトを、
今日から。
blanky-work は、ブロックエディターだけで完結する、プロフェッショナル向け WordPress テーマです。洗練されたデザインと直感的な管理体験を両立。