【DifyのUIテクニック：前半】コード不要！Markdown活用術

はじめに👋

Difyで作成したアプリを実際に動かしてみたとき、以下のように感じたことはありませんか？

• 「回答の文章が平坦で読みづらい...」
• 「ただのチャットログみたいで、アプリっぽさがない...」

折角時間をかけて作成したアプリでも、見た目が微妙だとやる気がなくなりますよね。
ただ実は、Difyの出力UIは工夫次第で驚くほど自由にカスタマイズすることができます。
そこで今回は、本記事から前後編に分けて、アプリの表現力を底上げする「UIリッチ化テクニック」を解説していきます！

前半の記事では、まずはMarkdownを使ってコードを書かずに綺麗なUIを作成する方法をご紹介し、後半の記事ではHTML・CSSを使った本格的なUIのリッチ化方法をご紹介します。すでにMarkdown記法についてご存じの方は、後半の記事もぜひご確認ください！

当シリーズのブログ一覧

1. 【DifyのUIテクニック：前半】コード不要！Markdown活用術 ← 現在ココ
2. 【DifyのUIテクニック：後半】UIをよりリッチに！HTML/CSSの活用方法

Markdownとは？

Markdownとは、通常のテキストにハッシュタグやアスタリスクなど、特定の記号を付加するだけでドキュメントを構造化して記述できる軽量マークアップ言語です。
以下の出力の比較を見たらわかる通り、ほんの少し記号を書き加えるだけで、文字のサイズを変えたり、表やコードブロックなども作成することが可能になります。

適用前

適用後

Markdown記法は、一般的にAIが読み取りやすい記法とされているため、AI向けのプロンプト作成にも活用できます。詳しくは弊社のプロンプト記法解説記事(こちら)をご覧ください。

Markdownの表記一覧

このセクションでは、Difyで頻繁に使用されるMarkdown記法を一通りご紹介します。
コピペで試せるサンプルを用意しているので、回答ノードやテンプレートノードに貼り付けて、ご自身でもお試しください！

---

1. 見出し

• テキストの先頭にハッシュ記号と半角スペース（#）を記載する

# ~ ######まであり、基本的に#の数が増えるほど見出しのサイズが小さくなります。
※ただしDify上では ###~######は同じ文字サイズとなってしまうので、注意が必要です！

サンプル

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

---

2. 斜体・太字・インラインコード

• 斜体: テキストをアスタリスク1つ（*）or アンダースコア1つ（_）で囲む
• 太字: テキストをアスタリスク2つ（**）or アンダースコア2つ（__）で囲む
• 太字と斜体: テキストをアスタリスク3つ（***）or アンダースコア3つ（___）で囲む
• インラインコード: テキストをバッククオート1つ（`）で囲む

サンプル

*斜体1*
_斜体2_
**太文字1**
__太文字2__
***太文字＆斜体1***
___太文字＆斜体2___
`インラインコード`

---

3. リンク

1. リンクとして表示したいテキストを角括弧（[ ]）で囲む
2. 続けて丸括弧（( )）の中にURLを記述する

サンプル

[リンク](https://example.com)

---

4. 画像の埋め込み

1. 先頭に感嘆符（!）を記載する
2. 続けて角括弧（[ ]）を書き、必要に応じて代替テキスト（画像が表示されない場合に表示されるテキスト）を記述する
3. 続けて丸括弧（( )）の中に画像ファイルのURLを記述する

サンプル

![画像1](https://placehold.co/600x400)

---

5. コードブロック

1. 3つのバッククオート（```）を入力して囲みたい範囲を指定する
2. 最初の3つのバッククオートの直後に使用する言語名を記述する
   • text, python, json, htmlなど
   • 言語名を指定するとシンタックスハイライトが有効になる

【用語解説】シンタックスハイライトとは？

シンタックスハイライトとは、プログラミング言語の構文（文法ルール）に合わせて、特定の単語や記号を自動的に色分けして表示する機能のことです。
これがあると、どこが「命令」でどこが「文字列」なのかがひと目で分かるようになり、単色のテキストに比べて読み手の負担を大きく減らすことができます。

