★ ☆ ♥ ♪ ★

平成一桁世代
IT履修方法の振り返り

〜サ終済サービスから繋がる光と闇〜

KDDIアイレット株式会社

ビジネスアクセラレーション事業部 BA室データ分析基盤セクション

佐藤竜也

平成1年生佐藤の軌跡

日本の未来にうぉううぉう、いぇいいぇいしていた
MMORPGで社会人基礎を学んでいた
ハンゲームで友達とチャットしていた
テニプリがまだテニスしていた
（異論は認めます）

履修科目シラバス

学校では教わらなかった、けど今の仕事の8割を支えている科目たち

教科書①：魔法のiらんど

学び①　HTML / CSS を覚えた

教科書②：前略プロフィール

学び②　ITリテラシー（個人情報の開示）を学んだ

そして今...

学び③　グループでのWebサイト管理を学んだ

平成一桁闇歴史みなさんで今のIT業界を支えてます

Webサイト基礎
個人情報リテラシー
チームでのサービス運用

遊びこそ最大の学び場。
ありがとう平成のオトモたち

\ｺｰｲー💖 ｼﾁｬｯﾀﾝﾀﾞｧﾀﾌﾞﾝ. ｷﾂﾞｲﾃﾅｲﾃﾞｼｮｫｫ/

BONUS実装の工夫（裏側公開）

ClaudeCode Opus4.7的平成のあの頃感を出すために入れた要素たち

★ ビジュアル装飾

ハート敷き詰め背景（SVGをdata URIで埋め込み）
★☆の拡大回転アニメ（キラキラgif代替）
マウス追従の★☆♥（JS DOM生成 + transition）
マーキー＆blinkでうるさい演出
虹色テキスト（background-clip: text）

★ ガラケーUIの再現

320px幅の縦長フレーム＋丸み
auステータスバー（EZweb / 3G / battery）
テンキー番号付きメニュー＋accesskey
リンク色は青／訪問済み紫のデフォルト
フッターに「PC版はこちら」

★ コンテンツの仕込み

アクセスカウンター（黒地に緑文字＋本日/昨日）
キリ番踏み逃げ禁止のマーキー
「ピンクの携帯がブルブル震えた。」携帯小説オマージュ
BBSの名前：みっきー★ / ☆ゆいたん☆
★を@に変えてね方式のメアド

★ 前略プロフィールギミック

反転で見える「ひみつ」（背景＝文字色トリック）
リア友／ネトモ／メル友バッジ
友達からひとこと欄
足あと（最近来た人リスト）
Q&A形式の質問100風レイアウト

★ シラバス & 対比図

明朝体＋古文書感で真顔の真面目さ
履修済スタンプ（rotate(-6deg)で押印感）
左ピンク → 右紺の対比で時代差を視覚化
大学名は国際信州学院大学（隠しネタ）
業務直結バッジで現代との接続を明示

★ プレゼン基盤

1ファイル完結（iframeで各成果物を統合）
iframe遅延ロード（初回表示の高速化）
矢印 / Space / 数字キーナビ＋クリック対応
F でフルスクリーン切替
外部通信ゼロ（USB持ち込み可）

ちなみに：このスライド自体もHTML + CSS + JSで作ってます。 WEB-101 履修済のスキルが、20年後にLT資料作成で発揮されました。

平成一桁世代IT履修方法の振り返り

平成1年生 佐藤の軌跡