コードペン（CodePen）とは、HTML・CSS・JavaScriptをブラウザ上で書いて即時プレビューできる無料のオンラインコードエディタです。環境構築なしで動作確認やデモ作成ができ、世界中のエンジニア・デザイナーが作品を公開・共有しているため、フロントエンド学習やプロトタイピングの定番ツールとして使われています。
この記事では、コードペン（CodePen）のアカウント作成から、Pen（コードスニペット）の書き方、コードの保存・公開・共有、ブログへの埋め込み方法までを、初心者向けに順を追って解説します。実際に動くデモは UI/UXモーションデザイン カテゴリに多数まとめています。
1. CodePenとは？
CodePenは、HTML、CSS、JavaScriptのコードをブラウザ上で簡単に書いて、リアルタイムで結果を確認できるオンラインエディタです。初心者が学習する場としてはもちろん、プロのデザイナーやエンジニアがアイデアを試したり、プロトタイプを作成したりするためにも活用されています。
CodePenが選ばれる理由
- インストール不要でブラウザだけで動作
- リアルタイムプレビュー機能
- 他のユーザーとアイデアをシェア可能
- 世界中の作品を閲覧・参考にできる
2. CodePenの基本機能
ペン（Pen）の作成
「Pen」とは、CodePenで個別に作成できるHTML、CSS、JavaScriptのスニペットです。以下の手順で作成できます：
- CodePenのトップページから「New Pen」をクリック。
- エディタ画面が開き、左からHTML、CSS、JavaScriptの入力フィールドが表示されます。
- 各フィールドにコードを記述すると、右側にリアルタイムで結果が表示されます。
プロジェクトの作成
CodePenでは、複数のファイルを管理できる「プロジェクト」を作成することも可能です。これはより大規模なコードを書く際に便利です。
- トップメニューから「New Project」を選択。
- フォルダ構造でHTML、CSS、JavaScriptファイルを追加・編集できます。
3. CodePenの使い始め方
アカウント作成
CodePenを使い始めるには、アカウント作成が必要です。
- CodePen公式サイトにアクセス。
- 「Sign Up」をクリックし、必要情報を入力して登録します。
- 無料プランでも十分ですが、Proプランでは以下の追加機能が使えます：
- プライベートPen
- コラボレーションモード
- アセットホスティング
初心者向けのステップ
- テンプレートを活用
CodePenには、あらかじめセットアップされたテンプレートが用意されています。たとえば、「Flexbox」や「Grid」などのテンプレートを利用して基本的なレイアウトを試すことが可能です。 - シンプルなコードを書く
簡単なHTMLとCSSでボタンやカードデザインを作成してみましょう。
4. CodePenの活用法
学習ツールとして
CodePenは、フロントエンド学習の場として最適です。
- CSSの練習
FlexboxやGridレイアウトを使った練習問題を自分で作成。 - JavaScriptのテスト
ボタンやフォームの動作を実際に試せます。
ポートフォリオとして
作成した作品を公開すれば、自分のスキルをアピールするポートフォリオとして活用できます。
- プロジェクトの完成例を共有
- 採用担当者にスキルを視覚的に伝えるツールとして利用
チームやクライアントとのコラボレーション
リアルタイムでコードを共有しながら、クライアントやチームメンバーと共同作業ができます。
5. CodePenの便利な機能
プレビュー機能
リアルタイムで結果を確認できるため、デバッグや調整がスムーズに行えます。
外部リソースの追加
CDNから外部リソースを追加することで、簡単にライブラリを利用できます。たとえば：
- jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> - Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
コミュニティとの交流
CodePenでは他のユーザーが作成した作品を閲覧でき、気に入ったものにコメントや「Like」を送ることができます。
6. CodePenの活用Tips
- タグを付ける
作成したPenに適切なタグを付けて、より多くのユーザーに見てもらいましょう。 - 検索機能を使う
ほかのユーザーの作品を検索し、自分のアイデアに活かせます。 - リビジョン管理
作業履歴を保存できるため、過去のコードに戻ることができます。
7. CodePenのProプランについて
CodePenには有料のProプランがあり、以下のような機能が利用可能です：
- プライベートPen
クライアントに見せる際や、公開したくないコードに最適。 - アセットホスティング
プロジェクトで使用する画像やフォントを直接アップロード可能。 - チームコラボレーション
リアルタイムで共同編集ができます。
8. CodePen（コードペン）でできること一覧
CodePen（コードペン）とは、ブラウザ上でHTML・CSS・JavaScriptを記述し、リアルタイムに実行結果を確認できるオンラインコードエディタです。「code pen」や「こでぺん」と検索して見つける方も多いこのサービスでは、以下のようなことが可能です。
コーディング学習・練習
環境構築なしでHTML/CSS/JavaScriptを書いて即座に結果を確認できるため、初心者の学習ツールとして最適です。FlexboxやCSS Gridなどのレイアウト練習にも活用されています。
UIパーツの試作・プロトタイピング
ボタン、カード、ナビゲーションなどのUIパーツを素早く試作できます。Bootstrap・Tailwind CSSなどのフレームワークもCDN経由で読み込めるため、実務に近い環境で検証が可能です。
コードの共有・埋め込み
作成したPenはURLで共有でき、ブログや技術記事にEmbed（埋め込み）として表示することも可能です。動くデモ付きの技術記事を書く際に重宝します。
不具合の再現・報告
バグの最小再現環境をPen上で作り、URLを共有するだけでチームメンバーやOSSメンテナにスムーズに報告できます。Stack OverflowやGitHub Issuesでもよく利用される方法です。
ポートフォリオ・作品集
自分が作成したPenを公開プロフィールにまとめれば、スキルを視覚的にアピールできるポートフォリオになります。就職活動やフリーランスの案件獲得にも役立ちます。
9. CodePenの無料プランと有料プラン（Pro）の違い
CodePenは無料で利用できるオンラインコードエディタですが、有料のProプラン（月額$12〜）にアップグレードすると、より高度な機能が使えるようになります。以下の比較表で違いを確認してください。
| 機能 | 無料プラン | Proプラン |
|---|---|---|
| Pen作成数 | 無制限 | 無制限 |
| プロジェクト作成 | 1件まで | 無制限 |
| プライベートPen | 不可（すべて公開） | 利用可能 |
| アセットホスティング | なし | 画像・フォント等をアップロード可能 |
| リアルタイムコラボレーション | 不可 | 利用可能（Collab Mode） |
| カスタムドメインでのデプロイ | 不可 | 利用可能 |
| 広告表示 | あり | なし |
無料プランで十分なケース
個人の学習やコーディング練習、技術ブログへのEmbed、公開前提のUI試作であれば、CodePenの無料プランで十分に活用できます。Pen作成数に制限はなく、HTML・CSS・JavaScriptの編集とリアルタイムプレビューはすべて無料で利用可能です。
Proプランが向いているケース
クライアントワークで非公開のPenが必要な場合、チームでリアルタイム共同編集を行いたい場合、または画像やフォントなどのアセットをCodePen上にホスティングしたい場合は、Proプランへのアップグレードが推奨されます。
10. まとめ
CodePenは、初心者からプロまで幅広いユーザーに支持されているオンラインエディタです。まずはシンプルなコードを書いて、リアルタイムプレビューの便利さを体感してみましょう。学習や実験、ポートフォリオ作成、チームコラボレーションなど、CodePenを活用してあなたのフロントエンドスキルをさらに高めてください！
実務Tips（ベストプラクティス集）
まずは「Pen」で最小再現を作る
不具合の切り分けやUI試作は、Penで最小のHTML/CSS/JSに落として検証すると早い。外部ライブラリの読み込みも「Settings → JS/CSS」から追加できます。
外部リソースはCDNで統一
Bootstrap、GSAP、Vue/Reactなどは CDNの安定版 を指定。読み込み順（依存関係）に注意し、不要になったら外すと実行が軽くなります。
プリプロセッサを活用（SCSS・Babel など）
「Settings → HTML/CSS/JS」から SCSS / PostCSS / Babel / TypeScript(トランスパイル) を選択可能。既存プロジェクトの再現性を高められます。
フォーク運用で安全に試す
他人のPenでも自分のPenでも、Fork → 変更 → 比較の流れにすると元を壊さず改善が回せます。学習にも最適。
Embedで記事に埋め込む
ブログやドキュメントに Embed を貼ると、読者がその場で動作を確認できます。ダーク/ライトや表示タブの初期状態は埋め込みオプションで調整。
コレクションで整理
テーマ別に Collections を作ってPenを分類。社内共有や学習ロードマップとしても便利です。
実務の不具合報告テンプレ
Pen上部の説明欄に「症状・期待動作・再現手順・環境」を書き、URLを共有。最小再現＋環境情報でレビューがスムーズになります。
よくある質問（FAQ）
Q. コードペン（CodePen）とは何ですか？
コードペン（CodePen）とは、HTML・CSS・JavaScriptをブラウザ上で書いて即時プレビューできる無料のオンラインコードエディタです。リアルタイムプレビューで結果を即確認でき、コードスニペットの共有やブログ埋め込み、ポートフォリオとしても活用できます。
Q. コードペン（CodePen）の無料プランで何ができますか？
無料プランでもPen（コードスニペット）の作成・公開・共有が無制限で利用でき、外部ライブラリの読み込み、SCSSやTypeScript等のプリプロセッサ、ブログへのEmbed埋め込みが可能です。プライベートPenやAsset Hostingが必要な場合は有料のProプラン（月額$12〜）を検討してください。
Q. 外部ライブラリ（jQuery・GSAPなど）はどこで読み込めますか？
PenのSettings→JavaScriptまたはCSSでCDNのURLを追加します。依存関係のあるライブラリは上から順に並べてください。GSAP・Bootstrap・Tailwind CSSなど主要なフレームワークはほぼCDN配布されているため、Settingsから1行追加するだけで利用できます。
Q. SCSSやTypeScriptは使えますか？
使えます。Settings→HTML/CSS/JavaScriptで SCSS / PostCSS / Babel / TypeScript（トランスパイル）を選択すると、ブラウザ実行用に自動コンパイルされます。既存プロジェクトの構文をそのままPenに持ち込めるため、検証用途で便利です。
Q. 既存コードをそのまま貼っても動きません。なぜですか？
相対パスの画像・CSS・JSが参照できていない可能性があります。CDNに置き換えるか、URLを絶対パス（https://〜）にしてください。また、外部ライブラリの読み込み設定（Settings→JS/CSS）も忘れずに確認しましょう。
Q. ブログに動くデモを埋め込むには？
Penの「Embed」ボタンから生成コードをコピーして貼り付けます。デフォルトで開くタブ（HTML/CSS/JS/Result）やテーマ（ダーク/ライト）はオプションで指定できます。当サイトのUI/UXモーションデザインカテゴリの記事も、すべてCodePen埋め込みで動くデモを表示しています。
Q. チームレビューやバグ報告をスムーズにするコツは？
Pen上部の説明欄に「症状・期待動作・再現手順・環境」を簡潔に記載し、最小再現の状態でURLを共有するとレビューが速いです。Stack OverflowやGitHub Issuesでのバグ報告にも同じテンプレートで応用できます。
