プロ向けオンラインサイトクリエイター?「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?プロ ノンプロ
最後の問いかけ
プロの仕事って何でしょう?
人が変わると
プロ ノンプロ
きっと成果も変わるはず
成果 成果
プロ ノンプロ
いろんな道具を
自由に使えるといいですね
ご清聴ありがとうございました
株式会社データファーム 勝又孝幸
http://datafarm.jp
Upcoming SlideShare
Loading in …5
×

プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?

1,940 views

Published on

1 Comment
4 Likes
Statistics
Notes
  • 初めまして。私もweblflowを使ってサイトを作りました。しかし、webflowでのドメイン設定について困っております。IPアドレスが見当たらないのですが、わかりますでしょうか?お返事お待ちしております。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,940
On SlideShare
0
From Embeds
0
Number of Embeds
145
Actions
Shares
0
Downloads
3
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?

  1. 1. プロ向けオンラインサイトクリエイター?「webflow」で何がどこまで出来るのか? 株式会社データファーム 勝又孝幸
  2. 2. レジュメ • 問いかけ • webflowで何ができるか? • webflowの何が良いのか? • ライブデモ • まとめ
  3. 3. 問いかけ
  4. 4. これは何でしょう?
  5. 5. ベアリング
  6. 6. どうやって作ったか
  7. 7. 3Dプリンタで印刷 図面 セットして印刷 完成
  8. 8. 従来はこう 図面 くみ上げ 各自部品の作成 完成
  9. 9. 関わる人は?
  10. 10. 従来はこう 図面 くみ上げ 各自部品の作成 完成 プロ プロ プロ ノンプロ
  11. 11. 図面 セットして印刷 完成 3Dプリンタの場合は? プロ ノンプロ
  12. 12. 図面 セットして印刷 完成 3Dプリンタの場合は? プロじゃなくても? プロ ノンプロ
  13. 13. ここにポイント
  14. 14. 仕組みが変わると セットして印刷くみ上げ各自部品の作成
  15. 15. 人が変わる セットして印刷くみ上げ各自部品の作成 プロ ノンプロ
  16. 16. 仕組みが変わると
  17. 17. 人が変わる
  18. 18. 仕組みが変わると
  19. 19. 人が変わる プロ ノンプロ
  20. 20. 仕組みが変わると
  21. 21. 人が変わる? プロ ?
  22. 22. webflowで何ができるか?
  23. 23. そもそもwebflowとは • webサービス(https://webflow.com) • フリーで使い始めることができる
 (作成サイト数、ページ数に制限あり) • お金を払うと制作できる数が増える
 (横道的な機能もちょっと増える) • 機能を堪能するにはまずはフリーで問題なし
  24. 24. 何ができるの? • コードを書かずにマウス操作で、サイトを制作 • 作ったサイトは自動でレスポンシブ
 (そうじゃないサイトも無理すれば作成できます) • htmlデータをダウンロード可能
 (html、css、JSをダウンロード)
  25. 25. 何ができるの? • 商用利用OK、改変もOK
 (webflowが元々用意してある基本テンプレートを
  カスタムテンプレートとして売るのは
  できないよ、と言われました。当然ですね)
  26. 26. 証拠の品
  27. 27. webflowで作ったものを改変したり、売ったりしてもいいよ
  28. 28. 仕事でも安心して
 使えます
  29. 29. webflowの何が良いのか?
  30. 30. ここで紹介したことを このあとのライブデモで行います
  31. 31. classを指定できる • SMACSS(https://smacss.com) のような感じ?で
 細かく指定することができる
 (idも指定できます) • というか
 class指定しないとカスタマイズ できません!
  32. 32. CSS3の機能が使える • グラデーション、影、角丸、アルファ値などを
 パレットから指定できます
  33. 33. BreakPointで装飾変更が可能 • タブレットサイズの縦、スマフォの横、縦の
 それぞれでCSSの装いを変更することが可能
 →PCではボタン幅を200px。
 スマフォではボタンの幅をコンテンツ幅一杯
 といったカスタマイズもパレットだけで可能に
  34. 34. タグを細かく指定可能 • パレットで細かく指定できます
  35. 35. htmlを埋め込みできる • カスタムhtmlを埋め込み可能
 (そのようなパーツがあります)
  36. 36. htmlをダウンロード可能 • ダウンロード後、Dreamweaverで見てみましょう
  37. 37. とにかくパレット! • コードを書かずにオブジェクトを追加、変更できて • 操作が軽い! • だから使っていて気持ちがいい!
 →これに尽きます!
  38. 38. ライブデモ
  39. 39. デモしました
  40. 40. まとめ
  41. 41. webflowどうでしたか?
  42. 42. 簡単にできることがたくさん! • コードを書かずに、レスポンシブウェブデザイン • 画像はドラッグで配置OK • 細かい設定もclass指定で出来て • ソースもダウンロードできる
  43. 43. 紹介できなかったこんなことも • アニメーションの設定 • シンボル機能 • ヒストリー管理の機能もある • カスタムフォントも埋め込み可能 • <head>後 </body>前にカスタムコードも
 埋め込み可能
  44. 44. 出来ないこともあります • 既存のhtmlを読み込むことはできません • Bootstrapとエディタで組むような
 詳細な設定はできません
 (ウィンドウ幅にあわせてカラムの数を
  変更するのは現状難しいはずです)
  45. 45. 仕組みが変わると
  46. 46. 人が変わる
  47. 47. 仕組みが変わると
  48. 48. 人が変わる? ?
  49. 49. 現状はまだプロのものだと思います プロ classの命名が結構大変
  50. 50. でも、こうなったら? classの命名を自動化したよ! classの命名しなくてもOKになったよ!
  51. 51. 人が変わるのでは? classの命名を自動化したよ! classの命名しなくてもOKになったよ! or? and?プロ ノンプロ
  52. 52. 最後の問いかけ
  53. 53. プロの仕事って何でしょう?
  54. 54. 人が変わると プロ ノンプロ
  55. 55. きっと成果も変わるはず 成果 成果 プロ ノンプロ
  56. 56. いろんな道具を 自由に使えるといいですね
  57. 57. ご清聴ありがとうございました 株式会社データファーム 勝又孝幸 http://datafarm.jp

×