変換までこだわったタイピング風のアニメーションの実装と解説！【JavaScript】

今回紹介するタイピング風アニメーションは、当サイトのTOPページのローディングで実装をしています！
視覚的に楽しく、また、文字を読ませる効果があり、ユーザーに興味を持ってもらえるようになります。

タイピング風アニメーションの魅力と概要

タイピング風アニメーションは、ユーザーにリアルなタイピング体験を感じてもらえるエフェクトです。ここのエフェクトを取り入れることで、サイトに動きのある要素を追加し、ユーザーの関心を引きつけ、エンゲージメントを高めることが可能です。
特に、アルファベットからひらがな、そして漢字へと変換されるアニメーションは、日本語のタイピングプロセスを忠実に再現し、視覚的に楽しめるユニークな体験を提供します！

デモで実際に体験してください！

See the Pen Untitled by Muhiro (@muhiro) on CodePen.

基本的なアイデアとコンセプト

このアニメーションの基本的なアイデアは、実際の日本語入力プロセスを視覚的に表現することです。
日本語入力では、まずアルファベットをタイプし、それがひらがなに変換され、最終的に漢字に変わるというステップを踏みます。このステップをアニメーションで再現することで、ユーザーは文字入力の過程を視覚的に楽しむことができます。

たとえば、上記のデモのように「ようこそ、Webデザイナー 夢拓のポートフォリオへ。」と入力する場合、最初に「y」「o」「u」「k」「o」「s」「o」〜とアルファベットが順に表示され、それが「ようこそ」とひらがなに変わります。さらに、私の名前「夢拓」の部分では、「m」「u」「h」「i」「r」「o」とアルファベット表示がされ、それが「むひろ」とひらがな変換した後に漢字に変わるといった流れになります。
このアニメーションは、ただ文字を表示するだけではなく、文字が変化していくプロセスを見せることで、ユーザーに興味を持ってもらえます。

視覚的なタイピング再現がユーザーに与えるメリット

実際のタイピングを再現するアニメーションは、視覚的なインタラクションを通じてユーザーに親しみやすさを提供します。

たとえば、アルファベットからひらがな、そして漢字へと変換される文字列は、単なるテキストの表示よりも人間味を感じさせ、ユーザーが情報を自然に受け入れやすくなります。
これにより、ユーザーは入力される内容に対して好奇心を抱き、画面に表示される情報に対する注意力を高めます。
また、タイピングを模倣することで、ユーザーは自分が実際に情報を入力しているような感覚を得るため、コンテンツへの没入感が向上し、結果としてサイトのエンゲージメントが高まります。

エンゲージメントが高まるということは、ユーザーがサイト内での行動に積極的になり、コンテンツをより深く探索するようになるということです。
ユーザーがサイトに興味を持ってもらえることで、リンクをクリックしたり、他のページを訪問する可能性が高まります。
結果として、サイト全体のユーザー滞在時間が増加し、さらにはコンバージョン率の向上にもつながるかもしれません。

このように、実際のタイピングを再現するアニメーションは、単なるデザインの一要素に留まらず、ユーザー体験を豊かにし、Webサイト全体の価値を高める可能性があります。
ユーザーが感じる体験の質が向上することで、結果的にサイトの信頼性も高まり、リピーターの増加やユーザーの口コミによる新たな訪問者の獲得など、さまざまなポジティブな影響をもたらすことが期待されます！

実装の解説

JavaScriptでタイピング風アニメーションを実装します

"typing”という関数名でアニメーション処理を構築しております。
引数には、タイピング風アニメーションを表示する要素、タイピング時間、表示する文字を設定します。

