iOSエンジニアリング

Layerz紹介、コードなしで実際に動くiOSアプリを描くデザインツール

プロトタイピングツールで作った画面は、もっともらしく「見えるだけ」です。ボタンを押しても、あらかじめつないだ画面に遷移するだけで、データが実際に保存されたり、サーバーと通信したりすることはありません。アイデアを検証するには、結局誰かがコードを書く必要がありました。

読了 5 分
Layerz紹介、コードなしで実際に動くiOSアプリを描くデザインツールのカバー画像

プロトタイピングツールで作った画面は、もっともらしく「見えるだけ」です。ボタンを押しても、あらかじめつないだ画面に遷移するだけで、データが実際に保存されたり、サーバーと通信したりすることはありません。アイデアを検証するには、結局誰かがコードを書く必要がありました。

Layerzは、この隔たりを埋めるツールです。一言でいえば、コードなしでデザイン・データ・動作・API連携まで定義し、その場で実際に実行できるiOSアプリのデザインツールです。Layerz Corp.が開発し、iPhone・iPad・Mac向けアプリとして無料で配布されています。

要点をまとめます。

  1. ネイティブiOSコンポーネント(スタック・リスト・タブ、Auto Layout)をキャンバスに配置して画面を作る
  2. データスキーマを直接定義してUIにバインドする。データが変わると画面も自動的に更新される
  3. Action Flowで「ボタンを押す → 条件を確認 → 画面遷移/データ変更」をノードでつなぐ
  4. OpenAPI(Swagger)仕様を読み込み、実際のAPIを呼び出す。モックではなく本物の通信だ
  5. ビルドなしでiPhone・iPad・Mac上ですぐに実行してみる

画面を描く、モックではなく構造として

Layerzのデザインエディタは、自由形状のドローイングツールとは発想が異なります。四角形を描いてボタンらしく見せるのではなく、最初からiOSの実際のレイアウト部品――スタック、リスト、タブバーコンテナ――を組み立てます。Auto Layoutベースなので、デバイスのサイズが変わっても画面が追従して伸縮します。

色とタイポグラフィはデザインシステムのトークンで管理し、ライト/ダークテーマの切り替えにも対応します。よく使う組み合わせはカスタムコンポーネントにまとめて再利用できます。開発者の視点では、SwiftUIの考え方(コンポーネントの組み合わせ、データバインディング、トークン化されたスタイル)をビジュアルエディタに移したものに近いでしょう。

データと動作、ここからが本当の差別化

プロトタイピングツールと分かれるポイントはデータです。Layerz内でデータスキーマを直接定義できます。フィールド型、列挙型(enum)、日付まで指定し、リストやテキストなどのUIコンポーネントにバインドします。条件でフィルタリング・ソートしたリストを作成でき、データはディスクに保存されるため、アプリを再起動しても維持されます。

動作はAction Flowというノードキャンバスで定義します。「ボタンタップ → 入力値の確認 → 条件分岐 → データ追加 → 別画面へ遷移」といったフローを、コードではなくノードの接続で作れます。アラート、入力プロンプト、共有シート、サウンド、ハプティクスなど、iOS標準の動作もノードとして用意されています。

LayerzのDesign Data Action Flow API統合が即時実行アプリにつながる構造図
四つの軸が一つの実行可能なアプリに集約される構造です

API連携までノーコードで

最も意欲的な部分はAPI連携です。OpenAPI/Swagger仕様を読み込むとエンドポイント定義がそのまま入り、認証やリトライ、状態ごとのレスポンス処理まで設定できます。サーバーレスポンス(JSON)をアプリのデータモデルに変換するマッピングは、Data Transformerというビジュアルなノードキャンバスで処理します。

そのため、「実際のサーバーから商品一覧を取得してリストに表示し、タップすると詳細へ遷移するアプリ」をコードなしで作り、その場で実行できます。プレビューはビルドなしですぐに表示され、iPhone・iPad・Macのどれでも同じプロジェクトを開いて作業できます。

誰に役立つのか

公式サイトが掲げる対象は四つです。

  • メイカー:コードを書けない人がアイデアを動く形にするとき
  • プロダクトマネージャー:企画書ではなく、実際に触れるプロトタイプでアイデアを検証するとき
  • デザイナー:「見えるだけ」の案を「実データで動く」案へ引き上げるとき
  • 開発者:本実装の前に画面構造・データモデル・動作仕様を素早く確定するとき

特に開発者にとっては、仕様化ツールとして役立ちそうです。画面・データ・フローがすべて構造化されているため、企画段階の曖昧さをコードを書く前に取り除く用途に向いています。

UI・データ・フロー・APIブロックを組み立ててiOSアプリを作るノーコード概念イラスト
コードではなくブロックを組み立てることがLayerzの核となるアイデアです

限界とともに見る位置づけ

もちろん、ノーコードツールに共通する問いはLayerzにも当てはまります。複雑なビジネスロジック、カスタムアニメーション、サードパーティSDK連携など、ツールが提供するノードの外にある作業は、結局コードの領域です。Layerzの位置づけは「アプリ開発を置き換える」というより、「動くプロトタイプと仕様を作る段階を極端に前倒しする」ものだと考えるのが正確でしょう。

iOSエコシステム専用(iPhone・iPad・Mac)である点は、特徴であると同時に制約でもあります。逆にいえば、ネイティブiOSコンポーネントとAuto Layoutをそのまま使うため、成果物がiOSアプリらしく仕上がるということでもあります。

アイデアはあるのにコードが足かせになっていたなら、あるいはチームの企画検証サイクルを短縮したいなら、試す価値のあるツールです。App StoreとMac App Storeから無料で入手できます。