シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕!
注目記事ピックアップ
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/03/25 21:40

1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕!


どうも、まさとらん(@0310lan)です!

今回は、とにかく「Webサイト」を手っ取り早く作りたい人に朗報です!

最近のトレンドを抑えつつ、オシャレで、見栄えの良いWebデザインを取り入れながら、プログラミングも一切行わずにすべてブラウザ上で「公開」まで完結できて、さらに無料で使えるWebサービスをご紹介しようと思います!

それが、「Webflow」です!


実は、以前から異彩を放つサービスとして知られていたのですが、最近になってどんどんバージョンアップが進んでおり、非常に「使える」サービスとして成長しているので今一度ご紹介してみます。

 

どうやって使うの?
「Webflow」を使うには、まずトップ画面からユーザー登録をします。


 

すると、Webデザインの骨組みとも言えるテンプレートを選択する画面になります。


 

このままテンプレートを選択しても良いのですが、「Template Marketplace」と呼ばれる洗練されたテンプレートを集めたサービスが公開されています。


有料・無料のテンプレートがたくさんあるので、この中から自分の気に入ったモノを選択するのが良いでしょう。

 

あとはサイトの名前を設定すれば、そのままブラウザ上から編集できる画面に変わります。


もちろん、ゼロから作ることも可能ですが、テンプレートを利用した方が簡単で短時間にクオリティの高いモノが完成するのでオススメです。

 
どんなことが出来るのか?
「Webflow」では、自分が思い描いているWebサイトに必要な「文字」「画像」「ボタン」などを、右側のツールボックスからドラッグ&ドロップすることで作成していきます。


フォームやスライダー、画面レイアウトなど、ほとんどの機能をマウスだけで実現できるように設計されています。

 

また、画像や文字などをマウスでクリックすることで、その要素に対して設定できるCSSが同じように右側ツールボックスに表示されます。


個別の余白設定や、影を付けたり、フォントを変えたり、サイズ変更や要素をフロートさせるなど…、CSSプログラミングに慣れていない人でも自在に操ることができます。

 

また、「Webflow」で作るサイトはレスポンシブに対応しているので、左側のメニューから「表示方法」をスマホなどに切り替えて確認することも可能です。


 

グリッド表示も出来るので、現在の状態を確認するのに便利です。


 

サイトを作っていて、どの要素がどこに設置されているのか?など、混乱を避けるための分かりやすい「ツリー表示」もできます。


 

さらに、ボタン一発で今作っているWebサイトのコードを画像ファイルも含めて書き出すことが可能!


しかも、書き出されたコードが見事に美しい…。

類似のサービスでは、かなり汚いコードが書き出されるのに対して、「Webflow」のきれいなコードはかなり貴重ではないでしょうか。このコードを利用すれば、WordPressのテーマなどにも流用することが出来ますね。

 

そして、「Publish」ボタンをクリックすると、すぐにURLリンクが表示されるのでクリックします。


 

なんと、先ほど作ったWebサイトを、そのまま一般公開することも出来るんです!


無料のホスティングサーバーとして、機能するのには驚きました。(有料で独自ドメインも可能)

これを活用すれば、自分で作ったWebサイトをクライアントにURLを教えるだけで、「動くサイト」として確認をしてもらうことも可能になるので非常に便利かと思います。

Webflowで実際に作られたサイト一覧はこちらからどうぞ!

 

ちなみに、初回のユーザー登録を済ませると、14日間ほとんどの機能を使える状態になっており、期日を過ぎると自動的に無料プランに切り替わります。(無料版でも、サイト製作やホスティング機能など基本的なことは出来るのでご安心ください。詳細

 
おまけ
「Webflow」のサイトには、初心者でも効率的にすべての機能を活用できるように「ビデオ講座」を公開しています。

Webflow University


 

このサイトだけで、1つのWebサービスが出来そうなくらいに豊富な動画が用意されています。


基本的に英語音声ですが、操作画面を見るだけで十分理解できるレベルなので、あまり気にせずに学習が進められるかと思います。

興味のある方は、ぜひ一度視聴してみることをオススメします。

 
まとめ
「Webflow」が用意しているテンプレートを利用すれば、とにかくカッコイイWebサイトがあっという間に完成します。

スタートアップのティザーサイトやアプリの専用サイト、ポートフォリオ、企業サイトまで幅広く活用できるうえ、何と言っても素人が作った感じにならないのがステキです。

みなさんは、どのように感じられましたか?

 

最後に、アプギガで過去に紹介したWebデザイン・サイト作りに使えるWebサービスも、合わせてご紹介しておきます。

 

【 素人が即戦力でWebデザインを製作できる「Canva」は、オンラインエディタに素材も搭載して無料!


 

 

【 ブラウザ上でブログやショップなど全部入りサイトが作れる「Portfoliobox」が無料で最強だった!


 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る