Webデザイン制作支援リファレンス

制作区分

自主制作・実用

サービス分類

Webサイト制作

公開状態

公開済み

入口を等高線の地図にしたWebデザインの制作作業台。困り事から引くと、つまみで調整できる見本と、そのまま貼れるコードが並ぶ。

読んで終わる資料ではなく、制作中に開いて手を動かす作業台として作った。トップは等高線の地形で、入口ごとの島を押すとその一覧へ直行する。島の輪郭は地形の等値線そのもので、Canvasが場を描き、当たった島は丘が持ち上がって輪郭が広がる。狭い画面では地図をやめ、同じ色で並ぶ一覧に切り替える。困り事から引く逆引きには、答えのそばに動く見本を置いた。つまみを動かすと見本がその場で変わり、生成されたCSSをコピーできる。HTMLとCSSは読み取り専用の対で見せ、色や余白の値がどこから来ているかを出発点のCSSへ辿れる。見本はiframeに閉じてあるので、資料側のCSSと混ざらない。コピペで使えるパターン集は貼るコードそのものをプレビューし、背景の動く素材は速さ・密度・色を変えた設定のまま単一HTMLで持ち帰れる。素材ごとに向く場面・避ける場面・依存と負荷まで書いてある。様式のカタログと実物のデザインシステムは、同じ内容を別の規則で組み直した実画面として見比べられる。原稿はMarkdown、公開物は素のHTMLとSVGとCSSで、生成器はPythonで自作している（外部ライブラリ不使用）。画面に出る件数は原稿から数えて埋めるので、資料が増えても表示と中身がずれない。探しているものへ何クリックで着くかを規格として先に決め、それを測る検査を通してから公開する作りにした。JavaScriptが無くても全ページ読める。