21
■Macawで検索履歴あり!まさか同士の方がいらっしゃるとは…涙)   

おつかれさまです。@gorolibです。

先日、ブログのアクセス履歴を見ていましたら、Macawで検索されている方がおりました。

ムムっ!まさかの同士の方!おつかれさまです。

Macawとはアウトプットソースが超きれいな、外国製のWebオーサリングツールです。

オーサリングツールとは…まぁベタに言えば「ホームページビルダー」です。

AdobeだとMuseとかになるんですかね。ただしオーサリングツールてのは、IT業界でいうところの(昔ね)CASEツールと呼ばれるノンプログラミングツールで間違いないです。

CASEツールは軒並みソースがぐしゃぐしゃになる子なのですが、このMacawは違う。


ソースのきれいさ、パネェっす。


いいんですよぉMacaw。なぜ流行らないのか…。プロモーションが足りないんですかね。



■ほとんど問題なく納品しています


正直に申し上げますと、もうMacawで3件納品しています。

もちろんクライアント様には「Webオーサリングツールを使っています」と正直に申し上げた上での案件です。その代わりお安くご提供しています。

さほど動かない、凝った動き不要、コード追加あんまりしないのなら、Macawで十分すぎるほど十分です。その分お安くすればいいんですからね。安くていいものを提供するのは商売の基本です!

これぞWin-Win!

で、いちおうざっくりしたやり方だけ書いておきます。あんまり日本語の情報がないもので…。


■準備


(1)素材を作る
→これはまぁ従来どおり。イラストレーターかフォトショップですかね。画面サイズをアートボードサイズで作り、ピクセル単位でレイアウトしてデザインカンプとし、校了をいただく。

(2)素材を切り出す
→(1)からのスライスです。これもそれぞれのやり方はお詳しいサイトがたくさんありますので、そちらにおまかせします。


■Macawでレイアウトする


(3)初期設定
→最初とまどいますが、私のやり方はこれ。

まず、特に指定がない場合は、ブレイクポイントは1200pxにしています。もうあまり考えないことにしています。グリッドデザインもちょうどいいので…。
 
07

(4)素材の読み込み
LIBRARY > IMPORTから素材(2)を読み込みます。
29

23


(5)素材のレイアウト
LIBRARYからドラッグ&ドロップして、レイアウトします。
34


超カンタンです。


ただ気をつけたいのは、デフォルトでフローレイアウト(青い表示)になっていること。便利に使えば便利なんでしょうけど、あとあと面倒ください。

全部固定値にしちゃいます(茶色い表示)Absolute Positioning。ついでにx軸の指定もpxにします。
48

このpx値はイラストレーターでの座標を見ながら、そのとおりに入力します。そりゃそうですわ。そのためにピクセルずれがないよう、びちーっとデザインカンプ作ったんですから。


なんだかね、このデザインカンプからスライス→Webコーディングという「2回おんなじことしてるんじゃね感」が毎回いやなんですけど、なんとかならないんですかねぇ。


あと、%というのは、ブレイクポイントに対しての%値であり、こちらも便利に使えば便利なんでしょうけど、あとあと面倒ください^ ^

テキストなんかも直感でどんどんいけます。


(6)最後にグループ化してフローレイアウトにする。
で、最後の最後に全てのオブジェクトをグループ化して、そのグループをフローレイアウトにします。
06

20


そうすると、ブラウザのウィンドウを小さくしていくとき、固定幅までは余白が均等に減っていき、固定幅より小さくなると、右側がけずれていくタイプのフローレイアウトができます。

また、全体をグループ化したものをpxにしておきます。
54

 
29
43




あと、いろいろありそうなんですけど…。私の場合これだけで十分です(笑)

ということで同士の方がおられるようなので、Macawについてはちょびちょび更新してまいります!

お役に立てれば幸いです!

ではでは出羽の海。