のんじゃんる

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

Adobe Edge Reflow を使ってデザインカンプを作ってみる【デザイン?なにそれうまいの?】

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


前回は Cacoo を使ってワイヤーフレームを作ってみました。
ざっくりとデザインの大枠が決まったら、詳細なデザインにと落としこんでいきます。
それには、Adobe Edge Reflow (以下、ER)というツールがとても便利です。
このツールは無料で使え、使い方も簡単です。
実際の画面を見ていきましょう。
実は画面自体はしばらく前に作成していましたが、記事にするまで数日考えました。
なぜかって言うと、デザインのデの字も語れないくらい恥ずかしい出来栄えだからなんですね。
素人臭さが出ており、公開するのがためらわれます・・・
手順だけを見ていってもらえたらなと思います。
この手順は ER をインストールした状態を前提としています。
今回画面は以下の解像度の画面を作りました。

スマホ用(520px)
タブレット用(920px)
・PC用(920px以上)

Cacoo で予め作っておいたワイヤーフレームを元に画面を作っていきます。
f:id:tktyo:20140728201530p:plain

1.ER を起動します。
f:id:tktyo:20140728200843p:plain

2.右上の「+」マークをクリックします。
f:id:tktyo:20140728201151p:plain

すると、上の方に、紫色のバーが表示されます。これが画面の解像度を示しています。

3.まずはスマホ用の画面(520px)を作成します。バーをドラッグして、520px に合わせます。
f:id:tktyo:20140728201311p:plain

4.手順2と3を繰り返し、タブレット用、PC用の解像度の画面を追加します。
f:id:tktyo:20140728201407p:plain
画面の青色のバーがタブレット用、緑色がPC用の解像度です。
それぞれのバーをクリックすると、対応した解像度が表示されます。

5.まずはスマホ用の画面にコンテンツを配置していきます。
(この画面を見せるのが恥ずかしいです・・・、しっかり作り込めればよかったんですが・・・)
f:id:tktyo:20140728201634p:plain

6.上の青色のバーを選択し、解像度をタブレット用のものに変更します。
そして、タブレットで見た時の画面を作りこんでいきます。
f:id:tktyo:20140728201747p:plain

7.同じように PC 用も作り込みます。
(この辺、明らかに手を抜いてます・・・)
f:id:tktyo:20140728201829p:plain

こんな感じで、各解像度で表示した時のコンテンツの表示のされ方を作っていきます。
もう少し、細かい使い方を使い込んでいきたいと思っています。
スマホ用のレイアウトはそれなりなんですが、タブレット用、PC用のレイアウトがいまいちです・・・

あと、便利な機能としては、各要素の CSS を自動的に生成してくれるところが便利です。
f:id:tktyo:20140728202639p:plain
上の画像は、ER の中で画像を選択した時に「<>」をクリックした画面です。
(margin や padding を決め打ちで設定してないので、すごく半端な数字になっています・・・)
ちょっと見づらいですが、各解像度の CSS が自動生成されます。
このまま、本番の CSS に貼り付ければ、ER で作成した画面を作れそうな感じです。

webサイトの制作に関しては紆余曲折してる感じですが、コツコツ頑張って行きたいと思います。