CALLOUT IMPRESSION TEST / TO のっつ
CALLOUT
LAB
「AI製っぽく見えると言われた。でも、どう直せばAI製っぽくなくなるのか分からない」。その困りごとを、見た目の正解探しではなく、同じ文章を別の器へ移す比較実験にしてみました。
制作のきっかけとして参照した公開投稿
のっつさん（@Nottsu_fun26）の、UIデザインについての問題提起をきっかけに、この比較実験を制作しました。
本ページでは、投稿本文や投稿画像を転載せず、元の公開投稿へのリンクと、そこから着想したREMNET_K_B_D_S自身の実験結果だけを掲載しています。
本作品はREMNET_K_B_D_SとCodex PMによる個人制作であり、投稿者ご本人が制作・監修・推奨したものではありません。
リンク掲載やお名前の表記について気になる点がありましたら、@REMNET_K_B_D_Sまでお知らせください。ご本人からご希望があった場合は、確認のうえ変更または削除いたします。
METHOD
比較条件を揃えるため、以下の注意文をすべての見本で使います。変えるのは、色・罫線・書体・余白・情報の置き場所だけです。
共通の注意文：
このプログラムは、画面に表示された情報を読み取るだけです。予期しない動作が起こらないとは限りません。内容を確認したうえで、自己責任でご利用ください。
丸い紫色のコールアウト
丸い角、濃い背景、色付きの左線。この組み合わせ自体は昔から存在し、AIだけのものではありません。今回は比較の出発点として置いています。
青画面では、注意文が「命令」になる。
装飾されたカードではなく、端末が出した状態報告として読ませる。
REPRODUCE / コードを見る
.notice {
color: #f5f4df;
background: #06158f;
border: 2px solid currentColor;
font-family: Consolas, monospace;
}
.notice-title {
color: #06158f;
background: #f5f4df;
}薄紫では、注意文が「道具の会話」になる。
古いOSのダイアログとして、何かの操作中に現れた情報に見せる。
REPRODUCE / コードを見る
.dialog {
background: #c7c7c7;
border: 2px solid;
border-color: #f3f3f3 #38363d
#38363d #f3f3f3;
}
.titlebar {
color: white;
background: #675184;
}方眼では、注意文にも住所ができる。
コールアウトを浮かせず、紙面構造の一部として固定する。
REPRODUCE / コードを見る
.note {
display: grid;
grid-template-columns: 64px 1fr;
border: 1px solid #151512;
}
.mark {
color: #f1ede3;
background: #a33624;
}台帳では、注意文が「記録」になる。
管理番号と追記を置き、後から確認された文書のように見せる。
REPRODUCE / コードを見る
.notice {
color: #332f28;
background: #dfd4bb;
border-top: 3px double currentColor;
border-bottom: 1px solid currentColor;
font-family: "Courier New", monospace;
}緑一色では、注意文が「情報の一枠」になる。
特別なカードにせず、番号付きの掲示項目として並べる。
REPRODUCE / コードを見る
.notice {
display: grid;
grid-template-columns: 86px 1fr;
color: #008b62;
background: #f2f3eb;
border: 1px solid currentColor;
}ASCIIでは、注意文が「手作業」になる。
画像も角丸も使わず、記号と空白だけで境界を描く。
+----------------------------------------------------------+ | [!] IMPORTANT / REMNET NOTICE | +----------------------------------------------------------+ | このプログラムは、画面に表示された情報を読み取るだけです。 | | 予期しない動作が起こらないとは限りません。 | | 内容を確認し、自己責任でご利用ください。 | +----------------------------------------------------------+ | STATUS: READ BEFORE USE / ANSWER: YOURS | +----------------------------------------------------------+
REPRODUCE / コードを見る
<pre class="ascii-notice">
+------------------------------+
| [!] IMPORTANT |
+------------------------------+
| ここに注意文を入れます。 |
+------------------------------+
</pre>
.ascii-notice {
white-space: pre-wrap;
font-family: monospace;
}観察結果：文章は同じ。でも、役割が違って見える。
命令、会話、住所、記録、掲示、手作業。文章を囲う形が変わると、読む人が想像する「誰が・なぜ作ったのか」まで変わる。
結論：角丸を消せば人間製、ではない。
どのデザインもAIで生成できるし、人間も作れる。「AIっぽさ」を完全に消す方法ではなく、見慣れた組み合わせを一度ほどき、別の理由で組み直すための実験です。
好きなのを自分で選べ・参考にしてな。