Webデザイン等のサンプル作りに役立つ2つのサイト

C789 keitainotepen Webデザイン等のサンプル作りに役立つ2つのサイト
今回は2つのサイトを紹介させて頂きます。
少ない数ですが、この2つを組み合わせて使うとサンプル作りの幅がかなり広がると思います。

 

Mockup Builder

2013040301 1024x512 Webデザイン等のサンプル作りに役立つ2つのサイト
各パーツを画面上に自由に配置することができます。
ほとんど白黒ですが手書き風のデザインがいいですね。
パーツの数は欲しいものを探してもぱっと見つからないほど多くあり、
ボタンやチェックボックス、テキストエリアなどよく使うものから、
動画再生や地図に使うパーツ、
Webブラウザや端末風のパーツまであります。

メモ用の付箋や×マーク等も充実していて様々な使い方が出来そうです。

 

InVision

2013040302 1024x793 Webデザイン等のサンプル作りに役立つ2つのサイト
こちらは一枚の画像で作られた画面にリンクを設定して行きページ遷移させることができます。
アカウントはメールアドレスがあれば作れ、すぐに使用できます。

流れをつかむためにサンプルプロジェクトが用意されていたり、サイトからサンプルに使える画像をDLすることができます。

実際は描画ソフトでデザインしたものや、先ほどのMockup Builder等で作ったデザインを使用するのも良いでしょう。
リンクだけではなくフォームに入力してみる等の動きも可能なようです。

 

いかがでしたか?
WebデザインのサンプルをIllustratorやPhotoshopで作りでただ画像を流すだけだった私としてはかなり重宝しそうに感じられました。
皆さんも一度使用してみてください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">