プロ向けオンラインサイトクリエイター？「webflow」で...
TRANSCRIPT
プロ向けオンラインサイトクリエイター？「webflow」で何がどこまで出来るのか？株式会社データファーム 勝又孝幸
レジュメ• 問いかけ
• webflowで何ができるか？
• webflowの何が良いのか？
• ライブデモ
• まとめ
問いかけ
これは何でしょう？
ベアリング
どうやって作ったか
3Dプリンタで印刷
図面
セットして印刷完成
従来はこう
図面
くみ上げ
各自部品の作成完成
関わる人は？
従来はこう
図面
くみ上げ
各自部品の作成完成
プロ
プロ
プロ
ノンプロ
図面
セットして印刷完成
3Dプリンタの場合は？
プロ ノンプロ
図面
セットして印刷完成
3Dプリンタの場合は？
プロじゃなくても？
プロ ノンプロ
ここにポイント
仕組みが変わると
セットして印刷くみ上げ各自部品の作成
人が変わる
セットして印刷くみ上げ各自部品の作成
プロ ノンプロ
仕組みが変わると
人が変わる
仕組みが変わると
人が変わる
プロ ノンプロ
仕組みが変わると
人が変わる？
プロ
？
webflowで何ができるか？
そもそもwebflowとは• webサービス（https://webflow.com）
• フリーで使い始めることができる
（作成サイト数、ページ数に制限あり）
• お金を払うと制作できる数が増える
（横道的な機能もちょっと増える）
• 機能を堪能するにはまずはフリーで問題なし
何ができるの？• コードを書かずにマウス操作で、サイトを制作
• 作ったサイトは自動でレスポンシブ
（そうじゃないサイトも無理すれば作成できます）
• htmlデータをダウンロード可能
（html、css、JSをダウンロード）
何ができるの？• 商用利用OK、改変もOK
（webflowが元々用意してある基本テンプレートを
カスタムテンプレートとして売るのは
できないよ、と言われました。当然ですね）
証拠の品
webflowで作ったものを改変したり、売ったりしてもいいよ
仕事でも安心して
使えます
webflowの何が良いのか？
ここで紹介したことを
このあとのライブデモで行います
classを指定できる• SMACSS（https://smacss.com）
のような感じ？で
細かく指定することができる
（idも指定できます）
• というか
class指定しないとカスタマイズ
できません！
CSS3の機能が使える• グラデーション、影、角丸、アルファ値などを
パレットから指定できます
BreakPointで装飾変更が可能• タブレットサイズの縦、スマフォの横、縦の
それぞれでCSSの装いを変更することが可能
→PCではボタン幅を200px。
スマフォではボタンの幅をコンテンツ幅一杯
といったカスタマイズもパレットだけで可能に
タグを細かく指定可能• パレットで細かく指定できます
htmlを埋め込みできる• カスタムhtmlを埋め込み可能
（そのようなパーツがあります）
htmlをダウンロード可能• ダウンロード後、Dreamweaverで見てみましょう
とにかくパレット！• コードを書かずにオブジェクトを追加、変更できて
• 操作が軽い！
• だから使っていて気持ちがいい！
→これに尽きます！
ライブデモ
デモしました
まとめ
webflowどうでしたか？
簡単にできることがたくさん！• コードを書かずに、レスポンシブウェブデザイン
• 画像はドラッグで配置OK
• 細かい設定もclass指定で出来て
• ソースもダウンロードできる
紹介できなかったこんなことも
• アニメーションの設定
• シンボル機能
• ヒストリー管理の機能もある
• カスタムフォントも埋め込み可能
• <head>後 </body>前にカスタムコードも
埋め込み可能
出来ないこともあります• 既存のhtmlを読み込むことはできません
• Bootstrapとエディタで組むような
詳細な設定はできません
（ウィンドウ幅にあわせてカラムの数を
変更するのは現状難しいはずです）
仕組みが変わると
人が変わる
仕組みが変わると
人が変わる？
？
現状はまだプロのものだと思います
プロ
classの命名が結構大変
でも 、こうなったら？
classの命名を自動化したよ！classの命名しなくてもOKになったよ!
人が変わるのでは？
classの命名を自動化したよ！classの命名しなくてもOKになったよ!
or? and?
プロ ノンプロ
最後の問いかけ
プロの仕事って何でしょう？
人が変わると
プロ ノンプロ
きっと成果も変わるはず
成果 成果
プロ ノンプロ
いろんな道具を
自由に使えるといいですね
