どうも、まさとらん（@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 まさとらん