ワイヤーフレームが作れるPhotoshopのUIコンポーネントセット WebZap

スクリーンショット 2014-10-13 11.20.08

WebZapはワイヤーフレーム作成のためのUIコンポーネントがセットになったPhotoshopプラグインです。

様々なUIを、パネルからボタンひとつで追加することができます。

19ドルの有料サービスです。

3カラム、2カラム、写真付きなどレイアウトパターンも用意されており、デザイン作成の時間短縮にも利用できます。

動画解説

レイアウト作成

VimeUhOh
Sorry, we couldn’t find that page

こんな感じのレイアウトを作成できます↓

スクリーンショット 2014-10-13 11.26.52

テキストレイアウト作成

VimeUhOh
Sorry, we couldn’t find that page

4カラム、3カラム、2カラムなどのテキストレイアウトを作成できます↓

スクリーンショット 2014-10-13 11.29.52

UIコンポーネント

VimeUhOh
Sorry, we couldn’t find that page

クリックひとつでパネルからUIパーツを追加することができます。自分で作成するのに比べてかなりの時間短縮になります↓

スクリーンショット 2014-10-13 11.34.25

テキストのスタイル変更

VimeUhOh
Sorry, we couldn’t find that page

作成したテキストはh2タグやpタグを指定してカラーやフォントを一括変更することもできます。この機能が秀逸です↓

スクリーンショット 2014-10-13 11.36.15

モックアップ作成

VimeUhOh
Sorry, we couldn’t find that page

ボタンひとつで、デザインをタブレットやデスクトップのモックアップに変更できます。クライアントにプレビューする時などに使えます↓

スクリーンショット 2014-10-13 11.38.50