ブログ用のレスポンシブデザインがWeb上で簡単に作成出来る!?『FROONT』というサービスを試してみた


2013-0602-201725

レスポンシブデザイン。
PCやタブレット、スマートフォンなどの
様々な解像度の機器での表示に対応したWebデザイン、
HTMLとCSSをそのレスポンシブに対応した形で記述すれば
そのひとつのHTMLとCSSで自動的にレイアウトを最適化してくれる…

という、なんだか凄くて素晴らしいけど
実際どういう記述で実現しているのか理解が追いついていない
このレスポンシブデザインですが、

ちなみにレスポンシブデザイン、
Tipstourのテーマ『Great』でも実装されてます。

スポンサードリンク

 

FROONT

FROONT – design responsive websites in the browser

上記サイトのStart nowから開始出来ます。
ユーザ登録が必須なようですが、まあ形式上必要になる程度みたいですね。
2013-0602-201737

2013-0602-201746

これがログイン後の画面。
2013-0602-201952

「Blank Page」からデザイン作成を開始出来るみたいですが…

開いてみると確かにブランクページ、
まっさらな状態すぎて作り方がわからないという始末。
2013-0602-202020

おとなしく「Demo Page」を選択します。

こんな感じでFront Pageのデモが。
2013-0602-202317

それぞれのテキストや画像、カラムなどが
選択可能な状態で表示されています。
この画面から、レイアウトを変更可能なようです。

ウィジェットツリー。
ここにそれぞれのパーツ一覧が表示されます。
2013-0602-202403

 

画面上部のView HTML/CSSを選択すると…
2013-0602-202418

現在表示されているHTMLとCSSの記述が自動生成されます。
2013-0602-202430

これがこのサービスのキモとなる部分ですね。
ちょっとしたデザインをGUIで作って、
ここでCSSやHTMLとして拾い上げることも可能そう。

 

レスポンシブ対応のウェブデザインというだけあって
タブレット・スマートフォン用のサイズの表示も出来ました。

画面上部のこのバーをクリックすると…
2013-0602-203008

こんな風にスマホサイズに自動調整されたレイアウトが表示されます。
すげぇー、すげぇー。
2013-0602-202515

総括

Web上で出来るレベルとしてはかなり画期的なこのツール、
使いこなせればかなり強力なモノであることは間違いないように感じます。

が、画面を見ただけだと操作方法がサッパリわからなんだ、
ちょっと使いこなすには基本から調べて色々試してみないと
おいそれとクールなレスポンシブデザインが作成出来るわけではなさそうですね…。

 

スポンサードリンク

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly