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

アプギガトップ > Webサービス > 1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕!
注目記事ピックアップ
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
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...

ページトップへ戻る