(Sample)
「Webページに話しかけるような演出を加えたい！」「文字が一文字ずつ表示されるようなアニメーションが欲しい！」
そんな願いを叶えてくれるのが、今回ご紹介する “吹き出し × タイプライター効果” のコンビネーションです。
HTML、CSS、JavaScriptの基本スキルを活かして、簡単でインパクトのあるUI表現を作ってみましょう！
今回実装していることの概要
- 吹き出しのデザイン：CSSで丸みを帯びたボックスと三角形（しっぽ）を作成
- タイプライター効果：JavaScriptで1文字ずつテキストを表示
- キャレットアニメーション：CSSアニメーションで点滅カーソルを演出
これらを組み合わせることで、まるで会話しているような体験を提供できます。
HTML構造を確認しよう
<div class="speech-bubble">
<span id="text" class="typing"></span>
</div>
- 吹き出しの枠：
.speech-bubble - 表示される文字：
#textにJavaScriptで1文字ずつ追加
CSSのポイント解説
吹き出しのスタイル
.speech-bubble {
background: #00b900;
border-radius: 0.4em;
padding: 20px;
color: white;
...
}
- 緑の背景色（#00b900）に白文字
border-radiusで丸みを帯びた四角形に.speech-bubble:afterで下にしっぽをつけて“吹き出し”の形に
タイプライター風のカーソル
.typing {
border-right: 0.15em solid orange;
animation: caret 1s steps(1) infinite;
}
border-rightで縦線カーソル風にanimationで点滅（透明 → オレンジ → 透明…）
JavaScriptでタイプライター演出！
const text = "こんにちは！これはタイプライター効果の吹き出しです。";
let i = 0;
function typeWriter() {
if (i < text.length) {
document.getElementById("text").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 100); // 100ミリ秒ごとに1文字表示
}
}
text.charAt(i)で1文字ずつ取り出して追加setTimeout()を使って非同期的に呼び出し → ゆっくり打ってる感じを再現
もっと応用したいなら？
以下の機能を加えることで、さらにリッチな体験が可能になります：
| 応用例 | 内容 |
|---|---|
| 複数の吹き出しを順番に表示 | 会話風に進行させる（配列＋ループ） |
| クリックやキー操作で進める | ユーザー操作と連携 |
| 音を鳴らす | 1文字ごとに「カタカタ」音を出すと臨場感UP |
| 文字スキップ機能 | 長文の途中でも一括表示切り替えができるようにする |
| 改行やHTMLタグの対応 | innerTextでなくinnerHTMLを使って改行などに対応 |
よくある質問（FAQ）
Q. 表示が速すぎる or 遅すぎる場合は？
setTimeout(typeWriter, 100);
この 100 の値を調整してください。数字が小さいほど速くなります。
Q. 文字が重複して表示されることがある？
JavaScriptが複数回走っていないか、またはページが二重に読み込まれていないか確認しましょう。
開発中はconsole.log()で関数の呼び出し回数を確認するのもおすすめです。
最後に：この演出、どんな場面で使える？
| シーン | 使用例 |
|---|---|
| 学習教材 | クイズの出題・ヒント |
| ゲームUI | キャラクターのセリフ |
| エラー説明 | エラー発生時のわかりやすいガイド |
| ポップな説明 | 初回チュートリアルやガイドツアー |
今後の学びのステップ
- 配列とループを使って複数の吹き出しを順に表示する
async/awaitで時間制御をより綺麗に書く- CSS変数を使って色や速度をカスタマイズしやすくする
- クラス化・モジュール化で再利用しやすくする
「ただの文字表示」から一歩踏み出して、物語のようなWeb体験をつくってみましょう！