ワイヤーフレーム の作成

2-15
ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。

f:id:CHOCOtan:20220221223936p:plain

f:id:CHOCOtan:20220221224007j:plain

各要素の高さ

アートボードの大きさ:1920x3500px
header:100px
nav:50px
content:600px
col-photo:260px
col-txt:340px
footer:280px
各要素の余白:10px



デザインルール

ワイヤーの段階で色を入れないのが通常です。この時点で色を入れてしまうと、ワイヤーフレーム本来の目的である「基本的な構造の確認」に余計な情報が入り、却って解り難くなってしまう恐れがあります。

cacoo.com

www.wirify.com

www.webcreatorbox.com

markehack.jp

cacoo.com

www.justinmind.com

goworkship.com

blog.webcamper.jp

Photoshopでのアートボード

アートボード機能は、Illustratorでは以前からあった機能ですが、PhotoshopではPhotoshop CC2015から実装されました。webデザインなど複数のページのデザインを作成しなくてはいけない時に、ページ間を簡単に移動できるので大変便利です。

f:id:CHOCOtan:20220221224621p:plain

helpx.adobe.com