image

https://pingendo.com/

  • 動作環境
    • Windows(筆者環境), MacOS, Linux

社内でアプリ開発がありプロトタイプ作成のため色々ツールを探していたのですが、同僚が教えてくれたBootstrap 4 ベースのPingendoが良かったので紹介します。Pingendoのオススメポイントは主に以下の3つです!

  • ドラッグ & ドロップでUIパーツを配置
  • Bootstrap 4 ベースの豊富なUIパーツ
  • アプリ内での高いカスタマイズ性

以下詳細を見ていきましょう。

ドラッグ&ドロップでUIパーツを配置

Pingendoの画面構成は以下のとおり。

image

画面左にUIパーツ、中央にプレビュー、画面下にコード(デフォルトでは最小化)、画面右はテーマという配置です。レイアウトは洗練されているので使う時は迷うことないかと思います。

私が感動したのは左のメニューからコンポーネントを配置する際の手軽さです。動画で見ればすぐ解るかと思います。

pingendo-dandd.gif

こういった具合にポンポンと好きなコンポーネントを配置できます。何より素晴らしいのはメニューを表示すると縮小化されたサンプルが一覧で見れる点です。

Bootstrap 4 ベースの豊富なUIパーツ

Pingendoには Bootstrap 4 のCSSクラスを使ったコンポーネントが豊富に用意されています。

pingendo-parts.gif

大まかに以下のカテゴリに分けられています。

  • SECTIONS セクション
  • GRID グリッド
  • TEXT テキスト
  • BUTTONS ボタン
  • NAVS ナビゲーション
  • MEDIA メディア
  • LISTS リスト
  • CARDS カード
  • FORMS フォーム
  • OTHERS その他

SECTIONS をはじめ、それぞれ Bootstrap のパーツを組み合わせて既に利用しやすいテンプレートに仕立て上げられているので、組み合わせるだけでランディングページなどは爆速で作ることができます。

アプリ内での高いカスタマイズ性

用意されたコンポーネントも豊富なのですが、Pingendo はコンポーネントを画面に配置したタイミングでHTMLも同時に生成してくれます。

pingendo-html.gif

もちろんここからHTMLを直接編集してカスタマイズすることも可能です。

そして Bootstrap を利用していてよく言われる「Bootstrap臭さ」ですが、これは画面右端の THEME を編集することでスタイルをオリジナルのものに修正することもできます。下記の動画でボタンのスタイルがリアルタイムで変更されるのが確認できます。

pingendo-theme.gif

Pingendo 無料版の制限

便利で素晴らしいPingendoですが、無料版と有料版があり、無料版では以下の制約が存在します。

  • 非商用のみの利用に限る
  • オフラインでの利用不可、常時オンライン接続が必要
  • Pingendoアプリ内でのロゴの表示

プロユースで困るのは非商用のみの制限くらいでしょうか。実質的な機能制限はほぼゼロなので、とりあえず使ってみて気に入ったら買ってみるのも手です。有料版は買い切り1ライセンス$99。

https://pingendo.com/

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.