WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ワイヤーフレームの作成

ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。
またワイヤーフレームはレイアウトの確認をする為のものなので、この時点ではデザイン情報(色やフォントの種類)は指定せずに枠のみを作っていきます。




各要素の高さ

アートボードの大きさ:1366x2700px
header:100px
nav:50px
content:600px(x4)
footer:280px
各要素の余白:10px



デザインルール

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


cacoo.com




www.wirify.com




www.webcreatorbox.com



markehack.jp


www.justinmind.com


goworkship.com


blog.webcamper.jp



Photoshopでのアートボード

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



helpx.adobe.com



参考資料


stock.adobe.com


デザインカンプ


Figmaワイヤーフレーム

youtu.be



makikosakamoto.design


coliss.com

<nav id="g-nav">
<ul>
<li><a href="brands/">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>