Onlookを触ってみた

どうも、あべたく（@east-takumi）です。

概要

今日はOnlookという「デザイナーのためのCursor」と言われているツールを使ってみたブログを書いていきます。

https://onlook.com/ja/

Onlookとは？

OnlookはFigmaのような直感的なインターフェースでデザインを編集しつつ、それをReactベースのコードにリアルタイムで反映してくれる、オープンソースのフロントエンド開発ツールです。

「デザイナーのためのCursor」とあるようにAIチャットに自然言語で指示し、その内容をプロジェクトに反映をしてくれます。
ただ、プランによってAIチャットの利用回数は制限されているので、その点注意してください。

そして、こちらまだBeta版リリースとあるようにまだまだ開発中のツールで、いくつかの機能は開発中のままとなっていたりします👀

使ってみる

起動し、とりあえず空白ページを作ってみるとこんな感じ👀

ページ内のデザイン操作やサイドバーメニューはぱっとみFigmaですね👀
AIチャットもこちらにありますが、VsCode味も感じつつ、画像の管理の部分などはCanvaっぽい感じもあり、本当にいいとこ取りしたUIの印象です。
個人的に最初からデスクトップとモバイルを同時に確認できるようになってるの嬉しい！（それぞれサイズ、機種タイプも変更できます）

サイドバーメニューの一部紹介

レイヤー

ウインドウやパーツブロックもこんな感じでパッと見れるのはめちゃいいな。。。

ブランド

個人的に驚いているところです。
サイト全体のフォントやブランドカラー管理を行える場所なんですが、個人的に過去にフォントの対応めちゃ大変だったな。。。（一つ一つのファイルを見に行って確認したな。。。）という記憶があり、パッと変更できたら嬉しいな！っと思ったりしました👀（そういう機能なのかは未調査なので私の願望）

AIチャット

AIチャットから「こんな感じで！」とお願いするとある程度のものを作ってくれる👀
もちろんまだまだなところもあるが、これはすごいな。。。
ただ、注意したいのはこれはデザインを作っているといより、Reactのコードを書いてるの方が合ってるらしい👀

前述にもあるようにReactベースでプロジェクトを作っているので、そちらを確認してみる👀(Onlook側に「Cursorで開く」のボタンがあります)
後述の写真からもわかるように、Next.jsのプロジェクトを作成していた👀

cursorで見たプロジェクト

実際にOnlook側からデザインを変更してみると、Next.jsプロジェクトの方にも反映されてました。
うん、普通にすごいな👀

そして、もう一つ驚いたのが、現状のプロジェクトをそのまま公開できる。
Base Domainはユーザーごとにランダムで生成されてるっぽいのと、カスタムドメインも当てれるようです。
（公開を取り消すときはSettingからしないといけないのが最初むずかった💦）

気になったこと

• セキュリティ面
  • Next.jsのプロジェクト作成からlocalhostでの起動、ドメインを当てての公開などかなり大きい権限が使われてそうで、ちゃんと調査したい
  • Next.jsをlocalhostで起動してるけど、Node.jsのバージョンどこから参照してるんだろう...（私はasdfで基本管理してるはずなのに起動したということは?）
• 絶妙に手が届かないところ
  • プロジェクトの作成などかなりOnlook側で設定されSettingなどを深く見ないと、あれ、、、となることがたまにあるかも
    • ここら辺はGAされるタイミングや今後のアプデに期待したい！

まとめ

今回はOnlookを試してみたということでまとめてみました。
ついに、デザインベースでコーディング、公開までできるのか〜（すごい）と言葉を失ってますw
ただ、注意したいのはこれは「Reactのコードを操作してる」という点で、既存のデザインツールとは少し違うという認識は持っておいた方が良いかも👀（なので原則はエンジニア向けツールになるかな。。。と思ってます）
ですがもっと洗練されてくればより手軽に扱える気がしてて、これからのアプデが楽しみです！
気になる方はよかったら試して見て下さい〜