前書き
Xを眺めていたら、Onlookというツールの情報が流れてきました。ちょっと気になったので使ってみました。感想をまとめます。
Onlook は、Figma と同じように使いやすいインターフェースを使用してフロントエンド コードを設計できるブラウザベースの製品スタジオです。アクセスできる任意の React コードベースへの変更を編集して共有できます。 --公式説明
コスト面
まずは一番大事な料金ですね。公式サイトを見ると、下記のように記載されています。
今、無料らしきことが書かれていますが、無料だからこそ逆に少し恐怖を感じるのは私だけではないと思います。
実は完全無料ではないです。
無料プランの場合、1日10回、月50回の制限があります。有料プランでは月20ドルの支払いが必要ですが、まあ、妥当な値段だと思います。特別高いわけではありません。
使用感
新規プロジェクトと既存プロジェクトの両方に対応しています。
新規の場合、作りたいプロジェクトの説明プロンプトを入力すると、そのまま作成してくれます。ただし、作成されるOnlookのフォルダは以下の場所になります。今後のアップデートで、好きな場所を選べるようにしてほしいです。
先にNext.jsプロジェクトを初期化してから導入することもできるので、不便を感じることはありません。
プロンプトを使って新しい画面やコンポーネントを作れるのはもちろん、細かいデザインの修正も画面上で直接行えます。さらに、その修正がコードにしっかり反映されるのは非常に便利です。
いちいちコードを修正してから画面で確認する手間が省けるので、作業効率が大幅に向上します。
セキュリティ
Onlookは、ゼロからフォルダを作成したり、ファイルを削除したりする権限を求めてきました。しかし、そのくらいの権限がないと逆に何もできないため、妥当だと思います。
互換性
Onlookはコーディング用のエディターではなく、デザイン寄りのツールです。
むしろ、見た目以外の修正をしっかり行いたいのであれば、既存のエディターやCursorのようなコーディングエージェントを搭載したエディターを利用した方がよいでしょう。
その意味では、うまく棲み分けができていると思います。
サポート体制
Discordのチャンネルでコミニュケーションを取るか。
直接作者に連絡することもできるらしいですが、空き枠がたくさんあるのを見て、本当に機能するのかちょっと不安になります。
Xのアカウントもあります。投稿内容を見ると、日本市場を意識してるっぽいですね。
感想
ローカルで使用できるFigmaであり、変更がコードベースに反映できるため、見た目に関する修正は非常に簡単に行えます。私のようにデザインが苦手な人にとっては、まさに救いの手と言えるでしょう。
ただし、これは一般的なエディターではなく、デザイナーや、デザインもコーディングも行うエンジニア向けのツールです。既存のエディターと組み合わせて使えば、これまで以上のパフォーマンスを発揮できるのは間違いありません。
デザイン機能だけを見ると、まだFigmaの方が優れています。しかし、デザイナー以外のユーザーにとっては、サブスクを乗り換えても十分に選択肢となるツールだと思います。