somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【ツール】ワイヤーフレームワーク作成サイト

Webサイトのレイアウトを作成できるサイトが、以下のサイトで紹介されていたので使ってみました。

この中で一番気になったのが、iPlotzです。

iPlotz最大の特徴

気になった点とは、ワイヤーフレームワークをhtmlソース(CSS,Javascript,画像込み)で出力してくれる点です。実際に使えるコードを出力してくれるのはすばらしいです。

利用方法

  1. アカウントを登録する
  2. 登録したアカウントでログインする。
  3. 左にあるStart HereのCreate a new Projectを押下する
  4. プロジェクトの情報を入力し、saveボタンを押下する(※無料のまま使う場合、作成できるプロジェクト数は1つです)
  5. 真ん中にプロジェクトが作成されるので、そのプロジェクト名を押下する
  6. メニューからWireframeを押下する(※Wireframe用のウィンドウに切り替わります)
  7. 左にある部品を選択し、右にドラッグ&ドロップする
  8. 各部品のサイズ等を変更し、修正する
  9. 右上のExportを選択する
  10. htmlを選択し、ZIPファイル(html等が含まれています)をダウンロードする