Photoshopでサイトのモックを作成する際に、
作業時間の短縮に繋がりそうなプラグインWebZapを紹介します。
WebZapはこちらより購入できます。
2012年11月5日の時点では$15で購入することができます。
WebZap - Photoshop panel plugin for web developers
[browsershot url="http://webzap.uiparade.com/" width="300"]
購入はクレジットかPayPalを選択できました。
購入して購入後の確認メールの後に、しばらくするとメールが届きます。
そこからファイルをダウンロードします。
圧縮ファイルを解凍すると以下のようなファイルが現れます。
とっても詳しいマニュアルがPDFでついています。
もしわからないことがこちらで確認しましょう。
zxp形式のファイルをダブルクリックしてプラグインをインストールします。
イントール完了後、Photoshopを起動して、
『ウィンドウ → エクステンション → WebZap』
を選択するとWebZapのパネルが表示されます。
さっそくいじってみましょう
上から2行目のパネルの左端を選択します。
Navigationと書かれたアコーディオンメニューをクリックします。
色々出てますが、とりあえず一番左上のものを選択します。
ヘッダーとフッターが作成しました！！
レイヤーもきちんと生成されています。
色分けもされていますね。
この例だと青いのがヘッダーの青い部分、
黄色いレイヤーがフッターです。
シェイプ、テキスト、画像、レイヤースタイルで作成されていますので、
微調整もしやすいかと思います。
別のナビゲーションを選択すると現在のものと入れ替わります。
一番左下のものを選択してみましょう。
ヘッダーのメニューが変わりました!
どんどん要素を追加していきます
先ほどのアコーディオンメニュー『Navigation』の下のFeatureをクリックします。
Feature
メインビジュアルのエリアですね。
今回は一番左下のものを選択しました。
fold
トップページ完成しました！
0から作成するのと比べてどうでしょうか？
基本的なレイアウトは用意されているので、
ちょっとしたモックならすぐできてしまいそうですね。
パーツ系もあります
ボタン系、フォーム系、スライドバー系が揃っています。
クリックすると選択したパーツが生成されて、キャンバス上に生成されます。
プレビューもできる！
プレビュー機能もついてます。
具体的にどういったものかというと、一番右のカメラのパネルをクリックしてみます。
ちょっと傾いたものや、iPadにサイトが埋まっているものが表示されていますね。
今回は一番左下のiPhoneのやつで試してみましょう。
クリックすると新しいカンバスが開かれて、下の画像のようなものが生成されました！
一枚絵として結合されてしまっているので
残念ながらこれを編集することはできませんが、
ボタン一つで作れるiPhoneで見た時のモックとしては十分なクオリティですね。
他にも便利な機能があります
今回すべての機能は紹介していませんが、
他にもグリッドを追加して表示してくれたり、
選択しているパーツを切り出して新しいファイルとして生成してくれたり、
下の画像のような複数カラムのテキストエリアを挿入できたりします。
制作の単価が下がってきている今だからこそ、
制作者側はいかに工数を抑えて、
早く良い物を作るための手段を見つけて、
どんどん取り入れていくことも重要な時代なのかもしれませんね。
今回紹介したWebZapはこちらより購入できます。
