紹介

GODRICH は、サイトを作る人に CSS・SCSS アニメーションと UI コンポーネントを、実際に動くデモと完全なソースとしてファイルで渡す場所です。

なぜ作っているか

検索で見つかるコードはたいてい断片です。貼っても動かなかったり、どこを変えれば結果が変わるのか分からなかったりします。ここの記事は、その隙間を埋めるために書いています。ライブデモ・完全なソース・実測した数値をひとつにまとめて渡します。

記事ひとつができるまで

1. 検索語はロケールごとに Google のサジェストを毎回実測します。翻訳はしません。
2. デモは HTML + SCSS（と React 版）で作ります。外部ライブラリや CDN は使いません。
3. デモを実際のブラウザで描画し、動き（塗り面積の推移・フレーム数）を測定して、その数値を本文に載せます。
4. 本文のコードブロックは、デモのソースの実際の該当箇所をそのまま載せています。書き直しません。
5. ロケールごとの記事はそれぞれ新しく書き、その言語の基準で校正します。
6. デモ・ソース・プロンプトを zip にまとめ、正しいパスワードで開けること、間違ったパスワードで開けないことの両方を機械的に検証します。
7. 記事・デモ・zip は自動チェック（ゲート）を全部通らないと公開しません。ひとつでも通らなければ、その記事は出しません。
8. 記事の下書きとデモ制作には AI ツールを使います。測定と検証はスクリプトが行い、公開するかどうかの最終判断は運営者が行います。

記事ひとつに入っているもの

• 実際に動くデモと、その測定値
• なぜその CSS プロパティを使うのかという説明
• 実際に壊れる状況ひとつ
• 値をひとつだけ変えたバリエーション
• prefers-reduced-motion への対応
• zip とそのパスワード — 本文の途中、文章の中に置いています。枠で囲ったり大きな文字にしたりはしません。zip は記事の文脈（どこを変えると何が変わるか）と一緒でないと使い物にならないので、あえて本文の中に置いています。

誰が書いているか

運営者ひとりで作っています。記事ごとの著者紹介や経歴は設けていません。

ないもの

• コメント機能はありません。
• 広告は Google AdSense の自動広告を予定しています。詳しい扱いはプライバシーポリシーに書いています。
• 訪問者の個人情報を独自に収集することはありません。詳細は同じくプライバシーポリシーをご覧ください。

ライセンス

zip の中のコードは MIT ライセンスです。商用サイトに使っていただいて構いません。画像を含む記事は、画像ごとのライセンスを zip 内の README に記載しています。

お問い合わせ

お問い合わせはお問い合わせページへお願いします。