>> 
手軽にWebサイトのラフデザインが作れる Pencil 1.0.4
 >> 
手軽にWebサイトのラフデザインが作れる Pencil 1.0.4

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

手軽にWebサイトのラフデザインが作れる Pencil 1.0.4

  • このエントリーをはてなブックマークに追加

手軽にWebサイトのラフデザインが作れる Pencil 1.0.4

今年もあとわずかですね。


今回は、Firefoxブラウザ で手軽にWebサイトのラフデザイン(モックアップ)を作ることができる Firefox アドオンの紹介です。




Pencil 1.0.4

Pencil」は、Firefoxブラウザ でWebサイトのラフデザイン(モックアップ)を制作できる Firefox アドオンです。

Pencil :: Add-ons for Firefox

ラフデザインとは、Webサイト制作の現場において "ヘッダーの位置" "サイドーバー" の幅などの大雑把なレイアウトを構成します。

以下、実際に使ってみた様子です。




Pencil の使い方

Pencil を起動して Pencil 画面を表示する

Pencil の使い方 - Pencil を起動して Pencil 画面を表示する - Pencil 1.0.4

インストール(要再起動)してメニューバーの "ツール" から "Pencil Sketching...." をクリックします。



Pencil の使い方 - Pencil を起動して Pencil 画面を表示する - Pencil 1.0.4

"Pencil Sketching...." をクリックすると Firefox 上に Pencil 画面 が表示されます。



パーツを設置してラフデザインを作成する

Pencil の使い方 - パーツを設置してラフデザインを作成する - Pencil 1.0.4

使い方は簡単で Pencil 画面 左側のパーツ選びマウスの "左クリックを押したまま(ドラッグ)"、Pencil 画面 右側のラフデザイン用キャンパスに移動させて "左クリックを離して(ドロップ)" パーツを設置します。



Pencil の使い方 - パーツを設置してラフデザインを作成する - Pencil 1.0.4

Pencil 画面 左側から右側へいろいろなパーツを設置すると上記のようになります。
下手くそでごめんなさい (´;ω;`)

設置したパーツをダブルクリックすると文字入力、編集(色、サイズ、太さ)も可能になります。




Pencil 画面の設定

新しいページで始める時

Pencil 画面の設定 - 新しいページで始める時 - Pencil 1.0.4

Pencil 画面右側の New Page をクリックすると新しいラフデザイン用キャンパスページの初期設定がポップアップ表示されます。



Pencil 画面の設定 - 新しいページで始める時 - Pencil 1.0.4

新しいラフデザイン用キャンパスページの初期設定では、タイトル、サイズ、背景色を設定できます。




作成したラフデザインのエクスポート

Pencil 画面の設定 - 作成したラフデザインのエクスポート - Pencil 1.0.4

作成したラフデザインをエクスポートも可能です。
メニューバーの "Document" から "Export Page as PNG" をクリックすると png形式 の画像で任意の場所に保存できます。




インストールページ

関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks