ファンリピート社のブログFR note

フロントエンド開発の常識が一変する!?tldrawとは?

ファンリピートの森田です。

弊社ではローコードツールを使用したシステム開発を得意としております。

システム開発で用件定義や設計を行う際、Figmaなどでワイヤーフレームを作成し抽象的なイメージを具体化したり細かい要件なども確認しながら進めていくことが多いです。

一方でFigmaなどのデザインツールは慣れるまでに少し時間がかかったりなど非デザイナー・非エンジニアには少し扱いづらいものです。

皆さんも一度は頭の中のイメージをそのまますぐにデザイン化したいと考えたことがあるのではないでしょうか?

それを叶えてくれるのが今回紹介する「tldraw」と「draw-a-ui」を使用した「makereal.tldraw.com」というサイトです。

 
 

今回は実際にtldrawを使用したワイヤーフレームを作成します!

目次
「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある

tldrawとは?

https://github.com/tldraw/tldraw#readme

tldrawは手書きのスケッチやワイヤーフレームを簡単にHTMLコードに変換できるツールです。これにより、手書きのラフスケッチからワイヤーフレームやUIデザインを生成し、Webデザインのプロトタイピングを迅速に行うことが可能です。

また、tldrawはReactライブラリとしても機能し、無限のキャンバス体験を作成するのに適しています。

このツール自体にはデザインを自動生成してくれる機能がありません。

そこで登場するのがGPT-4-Vision APIを組み合わせてHTMLを生成できる「draw-a-ui」とローカル環境で動作できる様にホスティングされている「makereal.tldraw.com」というサイトです。
※tldraw自体は無料で使用できますが、OpenAIのGPT-4-Vision APIが必要で従量課金制です。

https://openai.com/pricing

早速makerealを使ってみよう!

まずはdraw-a-uiを設定します。

https://github.com/tldraw/make-real


①ソースコードをダウンロード

git clone https://github.com/SawyerHood/draw-a-ui

②ファイルへ移動

cd draw-a-ui

③GPT-4のAPIキーを設定

echo "OPENAI_API_KEY=自分のAPIキーを入力する" > .env.local

④draw-a-uiをインストール

npm install

⑤draw-a-uiをローカル環境で起動

npm run dev

⑥ローカルで立ち上げる

localhost:3000を開きます。

この画面が表示されれば成功です!!

早速使っていきましょう!

tidrawを使ってみよう!

初めは画像を貼り付けてどこまで再現してくれるか見てみましょう!


今回は弊社HPのスクリーンショットを貼り付けました。画像を選択後、MakeRealをクリックしてみると、、、

細かい文字やデザインが少し崩れている部分がありますが概ね思った通りのデザインをプレビューでき、コードとして吐き出してくれます。
CSSはTailwind CSSを使用している様でデザインに関してもある程度自動で装飾してくれます。

弊社が運営しているhttps://bolt-dev.net/も同じ様に貼り付けてみます。

こちらはあまりデザイン通りとはいきませんでした。

現状makerealでは画像やイラストなどは再現することができず、複雑なCSSに対応することも難しそうです。

今後の生成AIの進歩に期待ですね!!

ワイヤーフレームをmakerealで具体化する

今回はAmazonのようなECサイトを作成してみます!

やはり文章に少し違和感がありますが大まかなデザインは完成されています。

そしてスマホやタブレットなどのレスポンシブデザインにも対応しています!

ローコードツールを使用して業務を最適化しよう!

今回紹介したtldrawは生成AIの精度が上がったことでフロントエンドの自動生成が可能になりました!

今後も生成AIの発達により更なるUI、UXの向上や高度な機能の実装なども行えるようになると予想されます!

エンジニアだけでなく、非エンジニアの方も使いこなせると商談・打ち合わせなどの際に短時間でワイヤーフレームを作成し効率的に進められると思いますので今のうちからぜひ触って使いこなしましょう!

弊社では今回紹介したような生成AIを使用したクライアント支援を行なっております!

システムの開発だけでなく要件定義から運用まで統括的なコンサルティングも得意としておりますので是非お問い合わせください!

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

今後もこういったローコードツールを使用した開発について紹介をしていきます。

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を積極採用中です。

アイデアや意見を率直に言い合えるフラットな環境で、共に成長しませんか?

当社と共に、業界トップを目指して挑戦したい方は、ぜひエントリーをお待ちしています。

「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる