Webflowベーシック

このレッスンでは、Webflow Basicsコースの全体像を紹介します。Webflowは、コードを書かなくても本格的なWeb技術で動くサイトを作れるプラットフォームです。

Webflowの特徴

見たままの操作で自由にデザインでき、裏側ではクリーンで実用的なコードが自動生成されます。デザインやレイアウトに集中でき、細かい技術的な作業はWebflowが引き受けてくれます。

学べる内容

コースでは、アカウント作成や基本操作から始め、ページの構成やデザイン、画像やテキストの扱い、リンクやレスポンシブ対応を学びます。さらに、CMSによる動的コンテンツ、SEO、アクセシビリティ、公開方法といった実践的な内容も含まれています。

ゴール

修了後には、本格的なランディングページを自分で作れるスキルと、Webflowの基礎的な理解が身につきます。

このレッスンでは、Webflowのアカウント作成から初めてのプロジェクト立ち上げまでを学びました。

アカウント作成の流れ

まずwebflow.comにアクセスし、「Get started – It’s free」から登録を開始します。メールアドレスを使って進め、パスワード条件を満たしてアカウントを作成します。その後、名前や利用目的、会社の種類、チーム人数などの簡単な質問に答え、利用環境を設定しました。

プロジェクト作成

設定を終えると、最初のサイト作成方法を選ぶ画面になります。今回は「Blank site」を選び、自動入力されたプロジェクト名のまま「Create site」をクリック。これで初めてのWebflowプロジェクトが作成され、Designerと呼ばれる編集画面が開きます。

完了と次のステップ

最後に届いたメールでアカウント認証を行い、Dashboardにアクセスできるようになりました。これでアカウント作成と最初のプロジェクト準備が完了です。

‍

このレッスンでは、Webflowのダッシュボードとワークスペースについて学びます。ダッシュボードは、すべてのサイトや設定を管理する“司令塔”のような場所です。

基本構造とワークスペース

ログインするとダッシュボードに移動し、ワークスペース一覧やプラン情報を確認できます。検索バーや表示オプションを使えば、サイト数が増えても効率的に整理できます。

サイト管理と作成

右上のボタンからフォルダーを作成したり、新しいサイトを立ち上げたりできます。空白の状態から始めるだけでなく、AI Builderやテンプレートを使うことも可能です。

ワークスペースとサイト設定

左側のメニューではワークスペースの一般設定やメンバー管理が行えます。また、各サイトの設定ページでは名前変更やフォルダー移動、ファビコン設定などが可能です。サムネイルにはサイト名や公開状況、プラン情報も表示されます。

次のステップ

ここまででダッシュボードとワークスペースの基本操作を理解しました。次回はWebflowのデザイナー画面を確認し、本格的な制作へと進みます。

このレッスンでは、Webflowデザイナーのインターフェースを4つの主要エリアに分けて学びます。

上部バー

サイト全体の基本機能にアクセスできる場所です。CMSやInsights、プレビューボタン、ページ一覧、ブレークポイント切り替え、共有リンクや公開ボタンなど、制作や公開に欠かせない操作がここに集まっています。

左ツールバー

要素の追加、ページ管理、ナビゲーター、コンポーネント、変数、アセットなどを扱います。バックアップやローカライゼーション、多言語対応、アクセシビリティ診断といった管理機能もここから利用できます。

キャンバス

実際にデザインや開発を行う作業スペースです。要素の編集や移動、レスポンシブ確認、画面幅の調整などを直感的に操作できます。

右側パネル

スタイル、要素設定、インタラクションを細かく制御します。デザインの仕上げやアニメーション設定はここが中心となります。

このレッスンでは、Webflowで要素を追加する方法と、その配置や構造の確認の仕方を学びます。

要素の追加方法

要素は、Add ElementsパネルやLayoutsタブからクリック、ドラッグ＆ドロップで追加できます。ショートカット（Command＋E / Control＋E）を使えば検索から素早く配置することも可能です。マーケットプレイスから追加ライブラリを活用する方法も紹介しました。

ページ構造とNavigator

追加した要素はBody要素の中に入り、Navigatorで階層構造を確認できます。入れ子状に配置されることで、裏側のHTMLコードが視覚的に理解できる仕組みです。CanvasとNavigatorは連動しており、どちらで選択しても要素の位置がハイライトされます。

まとめ

要素の配置は、選択中の要素に内包されるか、その直後に追加されます。このレッスンを通じて、要素の追加方法とページ構造の理解を深めました。次回は、要素のスタイル変更について学びます。

このレッスンでは、Webflowのスタイルパネルを使って要素を洗練されたデザインに仕上げる方法を学びます。CSSの役割や、クラスを活用した効率的なスタイリング方法についても触れています。

スタイリングの基本

スタイルパネルからフォントや色、余白、配置を直感的に設定できます。Webflowは設定内容を自動でCSSに変換してくれるため、コードを書かずにデザインを構築できます。背景画像やボタンの装飾も簡単に追加でき、ページ全体の雰囲気を整えられます。

クラスとセレクター

