ゼロ知識でWebflowを触ってみた結果
みなさんお久しぶりです！
株式会社エスプールのヤマサキです🙋♀️
お盆休みを挟んだり、はたらぼ内でもちょっといろいろございまして、
７月末に予定していたアプリのリリースが１ヶ月後ろ倒しになりました。
その分、アプリの機能がんがんに盛りだくさんになってきていますので、
是非たのしみにお待ちくださいね～！🤩🤩
アプリのリリースにあたり、
アプリ内の機能紹介や実際の活用イメージ、プロジェクトそのものに込められた想い、使い方マニュアル、noteをはじめとする関連コンテンツ、等々、
ユーザーの皆さんにお伝えしたいことがたくさんあり、
情報が多くなりすぎてきたことと、
初めてS-loopアプリに触れる人にもっとわくわく感を感じてもらえるよう、
専用のLPを作成することになりました。
そして今回、LPの作成にあたっては、
ノーコードでウェブページを作成でき、テンプレや機能がリッチな「Webflow」というツールを使用することになりました。
(Webflowのチャンネルが出している、Web制作の上手くいかなさを表現した動画です。英語ですがおもしろいので是非😉)
本日は、
Web制作の知識ゼロ・ド初心者の私が、Webflowを10～20時間触ってみて、
いったいどのくらいのことができるようになったか？ということを書いてみたいと思います。
何かしらの参考になれば幸いです🙃
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
まず、一番最初にぶつかった壁は、
表示したい要素を思い描いた場所に配置することでした。
PPTなどのデザインツールであれば、
挿入された要素をドラッグ＆ドロップで好きな位置に移動できますが、
Webflowにおいては、これがほぼ通用しません。
例えば、こちらは私が作成したLPのヘッター部分です。
一見大したことないように見えるデザインですが、
ただ要素を並べただけだと、下のような配置になってしまいます。
このように、
基本的にはすべての要素は端から順に詰めて配置されるようになっていて、
各要素の内側・外側の余白（パディング・マージン）の大きさを設定するという仕組みになっています。
この考え方を駆使して、デザインとしてバランスの良いページを作成することができます。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
次に現れた壁は、グルーピングです。
画面上に配置された要素は、同じ仲間同士でグルーピングすることができます。（Webflow上では、”クラス”と呼ばれています。）
例えば、この８つの要素は、同じクラスとしてタグ付けされているので、
左上のひとつのデザインを変更すると、８つすべてのデザインが同様に変更されます。
ここまではとても便利ですね。
しかし、８つの図形は色も形もすべてグループ化されているため、
例えばこのように右下の色のみを変更したい場合はどうでしょうか？
普通に色を変更すると、８つすべてがグレーになってしまいますし、
右下のひとつだけをグループからはずすと、図形の形や大きさがずれてしまいます😟
このような場合には、変更したい要素のみに対して、新たなクラスを付与する（元々のクラスは保持したまま、追加でクラスを追加する）ことで対応します。
また、どういう仕組みかよくわからないのですが、
Webflowでは似た要素を自動的にグルーピングしてくれたりするので、
知らない間に変えたくない場所まで変更されてデザインが崩れたりなど、
理解するまではこの機能にかなり翻弄されました。。。😂
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
この他に、私ができるようになったこととしては、主に以下のとおりです。
・簡単なアニメーションの作成
（矢印ボタンをクリックすると、指定した箇所を表示したり隠したりすることができます。）
・背景画像から文字の切り抜き
（左上のロゴは単純に画像を挿入しただけですが、中央の文字は背景画像をグラデーションに設定して文字の形に切り抜いたものです。）
・スクロールしても一部の固定表示されるようにする設定
右側の赤い丸で囲っているところが、常にその場に固定されて、
クリックするとページの指定した場所まで戻るようになっています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
本日は以上になります。
私の知識が断片的で伝わりづらい部分が多く、
かつこの分野に明るい方からすると非常に浅～い知識で
お恥ずかしいばかりの内容だったかと思いますが、
何かのお役に立てれば幸いです。
また、もし社内でWebflowを使おうとしている・使っている人がいれば、
是非情報共有させてください！
こういうところから、少しずつ社内の助け合いのきっかけを生み、
S-loopの目指す姿にも近づけられたらうれしいな、と思っております😋
🚀本日の名言🚀
Cooperation, like love and friendship, is something you get by giving.
Napoleon Hill
協力とは愛や友情と同じく、与えることで得られるものである
ナポレオン・ヒル