愛媛県鬼北町に位置する、創業100余年の酒屋さんです。思いのほか、自由度高く作れて、「ああ、これは近い将来webマークアップ作業フローは本当に少なくなってそうだな〜」と軽い衝撃を受けました。今回はそこで使用したwebflowの使い方について学んだことをシェアしてみようと思います。Codeでプロダクトを作るためのTutrialポータルまでできています。通知やメール送信、そのほか外部連携まで組み込むならそこにZapierやAirtableを組み合わせれば、もうかなりの種類のプロダクトがコード書かずに作れるとまでもう来ているようでした。webflowとはwebflowはその中でも、webサイトをぽちぽちで作るという、比較的昔からあるジャンルのプロダクトです。左側で要素の追加やレイヤー構造の操作を行い右側でスタイリングを行っていきます。「崩れや不具合が起こると中がどうなってるのか分からないから手を出したくない」というのが自分がこの手のツールに抱いていた印象でした。いい意味で変なCSS設定の仕方をしたら崩れるのが、webflowです。display設定をしてない親要素で、小要素をposition:absoluteにしたらちゃんと親要素を飛び出して要素はどこかに飛んで行ってしまいます。webflowでは、右側にスタイリングのパネル(写真)が出てくるのですが、こちらはCSSの仕様をそのまま忠実に再現していました。万一崩れたりしても、CSSの仕組みわかってる人は問題なくバグ潰しできそうでした。(今回はそういうことは一度も起こりませんでしたが)CMSが一つのツールで完結これまでは更新のしやすさを考えると外部ツールと連携させて泣く泣く作っていたCMSも、webflow一個でラクーに作ることができるようになってました。データテーブルさえ作ってしまえば、ポスポスと写真やタイトルを入れられました。Lottieサポートまで最後にページロード時にLottieアニメーションを入れるようにしたのですが、こちらもバッチリサポート入ってました。Scrollに応じてヘッダ出したり消したり、Load時のみ背景暗くしてたりしてて、細かいインタラクションをいくつか入れてたのですが、やりたいことはだいたいやれるかなーという印象。まとめ総じて、軽量のCMS込みサイト実装案件には非常に使いやすいのではないかという印象でした。E-Commerceカートを作る機能や、ZapierやAirtableなど外部APIツールとの連携もできるようだったので、今度、時間のある時に試してみようと思いますダウンロード#デザイン#Webデザイン#UIデザイン#nocode#webflowこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。記事まとめデザイン系の記事を収集してまとめるマガジン。ついた記事などをチェックしています。何か作ること...79seyaポンコツwebデザイナーが一年間プログラミングを一生懸...121shianbrownUIモーション制作ツールまとめ128むらかみ。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。