タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
Noto Sans JP。デジタル庁デザインシステムの公開Markdown一式(カラー・タイポグラフィ・コンポーネント仕様)を読み込ませ、その規約に従うことだけを指示した。独自のトーンや派手な演出は加えていない。
影はグラデーション背景と組み合わせ、常時「ふわっと」感を出す
box-shadow:0 6px 20px rgba(0,23,193,.10)をhover時のみ使用。背景グラデーションは使わない。
translateY(-10px)級の過剰な浮き上がり
translateY(-3px)と枠線色の変化(border-color:var(--color-primary))にとどめる
マウス操作前提で、キーボードフォーカスの見た目を用意しない
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}を全リンク・ボタンに明示
紫・水色・イエローなど複数のアクセントカラーを混ぜる
プライマリは#0017C1の1色のみ。彩度の高い差し色を足さない
セクションごとに見出しの大きさや余白がばらつく
h2は全てfont-size:28px; font-weight:700、余白も--sp-4:40pxで数値化して統一
行政・自治体・公共性の高いサービスなど、誰が見ても読める誠実さが問われる場面に向く。勢いや高揚感を演出したいプロモーション色の強いLPには、このトーンはやや物足りなく映る。