Webflowの勉強を始めました！

現在はWordPressやNext.js、Astro、Shopifyのプラットフォームでのサイト制作に携わっています。
ディレクターが本業ですが、デザインとコーディングも噛んでいます。

もっと対応の幅を広げたいなと思い、ノーコードツールWebflowを選びました。

他のプラットフォームと比べ、制作期間を短縮できそうで（デザインと開発を同時にできる）かつコーディングに近い操作でビジュアル編集ができることが魅力かと思いました。

ただ、Webflowでできること・できないことがまだぼやっとしているので、チュートリアルをやりながら自分なりに気づきや注意点などをまとめつつ学んでいきます！

本記事のチュートリアル教材

Webflowが提供しているWebflow Universityコース "21-day design portfolio course" で学んでいきます。

本記事はDay1のヒーローセクションを作ります！

動画教材の豊富さにびっくりしました。すべて無料です。
内容も丁寧で動画の長さも5分〜15分程度とちょうどいいです。

動画はたまにふざけてて、あとメンバーとの掛け合いがくすっと笑えてけっこう好きでした笑

Day1の内容

1. sectionとcontainerの追加
2. テキスト要素の追加（見出しとテキストボックス）
3. bodyセレクタ（All pages）で共通スタイル指定（フォント・背景色・フォントカラー）
4. 画像の挿入

気づき

5点学びがありました。

sectionとcontainerの違いは幅の広さ。

section: 画面幅いっぱい
→ 背景色や画像など画面いっぱいに表示させたいときにつかう

container: max-width 940px で中央配置（デフォルト）
→ 左右余白をとって中央に配置したい要素を置く。sectionの中に追加

スタイル指定方法

• 右パネル上のスタイルを操作するとclassが自動生成される
• px以外も指定可能（%やemなど）
• All pages
  • body 全ページ共通で反映される
  • フォント、文字色、背景色で使用する

テキストスタイル

• Capitalizeあり
• Letter-spacingあり

Google font指定

開発画面外のサイト設定画面で、使いたいフォントにチェックをいれるだけ

画像挿入

• 左のアセットパネルか要素追加画面で挿入ができる
• 静的ページならアセットパネルからドラッグが楽ちん

ショートカット

動画で紹介されたショートカットは以下2点。

スタイル指定で使えるので必須で覚えたほうが良さそうです。

• Shift + ↑　/　↓　：px単位を10刻みで指定
• alt + drag：paddingとmarginにて上下もしくは左右同時に余白を指定できる

注意点

選択している要素を確かめること！！

適用したい要素を選択した上でスタイル指定をしないと、意図したスタイルが適用できないです。

めっちゃ当たり前ですが、制作進行していくと別の要素のセレクタ上でスタイル設定しそうだなと思いました。

実際に今回h1に幅を指定したかったのですが、bodyを選択した状態で指定してしまっていました笑

デザインツールのFigmaやXD、Photoshop、Illustratorなどど同じ感覚で「選択」を徹底！

さいごに

Day1ではsectionとcontainerの違いを理解できました。前者は画面いっぱい、後者は940pxの幅で中央配置となります。

ドラッグ操作での要素配置は直感的、コーディングに近い考え方でスタイルを指定できるので個人的にいいなと思いました。

一方で、スタイル指定したい要素を選択しておかないと意図しない表示になるので注意します！

Day2も頑張ります！