ブラウザー上でいきなり使える!Pingendoでプロトタイピングの常識が変わる

2016/10/05

Alex Walker

102

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

プロトタイピングツールが花盛り。アプリをインストールしなくてもブラウザー上ですぐに使えるツール「Pingendo」がおもしろそうです。

知ってのとおりプロトタイピングはとても有効な手法ですが、一歩間違えると多くの時間を取れらてしまいます。プロトタイピングのアプローチには、大きく2つあります。

1. Invision/MarvelApp/Adobe XDなどのツールを使う

これらのビジュアルプロトタイピングツールは、最低限の手間で安定したプロトタイプを作成できる、素晴らしいツールです。外部からレイアウトをインポートして、画面遷移や挙動をUIコンポーネントに追加していきます。

しかし、もし少しでも標準と異なるUIをつくろうとすると、できることは限られてきます。

2. HTMLでプロトタイプを作る

このアプローチは柔軟性があり、完全に思いどおりのデザインが可能です。しかし時間がかかる上に、普段使わないようなデザインやコーディングのスキルが必要になってきます。

両者の良いとこ取りをしたいですね。そこで、最近、Pingendoというアプリケーションを使っています。

Pingendoとは?

Pingendoは無料のプロトタイピングツールです。デスクトップバージョン(MacOS、Windows、Linux)もありますが、Google Chromeで使えるブラウザーバージョンがとても使いやすいです。

テンプレートから選ぶか、完全に新規から始められます。

Pingendo : Pick a template

大きめのUIパーツは、画面左側のSECTIONSパネルにあります。

Themed UI elements

SECTIONSパネルには、以下のようなトップページに載せる要素が含まれています。

  • トップバナー
  • フッター
  • 3カラムレイアウト
  • 画像ギャラリー

Pingendoのメリットとして、プレースホルダーの画像がテーマ(食、テクノロジー、人びとなど)ごとに用意されており、適切なテーマを選ぶことによって、より完成イメージに近づけられる点があります。パネル内の上部にあるアイコンを選択するとテーマを変更できます。

COMPONENTSパネルには、見出しやテキストフィールド、地図、ボタン、リストなどの小さいUIコンポーネントが含まれています。

サイト上部にあるトップメニューには、基本的な書式ツールがあり、斜体や太さ、リンクの設定などを追加できます。またメディアクエリーを変更でき、それぞれのViewportでのプロトタイプの見え方を確認できます。

右側には、左側のパネルから追加したUIコンポーネントの設定を変更できるパネルがあります。

PAGEパネルは、タイトル、キーカラー、フォントなどプロジェクト全体の設定を変更できます。

SELECTIONパネルは、メインウィンドウで選択されたUI要素の設定を変更できます。背景色、揃え、マージン、パディングを設定できます。

ほとんどのUI要素は、最初からほど良い設定になっていますが、ほぼすべての項目を変更できます。

Bootstrap 4がベースになっている

PingendoのコンポーネントはすべてBootstrap 4で提供されているコンポーネントです。最終的なプロトタイプはどのような端末のWebブラウザーでも動作します。サイト下部にあるHTMLタブをクリックして、マークアップを見てみてください。隣にある「SASS」タブでは、プロジェクトの書体や色、サイズなどを設定してるSassの変数を調整できます。

この両方のパネル内は、いつでも好きなときに自由に編集できます。SELECTIONパネルでは、すべての要素にクラスやIDを追加できるので、標準的なBootstrap 4のUIクラスを使えます。

最後に

Pingendoのメリットは、自由にプロトタイプをカスタマイズできることです。決してインタラクションが固定されたメニューを配置することはありません。プロダクションのサイトでBootstrapは使いませんが、プロトタイプがBootstrapの基準をクリアする必要はありません。Bootstrapがよく考えられていて、モダンで安定していることは言うまでもありません。

しかし、もしプロトタイプの動き、アニメーション、反応を変えたりしたいのであれば変更もできます。コーディングすれば、プロトタイプの動き、アニメーション、反応が変わったプロトタイプをつくれます。大きなカスタマイズも、詳細のつくりこみも自在にできます。

完成版のサイトをつくるためにPingendoを使えるか?

もちろん、Pingendoを使って完全版も作れます。いくつかの点で機能的な制約があるかもしれもせんが、もしBootstrap 4をWebサイトのベースとして採用するなら、Pingendoで固定レイアウトベースを用意できます。

今後もPingendoが無料のままかは分かりませんが、無料のうちにチェックする価値はあります。

きっと気に入るでしょう。

(原文:The Great Prototyping Debate: Software vs Hand-coding

[翻訳:萩原伸悟/編集:Livit

Copyright © 2016, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitepointのデザインとUXエディターも担当しています。

Loading...