チャット & メディア

チャット & メディアに分類されるWeb表現技法11件。チャットバブル、入力中インジケータ、プレイリスト、メッセージ入力欄など。ライブデモとコピーできるコード付き。

送受信のメッセージ吹き出しを左右に並べたトーク画面。アバターや時刻、既読チェックまで揃い、最後の一通だけ少し遅れて既読色に変わります。

3つの点が順番に跳ねる「入力中…」バブルと、相手のオンライン表示を常時ループさせたステータス演出です。返信を待つ間の安心感を演出します。

6曲分の曲名・アーティスト・再生時間を一覧表示するプレイリスト。再生中の曲は番号がバーアニメーションに切り替わり、総再生時間もヘッダーに表示します。

入力内容に応じて高さが伸びるテキストエリアと、文字が入ると活性化する送信ボタン、絵文字と添付のアイコンを備えた入力欄です。

ネストした返信といいね・返信ボタンを備えたコメント欄。長く伸びた返信スレッドは折りたたんでおき、必要なときだけ矢印から展開できます。

バブルにカーソルを乗せる（またはタップする）とリアクションパレットが浮かび上がり、選んだ絵文字が集計チップとして積み上がっていきます。

右下の起動ボタンから展開するミニチャット窓です。ヘッダー・履歴・入力欄がそろい、閉じるボタンでまた起動ボタンへ最小化します。

ポスター画像にカスタムコントロールを重ねた動画プレイヤー。再生/一時停止・シークバー・音量調整・全画面ボタンを備え、時間経過とともに再生位置が進みます。

回転するジャケット写真と曲名・アーティスト表示、シークバーと前後の曲送りを備えた音楽プレイヤー。再生中はイコライザー風のバーが小さく揺れて動きます。

番組名とエピソード情報を表示し、15秒の早戻し・早送りと再生速度切替(1.0x〜1.5x)に対応したポッドキャストプレイヤー。長尺コンテンツの視聴を想定しています。

棒状の波形をクリックした位置から再生できるプレイヤー。再生済みの部分はアンバー色に塗り分けられ、時間経過に応じて色分けの境界が右へ進みます。