こんにちは!
LikePayアカデミーの矢野です。
今回はWebflow初心者がやりがちな実装をみなさんにお伝えして、今までよりもレベルアップしたサイト制作スキルを身に着ける方法について紹介していきます!
今回紹介する方法を改善しこれからの実装で意識をしていくだけでWebflowを使ったサイト制作スキルを一気に上げることが出来ます。
それでは、早速紹介していきます!
1.クラス名を決める
いますぐ要素にクラス名を付与しましょう。力づくの作成で、Div block192 なんてことになっていませんか?(昔の僕はなってました)
しっかりとクラス名を付与し、綺麗なCSSを作成し管理をしやすいようにするとサイト制作のスピードが上がりますし、編集もラクに行うことができるようになります。
2.テンプレを使わない
いきなりテンプレートを使用してサイトを作成すると、編集方法がわからなかったり思ったようなデザインを作成することが出来なかったりします。理由は、テンプレートはWebflowの上級者が作成しているのでクラス名や構造が初心者の方がいじるには少し難しくなっています。
まずは自分で要素を組み立て、HTML/CSS、Webflowの基礎を身につけていきましょう!
全ての土台になるので、とても大事です!
3.スタイルシートを作成する
綺麗なデザインは、必ず統一されたレイアウトが繰り返し使われています。
WebflowテンプレートはStyleのページが作成されておりそちらには、
・H1,H2,H3,H4,H5,H6
・テキストのサイズ
・セクションテキストのサイズ
・ボタンのカラー、サイズ
・サイトで使われるカラー
などなど、サイトに使用されるスタイルがまとめられています。
カッコ悪いサイトの特徴は、統一感の無いデザインです。
テキストのカラー、サイズがバラバラだったり、余白の感覚が不揃いだとどうしてもダサくなってしまいます。
最初にスタイルシートを作成して、サイトで使用する要素のルールを自分で決めておくだけで簡単に整ったレイアウトのサイトを作成することができるようになります。
4.デザインを統一させる
3の内容と被ってしまいますが、デザインを統一されることでオシャレでかっこいいウェブサイトを作成することが出来ます。
他のノーコードツールとWebflowを比べた時、Webflowの強みは”ハイクオリティなサイトがノーコードで作れる”です。
是非Webflowの強みを活かし、ハイクオリティでカッコいいデザインのWebサイトを作成しましょう!
まとめ
今回紹介した項目を気をつけて今後のサイト制作を行うだけで、Webflowで制作するスキルアップになります。最初から完璧に出来る人はいないですし、そうである必要はありません。
少しづつ慣れていき、レベルアップを目指しましょう🔥