はじめてガイド
まずはふたみの基本をサクッと押さえましょう。2画面ブラウザならではの「同時観測」が、あなたの調査や比較、学習を一気に楽にしてくれます。
👣 最初の一歩
左右のアドレスバーにURLを入力して Enter を押すだけで、それぞれのビューが目的地へ出発します。
📌 URLリストパネル
よく見るページをテキストでストックしておくと、一度に複数ページを読み込むときに大活躍。クリックで左側に読み込まれます。
🧭 ナビゲーションボタン
戻る／進む／リロードボタンを使って片側だけ操作できるので、片方で資料を固定しながら、もう片方で探検できます。
⌨ キーボード派はここに注目
アドレスバー選択 → URL ペースト → Enter で最速起動。
🪟 ウィンドウ調整のコツ
比較ボタンを押す前に、表示したい場所へスクロールしておくとスムーズです。
🎯 目的別テンプレ
テーマごとにURLリストを作っておくと切り替えがラクになります。
2画面サーフ術
ふたみ の真骨頂は、視線を左右に泳がせながら情報をキャッチできるところ。見やすさと効率を最大化するテクニックをご紹介します。
📏 幅インジケーター
ツールバーに表示される「幅: ○px」を見れば、デザイン確認時にレスポンシブのブレイクポイントを簡単にチェックできます。
🔄 スクロール連動
「スクロール連動」を ON にしておけば、左右のページを同じ位置で追いかけられるので、文章比較や翻訳チェックに便利です。
🌟 ひと工夫アイデア: 左右で同じ記事を開いて片方を原文、片方を翻訳ツールにしておくと、意味の違いを即座に確認できます。
🖱 スクロール同期の極意
任意のタイミングで「🔄」ボタンを押すと、その瞬間の位置にピタッと合わせられます。
👓 ズームとの相性
ブラウザのズームを片側だけ変えると、「スマホ表示 × PC表示」の同時チェックが可能！
比較＆検証ツール
ふたみ には「違いを見抜く」ための専用ツールが詰まっています。品質チェックやレビューにフル活用しましょう。
📸 スクリーンショット比較
比較ボタンを押すと両ビューのスクリーンショットを撮って差分を確認できます。UI改修やバグチェックの「証拠写真」にも最適。
🔍 HTML 比較
HTMLコードを突き合わせて差分を可視化。テンプレートの差異やCMS更新結果をサクっと確認できます。
🔗 リンク抽出
各ビューの🔗ボタンで、そのページにある全リンクを一覧化。クローリングや内部リンク調査の起点に活用できます。
🗂 比較ログを残す
キャプチャした差分を保存しておくと、リリースノートやQA報告に活かせます。
🧪 実験ノートとして
デザイン案を左右に並べ、スクリーンショット比較で「どこを変えたか」を記録するとチーム共有がスムーズです。
WEB製作者プロ活用術
開発環境と本番環境の比較チェックがふたみなら一瞬で完了。リリース前の最終確認やデバッグ作業が驚くほど効率化されます。
🔄 環境間の完全比較
左に開発環境、右に本番環境を開けば、同じページを同時に表示。レイアウト崩れやスタイルの差異を視覚的に一発チェックできます。
📸 ピクセル単位の検証
スクリーンショット比較機能で開発環境と本番環境の差分を自動検出。見落としゼロを実現します。
🔍 HTML/CSSコード比較
HTML比較機能で、テンプレートやCMSの出力内容が環境間で一致しているか確認。ドメイン部分は自動で正規化されます。
📋 URLリストで一括テスト
チェックしたいページパスをリストに登録すれば、クリック一つで次々とページ遷移。全ページを短時間で検証できます。
🔐 認証付き環境も楽々
Basic認証やダイジェスト認証で保護された開発環境も、一度ログインすれば自動保存。毎回パスワード入力する手間がなくなります。
💡 実務での活用例: リリース前のチェックリストとしてURLリストを作成し、ブックマーク保存しておけば、リリースのたびに同じ手順で確実に検証できます。
🚀 リリース直前チェック
本番デプロイ後、即座に開発環境と本番環境を並べて表示。想定通りに反映されているか確認。
🐛 バグ原因の特定
「本番だけおかしい」という問題が発生したら、開発環境と比較しながらDevToolsで調査。
📱 レスポンシブ確認
左右で異なるブレイクポイントを表示すれば、モバイル版とPC版の同時チェックが可能。
🎨 デザイン調整の即確認
CSSを微調整したら、すぐに開発環境をリロードして本番と比較。
🔗 リンク切れチェック
リンク抽出機能で各ページの内部リンクを一覧化。404エラーやリダイレクトミスを効率的に発見。
⚡ ステージング環境との3環境比較
ブックマークを「開発 vs ステージング」「ステージング vs 本番」で保存。
💼 チーム活用のヒント
共通チェックリスト
URLリストをチーム内で共有すれば、誰が検証しても同じ基準でチェックできます。
スクリーンショット証跡
比較結果のスクリーンショットを保存してSlackやJiraに添付すれば、「確認しました」の証拠として残せます。
QAレビュー時間短縮
手動で1ページずつ確認していた作業が、ふたみなら数分で完了。余った時間を機能開発に回せます。
認証とセキュリティ
ふたみ はベーシック認証・ダイジェスト認証にも対応。安全にログイン情報を扱いながら、ストレスなく作業する方法を押さえておきましょう。
🔐 認証ダイアログ
認証が必要なページにアクセスすると、専用ダイアログがポップアップ。ユーザー名とパスワードを入力して即ログインできます。
💾 情報を記憶
「この認証情報を保存する」にチェックを入れると暗号化して保存。次回からはノーモーションでログインできます。
⚙ 認証情報マネージャー
⚙ ボタンで一覧を開き、不要になった情報を個別削除・一括削除。パスワード表示で最終チェックも可能です。
🛡 セキュア運用のヒント: 定期的に認証情報マネージャーを見直して、使わなくなったアカウントを整理しましょう。
ブックマーク＆URLリスト管理
繰り返し開くページは ふたみ に覚えてもらいましょう。シナリオごとに整理しておけば、作業準備が数秒で完了します。
💾 ブックマーク保存
「💾」ボタンで現在の左右ビューとURLリストをまとめて保存できます。次回は一覧から一瞬で復元！
📚 ブックマーク管理
「📚」ボタンで管理画面を開き、名前変更や削除が可能。シーン別にフォルダ代わりに使うのもおすすめです。
🧾 URLリストの使い方
URLを改行区切りで貼り付ければ、クリックだけで左ビューへロード。上から順に巡回するワークフローにもマッチします。
🪄 スタートアップ設定
よく使うブックマークを起動時に自動読み込みさせれば、朝イチでいきなりダッシュ！
🧭 整理のコツ
ブックマーク名に「[QA]」「[営業]」などプレフィックスを付けると、検索もしやすくなります。
トラブル対処・小ワザ
困ったときのチェックポイントと、知っておくと差が付く小ワザをまとめました。ふたみライフの安心サポーターです。
🧹 表示が崩れたら
リロードまたは Ctrl/Cmd+Shift+R でキャッシュリフレッシュ。片側だけ読み込み直すのもOKです。
🕒 セッション切れ対策
認証系ページは一定時間でログアウトされることがあります。URLリストにログインページを入れておくと即復帰できます。
🪤 エラー調査
main.js のコメントを外して DevTools を開けば、左右それぞれのコンソールで原因を追えます。
🧑🤝🧑 画面共有の味方
オンラインミーティングで ふたみ を映すと、比較結果をその場で説明しやすくなります。
📦 バックアップ習慣
credentials.json や設定ファイルはユーザーデータフォルダに保存されています。
🎉 モチベーションUP
1日の終わりに「今日のベスト比較」をスクショ保存しておくと、成果が可視化されてやる気アップに繋がります！