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