パーツと作例
このページに並んでいるのは説明用の画像ではなく、StyleDocx が実際に描くパーツそのものです。文書に置いたときも、ここに見えているとおりの姿になります。配色（色）と様式（形）はテーマに追従するので、テーマを変えれば全部の見た目が一斉に変わります。
見出し
文書の骨格をつくる見出しです。番号付きのセクション見出しから、本文中の小見出しまで段階が用意されています。
大見出し（title-lg）
中見出し（title-md）
小見出し（title-sm）
キャプション見出し（cap）
サブタイトル / 日付（eyebrow）
このページの「1 見出し」のような番号付きの見出しがセクション見出し、いちばん上の「パーツと作例」がドキュメントタイトルです。ページヘッダー（帯）の中でも同じ見出しが使えます。
ドキュメントタイトルの見せ方（3種）
本文に単独で置くときは、タイトル自身に地色の帯を敷けます。置いたあとでも切り替えられます。
標準（背景なし）
帯（ページヘッダーと同じ地色）
帯（テーマカラー・淡色）
※ 帯の色はカラーテーマに追従します。このページのいちばん上の見出しも「帯（淡色）」です。
文字とリスト
リード文（lead）。導入の一文をやや大きく置きます。
強調／アクセント強調／マーカー／補助／意味色 重要・参照・注意／キー Ctrl+S／インラインコード
引用文はこのように表示されます。— 出典
- 用語リスト
- 用語と説明を対にして並べます。
- 脚注
- 本文の下に注釈を置けます。
チェック
済んだ項目
これからの項目
手順
手順1
手順2
矢印・番号
次へ
一つ目
二つ目
バッジ（1つずつ色を変えられます）
背景色・文字色は「テーマ色／プリセット／カスタム色」から選べます。カスタム色はバッジごとに保存されます。
C:\Users\ユーザー名\AppData\Roaming\TechnoStyle\StyleDocx
レイアウト
段組みは 2 列・3 列のほか、幅の比率が違う組み合わせも選べます。狭い画面では自動的に 1 列になります。
2 列（cols-2）の左
2 列の右
段組みには高さを指定でき、段ごとに縦の位置（上下の中央・上ぞろえ・下ぞろえ）を選べます。高さを決めて「上下の中央」にすれば、中身の量に関係なく決めた高さの真ん中にそろいます。
上下の中央
上ぞろえ
下ぞろえ
1
2 倍幅（1 : 2）
本文と側注（aside）。本文の脇に補足を置きたいときに使います。印刷しても崩れません。
- ラベルと値（split）
- 項目名と内容を行で並べます。
- 作成日
- 2026 年 7 月
2カラムリスト（ラベル＋内容）
左に日付や項目名、右に本文を並べます。左右どちらのセルにもパーツを置けるので、更新履歴のように「日付＋見出し＋箇条書き」といった形も作れます。セル（ラベル列／内容列）はそれぞれ選択できるので、選んでそのまま中へ貼り付けられます。左カラムの幅（内容に合わせる／px／％／自由入力）と罫線（なし／行の下／格子／枠）を選べます。
2026/07/28
機能を追加しました
Markdown の取り込みに対応。
マトリクスに行と列の見出しを追加。
2026/07/26
文字の装飾をツリーで編集できるようになりました。
対応OS
Windows 10 / 11（64bit）
必要ソフトウェア
Microsoft Edge WebView2 ランタイム
パネル・注記・カード
前提条件や補足をまとめる枠です。
控えめなパネル（quiet）＝淡いアクセント地・実線の枠。
濃い地に白文字。強調したいまとめに。
パネル(帯)
帯見出しと同じ見た目の囲みです。淡い地・左の線・右側だけの角丸で、四方の枠線と影はありません。帯見出しが1行の見出しなのに対して、こちらは中にパーツを置ける器です。地は5種類から選べ、自由な色にもできます。
既定＝テーマ淡色の地に左の線。
地なし（左の線だけを残す）。
テーマ主色の地に白文字。
面の色（薄いグレー）の地。
見出し付き枠
見出しと本文を枠で囲みます。見出しは左の列にも上の帯にもでき、本文にはパーツを置けます。入れ子（枠の中に枠）にもできるので、階層のある仕様や注意事項をまとめるのに向きます。
既定の見せ方です。
アクセント
テーマ色に追従する補足です。読んでほしい前置きに。
情報
参照・補足。グレーの地に左帯で、本文と区別します。
警告
禁止事項や重要な注意。地の色を変えて確実に目に留めます。
大きめの文字で訴求するブロックです。
カード
チェック付きのカードを 2 列で並べます。
特長の列挙に
要点を並べるときに読みやすくなります。
付箋は書き手同士の申し送りに。出力にも残ります。
この数値は最新ですか？
はい、7 月時点の実測です。
表とデータ
項目 | A 案 | B 案 |
|---|---|---|
初期費用 | 10 | 20 |
運用工数 | 11 | 21 |
このほかに、月間カレンダーとタイムスケジュールの専用パーツがあります。日付や時間帯のマス目は自動で組み立てられ、予定を書き入れるだけです（作例はテンプレートの「予定表・スケジュール」）。
グラフ（円・棒・レーダー）
数値を入れるだけでグラフになります。外部のサービスも画像も使わないので、保存した HTML はそのままブラウザで開けますし、印刷にもそのまま出ます。
- 東京48%
- 大阪28%
- 名古屋14%
- その他10%
- 企画
- 7
- 設計
- 8
- 実装
- 6
- 試験
- 5
- 運用
- 9
※ 円は円／ドーナツ、棒は横／縦、レーダーは軸3〜10本・系列3つまで。凡例の位置・値の出し方・目盛・配色は編集画面で変えられます。
図解
作図ソフトを使わずに、文書の中で図が作れます。線や矢印を自分で引く必要はありません。
パイプライン・横ステップ
申請を受け取る
内容を確認する
決裁して通知
- 受付
- 判定
- 出力
処理フロー（フローツリー）
繰り返しや条件分岐の「内側」に処理が入る構造を、そのまま入れ子で表せます。ノードの中に説明・コード・表も入れられます。
-
受信フォルダーのファイルを順に処理
1 件ずつ取り出して次の処理を行う。-
QR コードを読み取る
先頭ページの QR から取引先コードを取得する。 -
取引先コードで分岐
マスターに一致するかどうかで処理を分ける。- 一致：担当者のフォルダーへ移動
- 不一致：エラーフォルダーへ退避
-
入れ子ブロック・マトリクス
説明
孫
活かせる資源。
補うべき点。
追い風になる変化。
備えるべき変化。
マトリクスは行と列の見出しを設定でき、マスの中身はパネルです（そのまま編集できます）。
工程表（ガント）・タイムライン
- 4月 要件確認
- 5月 設計・レビュー
- 6月 導入・引き渡し
イラスト・アイコン
300 点を超える SVG アイコンを、格子に並べて構成図や流れ図を作ります。機器・文書・人物・建物・処理・矢印などの分類から選べます。
システム構成図（illustList）
フォルダー構成（fs）
- 受信BOX
複合機から届いたファイルを受け取ります。
- 10_未処理これから振り分けるもの。
*.pdf- FAX_20260725_1400.pdf受信した FAX。
- FAX_20260725_1400.pdf
- 20_振り分け済取引先ごとのフォルダーへ。
- 90_エラー判定できなかったもの。
- 10_未処理
動画・音声
動画（mp4 / webm）と音声（mp3 / wav など）を文書に置けます。大きさ・配置・回り込み・枠／影／角丸・キャプションは画像パーツとまったく同じ指定です。下に並んでいるのは実物のパーツなので、そのまま再生できます。
動画
動画ファイルを置きます。ファイル参照（HTML と動画ファイルを一緒に配る）と埋め込み（単一 HTML に含める）を選べます。コントロール・自動再生・くり返し・先読みを指定でき、再生前に出す絵は、指定しなければ動画の最初の場面がそのまま出ます（表紙を付けたいときや、冒頭が暗い動画のときだけポスター画像を指定します）。
動画リンク（YouTube 等）
ポスター画像に再生マークを重ねたリンクです。押すとブラウザで動画のページが開きます。YouTube や Vimeo の埋め込みコード（<iframe>）は文書にそのまま置けないため、外部サービスの動画はこのパーツで置きます（YouTube をページの中で再生したいときは、次の「YouTube 埋め込み」を使います）。再生マークは文字の装飾だけで描いているので、画像が 1 枚あればどこでも同じ形に出ます。
YouTube 埋め込み
ページの中に YouTube のプレーヤーを置くパーツです。再生はプレーヤーの再生ボタンで始めます（開いただけで音が出ることはありません）。動画の URL を貼るだけで、サムネイルがポスター画像に自動で入ります（開始位置・終了位置、縦横比 16:9／4:3／9:16 も指定できます）。字幕は既定で出しません（YouTube に任せる・最初から出す も選べます）。くり返し再生、操作バーや全画面ボタンを出さない指定もあります。ポスターを出しておき、押したときにプレーヤーにする（ページが軽い）表示も選べ、そのときは押したらすぐ再生を始めるかも指定できます。文書に入るのは「ポスター画像＋YouTube へのリンク」だけで、プレーヤーは読む人のブラウザで作られます。その場で再生できるのは Web サーバーに置いたページだけで、パソコンのファイルとして開いた HTML ではポスター画像のままになり、押すと YouTube のページが新しいタブで開きます。
音声
再生バーを置きます。紙に印刷するときは再生バーを出さず、キャプションだけが残ります。
印刷・PDF ではポスター画像が出ます
紙の上では動画は再生できないため、指定したポスター画像がそのまま印刷されます（指定していなければ動画の最初の場面が出ます）。音声の再生バーは紙には出ません。
添付ファイル
zip・txt・pdf・Excel など、どんなファイルでも文書に添付できます。押すとそのファイルを保存できます。埋め込み（HTML の中にファイルを入れる）とファイル参照のどちらも選べます。左の札には拡張子が出ます。
文章の中に置く小さなリンクにもできます。たとえば「使い方は サンプル.txt をご覧ください」のように書けます。
埋め込んだ HTML をメールで送るときの注意
「HTML の中にファイルが base64 で隠れている」形は、マルウェアの手口（HTML スマグリング）と同じになるため、メールのゲートウェイやウイルス対策ソフトが文書ごと削除・隔離することがあります。社外へ渡す文書ではファイル参照にして別々に渡すか、zip にまとめてください。
帳票
見積書・請求書などの実務帳票のためのパーツもあります。デザインテーマ「帳票」と組み合わせると、罫線主体の日本の帳票らしい体裁になります。金額欄・集計欄は専用のパーツです。
※ 上は本ページのテーマ（オーシャン × コンフォート）で表示しています。テンプレートの見積書・請求書は「モノクロ × 帳票」で収録しています。
Web パーツ
ナビバー・ヒーロー・機能紹介・料金表・FAQ・CTA・フッターなど、Web ページでよく使う部品も収録しています。このページの上下にあるナビバーとフッターも、そのパーツです。
機能紹介
アイコン＋見出し＋説明の 3 列。アイコンは右クリックから選べます。
料金表
3 プランを並べ、おすすめだけを強調できます。
FAQ
質問と回答の一覧。Q / A の丸印は自動で付きます。
縦書き
横書きの文書の中に縦書きの器を置けます。文書ぜんぶを縦組みにするのではなく器の中だけが縦書きになるので、横書きの資料に案内状・式次第・賞状をそのまま差し込めます。中身はふだんのパーツのままです。見出し・段落・箇条書き・引用・図などを、横書きのときと同じように置いて編集できます。
専用の編集画面で、高さ（＝1 行の長さ）・段数・書体（明朝／ゴシック）・英数字の向き・文字の大きさ・行間・左右の寄せを決められます。「用紙 1 ページ分」を押せば紙 1 枚にきっちり収まり、印刷しても途中で改ページされません。入りきらない文字は切れて出ないため、編集中は赤い点線でお知らせします。
スタイルドックス
StyleDocx（スタイルドックス）は、用意されたパーツを配置し、文字を編集して、色や形のテーマを選ぶだけで、そのまま配布可能なHTML文書を作成できる文書作成ツールです。
さらに、AIエージェントにStyleDoc形式のHTML文書を作成させるための「スキル」一式を同梱しています。AIが生成した文書はStyleDocxで自由に編集できます。
HTMLは、構造化されたテキストデータとしてAIが効率よく読み取ることができます。そのため、文書内容の分析や要約、情報抽出、プログラムコードの生成、業務処理への連携など、次のAI処理にもそのまま活用できます。文書生成からの一連の文書活用フローをStyleDocxで実現できます。
※ 上は見出しと本文を別々の縦書きブロックに入れ、どちらも中央に寄せた例です。英数字は既定で横に倒して並び、1 字ずつ立てることもできます。縦中横（数字を横に並べる）・ルビ・圏点の文字装飾も使えます（この 3 つは横書きの文書でも使えます）。収録テンプレートの案内状（縦書き・A4 横）と表彰状（縦書き・A4 横）が実物の作例です。
作例 ― 収録テンプレート 59 本
パーツを組み上げた実例として、11 分野・59 本のテンプレートを収録しています。「ファイル」→「テンプレートから新規作成」で一覧から選ぶと、体裁も構成もできあがった状態から書き始められます。自分で作った文書を「テンプレートとして保存」して、社内の書式として配ることもできます。
IT設計・開発（11本）
システム提案書・要件定義書・基本設計書・詳細設計書・API仕様書・データベース設計書・画面設計書・システム構成図資料・ADR・セキュリティポリシー、および横向きの統合設計書。処理フロー図や構成図の作例が入っています。
PM・運用（6本）
議事録・プロジェクト計画書・課題管理表・障害報告書・作業手順書・操作マニュアル。操作マニュアルは表紙＋目次＋改ページの冊子型です。
ビジネス文書（6本）
週報・業務報告書・稟議書（決裁欄付き）・企画書・現地調査報告書（写真の3列ギャラリー）・製品紹介シート。
帳票（4本）
見積書・注文書・納品書・請求書。モノクロ×帳票テーマで、罫線主体の実務帳票に仕上げています。
予定表・スケジュール（3本）
月間予定表・業務タイムスケジュール・プロジェクト工程表（ガント）。
図解・分析（4本）
業務フロー図・SWOT分析・組織図・フォルダ構成表。図解パーツの使いどころが一通りわかります。
契約・法務（4本）
業務委託契約書・秘密保持契約書（NDA）・覚書・仕様変更依頼書。条文を段落番号で組む書式です。
研修・イベント（5本）
研修計画書・研修カリキュラム・セミナー開催案内（拝啓〜敬具のレター）・式次第・案内状（縦書き・A4横）。
学校・教育（6本）
学級通信・学習指導案・時間割表・保護者向けお知らせ（切り取り出欠票付き）・校外学習のしおり・表彰状（縦書き・A4横）。パステル配色の作例です。
Web（6本）
サービス紹介ページ・製品紹介サイト・サポート/よくある質問・ダウンロードページ・会社案内・セミナー告知。Web パーツの組み上げ例です。
記入用紙（4本）
アンケート・問診票・申込用紙・質問票。入力欄・チェックボックス・ラジオボタンなどの記入パーツを組み、書き込んだ内容をブラウザで保存できる形にしています。
テンプレートは増やせます
収録テンプレートに加えて、自分で作った文書を「テンプレートとして保存」しておけば、次からは一覧に並びます。部署の書式を揃えたいときに便利です。
作例 ― StyleDocx で作った文書
収録テンプレートのほかに、StyleDocx で実際に作成した文書も公開しています。パーツをどのように組み合わせると読みやすい文書になるのか、完成した文書を1本まるごとご覧いただけます。
一般的な文書作成ソフトでは、テキストや図形を自由に配置して図を作成できます。しかし、自由度が高いからこそ、誰もが簡単に分かりやすい図を作れるとは限りません。真っ白な紙に絵を描くのと同じように、作る人によって出来栄えに大きな差が生まれます。
また、見栄えを良くしようとするあまり、必要以上に装飾や情報を追加してしまい、結果としてかえって理解しにくい設計図になってしまうこともあります。
StyleDocx の「イラストリストパーツ（図解カテゴリ）」では、マス目にイラストを並べるだけで、誰でも簡単に図を作成できます。できることをあえて「並べる」ことに絞っているため、「何を、どの順番で並べれば伝わるか」に集中できます。余計な装飾に迷うことなく、結果としてシンプルで分かりやすい図に仕上がります。
適切なパーツを選んで配置するだけで、内容に合ったデザインが自然に適用されます。デザインの専門知識がなくても、統一感のある、プロレベルのクオリティーを持った文書を作成できます。
初めて見ても理解できる設計図の描き方
「1 枚の図に、1 つの役割」。役割が混ざった図はなぜ読みにくいのかを、家族の行動という身近な例と、注文書 FAX 処理システムの例の 2 本立てで説明した資料です。
使っているパーツ：イラストリスト 8 枚（役割ごとの流れ図）／図（画像＋キャプション）／手順リスト／コードブロック／付箋／フォルダ構成／2 カラムリスト／段組み／目次と飛び先 ID／表・パネル・注記パネル。配色はフォレスト、デザインはゆったり。
実物の手ざわりは、試用版で
30 日間の試用中に、テンプレートもパーツもすべてお使いいただけます。