コーポレートサイト制作

コーポレートサイトをFigmaで用意したデザインデータからWebflowで構築する方法を教える講座です。最初から最後までにサイト制作のプロセスが学べます。

受講することで得られること

  • Figmaのデザインデータの見方
  • デザインを参考した構築
  • レイアウトとスタイルの再利用(Class使用)
  • レスポンシブ対応
  • 複数ページのサイトの構築方法
  • コンポーネントの使用
  • コンポーネント内のカスタム属性「Class」の使用
  • カスタムエレメントを使用したTableの作成
  • ニュースのCMS設定
  • SNSシェア機能の実装
  • SEOを含むページの設定
  • カスタムドメインの接続

このコースで使用するツール

このコースのレッスン

  1. 1 アニメーションの追加
  2. 2 下層ページのヘッダー
  3. 3 会社概要ページ
  4. 4 ドメイン接続
  5. 5 リンクの接続
  6. 6 お問い合わせページ
  7. 7 フッターの作成
  8. 8 初めに
  9. 9 ヒーローセクション
  10. 10 ナビバーの作成
  11. 11 ニュースの本文セクション
  12. 12 ニュースのCMS
  13. 13 ニュースページ
  14. 14 ニュース個別ページのヘッダー
  15. 15 ニュースページのシェアボタン
  16. 16 ページ設定
  17. 17 プライバシーポリシー
  18. 18 SEO設定
  19. 19 サービスページ
  20. 20 スタイルガイド
  21. 21 トップページ:ニュース
  22. 22 トップページ:レスポンシブ対応
  23. 23 トップページ:サービス

事前に視聴しておきたいコース

こちらの講座ではFigmaで作られたコーポレートサイトのデザインデータを参考にしながらWebflowで実際にWebサイトを構築します。

[

Figmaデザインの全体像

](https://www.figma.com/file/GAqhV5zt2mrnl7mRMlusaY/company-page-design?type=design&node-id=0%3A1&mode=design&t=cOZN6JzFJEhU6LJC-1)

講座中に以下のステップでサイトを最初から最後までに作成します。

  1. デザインデータからサイトの全体像の理解
  2. 繰り返して使用されるスタイルの事前設定
  3. ページ構築
  4. データから画像データの書き出し
  5. コンポーネントの作成する
  6. レスポンシブ対応
  7. CMSデータの設
  8. アニメーションの追加
  9. ページ設定
  10. カスタムドメインの接続
  11. SEO設定