よく使うツールを1つの画面にまとめた話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
ツール工房でいくつかツールを作っているうちに、少し困ったことが出てきました。
ホテル検索、スマホ料金比較、○×トラッカー、楽天最安値検索など、ツール自体は増えてきたのですが、毎回それぞれのURLを開くのが少し面倒だったのです。
ブックマークを探したり、ブラウザのタブがどんどん増えたりして、せっかく作ったのに使うまでの手間が気になるようになりました。
そこで、
「スマホのホーム画面みたいに、自分がよく使うツールを1つの画面にまとめられないかな」
と思って作ったのが、今回の日常ツールポータルです。
2026年8月の追記：この記事で書いている「ツールを枠の中に表示する」やり方は、いまはもう使っていません。2026年5月末に、枠の中で使ったツールの保存内容がiPhoneで消えてしまう、という問題が分かったためです（詳しくは本文の追記に書きました）。いまは各ツールを別のタブで開く形に統一しています。その後に作り直した一覧の話は全ツールを1画面に並べたランチャーの話にあります。以下は、最初の仕組みを試していた当時の記録です。
作りたかったもの
作りたかったのは、とてもシンプルです。
1つのページを開けば、そこから自分のツールをすぐ切り替えられる画面。
できたのは、スマホのホーム画面のようにアイコンを並べた一覧です（スマホでは4列、画面が広いときはもう少し多めに並びます）。アイコンを押すと、そのツールの画面に切り替わる、という形にしました。
自分の中では、
- スマホのホーム画面
- ChatGPTの左メニュー
- よく使うアプリのランチャー
のようなものを作りたい、という感覚でした。
「別のページを画面の中に表示する」仕組みを使った
ここで使ったのが、1つのページの中に別のページをまるごと表示できる仕組みです。
正直、最初からこの仕組みのことをよく分かっていたわけではありません。「こういう画面にしたい」と Claude Code に相談していく中で、「別のページを、今見ているページの中に枠として表示する方法がありますよ」と教えてもらった、というのが実態です。
たとえば、ホテル検索ツールはホテル検索ツールとして、別のURLで動いています。それを日常ツールポータルの中に枠として表示しておけば、ポータル画面からそのままホテル検索を使えます。
同じように、スマホ料金比較や○×トラッカーも、ポータルの中に表示できる。これなら、ツールごとに別のタブを開かなくても、1つの画面の中で切り替えられます。
便利だったところ
この仕組みを使って便利だったのは、すでに作ったツールをそのまま使えたことです。
ポータル用に、ホテル検索ツールや○×トラッカーを作り直す必要はありませんでした。それぞれのツールは今まで通り別々に動かしておいて、ポータル側ではそれを表示するだけ。
また、作った当初は ツールを切り替えても入力した内容が残るように見えていて、そこも便利だと思っていました。
……のですが、ここは後日ひっくり返りました。2026年5月末に、昼にTODOへ2件書いておいたのに、帰宅して開いたら0件になっている、ということがiPhoneで起きたのです。調べてもらうと、枠の中に別のURLのページを表示している場合、iPhoneのブラウザはその保存内容を「一時的なもの」として扱って、しばらく経つと消してしまうことがある、という話でした。便利どころか、安心して使えないという結論になり、これが後で作り方を変える決め手になりました。
一番苦労したのは画面の高さの調整
作る前は、別ページを枠として埋め込むだけだから簡単だろう、と思っていました。
でも実際にやってみると、画面の高さの調整でかなり詰まりました。中に表示しているツールと、外側のポータル画面が別々に動いているため、自分がいまどちらを動かしているのか分からなくなることがありました。
一番困ったのは、スマホで文字入力のキーボードを出したときです。キーボードのぶんだけ外側の画面が縮むと、中の枠まで一緒に小さくなって、上のほうがつぶれ、入力欄だけが見えている状態になってしまいました。最後は、外側では高さをいじらず、中のツール側に任せる形にして落ち着きました。
Claude Code にエラーや画面の状態を説明しながら、何度も調整してもらいました。
「画面いっぱいに表示したい」 「でも下が切れないようにしたい」 「スクロールが二重にならないようにしたい」
というように、やりたいことを日本語で伝えて、少しずつ直していった感じです。
※ このやり方は、どのページに対しても使えるわけではありません。自分が管理しているページだけで試すのが安心です。他人のサイトを勝手に自分の画面の中に表示するのは避けるべきですし、個人情報や非公開のデータを扱う画面も、この形には向きません。
スマホでは少し割り切りも必要だった
スマホで使うと、パソコンとはまた違う問題が出ました。
指で画面をスワイプしたときに、ポータル全体が動くのか、中に表示しているツールが動くのか、少し分かりにくい場面がありました。
ここも何度か調整しましたが、完全に理想どおりにするのは難しそうでした。最終的には、
「毎日使ううえで大きなストレスがなければOK」
というところで、まずは自分用として使い始めることにしました。完璧に作ろうとすると、いつまでも始められません。自分用のツールなので、まずは使える形にすることを優先しました。
作ってみてよかったこと
完成してみると、思った以上によく使うようになりました。
1つの画面を開けば、自分のツールが全部並んでいる。それだけなのですが、使い勝手はかなり変わりました。
ホテル検索を開く。○×トラッカーを見る。楽天最安値検索を使う。スマホ料金比較を確認する。──こういう切り替えが、かなり楽になりました。
ツールは作るだけではなく、実際に自分が使いやすい場所に置くことも大事だと感じました。
プログラミングが分からなくても、形にはできた
今回も、細かいコードの意味を全部理解して作ったわけではありません。聞いたことのない言葉もたくさん出てきました。
ただ、
「こういう画面にしたい」 「ここが使いにくい」 「スマホだとこう動いてしまう」
ということを Claude Code に伝えることで、少しずつ形にしていけました。
プログラミングが分からなくても、自分が何に困っているか、どう使いたいかを言葉にできれば、AIと一緒にかなり進められるのだと思います。
今回の日常ツールポータルは、自分で作ったツールをちゃんと使い続けるための、かなり大事な入口になりました。中身の作り方はその後すっかり変わりましたが、「入口をひとつにまとめる」という考え方自体は、いまも続いています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