ホント?画像編集の感覚でWebデザインできると噂の『Macaw』を試す

2014年12月4日
カテゴリー ツール

Macaw

「コードを書くな。描け!」

がキャッチフレーズ(意訳 by me)の『Macaw』は、「こりゃ、次世代のWebデザインツールに違いない!」と、まだ発売してないにもかかわらず、わずか72時間で75,000ドルもの出資額を集めたアプリです。

噂に聞いたパワフルかつモダンな特徴をざっとあげると、

  • 画像編集の感覚でWebデザインできる!
  • コーディング? なにそれ?
  • 吐き出すソース(HTML/CSS)がビューティフル!
  • リアルタイムなプレビュー機能
  • アニメーションをリアルタイムに実装できる!
  • 柔らかすぎるレイアウトの変更、設定
  • レスポンシブ。余裕

と、スゴそう。最近、ついに発売されたみたいなので試してみることに。

使ってみた感想からいうと、プロ向けだなあという印象。使い方自体はそれほど難しくないのですが、HTML/CSSの知識がまったくない人にはハードル高めだと思います。確かに直感的にデザイン作業を楽しめるけれど、公開する直前にはHTML/CSSによる微調整が必要になるだろうなあと。

アプリ独特の挙動もあり、慣れるのに時間がかかる部分も。もっと簡単にサイト作成を楽しみたいなら、以下のブラウザから利用できるWebサイトビルダーの方がおすすめです。

で、今回。Macawをちょこちょこっといじくりながら作ってみたサイトが下のやつ。1枚のWebページです。

サンプルサイト

このサイトの制作過程を振り返りながら、簡単にMacawの使い方を紹介してみようと思います。

1. アプリ起動

macawの初期画面

Macawを起動したところです。Photoshopに似た感じの見た目ですね。操作方法もよく似てます。左に並ぶツールを使って、中央に広がるキャンバスをWebサイトに見立ててデザインを進めていきます。

キャンバスにはガイドが引かれてます。今流行のグリッドデザインに対応してます。グリッドの幅や余白は簡単に変更できます。

右はインスペクター(詳細情報)エリアです。いま作業している対象物について細かな情報を表示してます。

2. ヘッダーから

要素を足す

まずは「ヘッダー」からデザインしてみます。Elementツールを使うと要素の範囲を指定できます。ヘッダーの領域を指定しました。

3. 背景を設定

背景を設定

ヘッダーの背景に画像を設定。本来はCSSが必要になる画像の配置やリピートなども難なく設定できます。

4. 画像を配置

ロゴを挿入

ドラッグ&ドロップするだけ。グリッドガイドにピタッ。ピクセルや%の単位で配置を微調整することも可。かなり自由に動かせます。

5. ボタンを配置

ボタンを貼る

本当なら画像を用意したり、CSSをいじくったりと、なかなか面倒なボタンもこの通り。直感的にデザインできます。グラデーションやドロップシャドウの設定も問題なし。

6. リンク設定

リンクの設定

インスペクターエリアでリンク先のURLを入力すればOKです。今回はPDFをダウンロードできるようにしてみました。W杯を楽しみましょう!

7. 次の要素

次の要素

ヘッダーが完了したので次の要素を。今度は背景にグラデーションを設定しました。

8. テキストや画像を配置

画像とかテキストとか

今までと同様に。

9. ボタンを複製

ボタンを複製

パーツの複製も簡単。

10. プレビュー

プレビュー

デザインの過程をプレビュー機能で確認しながら進められます。一通りデザインしてみたところでプレビューすると…

ん? 表示されていないパーツが><

11. アウトラインを修正

アウトラインをチェック

問題は要素の重なり具合にあったようです。アウトラインを修正すると直りました。この辺はHTML/CSSのスキルとWebデザインの概念についての知識が必要だと思います。

12. レスポンシブも簡単!

レスポンシブの設定

今回は実装してませんが、レスポンシブ化も簡単です。キャンバスの幅を変えながら、レイアウトの崩れが生じたところをブレイクポイントに設定。崩れを修正すればレスポンシブに。他は何もしなくてOKです。

13. スクリプトも書ける!

スクリプトも書ける

スクリプトを記述するところ。リアルタイムに動きを確認しながら実装を進められます。

以上!

こんな感じにシンプルなサイトなら小一時間ほどで完成できます。ワイヤーフレーム/プロトタイプの作成にも役立てられそうです。

でも、自分的にはどうだろう? まだ使い慣れてないからなのか、たびたびイラッとさせられる場面もありましたね。「コマンド+z(戻る)」を使うと、なぜか全体のデザインが崩れたり。こまめなセーブが必要でした。

とは言え、まだリリースされたばかり。これからのバージョンアップに期待です。無料のトライアル(30日間)がついているので、ぜひお試しあれ!

ほな、ごゆるりと〜

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top