ツール・サイト紹介
ニュース/2ちゃんねる

今週の人気記事

レスポンシブWebデザインのモックアップが手軽に作れるサービス「FROONT」

あとで読む Clip to Evernote このエントリーをはてなブックマークに追加
FROONT
FROONT

レスポンシブなウェブサイトを簡単作成


FROONTレスポンシブなウェブサイトを簡単に作成できるサービスです。

レスポンシブなサイトのモックを作るときに便利そうです。
ドラッグ&ドロップで絵を描くようにしてサイトを作っていくだけ。

その場でウィンドウサイズを変えたときの表示の変化も確認できます。

作成したモックのHTML, CSSはダウンロード可能です。

以下に使ってみた様子を載せておきます。


レスポンシブなサイトを作る


まず「FROONT」にアクセスしましょう。
利用するには無料登録が必要です。すぐに終わるので登録してみましょう。


FROONT

こちらが作成画面。
左側にコンテンツのメニューがあります。
画像をいれたり枠をいれたり。

右側はそのコンテンツの詳細メニューですね。


FROONT

最上部にウィンドウサイズを切り替えられるバーがあります。
先ほどのデザインをスマートフォン用のサイズにすると、上記のようにデザインが変わりました。
レスポンシブデザインの確認が容易にできるのは嬉しいですね。


FROONT

最後にHTMLとCSSをダウンロードして完了です。


レスポンシブデザインのモック作成などに活用してみましょう!
 本記事で紹介したサイト
FROONT
http://froont.com/
あとで読む Clip to Evernote このエントリーをはてなブックマークに追加
Related Posts Plugin for WordPress, Blogger...

 この記事をみた人はこんな記事も見ています

 前後の記事もどうぞ

 この記事をブックマーク/共有する

 トラックバックURL

Twitterの声
はてなブックマークの声
Facebookの声
この記事についたコメント

コメントする
お名前
二十歳街道まっしぐら 2nd @カメきち 2010.10.01-