読者です 読者をやめる 読者になる 読者になる

のんじゃんる

何でも書こう、ネタになる

Cacoo を使って、デザインの大枠を作ろう!

どうも、@とよしー です。

今回はもう少しデザインに踏み込んでみたいと思います。
webサイトを構築する際に頭のなかにあるイメージだけを元にすると、
他の人達と共有できなかったり、忘れてしまうことがありそうです。
そこで、webサイトのデザインの大枠を残しておけば、後から見返したり、デザインのイメージを共有したりできます。
このデザインを Cacoo (カクー)というwebサービスを使って作成してみたいと思います。

1.まずは Cacoo にアクセスします。
Cacoo - Web上でフローチャートやUMLなど様々な図を作成
f:id:tktyo:20140725000604p:plain

2.ログインしたら右上の「新しい図を作成」をクリックします。
f:id:tktyo:20140725001332p:plain

3.テンプレートで「空白」を選択します。
f:id:tktyo:20140725001504p:plain

4.右側のツリーで、「ウェブ」-「ワイヤーフレーム」を選択して、
 ワイヤーフレームのカテゴリを表示させます。
f:id:tktyo:20140725001520p:plain

パーツを表示させるには、ドラッグ&ドロップをします。

5.こんなかんじでスマホ版の画面を作ってみました。かなりざっくりです。
f:id:tktyo:20140725001652p:plain
iPhoneAndroid のパーツもあるようです。結構豊富にあります。

6.できたら図を保存します。
f:id:tktyo:20140725001818p:plain

今制作しているwebサイトはレスポンシブwebデザインを前提としています。
なので、今回のようなかんじでタブレット版、PC版の画面を作っていきます。
デザインの大枠なのでざっくりって感じで OK だと思います。

詳細なデザインの設計は、Adobe の Edge Reflow というツールを使いたいと思っています。
この辺は次回辺りにでも紹介したいと思います。

では、このへんで