Webflowランディングページ

‍このレッスンでは、ウェブサイトを作成していくためのプロジェクトを作成します。

このレッスンでは、Figmaのデザインを使って、ランディングページを構成する各セクションを詳しく見ていきます。

それぞれのセクションには、「何を伝えるか」「どう行動してもらうか」という明確な役割があります。全体の流れや目的を理解するためにも、この構造をしっかり把握することがとても重要です。

Figmaのデザインを確認したところで、次はWeb制作の中心となる「Webflowデザイナー」を見ていきましょう。

このレッスンでは、コース内で実際によく使うエリアを簡単にご紹介します。これからの作業がスムーズに進むよう、まずは基本の操作環境に慣れておきましょう。

このレッスンでは、ランディングページの制作に向けて、使用する画像やグラフィック素材をWebflowに読み込むという実践的なステップに進みます。

シンプルな作業ではありますが、プロジェクトをスムーズに進め、どんなデバイスでも美しく表示させるために、とても重要な工程です。

このレッスンでは、ページを訪れた人が最初に目にする「ヒーローセクション」を作成します。ここは第一印象を決めるとても重要なパートなので、しっかり魅力が伝わるように仕上げていきましょう！

また、このタイミングでフォントやカラー設定も行い、今後のデザイン全体に統一感を持たせていきます。

このレッスンでは、ランディングページに「ソーシャルプルーフ」セクションを追加していきます。

ここでは、これまでに取引のあった企業やパートナーを紹介することで、訪問者に信頼感を与えることが目的です。

控えめながらも、しっかりと安心感を与える効果的なセクションです。

このレッスンでは、ランディングページの「サービス」セクションを作成します。

このセクションでは、あなたのビジネスが提供するサービスを見やすく魅力的に紹介し、訪問者が一目で内容を理解できるようにすることが目的です。

このレッスンでは、ランディングページに「数値での実績紹介」セクションを追加します。

このパートでは、パーセンテージや統計、売上額などの数字を活用して、訪問者に強い印象を与えることが目的です。

数字は、サービスの信頼性や価値を短時間で効果的に伝える手段として、とても有効です。

このレッスンでは、「お客様の声」セクションを実装していきます。

口コミは、信頼を築いたり、第三者からの評価（ソーシャルプルーフ）を伝えるのにとても効果的です。

今回は、お客様の声を柔軟に見せられるように、2つのバリエーションを紹介します：

• シンプルに1件だけ紹介するスタイル：内容を絞ってわかりやすく伝えたいときにおすすめです。
• 複数の声をスライダーで見せるスタイル：さまざまなフィードバックを一度に紹介したいときに便利です。

このレッスンでは、まず1つ目の「Testimonial Stack」レイアウトを使って、シンプルなレイアウトに取り組んでいきます。

前回のレッスンでは、1件のお客様の声を紹介するシンプルな「お客様の声」セクションを作成しました。

今回は、さらに一歩進んで「動きのあるスライダー形式」の「お客様の声」セクションを作っていきます。複数のレビューを掲載したいときに最適なスタイルです。

まずは「Testimonial Slider Large」レイアウトをベースに、前回作成したシンプルなデザインを活かしながらカスタマイズしていきましょう。

このレッスンでは、ランディングページに「チーム紹介」セクションを追加します。チームメンバーを紹介することで、ブランドに人間味が加わり、訪問者との信頼関係を築きやすくなります。

今回は「Team Slider」レイアウトを使って、横スクロールで表示できるダイナミックなチーム紹介セクションを作成します。チームの人数が少ない場合でも、デザインのバランスが取れるように、調整方法もご紹介します。

Webflowのフォームについて詳しく学びたい方は、私たちのアカデミーで公開している「Webflowフォームコース」もぜひチェックしてみてください。

このレッスンでは、ランディングページに「ニュースレター登録」セクションを作成します。このセクションは、訪問者に購読してもらい、今後も継続してつながるための重要なパートです。そのため、見た目の魅力だけでなく、実際に使いやすく機能的であることが求められます。

今回は、複数のWebflowレイアウトを組み合わせてデザインを仕上げていきます。さらに、初めての「レスポンシブ対応」の調整にも取り組みながら、画面サイズに合わせて美しく表示されるように設定していきましょう。

このレッスンでは、ランディングページに「ナビゲーションバー（ナビバー）」を追加します。

「なぜ最後にナビバーを作るの？」と思うかもしれませんが、理由はシンプルです。

すべてのセクションが完成した今なら、それぞれのセクションにIDを割り当てることができ、それに合わせてナビバーのリンクを正確に設定できるからです。

このタイミングで作ることで、スムーズにページ内リンクを整えることができます。

このレッスンでは、ランディングページに「フッター」セクションを作成します。フッターは、どんなWebサイトでも欠かせない重要なパーツで、ナビゲーションの補足や、利用規約・プライバシーポリシーなどのリンク、さらにSNSやお問い合わせ情報など、訪問者とつながるための手段を提供する役割があります。

今回は「Footer Dark」レイアウトをベースに、Figmaのデザインに合わせてカスタマイズしていきます。

このレッスンでは、Webflowに搭載されているアニメーション機能を使って、ランディングページに動きを加えていきます。あらかじめ用意されたインタラクションを活用することで、ページに手軽にダイナミックさと魅力をプラスできます。

今回は、「scroll into view interactio」を使い、スライドしながらフェードインする動きを追加していきます。見た目に自然で、ユーザーの目を引く効果的なアニメーションです。

このレッスンでは、ランディングページを完成させるうえで重要な3つのポイントにフォーカスします：アクセシビリティ（誰でも使いやすい設計）、SEO（検索に強くする工夫）、ブランディング（デザインの統一感と印象づけ）です。

これらを整えることで、より多くの人に届き、使いやすく、印象に残るサイトに仕上がります。

また、このレッスンではWebflowのステージングドメイン（テスト環境）にサイトを公開する方法もご紹介します。

ついに最終レッスンまで到達しました！

これまで一緒に取り組んできた内容を振り返りながら、次に進むべきステップについても少し考えてみましょう。