できること
CodePenの「ペン」をPublicにするとURLを知っている人がアカウントなしで即座に表示を確認できます。CSSアニメーションやJavaScriptの動作確認をスマートフォンで行う際も、URLを開くだけでよいため相手の操作が簡単です。
レビュー前にPCとモバイルの両方で自分のペンを開き、フォントのレンダリング・ボタンのタップ領域・スクロール動作に問題がないかを確認しておきましょう。CodePenのデバッグモードを使えばCodePen固有のUIなしに表示を確認できるため、実際の完成イメージに近い状態でレビュアーに見せられます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
できないこと
CodePenのPublicペンは全世界に公開されており、検索エンジンのインデックスにも載ります。未発表のデザインやNDA対象のコンテンツをCodePenで公開すると、意図せず情報が流出するリスクがあります。Privateペンは有料プランでのみ利用可能です。
有効期限の設定機能がないため、レビュー完了後もURLは生き続けます。また、CodePenには閲覧者を特定のメールアドレスやドメインに限定する認証機能がなく、URLを転送されると誰でも開ける状態が続きます。
認証と期限の違い
認証付きHTML共有サービスでは無料・有料を問わずパスワード設定が可能なケースが多く、URLと合わせてパスワードを別ルートで伝えることで第三者の閲覧を防げます。メール認証ではさらに厳密に閲覧者を特定できるため、複数の取引先に別々の条件でアクセスを許可することも可能です。
期限設定を活用すると、例えば「金曜日の17時まで有効なURL」という形でレビュー締め切りと同時にURLを自動失効させられます。この機能はCodePenには存在せず、同等の管理をするには都度手動でペンの設定を変える必要があります。
- 誰でも見てよい: URL共有のみでもよいが、検索除外は確認する
- 特定の相手だけ: パスワードまたはメール認証を使う
- 会社内だけ: 会社ドメイン認証を検討する
- 短期レビュー: 期限を設定して古いURLを残さない
差し替え・レビュー運用
CodePenで修正を行うと即座に公開内容が更新されます。これはリアルタイムコラボレーションとしては便利ですが、レビュー中に「さっきまで見えていたものが変わった」という混乱をレビュアーに与える可能性があります。レビュー依頼と同時に「修正はフィードバック後に行います」と明示することが重要です。
認証付き共有サービスは差し替えのタイミングを送り手が完全にコントロールでき、「v2更新しました」と通知した後に初めてレビュアーの画面に新バージョンが反映されます。レビュー依頼文には確認観点を3点以内に絞り、期限と連絡先を明記する形式にすると返答の精度が上がります。
- 確認してほしい観点を3つ以内に絞る
- 期限と返信先を明記する
- 修正後も同じURLで見られるか伝える
- 最終版と途中版が混ざらないようタイトルを付ける
向いているケース早見表
CodePenが最も輝くのは、技術ブログに埋め込むデモ・勉強会の発表資料・CSSテクニックのオープンソース公開など、広く見てもらうことが目的のケースです。閲覧者を絞る必要がなく、コードそのものを参考にしてもらいたい場面に適しています。
対して社外クライアントへのLP提案・コンペ参加作品の事前確認・限定公開のキャンペーンページレビューでは認証付き共有サービスを選ぶべきです。CodePenでの作業を維持しながら、HTMLをエクスポートして認証付きサービスにアップロードする運用にするのがコストの低い移行方法です。
よくある質問
CodePenの有料プランPrivateペンは社外レビューに使えますか？
Privateペンは検索非表示になりますが、URLを知っている人は誰でもアクセスできます。メール認証やパスワード保護はないため、機密性の高いレビューには認証付きサービスを使う方が安全です。
CodePenのペンをHTMLとして書き出す方法はありますか？
CodePenの「Export」機能からzipファイルとしてHTMLを書き出せます。書き出したzipを認証付き共有サービスにアップロードすれば、CodePenでの開発成果をセキュアに共有できます。
CodePenと認証付き共有サービスで、レビュアーの操作負担はどちらが大きいですか？
CodePenはURLを開くだけで表示できます。認証付きサービスはパスワード入力やメール認証の手順が1ステップ加わりますが、機密情報を扱う場合はその手間をレビュアーに説明して理解を得ることが大切です。