【コーダーの仕事がなくなる!?】空前絶後のサービス「webflow」の使い方を解説。

#なんのためにこの記事を共有するのか？
ども！デザインエンジニアのMasaです。
<img src="https://storage.googleapis.com/edd-homepage/IntroductionEdD/img/masa.png" width=30%>
HTML+CSS+JSを書き出してくれるという噂のwebflowというサービスですが、いったいどこまでのことをやってくれるものなのか？？
もし仮に圧倒的にコーディングの生産性をUPしてくれるならこれほど優れたものはないのではないか？ということで人柱として調査報告を共有したく！

**「知りたかったことが知れた！」**
とか
**「新しいことが知れた！」**
と思ったら左の**いいねボタンをポチッと**お願いします！

#webflowとは？
まるでad◯beのPh◯toshopのようにGUI(グラフィカルユーザインタフェース)でデザインをして、その結果をHTML+CSS+JSでexportをしてくれるコーダー・フロントエンドエンジニアの仕事を圧倒的にラクにしてくれる超絶嬉しいサービス。

公式サイトはこちら
https://webflow.com/

ちなみに自分の編集画面はこんな感じ。
![Do5xtghU0AABX1z.jpg](https://qiita-image-store.s3.amazonaws.com/0/253032/2a98a58d-5ab5-3c77-68ad-906f1dfc9c63.jpeg)

#webflowは無料か？
2018-10-09時点で`無料プラン`と`16$プラン`と`35$プラン`がある。
![スクリーンショット 2018-10-09 0.24.58.png](https://qiita-image-store.s3.amazonaws.com/0/253032/aec86aea-5daa-7bb0-7beb-54f0484d299d.png)

◆無料と有料の大きな違いは
**「デザインをHTMLやCSSとしてはexportできるかできないか」**

◆`16$`と`35$`の大きな違いは
**「右下にwebflowのロゴが入ってしまうかどうか」**

約4000円を払ってコードを書く効率がぐーんとあがるんだったらオレは払ってその分稼ぐわ。
料金プランはこちら！
https://webflow.com/dashboard/account/plans?ref=account_tab_switch
ブランドロゴを消す一文はこちら！
https://university.webflow.com/article/how-do-i-remove-webflow-branding-from-my-website

#なにはともあれ無料でwebサイトをデザインしてみよう！
##左右上のメニューの見方は？
下の画像を見てわかるように編集画面の左・上・右側にはそれぞれアイコンが並んでいる。
各ブロックごとにどう扱うかみていこう。
（ちなみにこの画像は、新世紀エヴァンゲリオンの葛城ミサトさんと、セーラームーンの月野うさぎの声優さんが三石琴乃であることによって生まれた奇跡のコラボ画像である。）
![Do5xtghU0AABX1z.jpg](https://qiita-image-store.s3.amazonaws.com/0/253032/39c67f2c-a650-0deb-c77a-10853e36175a.jpeg)

##画面左のメニュー
上から順番に押してみて解説していきやしょう
![スクリーンショット 2018-10-09 2.52.01.png](https://qiita-image-store.s3.amazonaws.com/0/253032/1669e7c1-375b-754c-1190-d14c337ecc1d.png)
まずはこれ
![スクリーンショット 2018-10-09 15.54.27.png](https://qiita-image-store.s3.amazonaws.com/0/253032/0bf310aa-57e3-4cff-372e-0ecb69776a9a.png)
ポチッと押すとこんな画面が出てきて
![menu.png](https://qiita-image-store.s3.amazonaws.com/0/253032/1c72f421-ceb2-1bfe-c319-b4c451ff7fef.png)

`Dashboard`で今管理しているすべてのプロジェクトを見ることができる。
`Project Settings`でProject名やfaviconなどの設定ができる。
`Editor`で実際のサイトの様子を見ながらリンクの設定をできる。

次にこれ。webサイトデザインの上でもっともよく使うのがこのアイコン。
クリックすればいろいろなパーツを配置していくことができる。
各パーツの右上に現れる「？」ボタンをおすとその要素がいったい何タグでどういうデフォルト設定なのか知ることができる。
![スクリーンショット 2018-10-09 18.47.41.png](https://qiita-image-store.s3.amazonaws.com/0/253032/0498c70f-170a-f77f-0e08-4e5791288209.png)
![スクリーンショット 2018-10-09 18.47.52.png](https://qiita-image-store.s3.amazonaws.com/0/253032/1deea27b-7044-e7b2-6c24-faf82ffcbc2d.png)
![スクリーンショット 2018-10-09 18.48.03.png](https://qiita-image-store.s3.amazonaws.com/0/253032/41dba420-dfa3-9595-9dfa-227797c6e88b.png)
![スクリーンショット 2018-10-09 18.48.17.png](https://qiita-image-store.s3.amazonaws.com/0/253032/9acdfe3b-66b1-68a4-fbe4-185207a2f18c.png)

例えばLayout→sectionは横幅100%のdivとして配置できる。
![スクリーンショット 2018-10-09 18.37.31.png](https://qiita-image-store.s3.amazonaws.com/0/253032/40780183-ae6f-2605-d502-c08ad3f9b6a5.png)

えー、続きまして〜次のアイコン。このアイコンであるwebサイトのページを追加することができる。
無料プランでは2ページまで作れて、webサイト構築で使っていくためには有料プランへの切り替えが便利。
![スクリーンショット 2018-10-09 2.48.02.png](https://qiita-image-store.s3.amazonaws.com/0/253032/9da5fc39-ef35-6196-3e5d-4ccae0df8913.png)

続きましてこれ。CMS関連のUIみたい。今はまだ勉強不足で使い道や使用シーンをイメージできないのでおいおい解説しようと思う。
![スクリーンショット 2018-10-09 18.27.37.png](https://qiita-image-store.s3.amazonaws.com/0/253032/aecbe2b2-7d3c-31dd-a2da-5a98a29919f6.png)

最後にこれ。webサイト内で利用する画像ファイルをサイトにupするとここにストックされるようになっている。
![スクリーンショット 2018-10-09 2.48.53.png](https://qiita-image-store.s3.amazonaws.com/0/253032/ad4f70fe-450a-a9ce-7b67-4d8793a17d08.png)

##画面上のメニュー
このボタンをおすと作成しているサイト全体をプレビューとして見ることができる。
![スクリーンショット 2018-10-09 18.58.28.png](https://qiita-image-store.s3.amazonaws.com/0/253032/334d7c96-cb2a-149f-058c-168ef5a28e8c.png)

このアイコンたちでPCやタブレット、スマホ用の画面を編集切り替えすることができる。
![スクリーンショット 2018-10-09 18.58.43.png](https://qiita-image-store.s3.amazonaws.com/0/253032/5aba7fc9-9bb9-1963-0e01-55da00f2ddf2.png)

矢印アイコンは、編集のUndoやRedoをできる。
緑のチェックマークは自動保存が完了しているかどうかのステータスを表す。
![スクリーンショット 2018-10-09 19.01.10.png](https://qiita-image-store.s3.amazonaws.com/0/253032/af790d33-fca1-e8c8-9184-6e446b1418c3.png)
もっとも重要なのがこのアイコン`< >`。
これをおすと今作成しているサイトをHTML+CSS+JSにexportしてくれる。
Publishとかかれたボタンは、作成しているwebサイトをwebflowのドメイン名または独自ドメイン名で一般公開することができる。

##画面右のメニュー
![スクリーンショット 2018-10-09 19.15.52.png](https://qiita-image-store.s3.amazonaws.com/0/253032/35e39162-00f8-b97b-879b-3def36ec94d7.png)
右端から解説していこうぞ。
この右端のアイコンで、クリックしたときにjsを動かすなどの
![スクリーンショット 2018-10-09 19.14.26.png](https://qiita-image-store.s3.amazonaws.com/0/253032/5a2dcf05-2b90-ecfc-7702-6f680701f8cc.png)

例えばマウスクリックをしたときに何かしらの動きが欲しい場合〜
![スクリーンショット 2018-10-09 19.19.42.png](https://qiita-image-store.s3.amazonaws.com/0/253032/e4ba11ca-24d1-1386-b720-ec2045a78828.png)
fadeなど好きなエフェクトを選べる。
![スクリーンショット 2018-10-09 19.19.52.png](https://qiita-image-store.s3.amazonaws.com/0/253032/95fd10bb-54c1-dd62-44a2-7b1e3d9aa7e8.png)



右から２つ目のアイコンで作っているクラスすべてを管理できる。
![スクリーンショット 2018-10-09 19.14.17.png](https://qiita-image-store.s3.amazonaws.com/0/253032/0313e5bf-a35b-9deb-7dd4-53b92f96e2e9.png)

真ん中のアイコン。
要素がどういう階層になっているか確認できるし、
ある要素の下の階層に要素を追加したいときには、
ここで任意の階層を選択した状態で先述のaddから要素を追加すればよい。

この右メニューの中では、真ん中のアイコンと左端のアイコンをよく利用する。
![スクリーンショット 2018-10-09 19.10.55.png](https://qiita-image-store.s3.amazonaws.com/0/253032/28f63e20-01fe-6739-ea40-89c46a00bbc2.png)

左から２つ目のアイコン。
Js用にIDなどを追加できる。
![スクリーンショット 2018-10-09 19.12.26.png](https://qiita-image-store.s3.amazonaws.com/0/253032/8c555a60-6387-d593-7c32-5e9064fac9d0.png)

左端のアイコン。
右メニューの真ん中のアイコンでクラスプロパティを変更したい要素を選択しておき、
ここで具体的にpaddingやmarginなどを設定できる。
![スクリーンショット 2018-10-09 19.13.03.png](https://qiita-image-store.s3.amazonaws.com/0/253032/1db7b484-1262-9612-e2f0-30106137fb4b.png)

#疑問点
2014年くらいからサービス開始しているのに、日本ではそこまで流行っている印象がないし、何かしら不具合があるんだろうか？それとも単に知られていないだけの素晴らしい技術なんだろうか？
普及活動を通じて知っていきたいところっすな。

#最後に
**「知りたかったことが知れた！」**とか**「新しいことが知れた！」**
と思ったら左の**いいねボタンをポチッと**お願いします！
ではではドロン！！
<img src="https://storage.googleapis.com/edd-homepage/IntroductionEdD/img/masa.png" width=30%>
処女作：エロ診断メーカー(共同製作：Kei)
https://ero-shindan.herokuapp.com/