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

Like this? Share it with your network

Share

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

  • 604 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
604
On Slideshare
601
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
2

Embeds 3

http://www.slideee.com 2
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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