moatway libraryは、実装したいことを探せるコード・パーツ集
Web制作をしていると、「同じようなコードを何度も書き直している」感覚にぶつかります。グラデーションのボタン、開閉する FAQ、ふわっと出てくる見出し——どれも一度作ったはずなのに、プロジェクトが変わるたびに 0 から書き直しているか、過去案件のフォルダを掘り返している——という人は多いはずです。
この「何度も同じことを書いている」を少しでも減らすために、moatway として運営しているコード・パーツのストック集が library.moatway.com です。Web制作者向けに、ボタン・見出し・カード・ファーストビュー・フォーム・ナビゲーション・アコーディオンのHTML・CSS、アニメーションの名前、GSAPのサンプルを 1 つのドメインにまとめています。おすすめの本とデザインの参考サイトも載せています。
この記事では、次の2点を紹介します。
- moatway library は何を集めたサイトか（主なコーナーの役割）
- どんなときに使うと有効か（実務での使いどころ）
moatway library とは：実装したいことが見つかるストックサイト
moatway library は、「実装したいことが、ここで見つかる。」をコンセプトに、Web制作で使うコードやデザインの引き出しを 1 ドメインに集約したストックサイトです。フレームワーク依存のない静的サイトで軽く、コードもデータも公開されているので、眺めて → コピペして → 自分の案件に組み込むのがそのまま流れになります。
いまの library には、次のような主なコーナーがあります。作りたいものに近いところから開いて、使い分けます。件数は2026年10月19日時点です。
| コーナー | 中身 | 主な使いどころ |
|---|---|---|
| ボタン | 申込・予約、問い合わせ、「続きを読む」、送信、メニューの開閉、シェアなどのボタンのHTMLとCSS（82件） | 申し込みボタンや送信ボタンなど、用途と見た目（塗り・枠線・ホバー）で探したいとき |
| 見出し | 下線・左線・背景色・吹き出し風・番号付きなど、h2・h3の見出し | ブログ記事やLPのセクションの見出しを揃えたいとき |
| カード | 枠線・影・写真付き・料金プラン・横スクロールなどのカード | 事例・料金・商品などを並べて見せたいとき |
| ファーストビュー | コーポレート・採用・サービス・お店のファーストビュー | トップページの1画面目の型を探すとき |
| フォーム | 2列のお問い合わせ、ステップ表示、項目名が上へ移る入力欄、検索窓、ログイン | 問い合わせページのフォームを作るとき |
| ナビゲーション | ヘッダーの横並び、ドロップダウン、メガメニュー、ハンバーガーメニュー、パンくずリスト | ヘッダーやメニューの型を探すとき |
| アコーディオン | QとAの印を付けたよくある質問、＋と−や矢印で開閉を示す形、1つだけ開く料金プラン、続きを読む、2段のカテゴリのメニュー、フッターのサイトマップ、商品の説明欄（11件） | よくある質問や料金プランなど、長い内容をたたんで見せたいとき |
| アニメーションの名前 | フェードイン・パララックス・マーキーなど、動きの名前と動く見本。AIにそのまま渡せる頼み方の例つき（89件） | 制作の担当者やAIに、どの動きかを正しく伝えたいとき |
| GSAPサンプル | ScrollTrigger・SplitText・Flip・SVGなどの動くプレビュー、全文コード、日本語の解説（45件） | GSAPで動きを実装するとき |
| おすすめの本 | Web制作・デザイン・生成AI・文章・働き方・金融の本。本ごとに学べることと向いている読者を掲載 | 次に読む本を選ぶとき |
| デザインの参考サイト | 国内のWebサイト・ランディングページ・海外のWebサイト・アプリの画面のギャラリーを、料金や向いている人つきで紹介 | デザイン提案の前にトーンをつかみたいとき |
「全部を覚える」ではなく、「ここから探せばいい」というブックマーク先を 1 つに減らす、というのが体感的なメリットです。
library の使いどころ
① 既存案件の「あの部品」を流用したい
「前のサイトでもこれ作ったはず」をフォルダ漁りで探すと、地味に 30 分溶ける。ボタン・カード・ファーストビューなどのコーナーに同種の部品があれば、そこから取って来て調整したほうが速いことが多いです。0 → 1 ではなく、ある程度形があるものを案件用に寄せるのが、この動き方に変えると、制作の時間配分がはっきり変わります。
② AI に「こういうコードで」と渡したい
最近は AI に書いてもらう前提で組むことも増えました。そのときに、「こういう書き方で」「BEM 命名で」「ここの記法に揃えて」と渡す参照コードがあると、AI 出力のブレが一気に減ります。library のコードをプロンプトに添える参照ソースとして使うと、レビュー時間が短くなります。
③ 動きの名前を、制作の担当者やAIに正しく伝えたい
「ふわっと出る」「ゆっくり流れる文字」といった言い方では、相手によって受け取る動きが変わります。アニメーションの名前のページで動く見本を見て名前を確かめると、「フェードインで」「マーキーで」と同じ呼び方で伝えられます。AIにそのまま渡せる頼み方の例も載せています。
④ 提案前のインスピレーションを集めたい
デザインの参考サイトは、国内・海外のギャラリーサイトを探し方ごとに並べたページなので、提案前にトーンを掴むときの参考になります。0 から探すと迷いますが、最初の手がかりが 5 件でもあると、そこから派生で集めやすくなります。
library の使い方
実際の操作は library のサイト上で完結します。流れは次の4ステップです。
- 作りたいものから探す：トップの「作りたいものから探す」か「パーツから探す」で、ボタン・見出し・アニメーションなどのコーナーを選ぶ
- 用途や見た目で絞る：ボタンなら「申込・予約」「問い合わせ」など。「サイト内を検索」からも探せます
- プレビューで見る：ページに置いた状態で見た目を確認し、HTMLとCSSをコピーします
- 自分の案件に貼って調整：BEM 命名は揃えているので、クラス名のリネームで衝突を避けるだけで馴染みやすい
今後の追加予定
library は止まらないストックなので、毎日少しずつ追加していきます。Web制作で「これがあったら助かる」という型を見つけ次第、ボタン・見出し・アニメーションなどのコーナーに加えていきます。
- いま準備中なのは、タブとテーブルのコーナーです
- 「こういう実装があったら助かる」リクエストがあれば、優先度を上げて追加する運用にしていきます
- ローカル制作環境の地味な効率化は Macユーザー辞書の登録方法 や MacでWordPressブログを始める方法 の小ワザも合わせて
まとめ
- library.moatway.com は、「実装したいことが、ここで見つかる」を目指す自社のコード・パーツ集
- 主なコーナーは ボタン・見出し・カード・ファーストビュー・フォーム・ナビゲーション・アコーディオン・アニメーションの名前・GSAPサンプル・おすすめの本・デザインの参考サイトなど。作りたいものから選ぶ
- ゼロから書き直さず、「ある程度形があるものを寄せる」動き方に切り替えると、制作の時間配分がはっきり変わる
まずは、いま作っているページに近い部品を library で探してみてください。ブラウザだけで完結するツールの例として、LINEスタンプを申請できる形にするツールも作りました。
AI とつくる、Web 制作——
moreo note が、あなたの「つくってみたい」と「もう一歩先」に、少しでも役立てたら嬉しいです。
一緒に、手を動かしながら進んでいきましょう。
気になったことは、お気軽に
この記事のとおりに進めてみて、うまくいかないところがあれば遠慮なく聞いてください。
制作や設定のご相談も、同じ窓口で受けています。
