Firefoxを使って簡単なモックアップを作成する

鉛筆は、アプリケーションのユーザーインターフェイスのモックアップをスケッチするために使用できるワイヤーフレーミングツールです。 Pencilの素晴らしいところは、軽量で使いやすく、Firefoxと緊密に統合されていることです。その上にすべて無料のオープンソースアプリケーションがあります。記事の最後に、Pencilを使用してBrizzlyのようなワイヤーフレームを作成する方法の簡単なデモを示します。.

ワイヤーフレームを作成するのはなぜですか ?

ワイヤーフレームは、ページレイアウトのアイデアのスケッチです。ワイヤーフレームは、デザインがユーザーのニーズに合うように、ページの情報デザインに焦点を当てます。ワイヤフレームは通常、内容、機能、およびナビゲーション要素を表すために、さまざまな形状（ボックス、楕円形、およびダイヤモンドなど）で構成されています。これらの図形はページ上の配置を表示します.

最初はそれはページの大まかなスケッチを作成する時間の無駄のように思えるかもしれません。ワイヤーフレームは、ユーザーがページの重要性要素に集中できるようにするために重要です。見栄えの良い要素を使わずに、ページの大まかなスケッチを作成することで、ページコンポーネントのサイズ設定、レイアウト、配置などの重要な要素にユーザーの注意を向けます。ユーザーがページの重要な要素に焦点を合わせ始めると、クライアントが本当にソフトウェアに何を望み、何を必要としているのかについて、よりよく理解するようになります。ワイヤーフレームを作成することで、あなたとあなたのユーザーは効果的にコラボレーションし、潜在的な設計上の問題を早期に特定することができます。.

ペンシル入門

PencilのアドオンページからPencilをダウンロードしてください。 Pencilをインストールすると、「ツール」>「鉛筆スケッチ」からアクセスできます。.

これはBrizzlyがどのように見えるかです。 FacebookとTwitterを1つのページにまとめた、とてもクールなWebアプリケーションです。.

これがワイヤーフレームの最終結果です。このワイヤフレームの主な形状は、長方形、テキストボックス、およびタブです。この記事の次のセクションでは、各図形を作成する方法の簡単な例を示します。.

四角形を作成する

ワイヤーフレームシェイプを作成する最初のステップは、 'Shape Collections'メニューからキャンバスにシェイプをドラッグすることです。.

長方形を適切な幅と高さにサイズ変更する.

Pencilでは、任意の図形のテキスト、枠線、背景色をカスタマイズできます。四角形を右クリックして[プロパティ]を選択し、[プロパティ]ウィンドウを開きます。これが背景のプロパティ画面です。長方形の背景色を白に設定します（#FFFFFF）.

[枠線]タブをクリックして、枠線のプロパティを調整します。境界線の色を黒（＃000000）に設定し、境界線の太さを1に変更します。.

テキストプロパティ画面では、テキストのフォントタイプ、サイズ、スタイル、太さ、色、明るさ、および不透明度をカスタマイズできます。.

タブを作成する

ホーム、ドラフト、画像のタブは、3つのタブで積み重ねられています。 3つの「タブパネル」を長方形にドラッグします。各タブが並べて表示されるように各タブのサイズを変更します.

テキストのプロパティ画面を開いて、[画像]タブと[ドラフト]タブのフォントの色を調整します。グレーに設定します（＃989898）.

テキストを作成する

キャンバスに 'テキスト'図形をドラッグして各メニューを作成します。テキストプロパティウィンドウにアクセスしてテキストの外観を調整できます.

色を変更するための便利なヒント

色は心地良いワイヤーフレームを提供する上で最も重要な部分の1つです。図形の色を変更する最も正確な方法は、色のHTMLコードを指定することです。特定の色のHTMLコードを見つけ出すのは難しい場合があります。 w3cschools.comのHTMLカラーチートシートを使用して、特定の色に適したHTMLコードを検索できます。.

また、colorzillaを使って画面から色を選び、それをPencilで使うのも好きです。 Firefoxの左下隅にあるスポイトアイコンをクリックして画面上の色を選択します。アイドロップアイコンをダブルクリックしてもColorZillaのカラーピッカーを開くことができます。 HexコードをPencilのカラーHTMLコードにコピーペーストするだけです。.

結論

鉛筆はワイヤーフレーミングツールを使いやすいです。 Firefoxとの鉛筆統合により、他のFirefoxプラグインを使用してより良いワイヤフレームを作成することが可能になります。

リンク集
鉛筆をダウンロード
Colorzillaをダウンロードする
W3C HTMLカラーチートシート