const typing = (obj) => {
	let elapsed = 0;
	const target = obj.target;
	const word = obj.word;
	const speed = Number(obj.speed)

  // ガード節でエラー回避
	if(target === null) return;
	if(typeof(word) !== 'object') return;
	if(isNaN(speed)) return;

	for (let index = 0; index < word.length; index++) {
		let counter = index + 1;
		
		const objItems = word[index];
		const type = typeof(objItems);
		if(type === 'object') {
			if(!Array.isArray(objItems)) {
				const createElement = document.createElement('span');
				createElement.className = `wrp${index}`;
				const value = Object.values(objItems);
				let object_counter = 0;
				
				setTimeout((e) => {
					target.appendChild(createElement);
				}, elapsed + speed);
				for(const test of value) {
					for(const item of test) {
						const array_counter = counter + object_counter;
						setTimeout(() => {
							create_word(item,array_counter,createElement);
						}, elapsed);
						elapsed = elapsed + (item.length * speed);
						object_counter++;
					}
				}
				setTimeout((e) => {
					createElement.innerHTML = '';
					createElement.innerHTML = Object.keys(objItems);
				}, elapsed + speed);
				elapsed = elapsed + speed;
			} else {
				setTimeout(() => {
					create_word(objItems,counter);
				}, elapsed);
				elapsed = elapsed + (objItems.length * speed);
			}
		} else if(type === 'string') {
			setTimeout(() => {
				create_word(objItems,counter);
			}, elapsed);
			elapsed = elapsed + (objItems.length * speed);
		} else {
			return;
		}
	}

  setTimeout(() => {
		// タイピング風アニメーションが終了した後に処理を追加できます。
	},elapsed + speed);
  
  // アルファベットをひらがなに、ひらがなを漢字に変換したように見せるための関数
	const create_word = (array,index,parent = null) => {
		let count = 0;
		const finish = array.length - 1;
		const objItems = document.createElement('span');
		objItems.className = `t${index}`;
		(parent === null)? target.appendChild(objItems) : parent.appendChild(objItems) ;
		const time = setInterval(() => {
			const entryText =  array[count];
			const temp_text = objItems.innerHTML;
			objItems.innerHTML = temp_text + entryText;
			count++;
			if(count > finish) {
				objItems.innerHTML = '';
				objItems.innerHTML = entryText;
				clearInterval(time);
			}
		}, speed);
	}	
}

表示する文字は、配列とオブジェクトで管理します。
アルファベットをひらがなに変換する場合は配列で設定、変換した文字をさらに漢字やカタカナに変換する場合はオブジェクトで設定します。
変換不要な「、」「。」や半角スペースは文字列として設定します。

const obj1 = {
	'デザイナー': [
		['d','e','で'],
		['z','a','ざ'],
		['i','い'],
		['n','a','な'],
		['ー'],
	]
}
const obj2 = {
	'夢拓': [
		['m','u','む'],
		['h','i','ひ'],
		['u','o','ろ']
	]
};
const obj3 = {
	'ポートフォリオ': [
		['p','o','ぽ'],
		['ー'],
		['t','o','と'],
		['f','o','ふぉ'],
		['r','i','り'],
		['o','お'],
	]
}
const typingString = [
	['y','o','よ'],
	['u','う'],
	['k','o','こ'],
	['s','o','そ'],
	'、',
	['w','e','b','Web'],
	obj1,
	' ',
	obj2,
	['n','o','の'],
	obj3,
	['h','e','へ'],
	'。'
];

// typing関数を呼び出す
typing({
  target: document.getElementById('typing_text'),
  speed: 100, // ms
  word: typingString
});

タイピング時間は文字数で最適な時間を設定します。

まとめ

今回紹介したタイピング風アニメーションは、単なる文字表示に留まらない、奥深い表現力を持つテクニックです。実際のタイピングを再現することで、ユーザーに親しみやすいインターフェースを提供し、エンゲージメントを高めることができます。実装に際しては、パフォーマンスやユーザー体験を意識し、適切なタイミングとエフェクトを選択することが重要です。

ぜひ、今回紹介したアニメーションを取り入れて、より魅力的なWebコンテンツを作成してみてください！
特に日本語入力のプロセスを視覚的に表現することで、ユニークでインタラクティブな体験をユーザーに提供することができます。このアニメーションを活用して、一味違うWebサイトにしていただければ嬉しいです。