設定したスタイルは自動的にクラスとして保存され、他の要素に再利用可能です。クラスを変更すると、同じクラスを持つ要素すべてに反映されます。また、コンボクラスやタグセレクターを使えば、より柔軟にデザインを管理できます。

まとめ

スタイルパネルとCSSの基礎を理解し、クラスやセレクターを活用することで効率的にデザインを整えられるようになりました。次回は、要素に動きを加える方法へと進みます。

このレッスンでは、Webflowでのリンクの基本から応用までを学びます。テキストリンクやボタンの仕組み、リンク先の設定方法、サイト全体に適用できるスタイル変更、そしてページ内セクションへのアンカーリンクの作り方を取り上げています。

リンクの基本

Text Linkは最もシンプルなリンク要素で、文字をクリック可能にできます。ボタンはスタイルが適用されたText Linkであり、背景色やパディングを自由にカスタマイズできます。

リンク設定とスタイル管理

Link SettingsからURL、プロジェクト内ページ、メールアドレス、電話番号、ファイルなどを遷移先に指定できます。また、All Linksセレクターを使えば、サイト全体のリンクスタイルを一括変更可能です。

アンカーリンク

ページ内の特定セクションへ移動するには、まず対象セクションにIDを設定し、次にリンクからそのIDを選択します。プレビューすると、ボタンをクリックした際にスムーズにスクロールします。

まとめ

リンクはシンプルながら柔軟性が高く、Text LinkやButton、All Linksセレクターを使いこなせば効率的に管理できます。次回はテキストの扱い方を学び、さらに表現の幅を広げていきます。

このレッスンでは、Webflowでのテキスト操作を学びます。基本的な編集方法からインラインフォーマット、スパンを使った部分的なスタイル設定までを確認しました。

テキストの基本操作

テキストはダブルクリックで編集でき、通常のテキストエディターと同様に削除や入力が可能です。選択するとフォーマットメニューが表示され、太字やイタリック、上付き・下付き文字、インラインコード、リンクなどを適用できます。

スパンの活用

スパンを使うと、文章の一部だけに特定のスタイルを適用できます。クラスを付ければ色やサイズを変更でき、同じクラスを他のスパンに適用して再利用も可能です。不要な場合は「書式をクリア」で元に戻せます。

リンクと重要なポイント

段落内のテキストにはリンクを設定でき、外部URLやページ内セクション、メール、電話番号などを指定できます。また、テキスト内容はクラスと共有されないため、同じクラスを持つ見出しでも中身は独立して編集可能です。

まとめ

テキスト操作は直感的で柔軟性があり、部分的な装飾やリンク付けも簡単です。次回は画像の扱い方を学び、さらに表現の幅を広げていきます。

このレッスンでは、Webflowでの画像の差し替え方法とアセットの管理について学びました。ヒーローセクションなどに配置された画像を新しいものに置き換える操作を中心に解説します。

画像の差し替え手順

画像を変更する際は、まず対象の画像をクリックし「Element Settingsパネル」で「Choose Image」を選択します。するとアセットパネルが開き、プロジェクト内のすべての画像やファイルを管理できます。新しい画像は「Upload」ボタンから追加し、一覧から選択するだけでページ上の画像と差し替えられます。

クラスと画像の違い

重要なポイントは、画像の内容はクラスとは別で管理されるということです。同じクラスを複数の画像要素に適用しても、画像そのものは共有されません。クラスは影や角丸といったスタイルを定義するだけで、表示する画像は個別に指定する必要があります。

まとめ

画像の差し替えは「アップロード → 選択」のシンプルな流れで行えます。さらに、クラスはスタイル用であり、画像の内容は独立している点を理解しておきましょう。次回はCMSを使った動的コンテンツについて学びます。

このレッスンでは、Webflow CMSの基本を学びました。静的コンテンツと動的コンテンツの違いを理解し、CMSを使うことでサイト全体のコンテンツ管理を効率化できる仕組みを紹介します。

静的コンテンツと動的コンテンツ

静的コンテンツは手動で更新する必要がありますが、動的コンテンツはCMSに保存され、更新するとサイト全体に自動反映されます。ブログ記事やお客様の声、ポートフォリオなどのスケーラブルな管理に適しています。

CMSの構造

CMSは「コレクション」を単位に構成され、各コレクションには記事やデータを表す「アイテム」が含まれます。アイテムにはタイトル、本文、画像などの「フィールド」があり、柔軟にカスタマイズ可能です。

コンテンツの表示と更新

CMSのデータは、一覧表示の「Collection List」や個別ページを生成する「Collection Page」でサイトに反映できます。更新はCMSパネルやキャンバス上で行え、API連携も可能です。

まとめ

Webflow CMSを活用すれば、大量のコンテンツを効率的に管理・更新でき、デザインと情報を分離した柔軟な運用が可能になります。

このレッスンでは、Webflow CMSでコレクションコンテンツを作成・管理する方法を学びます。コレクションは関連するデータのまとまりであり、動的コンテンツを効率的に扱う基盤となります。

コレクションの作成とアイテム追加

