ツール【無料プレゼント】まだホームページは作らないで!このガイドブックを読み終えるまでは。いうテーマで、「ホームページを作る前に読んでおくと得する本」を書きました。無料で読む「コードを書くな。me)の『Macaw』は、「こりゃ、次世代のWebデザインツールに違いない!」と、まだ発売してないにもかかわらず、わずか72時間で75,000ドルもの出資額を集めたアプリです。なにそれ?吐き出すソース(HTML/CSS)がビューティフル!リアルタイムなプレビュー機能アニメーションをリアルタイムに実装できる!柔らかすぎるレイアウトの変更、設定レスポンシブ。最近、ついに発売されたみたいなので試してみることに。使ってみた感想からいうと、プロ向けだなあという印象。使い方自体はそれほど難しくないのですが、HTML/CSSの知識がまったくない人にはハードル高めだと思います。確かに直感的にデザイン作業を楽しめるけれど、公開する直前にはHTML/CSSによる微調整が必要になるだろうなあと。アプリ独特の挙動もあり、慣れるのに時間がかかる部分も。簡単にサイト作成を楽しみたいなら、以下のブラウザから利用できるWebサイトビルダーの方がおすすめです。制作会社を頼らず無料のホームページ作成ツール14個ぜんぶ無料!スマホサイトを素人でも制作会社に頼らず作成できるツール6個で、今回。Macawをちょこちょこっといじくりながら作ってみたサイトが下のやつ。1枚のWebページです。サンプルサイトこのサイトの制作過程を振り返りながら、簡単にMacawの使い方を紹介してみようと思います。アプリ起動Macawを起動したところです。Photoshopに似た感じの見た目ですね。操作方法もよく似てます。左に並ぶツールを使って、中央に広がるキャンバスをWebサイトに見立ててデザインを進めていきます。キャンバスにはガイドが引かれてます。今流行のグリッドデザインに対応してます。グリッドの幅や余白は簡単に変更できます。右はインスペクター(詳細情報)エリアです。いま作業している対象物について細かな情報を表示してます。ヘッダーからまずは「ヘッダー」からデザインしてみます。Elementツールを使うと要素の範囲を指定できます。ヘッダーの領域を指定しました。背景を設定ヘッダーの背景に画像を設定。本来はCSSが必要になる画像の配置やリピートなども難なく設定できます。画像を配置ドラッグ&ドロップするだけ。グリッドガイドにピタッ。ピクセルや%の単位で配置を微調整することも可。本当なら画像を用意したり、CSSをいじくったりと、なかなか面倒なボタンもこの通り。直感的にデザインできます。グラデーションやドロップシャドウの設定も問題なし。リンク設定インスペクターエリアでリンク先のURLを入力すればOKです。今回はPDFをダウンロードできるようにしてみました。次の要素ヘッダーが完了したので次の要素を。今度は背景にグラデーションを設定しました。ボタンを複製パーツの複製も簡単。プレビューデザインの過程をプレビュー機能で確認しながら進められます。問題は要素の重なり具合にあったようです。アウトラインを修正すると直りました。この辺はHTML/CSSのスキルとWebデザインの概念についての知識が必要だと思います。レスポンシブも簡単!今回は実装してませんが、レスポンシブ化も簡単です。キャンバスの幅を変えながら、レイアウトの崩れが生じたところをブレイクポイントに設定。崩れを修正すればレスポンシブに。他は何もしなくてOKです。スクリプトも書ける!スクリプトを記述するところ。リアルタイムに動きを確認しながら実装を進められます。以上!こんな感じにシンプルなサイトなら小一時間ほどで完成できます。ワイヤーフレーム/プロトタイプの作成にも役立てられそうです。使い慣れてないからなのか、たびたびイラッとさせられる場面もありましたね。「コマンド+z(戻る)」を使うと、なぜか全体のデザインが崩れたり。こまめなセーブが必要でした。言え、まだリリースされたばかり。これからのバージョンアップに期待です。誰でも簡単にフラットなアイコン画像を作れるiconion。無料だなんて!このロゴ、いくらに見える?安くて簡単なロゴ作成の方法を4つ紹介SEOツールのプレミアム福袋!ウェブマスターツールとは?トップページに戻るん?最新情報を見逃さない方法!?わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。株式会社ウェブさえの代表者です。フリーランスまで様々な職種業界の方が居て、挙げだすと切りがありません。皆様に本当に感謝しております。詳しい自己紹介はこちらへ。お問い合わせやご質問・ご相談はこちらへ。最近更新した記事ホームページ作成ツールを無料もありで19個も!もう制作会社を頼らない。WordPressのスキルアップに最適。