SlackやメールにAIの回答を貼ると崩れる。相手の環境で崩れない整え方
AI にまとめてもらった内容を、Slack やメールでそのまま共有する。よくある場面ですが、自分の画面ではきれいに見えていたものが、相手の画面では崩れていることがあります。
原因は貼り付け先ごとに解釈される記法が違うことです。何が効いて何が効かないかを把握すれば、事前に整えられます。
Slack:Markdownとは似て非なる記法
Slack は Markdown に似た記法を持っていますが、同じではありません。
| 装飾 | Markdown | Slack |
|---|---|---|
| 太字 | **text** |
*text* |
| 斜体 | *text* |
_text_ |
| 取り消し線 | ~~text~~ |
~text~ |
| インラインコード | `text` |
同じ |
| コードブロック | ``` |
同じ |
| 引用 | > text |
同じ |
| 見出し | ## text |
なし |
| 表 | | a | b | |
なし |
| リンク | [text](url) |
<url|text> |
太字の記法が違うのが厄介です。Markdown の **重要** を Slack に貼ると、アスタリスクを含んだまま「重要」と表示されます(設定によっては太字になりますが、環境依存です)。
そして重要なのは、Slack には見出しと表がないという点です。## まとめ はそのまま文字として出ますし、Markdown の表は縦棒の羅列として表示されます。
Slackに貼るときの方針
見出しは太字に置き換える:## まとめ を *まとめ* にします。
表はコードブロックに入れる:Slack には表がないので、桁を揃えたテキストを ``` で囲んで貼るのが最も読みやすくなります。コードブロック内は等幅フォントで表示されるため、桁が揃います。
このサイトの Markdown変換ツール の「プレーンテキスト」タブは、この用途を想定しています。表を全角文字の幅まで考慮して桁揃えするので、日本語の表でもコードブロックに入れれば崩れません。装飾記号は落とされるので、必要な箇所だけ Slack 記法で付け直します。
長い内容はスニペットにする:Slack のメッセージ欄に何十行も貼るとチャンネルが流れます。添付メニューからテキストスニペットを作るほうが、相手にとっても読みやすくなります。
メール:等幅フォントを前提にできない
メールでいちばん見落とされるのが、受信側のフォントが等幅とは限らないことです。
送信側が等幅フォントで桁を揃えても、受信側がプロポーショナルフォント(文字ごとに幅が違う書体)で表示していれば、桁は揃いません。スペースで整えた表は、相手の環境で崩れます。
テキストメールの場合
表は諦めて箇条書きにするのが確実です。
・プランA:月額0円、容量5GB
・プランB:月額1,200円、容量100GB
列が3つ以内なら、この形のほうが崩れず読みやすくなります。列が多い場合は、次の項目のとおりファイルにします。
インデントは全角スペースを使わない:全角スペースは環境によって幅が変わります。半角スペースか、記号(- や ・)で階層を示します。
1行の長さを抑える:古い環境では72文字前後で自動的に折り返されます。長い行を書くと、意図しない位置で改行されて読みにくくなります。
HTMLメールの場合
HTML メールが使える環境なら、表は <table> として送れます。Markdown 変換ツールの「HTML」タブで変換した結果を、HTML メールの編集画面に貼り付けます。
ただし、メールクライアントによっては CSS が無効化されることがあります。罫線は CSS ではなく border 属性で指定するか、そもそも罫線に依存しないレイアウトにしておくのが安全です。
表が本当に必要ならファイルで送る
列が4つを超える表を本文に入れるのは、どの形式でも無理があります。Excel ファイルを添付するほうが、相手も加工できて親切です。
Markdown 変換ツールの「Excel / スプレッドシート」タブでタブ区切りに変換し、Excel に貼って保存すれば数十秒で済みます。
共通して確認したいこと
送信前にプレーンテキストで見る
Slack でもメールでも、送信前に一度、素のテキストとして自分で確認します。メールなら下書きを自分宛に送る、Slack なら自分へのDMに投稿してみるのが確実です。
自分の編集画面と、相手が見る表示は別物です。とくに Slack は入力中と投稿後で見え方が変わります。
記号が意図せず装飾になっていないか
Slack ではアンダースコアが斜体の記法です。some_variable_name と書くと、variable の部分が斜体になって崩れます。変数名やファイル名は、インラインコード(`)で囲むのが安全です。
全角スペースの混入
AI に日本語で指示すると、インデントに全角スペースが使われることがあります。見た目では気づきにくいのですが、環境によって幅が変わるので崩れの原因になります。変換ツール側で半角に置き換える設定を既定で有効にしてあるのは、この理由です。
貼り付け先ごとの早見表
| 貼り付け先 | 使う出力形式 | 表の扱い |
|---|---|---|
| Slack | プレーンテキスト | コードブロックで囲む |
| テキストメール | プレーンテキスト | 箇条書きに置き換える |
| HTMLメール | HTML | <table> のまま |
| Excel / スプレッドシート | タブ区切り | そのまま貼る |
| WordPress / はてなブログ | HTML / はてな記法 | そのまま貼る |
貼り付け先が決まっているなら、AI に出力させる段階で形式を指定してしまうのも手です。詳しくは「AIに表で出してもらうときの、指示の書き方」にまとめました。