新しいコレクションを作成し、サムネイル画像・著者名・公開日・本文といったカスタムフィールドを定義しました。次に、アイテムを追加してタイトルや本文を入力し、データベースに保存しました。こうして作成されたアイテムは、Collection ListやCollection Pageを通してデザインに反映されます。

公開と管理方法

アイテムは最初はドラフト状態で保存され、即時公開・次回公開時に含める・公開予約・非公開といった方法で管理できます。編集後もドラフトとして保存され、再度公開操作を行うまで変更は反映されません。複数アイテムの一括操作やCSVインポートによる更新も可能です。

まとめ

CMSを活用することで、動的コンテンツを効率的に管理し、更新内容を全ページに自動反映できます。これにより、スケーラブルで柔軟なサイト運営が実現できます。次回はSEOを学び、検索に強いサイト構築へ進みましょう。

このレッスンでは、Webflowで実践できるSEOの基本を学びます。テクニカルSEO、サイトパフォーマンス、オンページSEOの3つの観点から、検索に強いサイトを作るための具体的な方法を紹介しました。

テクニカルSEO

Webflowのサイト設定から、サイトマップの自動生成、Google Search Console認証、Google Analyticsとの連携が可能です。これらにより、検索エンジンがサイトを正しく理解し、データ分析や改善につなげられます。

パフォーマンスとスピード

コード圧縮や画像のWebP/AVIF変換を行うことで、読み込み速度を改善できます。高速なサイトはユーザー体験を向上させ、検索エンジンからも高く評価されます。

オンページSEO

各ページのタイトルタグやメタディスクリプションを設定し、検索結果でのクリック率を高めます。Open Graph設定でSNS共有時の見え方を調整でき、画像のaltテキストや正しい見出し構造、レスポンシブ対応もSEOに有効です。

まとめ

SEOは継続的な取り組みが必要ですが、Webflowの機能を活用することで、正しい基盤を効率的に整えられます。次回はアクセシビリティを学び、誰にとっても使いやすいサイト作りに進みます。

このレッスンでは、Webアクセシビリティの基礎と、Webflowで活用できる支援ツールについて学びます。アクセシビリティとは、すべての人がウェブサイトを操作し、理解し、移動できるようにすることを目的としています。

Webflowのアクセシビリティ機能

まず Auditパネル では、altテキスト不足や見出しの不適切な構造などを自動検出し、修正を促します。Vision Previewツール では色覚特性を持つユーザーの見え方をシミュレーションし、色以外の情報提供を意識できます。さらに カラーコントラストツール を使えば、テキストと背景のコントラスト比を確認し、WCAG基準に沿った修正が可能です。

チェックリストと習慣化

アクセシビリティチェックリストは制作時や公開前の確認に有効で、ベストプラクティスや改善のヒントを提供します。こうしたツールを日常的に使うことで、自然にアクセシブルなサイト制作を習慣化できます。

まとめ

アクセシビリティはユーザー体験の向上だけでなく、SEOや信頼性の向上にもつながります。Webflowのツールを活用することで、より多くの人に優しいサイトを効率的に構築できます。次回は、いよいよWebサイトの公開方法を学びます。

このレッスンでは、Webflowにおけるサイト公開の仕組みを学びました。ステージングと本番という2つの環境を使い分けることで、安全にテストしながら世界に向けてサイトを発信できます。

ステージング公開

ステージングは、.webflow.ioのサブドメインで動作確認を行うための環境です。プレビューとの違いは、実際に公開される点であり、カスタムコードの検証やフィードバックの共有にも便利です。本番に影響を与えないので、安心して試行できます。

本番公開

本番公開は、接続したカスタムドメインを使って世界中に公開することを意味します。Webflowホスティングを利用すれば、高速表示やSSL暗号化も自動で適用されます。公開手順は、カスタムドメインを設定後、Publishで本番環境を選ぶだけです。

公開ワークフロー

一般的な流れは、デザイン → プレビュー確認 → ステージングでテスト → 修正 → 本番公開です。このサイクルを繰り返しながら改善していくのが基本です。

まとめ

ステージングは調整と検証、本番は正式公開の場。これらを使い分けて、安心して公開プロセスを進められます。

このWebflow Basicsコースでは、アカウント作成からデザイン、公開までの基本を体系的に学びました。Designerの操作を通じて、ページ構成やレイアウト、スタイル設定の流れを理解し、テキストや画像、リンク、CMSを使った動的コンテンツまで扱いました。さらにSEOやアクセシビリティの基礎、ステージングと本番環境を使い分けた公開方法も学習し、Webflowの核となる考え方を実践できるようになりました。

学習の成果

短期間でWebflowを使って初めてのサイトを作り上げただけでなく、再利用性の高いクラス設計やボックスモデルによるスタイリングなど、プロの制作現場で役立つスキルを習得しました。単なる操作方法にとどまらず、「自分で構築できる」というマインドセットも手に入れられたはずです。

次のステップ

このコースを入口として、さらに学びを広げることができます。Supasaito Academyでは、学習パスや実践的なコースを多数用意しています。次のコースに進むことで、より高度な表現や実務に直結するスキルを磨けます。学習の途中で迷ったら、コミュニティや公式サイトで気軽に相談しましょう。