03
SCROLL
CODICTIONARY.
URL:test.co.jp
制作概要
HTML・CSS・JS・jQueryを動かしながら学べる、視覚的にわかりやすいコード辞書「CoDictionary」。AI（Claude）への指示だけで一から形にした、AI活用・ディレクション力を鍛えるための個人制作です。
目的と対象
初心者が「読む」だけでなく「動かして」理解し、挫折せず基礎から積み上げられること。要件を言葉で的確に伝え、AIの出力をレビューして完成へ導く——自分のディレクション力とAI活用の精度を高めることを目的としました。
現状課題
入門書や学習サイトは説明が中心で、初学者は「読んでも自分では動かせない」まま挫折しがち。これからのWeb制作に不可欠なAIを"使いこなして形にする"力を、制作を通して身につける必要がありました。
ターゲット
プログラミング未経験〜初学者。HTML・CSS・JS・jQueryを基礎から学びたい人。専門用語や分厚い教材に苦手意識があり、手を動かしながら視覚的に理解したい人を想定しています。
コンテンツ設計
基礎・初級・中級・上級・特級・応用の6分類で難易度を整理し、必要な項目にすぐたどり着ける構成に。各項目を「意味・ルール」「言葉の予習」「動くプレビュー」の流れで解説し、編集窓でコードを書き換えると結果が即反映される体験を用意しています。
意匠設計
ネオン×ダークテーマで、コードに集中できる没入感のある学習空間をつくる。ゴールド・バイオレット・シアンで役割ごとに色を分け、情報の階層を直感的に示す。モノスペースフォントでコードの視認性を高め、本物のエディタらしい質感を出しました。
