Web制作で「これ前に書いた気がする…」を、何度も繰り返していませんか？
Web制作をしていると、「同じようなコードを何度も書き直している」感覚にぶつかります。グラデーションのボタン、開閉する FAQ、ふわっと出てくる見出し——どれも一度作ったはずなのに、プロジェクトが変わるたびに 0 から書き直しているか、過去案件のフォルダを掘り返している——という人は多いはずです。
この「何度も同じことを書いている」を少しでも減らすために、moatway として運営しているコード・パーツのストック集が library.moatway.com です。Web制作者向けに、スニペット・パーツ・WordPressコード・サンプルサイト・便利な画像ツールを 1 つのドメインにまとめています。
この記事で分かること：
- moatway library は何を集めたサイトか（5カテゴリの役割）
- どんなときに使うと有効か（実務での使いどころ）
1. moatway library とは——「実装したいことが、ここで見つかる」
moatway library は、「実装したいことが、ここで見つかる。」をコンセプトに、Web制作で使うコードやデザインの引き出しを 1 ドメインに集約したストックサイトです。フレームワーク依存のない静的サイトで軽く、コードもデータも公開されているので、眺めて → コピペして → 自分の案件に組み込むのがそのまま流れになります。
カテゴリは大きく 4 つに分かれていて、用途で使い分けます。
| カテゴリ | 中身 | 主な使いどころ |
|---|---|---|
| Snippets | UI 要素・アニメーション・レイアウトなど短いコード片 | ボタン・カード・hover・スクロール演出など、1 機能 1 ファイルで欲しいとき |
| Parts | セクション単位の部品（ヘッダー・FV・FAQ・フッター 等） | ページの「区画」を組み立てるとき。LP の組み合わせで時短になりやすい |
| WP | WordPress 向けコード（functions.php・ブロック・テーマ実装） | WordPress 案件で「あの実装どうやるんだっけ」を毎回検索しないために |
| Sites | 業界別のサンプル／参考になる完成サイトのリンク集 | デザイン提案やワイヤー前のインスピレーション収集 |
「全部を覚える」ではなく、「ここから探せばいい」というブックマーク先を 1 つに減らす、というのが体感的なメリットです。
なお、この 4 つはあくまで「コンテンツ（コード・参考）」のカテゴリです。これに加えて、library では ブラウザだけで使える「画像ツール」も用意しています（このあと詳しく紹介します）。
2. どんなときに使うと効くか（実務での使いどころ）
① 既存案件の「あの部品」を流用したい
「前のサイトでもこれ作ったはず」をフォルダ漁りで探すと、地味に 30 分溶ける。Parts カテゴリに同種の部品があれば、そこから取って来て調整したほうが速いことが多いです。0 → 1 ではなく、ある程度形があるものを案件用に寄せるのが、この動き方に変えると、制作の時間配分がはっきり変わります。
② AI に「こういうコードで」と渡したい
最近は AI に書いてもらう前提で組むことも増えました。そのときに、「こういう書き方で」「BEM 命名で」「ここの記法に揃えて」と渡す参照コードがあると、AI 出力のブレが一気に減ります。Snippets をプロンプトに添える参照ソースとして使うと、レビュー時間が短くなります。
③ WordPress 案件で「functions.php に何を足すか」を毎回ググらない
WordPress 案件で functions.php をいじるとき、やりたいことは似ているのに毎回ググってコピペ → 動作確認を繰り返しがちです。WP カテゴリにストックがあると、「自分で確認したスニペット」だけを集めた個人版 Codexとして参照できます。
④ 提案前のインスピレーションを集めたい
Sites カテゴリは「業界別の見本リンク集」なので、提案前にトーンを掴むときの参考になります。0 から探すと迷いますが、最初の手がかりが 5 件でもあると、そこから派生で集めやすくなります。
＋α：ブラウザ完結の「画像ツール」も使えます
最近、library に コード以外の新しい引き出しが加わりました。Web制作で地味に手間がかかる「画像まわりの処理」を、ブラウザだけで完結できる画像ツールです。
いちばんの特徴は、画像をどこにもアップロードしないこと。変換も加工もすべてブラウザの中だけで処理されるので、クライアントから預かった画像や、社外秘のスクショも安心して扱えます（サーバーに送られない＝情報が外に出ない）。
用意しているのは、次の8つです。
| ツール | できること | 制作現場での使いどころ |
|---|---|---|
| 画像変換・圧縮 | PNG/JPEG → WebP 変換・リサイズ・EXIF除去 | 納品画像の軽量化・表示速度対策 |
| 背景透過AI | 被写体を自動で切り抜き | ロゴ・人物・商品画像の背景抜き |
| 切り抜き・回転 | トリミング・回転・反転 | アイキャッチの比率調整 |
| モザイク・ぼかし | 指定範囲を隠す | 提案資料での個人情報・社名マスク |
| 画像結合・PDF出力 | 縦/横/グリッド結合・PDF化 | Before/After 並べ・確認用PDF |
| 注釈（修正指示） | 矢印・四角・テキスト | クライアントへの修正指示・レビュー |
| エディタ | 切り抜き〜注釈を1画面で | まとめて加工したいとき |
| favicon生成 | 各サイズを一括出力 | サイト立ち上げ時のアイコン整備 |
制作の現場では、スクショに注釈を入れる・画像を WebP 化する・favicon を揃えるあたりが特に効果的です。専用アプリを開かずブラウザのタブひとつで終わるので、作業の流れが途切れません。
👉 画像ツールはこちら：library.moatway.com/img-tool/
3. 使い方の最短ルート
実際のページ操作は library 側で完結しますが、流れだけ先に。
- カテゴリで絞る：Snippets / Parts / WP / Sites のどれかを選ぶ
- タグ・キーワードで絞る：「ボタン」「FAQ」「グラデ」など実装したいこと
- プレビューで見る：見た目を確認（コードはその場でコピー可）
- 自分の案件に貼って調整：BEM 命名は揃えているので、クラス名のリネームで衝突を避けるだけで馴染みやすい
4. これから増やしていく予定
library は止まらないストックなので、毎日少しずつ追加していきます。Web制作で「これがあったら助かる」という型を見つけ次第、Snippets / Parts / WP のいずれかに加えていきます。
- 「こういう実装があったら助かる」リクエストがあれば、優先度を上げて追加する運用にしていきます
- ローカル制作環境の地味な効率化は Macユーザー辞書の登録方法 や MacでWordPressブログを始める方法 の小ワザも合わせて
まとめ
- library.moatway.com は、「実装したいことが、ここで見つかる」を目指す自社のコード・パーツ集
- カテゴリは Snippets / Parts / WP / Sites の 4 つ。用途で使い分ける
- ゼロから書き直さず、「ある程度形があるものを寄せる」動き方に切り替えると、制作の時間配分がはっきり変わる
AI とつくる、Web 制作——
moreo note が、あなたの「つくってみたい」と「もう一歩先」に、少しでも役立てたら嬉しいです。
一緒に、手を動かしながら進んでいきましょう。
