コーポレートサイト制作

この動画では、Webflowを使用してコンポレートサイトを作成する方法を紹介します。Figmaでデザインされたものを基に、トップページ、サービスページ、ニュースページ、会社情報ページ、コンタクトページなど全7ページを作成します。デザインの統一感を持たせるため、スタイルガイドの作成から始め、各セクションの配置、CMSの追加、レスポンシブ対応まで詳細に解説します。また、アニメーションの追加方法についても説明します。この動画を通じて、Webflowを活用したウェブサイト制作の全プロセスを理解できます。

この動画は、ウェブサイト作成の講座の2つ目で、スタイルガイドの作成方法を説明しています。Figmaでデザインファイルを用意し、Webflowでプロジェクトを開始します。スタイルガイド用のページを作成し、セクションとコンテナを追加し、パディングを設定します。また、Noto Sans JPを使用してタイポグラフィを統一し、色の設定やフォントの調整、スタイルの統一方法を詳しく解説します。

‍

この動画ではヒーローセクションとabout usのレイアウトを作成します。セマンティックなHTML構造で作成し、より完成度の高いウェブサイトの作成手順になります。HTMLやCSSの基礎を学びながら、実際のサイトデザインの構築手順を理解できるようになっています。

今回の動画ではトップページのサービスセクションを作成していきます。背景色がついているセクションに対してコンボクラスを作成し、背景色の設定を行います。また、セクションヘディングをコンポーネントとし登録します。これを行うことで同じレイアウトを他のページでも便利に使用することができます。プロパティを作成し、内容を書き変えるれるようにします。

その後、3つのサービスのカードを作成します。

この動画では、ウェブサイトのニュースセクションの作成手順が説明されています。セクションのレイアウトやマージンの設定、コンポーネントの追加が行われ、特にレイアウトに関する内容が充実しています。また、ウェブデザインの作業プロセスについても解説され、スペースやレイアウトの設定、画像の配置、テキストの装飾などが詳細に説明されています。CMSのセットアップやデータの紐付けにも触れられています。

‍

この動画では、CMSのコレクションとニュースアイテムの作成について紹介しています。まず、ニュースのコレクションを作成し、投資情報を含む別のコレクションを設定します。次に、ニュースアイテムの作成手順が説明され、リンク、画像、日付、タイトルなどの情報を設定します。

このレッスンではナビゲーションバーを作成します。 Webflowの用意しているナビゲーションバーはレスポンシブ対応がが最初から設定されています。 ナビゲーションバーは少し特徴があり、カスタマイズする必要があります。

このレッスンではフッターを作成します。上の段には採用情報、お問い合わせのボタン、下の段にはページの情報、SNSのリンクを設置します。

このレッスンでは、これまでに作成したページをスマートフォンやタブレットでも綺麗に見れるように、レスポンシブ対応を行います。

この動画から、下層ページを作成していきます。前回作成したNavbarとFooterをコンポーネントとして登録し他の箇所でも繰り返し使用できるようにします。また今回作成するヘッダーレイアウトをもコンポーネント化します。これにより１箇所を変更するだけで全てに反映されるので、大規模サイトの管理が非常にスムーズになります。Webflowコンポーネントの使用は非常に重要ですので、是非ご覧ください。

今回はニュースページを作成します。ニュースが並ぶレイアウトはGridを使用し、効率的に作成していくことができます。

今回はニュースページを作成します。ニュースが並ぶレイアウトはGridを使用し、効率的に作成していくことができます。記事の表示数に制限をかけ、残りの記事はページネーションの次へボタンを押すことでページを捲る実装を行います。

今回はニュースの詳細ページのヘッダーレイアウトを作成します。今回からCMS Collectionページの作成になります。特徴としては、作成したレイアウトにデータが入ることで、同じ見た目だけど、内容が違う。といったブログやニュースのページの仕様になります。

SNSシェアURLのテンプレートはこちら：Facebook, X (Twitter), LinkedIn

それぞれのURLの最後の「＝」の後ろにシェアされるURLを追加してください。

今回のレッスンでは、ニュース記事の本文が表示されるレイアウトを作成します。本文はrichtextで表示をさせますが、見た目を整えるためにスタイリングを当てていきます。

今回は会社概要ページを作成します。特徴としては、テーブルのレイアウトがあります。Webflowではテーブルを作る機能はないので、カスタムエレメントを組み合わせて作成していきます。

今回はお問合せページを作成します。フォーム要素を設置して、項目を作成します。送信に成功したさいのレイアウト、失敗したさいのレイアウトも作成していきます。

今回はプライバシーポリシーページを作成します。会社概要ページを再利用し、カスタマイズして作成していきます。

今回はリンクの設定を行います。ページ内に遷移するリンク、外部サイトに遷移するリンクなど、さまざまなオプションを紹介します。

今回はアニメーションを作成していきます。webflowでアニメーションはinteractionと言い、mouse hoverのアニメーションを作成します。アニメーションはデバイスごとに切り替えることも可能です。

今回はページ設定を行います。ここからSEO、OGP設定などを行うことができます。ウェブサイトを公開する前に行う必要がある作業です。

今回は実際にホスティングプランを契約して、ドメインを接続します。独自ドメインを接続することでブランドとしての信頼性を出すことができます。ビジネスでウェブサイトを使用する場合は必ず必要な作業になります。

今回はサイト設定を行います。ファビコン、ウェブクリック、webflowバッジの表示/非表示、SEO設定、サイトマップの作成、Googleとの連携、フォーム設定など、ウェブサイトを公開前に必ず確認する作業になります。