Bloggerデザイン : レトロ・タイピング・404ページ

1. デザインのタイプ

【レトロ・タイピング・404ページ】
タイプライターのように1文字ずつテキストが打ち出され、点滅するカーソルがアクセントとなる、ミニマルで物語性のあるエラーページデザイン。シンプルながらも、黒背景に映えるタイピング演出がユーザーの目を引き、エラー画面というネガティブな体験を印象的なインターフェースへと変貌させます。

404, page not found.

2. デザインの特徴

• 動的タイピングアニメーション
  ページ読み込み時にメッセージを動的に生成。無機質なエラー画面に人間味のあるリズムを与えます。
• ライブ・インジケーター
  点滅する黄色い「ハンドル」が、ターミナルのようなリアルタイムな操作感を視覚的に強調します。
• リプレイ・インタラクション
  SVGアイコンによるアニメーション再実行機能を備え、ユーザーが何度でも演出を確認できる設計。

3. 紹介コード

下の HTML / CSS / JavaScriptコードすべてをBloggerの 設定 >> エラーとリダイレクト >> カスタム404に貼り付けてください。

HTML・CSS JavaScript

<div class="typewriter-404-wrapper">
  <div class="container">
    <div class="copy-container center-xy">
      <p id="type-text">404, page not found.</p>
      <span class="handle"></span>
    </div>
  </div>

  <svg version="1.1" id="cb-replay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.9 297.3">
    <g>
      <path d="M269.4,162.6c-2.7,66.5-55.6,120.1-121.8,123.9c-77,4.4-141.3-60-136.8-136.9C14.7,81.7,71,27.8,140,27.8
        c1.8,0,3.5,0,5.3,0.1c0.3,0,0.5,0.2,0.5,0.5v15c0,1.5,1.6,2.4,2.9,1.7l35.9-20.7c1.3-0.7,1.3-2.6,0-3.3L148.6,0.3
        c-1.3-0.7-2.9,0.2-2.9,1.7v15c0,0.3-0.2,0.5-0.5,0.5c-1.7-0.1-3.5-0.1-5.2-0.1C63.3,17.3,1,78.9,0,155.4
        C-1,233.8,63.4,298.3,141.9,297.3c74.6-1,135.1-60.2,138-134.3c0.1-3-2.3-5.4-5.3-5.4l0,0C271.8,157.6,269.5,159.8,269.4,162.6z"/>
    </g>
  </svg>
</div>

<style>
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");

.typewriter-404-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Blogger内での表示用高さ */
    background-color: #000;
    overflow: hidden;
    font-family: 'Roboto Mono', monospace;
}

.center-xy {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.copy-container {
    text-align: center;
    width: 100%;
}

.copy-container p {
    color: #fff;
    font-size: 24px;
    letter-spacing: .2px;
    margin: 0;
    display: inline-block;
    position: relative;
}

.handle {
    background: #ffe500;
    width: 14px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

#cb-replay {
    fill: #666;
    width: 25px;
    height: 25px;
    margin: 15px;
    right: 0;
    bottom: 0;
    position: absolute;
    cursor: pointer;
    transition: fill 0.3s;
}

#cb-replay:hover {
    fill: #888;
}
</style>
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
    const $textElement = $('#type-text');
    const fullText = $textElement.text();
    const $handle = $('.handle');
    
    // テキストを空にして準備
    $textElement.text('');
    
    let tl = gsap.timeline({ repeat: 0 });

    function initAnimation() {
        tl.clear();
        $textElement.text('');
        
        // カーソルの点滅
        gsap.fromTo($handle, { autoAlpha: 0 }, { autoAlpha: 1, repeat: -1, duration: 0.4, yoyo: true });

        // タイピング効果
        let charArray = fullText.split('');
        charArray.forEach((char, i) => {
            tl.to({}, {
                duration: 0.1,
                onStart: function() {
                    $textElement.text($textElement.text() + char);
                }
            });
        });
    }

    initAnimation();

    $('#cb-replay').on('click', function() {
        initAnimation();
    });
});
// ]]>
</script>