Difyでは、コードブロックは自動的にコピーボタンが付くため、プログラミングコードはもちろん、ユーザーにコピーして使ってほしい情報がある場合などにも使用できます。

サンプル

```python
print("hello world")
print("this is sample code!")
```

---

6. 箇条書き

• 順序なしリスト: 行の先頭に* / - / +を記載する
• 順序付きリスト: 行の先頭に1. / 2. / 3. など、数字とピリオドを記載する
• ネスト構造: 親項目よりタブ1つ分インデントしてリスト記号を記載する

サンプル

**順序なし**
- 犬
- 猫
- うさぎ
**順序あり**
1. 朝食を食べる
2. 通勤する
3. 仕事を始める
**入れ子**
1. 買い物する
    - 野菜
        + にんじん
        + たまねぎ
2. 会計する
3. 帰宅する

---

7. 表

1. パイプ記号（|）で列を区切り、ヘッダーを指定する
2. パイプ記号（|）で列を区切り、ハイフン（-）とコロン（:）で行揃えを指定する
   • 左揃え: ハイフンの左にコロン（:---）
   • 中央揃え: ハイフンの両側にコロン（:---:）
   • 右揃え: ハイフンの右にコロン（---:）
3. 以下必要なデータをパイプ記号（|）で列を区切りつつ、必要なデータを埋める

サンプル

| 名前 | 年齢 | 職業 |
|:---|:---:|---:|
| 佐藤 ○○ | 28 | エンジニア |
| 鈴木 ○○| 34 | デザイナー |
| 高橋 ○○| 22 | 学生 |

---

8. 区切り線

• ハイフン（-）を3つ以上連続で記述する

1. 前後の行は空行にする
   • 前後にテキストがある場合でも区切り線として表示されますが、意図せぬ結合を避けるために空行を1行入れるのが無難です
2. 好みで記号間にスペースを入れてもOK
   • 例: - - -
   • ただし、行頭から同一記号で統一しましょう

サンプル

セクション1

---

セクション2

- - -

セクション3

---

9. 引用

• 行の先頭に大なり記号（>）を記載する

引用のほか、ヒントや注意書きを目立たせる際にも使われます。

サンプル

> ここに引用したいテキストを記入
> ここに引用したいテキストを記入

---

10. 打消し線

• 取り消したいテキストをチルダ2つ（~~テキスト~~）で囲む

サンプル

~~打消し線~~

---

11. チェックボックス

• リストアイテムの先頭にハイフン、半角スペース、角括弧と半角スペース（- [ ]）または角括弧とx（- [x]）を記述する

サンプル

- [ ] 未チェック
- [x] チェック済み

---

12. 注釈

1. 注釈をつけたい言葉の直後に、[^1]のように角括弧とハット（^）、そして識別用の数字や単語を書く
2. 文章の最後など、別の行に、同じ識別子（[^1]:）を書き、その後に注釈の内容を記載する

サンプル

これは注釈付きの文章です[^1]
[^1]: これは1つ目の注釈の内容です。

---

まとめ🎯

今回ご紹介したMarkdown記法を使うことで、特別なデザインスキルやプログラミング知識を使わずにアプリの見た目をより一層魅力的にできることが分かりました。
これらのMarkdownテクニックを駆使して、ユーザーが直感的に操作できて、その価値を最大限に引き出せるアプリをぜひ構築してみてください！

次回の 【DifyのUIテクニック：後半】UIをよりリッチに！HTML/CSSの活用方法では、Markdownだけでは表現しきれない、より高度で自由度の高いUIカスタマイズをテーマに、HTMLやCSSを使ったレイアウト・装飾テクニックをご紹介します！

次の記事：【DifyのUIテクニック：後半】UIをよりリッチに！HTML/CSSの活用方法

参考文献

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#fnref-baz
https://qiita.com/masterpiecehack/items/990683b706b70b88b4c7