UI ARCHITECTURE

「紫色は、押せる合図」

信号機が「青なら進め」であるように、このサイトでも「紫色のグラデーションなら押せるボタン」というルールを徹底しています。

あちこちにいろんな色を使うのではなく、大事な場所だけ色をそろえることで、 初めて使う人でも「次はここを押せばいいんだな」と迷わず操作できるようになります。

デジタル版の「You Are Here（現在地）」マップ

カレンダーを見た瞬間、「で、今日はどこだっけ？」と探す時間はわずか数秒ですが、毎日続くとストレスになります。
そこで、今日の日付のマスだけ「赤枠とTODAYバッジ」で自動的に強調するようにしました。

ページを開いた瞬間に「あ、今日はここからだな」と脳が即座に理解できるので、迷いなく学習をスタートできます。

「文字」は読まないといけないけれど、「図形」は見るだけでわかります。

たくさんのリストが並んでいると、ズラリと並んだ文字に圧倒されてしまいます。
そこで、日付をカラフルな「四角い箱」に入れてあげることで、これを「読む文字」から「見るしるし」に変えました。

「あ、ここが日付だな」と直感的にわかるので、脳ミソに余計な負担をかけずに済みます。

「はみ出さない」という当たり前の難しさ

YouTubeなどの動画をページに貼るとき、そのまま貼るとスマホの画面からはみ出したり、縦横比がおかしくて黒い帯が出たりします。
このページでは、PCで見てもスマホで見ても、常に「16:9」の美しい比率を保ったまま、画面幅いっぱいに広がるように計算されています。

情報を「塊（かたまり）」にする

企画のステップなどを箇条書きにするのではなく、「カード」として枠で囲むことで、ユーザーは「これは1つのまとまった情報だ」と直感します。
さらに、それらが横並びになったり縦並びになったり、画面に合わせて柔軟に動く仕組みを取り入れています。

ステップ入力のストレスをゼロに

「1. 構図を決める」「2. カメラを構える」...と手書きで数字を打っていると、途中で手順を入れ替えたくなった時に全ての番号を書き直さないといけません。

プロの現場では、「順番はPCが勝手に数える」ように作ります。
こうすることで、手順が増えても減っても、常に正しい番号が自動で振られるようになります。

「スイッチ」の状態を管理する

カメラの「グリッド表示」や「照明オンオフ」は、それぞれ「ON/OFF」という2つの状態を持っています。
プログラムの世界では、これを「フラグ（Flag）」と呼びます。「旗が上がっているか、下がっているか」で画面の見た目を切り替えているのです。

「あのGoogleカレンダーと同じ見た目にしておきました！」

皆さんが普段、研修スケジュールを確認している「DX公開カレンダー」がありますよね？ このサイトのカレンダーは、あえてそれとそっくりな形に作ってあります。

「今日は祝日だから休みだな」とか「月末は4日間連続だな」といった、見慣れた感覚のまま使えるので、 新しいツールの使い方を覚える必要がありません。しかも、このサイトならそのまま教材も開けるので一石二鳥です！

「制作の裏側・デザインの意図」ボタンは、他のどの文字の上にも被らないように、そっとカードの右下に配置されています。
いつでも押せる存在感はありつつ、メインの学習の邪魔だけは決してしない。そんな「気配りの配置」です。

「最新のテキストどこだっけ？」をなくす

トップページにある「LATEST: Vol.XX テキストを開く」という大きな青いボタン。
実はこれ、人間が毎日書き換えているわけではありません。

サイトを開いた瞬間に、プログラムが「今公開されている一番新しい教材はどれかな？」と一瞬でリストをチェックし、 勝手にボタンの飛び先と名前（Vol.2など）を書き換えています。
運営側が更新を忘れても、ボタンは常に最新。これが「エンジニアの怠惰（良い意味での）」です。

「上にあるか、下にあるか」

Webサイトの画面は平らに見えますが、実は「奥行き」があります。
壁にポスターを貼るとき、新しいポスターを上に貼ると、下のポスターは隠れますよね。
「はめ込み合成」で動画の上に動画を乗せるのと同じで、Webでも「箱の上に箱を重ねる」ことができます。

「0%から100%までの物語を書く」

アニメーションとは、静止画の連続です。Webでも「0%の状態」と「100%の状態」を決めて、 その間を自動補完（Tween）させることで動きを作ります。
今回の「動く波形（オーディオスペクトラム）」も、ただの縦棒を「伸びたり縮んだり」させているだけです。

「Google検索」や「SNSシェア」のための看板

本棚に本が並んでいるとき、背表紙にタイトルがないと誰も手に取ってくれません。
Webサイトも同じで、中身を見なくても「これは何についてのページか」がわかるように、 「メタタグ」という名札（背表紙）をつけてあげる必要があります。

これをサボると、せっかく良いページを作っても、検索結果でスルーされてしまいます。

静的なページは、ただの「壁」です。

これまでのページは、情報がそこに「置いてあるだけ」でした。
今回のアップデートで、スクロールに合わせて文章がフワッと浮き上がったり、 重要な箇所にマーカーが引かれたりする「没入エンジン」を搭載しました。
これにより、ユーザーは「読まされている」のではなく「体験している」感覚になります。

Webサイトは、あなたの合図を待っています。

TikTokの「デュエット」が相手の動画に反応するように、Webページのボタンも ユーザーが「クリック」したり「マウスを乗せたり」するのをじっと待っています。
この「待ち受け状態」を作るのが「イベントリスナー（Event Listener）」です。
「クリック」という音が聞こえたら、「窓を開く」という動作をしなさい、と命令しておくようなものです。

「当事者意識」を一瞬で作る

ページを開いた瞬間、そこは「視聴者席」ではなく「配信者席」です。
下からフワフワと流れてくるコメント（Fake Comments）は、あなたに向けられたものです。
「あ、今ライブ中なんだ！」と脳を錯覚させることで、学習への参加姿勢（Engagement）を強制的にオンにしています。

「読む」より「押す」ほうが早い

「コメントを選んで動画で返信する機能です」と書くよりも、
「流れてくるコメントをポチッと押したら、動画作成画面になった！」という体験のほうが、
機能の「手軽さ」が直感的に伝わります。
これを「ゲーミフィケーション（Gamification）」と呼び、学習のハードルを下げる最強の武器です。

通常モードと「本番」モード

「GO LIVE」ボタンを押した瞬間、画面の雰囲気が一変します。
赤枠が点滅し、紙吹雪が舞い、BGMの音量が変わる。
これらを個別に制御するのではなく、たった一つの「ON AIRスイッチ（クラス）」をBodyタグにつけるだけで、 CSSが全てのデザインを一斉に切り替えています。

退屈なデータをハッキング体験に

「維持率42%」というただの数字の羅列では、初心者はすぐに飽きてしまいます。
そこで、ページ全体を「サイバーパンク風の指令室」に見立て、数字を「デコード（解読）すべき暗号」として演出しました。
スキャンライン（走査線）のアニメーションや、ネオンカラー（Cyan & Purple）の輝き（box-shadow）を使って、映画のハッカーのような没入感を作っています。

抽象的な概念を「触れる宇宙」へ

クロスプラットフォーム戦略という抽象的な概念を教えるため、ページ全体を「宇宙空間（Cosmos）」や「ネットワーク」をテーマにデザインしました。
星が瞬く背景（JS + CSSアニメーション）や、TikTokを中心（ハブ）として各SNS（サテライト）が繋がるSVGダイアグラムを用いることで、自分が巨大なエコシステムの中心にいるような感覚を提供しています。