ページトップに戻る

Webflow / Webマーケティングの様々なTipsを掲載
Sitefun

Sitefunで投稿している全記事の一覧です。サイドバーから、お好きな記事を検索してご覧ください。

記事一覧

Webflow
【日本語版Webflow University】 動的コンテンツの概要

この投稿はWebflow社が提供する「Intro to dynamic content」の内容を元に作成しています。

引用元:https://university.webflow.com/lesson/intro-to-dynamic-content

Webサイトは大きく分けて2つのコンテンツで構成されていることが多いです。

それが「静的コンテンツ」と「動的コンテンツ」です。

この投稿では、以降のCMSに関する解説投稿の前に、「静的コンテンツ」と「動的コンテンツ」を整理し、それぞれについて簡単に解説します。

  • 「静的コンテンツ」:CMSに接続されていないコンテンツ/ページを指します
  • 「動的コンテンツ」:CMSに接続されているコンテンツ/ページを指します

レッスン概要

  1. 静的コンテンツ(Static content)
  2. 動的コンテンツ(Dynamic content)

静的コンテンツ

静的コンテンツは、掲載している情報やデザインなど一つひとつを直接作る(更新する)必要があるコンテンツを指します。

静的コンテンツを含む要素は、クラスを使って一度に複数の要素にスタイルを設定できますが、静的コンテンツ自体はパーツそれぞれ個々に管理しなければなりません。静的コンテンツは、404エラーページ、サイトのホームページ、パスワードページなど、独立したページでは有用です。

しかし、ブログ、デザインポートフォリオ、あるいは常に変化する同様のコンテンツを表示するサイト(例:ニュースサイト、メディアサイト)を作成する場合は、静的コンテンツはあまり実用的ではありません。

例えば、ブログの場合、ブログ記事のフォーマットは同じであることが多く、ブログ記事ごとにサイト上で作成・デザインしなければならないとしたら、かなり非効率的です。

このような場合、静的コンテンツを使用すると、大量のコンテンツを一つ複製し、修正する必要があります。そこで、この非効率性を回避するのが動的コンテンツです。

動的コンテンツ

動的コンテンツとは、Webflow CMS のデータと連動したコンテンツのことです。動的コンテンツを使用すると、サイトデザインが CMS データに接続されるため、複数のコンテンツ/ページを一度に更新することができます。

例えば、「ブログ記事」に掲載する情報のデータベースを用意し、この動的コレクションのテンプレートページに接続する場合、デザイナー画面内で テンプレートページを1か所修正すれば、各ブログ記事のデザインをまとめて更新することができます。

これは、同じようなコンテンツがいくつも表示されるサイト(例:ブログ、ニュースサイト、チームメイトの経歴など)にとって、非常に効率的な方法です。

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

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。

Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

Webflow
Webflow 基礎編
webflow
Webflow
【速報 / Webflow】 無料で制作パートナーを自社のアカウントに招待できるようになりました。

この投稿はWebflow社が提供する「Join your client’s Workspace for free as a guest」の内容を日本語に翻訳(一部加筆・修正)して作成しています。

引用元:https://webflow.com/feature/agency-or-freelancer-guest

2022年11月17日、Webflowは今まで以上に簡単に・手軽に、フリーランス及び制作会社がクライアントからWebflow構築を受託できるように、新しいユーザー権限をWebflowに追加しました。

2022年の9月に発表された、新しいFreelancer PlanとAgency Planは、Webflowに特化したフリーランスや制作会社に向けたサービスとなっています。このプランの特徴は、通常のクライアント向けの料金よりも安く、チームメンバーを増やしたり、ログイン認証やサイトの転送に際し追加で料金を発生させない設計になっていることです。

こうしたプラン設計からも分かる通り、Webflowはより多くの人たちにWebflowのプロフェッショナルが尽力できるように、サービスの改善を進めてきました。

今回の無料ゲスト権限(The Agency or Freelancer Guest role)は、こうしたWebflowの意志を強く反映させたものになっています。

クライアントがフリーランスや制作会社を無料でワークスペースに招待する方法

ワークスペースをご利用のお客様は、Webflowダッシュボードの「Member」タブから「Agency Plan」または「Freelancer Plan」のユーザーをゲストとして招待することができます。招待されたフリーランスや制作会社には、ゲストとして招待されたことがメールで通知され、無料でクライアントのワークスペースに参加することができます。

招待されたフリーランスや制作会社はクライアントのワークスペース内のすべての新規および既存のサイトプロジェクトにアクセスすることができますが、ワークスペースの機密設定にアクセスすることはできません。

一言メモ

この無料招待を受けられるのはWebflowのWorkspace Planの1種である「Agency Plan」または「Freelancer Plan」を契約しているフリーランスや制作会社のみです。ご注意ください。

この新しいロールは、フリーランサーや制作会社とそのクライアントとのコラボレーションをWebflowでより強力にするための一施策です。

また、後続の新施策として、ゲストに対して、閲覧可能なプロジェクトを細かく制限する機能の発表も控えています。

さらに使いやすくなった、今後も使いやすくなっていくWebflowを活用して、よりクリエイティブでインパクトのあるサイト制作を効率的に構築してみてください。

Webflow
webflow
Webflow Tips
Webflow
【Webflow Tips】 無料で制作パートナーを自社のアカウントに招待する方法

この投稿はWebflow社が提供する「Agency or Freelancer Guest role」の内容を日本語に翻訳(一部加筆・修正)して作成しています。

引用元:https://university.webflow.com/lesson/agency-or-freelancer-guest-role

この投稿では、2022年11月17日に発表された、Webflowの新ユーザー権限「Agency or Freelancer Guest role」の使い方について解説します。

この権限を使うことによって、Webflow領域のプロフェッショナルなフリーランスや制作会社を、自社の制作環境(Workspace)に無料で招待することができるようになります。

これによって、招待されたフリーランスや制作会社はクライアントのワークスペース内にあるサイトプロジェクトを全て閲覧・編集することができるようになります。一方で、機密情報(Settings内の情報など)にはアクセスできませんのでご安心ください。

一言メモ

Webflowは、サイトプロジェクトのゲスト閲覧権限を細かく制御できる新機能も追々発表すると予告しています。

レッスン概要

  1. 「Agency or Freelancer Guest role」のしくみ
  2. フリーランサー、制作会社向けガイド
  3. クライアント向けガイド

「Agency or Freelancer Guest role」のしくみ

「Agency or Freelancer Guest role」は、クライアントが自分のワークスペースにゲスト(フリーランスまたは制作会社)を無料で招待することができます。

ゲストは、ワークスペースに参加した後、ワークスペース内のすべての新規および既存のサイトプロジェクトにアクセスでき、各サイトのすべての編集権限を有します。

サイトの作成、複製、サイトプロジェクトの転送の受け入れ、テンプレートの購入も可能です。

ゲスト招待したフリーランスと制作会社は下記アクセス権限を有します。

  • ワークスペース内のすべてのフォルダとサイトプロジェクト
  • ワークスペース内の「Settings」の内「Integration」タブと「Template」タブ
  • エディター機能

下記アクセス権限は有しません。

  • ワークスペース内の「Settings」の内「Workspaces」「Members」「Plans」「Billing」「Partner Settings」

ゲストの役割と権限

Starter、Core、または Freelancer Workspace に招待されたゲストには、自動的にサイト管理者のロールが与えられます。

Growth、Agency、Enterprise ワークスペースを持つクライアントは、他のサイトレベルの役割と権限に基づいて、ゲストの権限をさらに制限または付与することができます。ゲストを招待した後、ゲストに次のサイトロールのいずれかを割り当てることができます。

  • サイト管理者
  • デザインおよび公開が可能 - 「Growth Workspace」のデフォルトのゲスト ロール
  • デザインのみ可能
  • デザインのみ可能(一部制限付き) - 「Enterprise Workspace」専用の権限

フリーランサー、制作会社向けガイド

「Agency or Freelancer Guest role」の対象になれるユーザーとは?

クライアントのワークスペースのゲストになるには、ワークスペースのアカウントを持っていて、次のいずれかである必要があります。

  • Freelancer Workspace Planのオーナー/管理者/メンバー
  • Agency Workspace Planのオーナー/管理者/メンバー
一言メモ

ゲストとして誰かのワークスペースに招待されたものの、まだAgency Workspace PlanもしくはFreelancer Workspace Planを契約していない場合、新しくAgency Workspace PlanもしくはFreelancer Workspace Planになることで、招待を問題なく受け取ることができます。

クライアントのワークスペースに招待される方法

先ずは、フリーランスもしくは制作会社からクライアントにクライアントガイドを送信しましょう。

※クライアント向けガイドについては後続で記述

そちらに掲載されている手順に従って、クライアントのワークスペースに招待できるようにしてもらいます。

クライアントが招待を送ってくれたら、フリーランスもしくは制作会社のメールにゲストのインビテーションが送られてきます。

メール内の青いボタン(Accept Invitation)をクリックして、招待を受け入れればOKです。

尚、招待を断りたい方は、メールを無視し、自分のWebflowアカウントにログイン後、ダッシュボードの通知から招待を断ることができます。

一言メモ

最大で100ワークスペースの招待を受け入れることができます。

また、

ゲスト招待を受け入れるには、Workspace Planのいずれかを契約している必要があります。Webflowの旧プラン(Account Plan)の有料をプランを契約中の方は 、Client Billingを削除しWorkspace Planに移行しましょう。

クライアントのワークスペースにアクセスする方法

クライアントのワークスペースには、ダッシュボードの「Workspace」ドロップダウンから選択できます。

ワークスペースのゲストとして、ワークスペース内のサイトプロジェクトとフォルダ、およびワークスペースの「Integration」タブと「Template」タブにアクセスできます。その他のワークスペースのSettingsにはアクセスできません。クライアントのワークスペースで作業しているとき、ダッシュボード ページに紫色の「ゲスト」フラグが表示されます。

Agency Workspace PlanもしくはFreelancer Workspace Planの管理

誰かのワークスペースに招待された場合、いくつかの注意点があります。

  • フリーランスまたは制作会社のゲストをある1つのワークスペースから削除すると、Agency Workspace PlanもしくはFreelancer Workspace Planを使用していない限り、招待されている他のすべてのワークスペースからも削除されます
  • ワークスペースのプランをキャンセルまたはダウングレードすると、一緒に招待されている他のメンバーにAgency Workspace PlanもしくはFreelancer Workspace Planを契約しているユーザーがいない限り、招待されたワークスペースから自動的にあなたが削除されます

クライアント向けガイド

クライアント側のWebflowユーザーは、ワークスペースのプラン(Starter、Agency、Freelancer Planを含む)をお持ちの場合、ゲストをワークスペースに招待することができます。ゲストをワークスペースに招待するのに追加費用はかかりません。

また、ゲストはワークスペースのシート数にカウントされません。

シート数は自分のアカウントも加算されます

Starter、Core、Growth、Freelancer、Agency Planでは、1 つのワークスペースに最大 5 人のゲストを招待できます。Enterprise Workspaceプランの場合(またはEnterprise Partnerの場合)、ゲストは最大20名まで可能です。ワークスペースのプランに関係なく、招待される側は最大100ワークスペースのメンバーになることができます。

ワークスペースにゲストを招待する方法

ワークスペースの所有者、管理者、およびメンバーは、ゲストをワークスペースに招待できます。また、ゲストをワークスペースから削除することもできます。

一方で、ゲストは自分が招待されたワークスペースに他のゲストを招待することはできません。

ワークスペースにゲストを招待する手順は以下の6つです。

  1. ダッシュボード右上の「Account」ドロップダウンをクリックします
  2. 「Workspace」をクリックします
  3. ゲストを追加するワークスペースを選択します
  4. 「Members」タブ > 「Agency or Freelancer Guests」の「Invite guest」ボタンをクリックします
  5. 表示されたポップアップの入力欄ににゲストのメールアドレスを追加します
  6. 「Invite」ボタンをクリックします

以上で、ゲストに招待メールが送信され、そのメールからゲストがワークスペースに参加することができます。

招待メールの再送方法

招待が保留になっている間は、招待を再送信することができます。

ゲスト招待を再送信する方法は以下の6ステップです。

  1. ダッシュボード右上の「Account」ドロップダウンをクリックします
  2. 「Workspace」をクリックします
  3. ゲストを招待したワークスペースを選択します
  4. 「Members」タブ > 「Agency or Freelancer Guests」を確認します
  5. 招待を再送信したいゲストの右側にある三点リーダーをクリックします
  6. 「Resend Invite」 をクリックします

招待を取り消すには、

上記手順の6番目で、「Cancel Invite」をクリックしてください。

ワークスペースからゲストを削除する方法

ワークスペースからゲストを削除すると、そのゲストはワークスペースに再度招待しない限り、ワークスペースとその中のサイトプロジェクトにアクセスできなくなります。

ゲストをワークスペースから削除する手順は次の7つです。

  1. ダッシュボード右上の「Account」ドロップダウンをクリックします
  2. 「Workspace」をクリックします
  3. ゲストを招待したワークスペースを選択します
  4. 「Members」タブ > 「Agency or Freelancer Guests」を確認します
  5. 削除したいゲストの右側にある三点リーダーをクリックします
  6. 「Remove from Workspace」をクリックします
  7. 「Remove」ボタンをクリックします

招待中、招待済みのゲストはいつでも「Members」タブ > 「Agency or Freelancer Guests」から確認できます。

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。

Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

Webflow
webflow
Webflow Tips
Webflow
【日本語版Webflow University】 トリガーとアニメーション

この投稿はWebflow社が提供する「Triggers and animations」の内容を元に作成しています。

引用元:https://university.webflow.com/lesson/triggers-and-animations

Webflowのインタラクション機能は、「トリガー」と「アニメーション」の2軸で制御し、様々な動きをサイトに持たせることができます。

デザイナー画面のインタラクションパネルから、トリガーとアニメーションを使った複雑なインタラクションを構築できます。要素をクリックしたり、ページをスクロールしたりするようなトリガーは、ページ上の一つまたは複数要素のアニメーションを開始または継続させることができます。

この投稿では、トリガーとアニメーションについて説明します。

トリガーの種類

インタラクションパネルのタブを開くと、主に2つのセクションに分かれていることが確認できます。

要素トリガーを実装する入口と(On Selected Element)とページトリガー(On Current Page)を実装する入口です。

それぞれのトリガーについて解説していきます。

要素トリガー

インタラクションパネルの上部「On Selected Element」からは、要素トリガーが追加できます。

これによって、クリックやスクロールといった特定の動作によってアニメーションを起動させる「トリガー」をじっそすることができます。

トリガーの追加方法は次の2ステップです。

  1. トリガーとなる要素(セクション、ボタン、divブロックなど)を選択します。
  2. インタラクションパネルの「Element trigger」の右にあるプラスマークを押して、トリガの種類を選択します。

要素トリガーの種類は次の通りです。

  • マウスクリック/タップ時(Mouse click (tap))
  • マウスホバー時(Mouse hover)
  • マウスオーバー中(Mouse move over element)
  • 画面スクロール時(Scroll into view)
  • 画面スクロール中(While scrolling in view)

コンポーネントトリガー

要素トリガーの1種で、あるコンポーネントでのみ使用できる要素トリガーのことです。

ナビゲーションバー、ドロップダウン、タブ、スライダーなどの要素を選択した際に、選択可能になります。

  • Navbar opens - ナビゲーションバー要素を選択した際に使用可能になります。
  • Dropdown opens - ドロップダウン要素を選択した際に使用可能になります。
  • Tab change - タブ要素の「Tab Link」要素を選択した際に使用可能になります。
  • Slider change - スライダーコンポーネント内のマスク要素の内にあるスライド要素をクリックすると使用可能になります。

ページトリガー

インタラクションパネルの下段には、ページトリガーを追加する入口があります。

ページトリガーを追加すると、ページがロードされたときなど、ページの状態が変化したときにアニメーションを起動させることができます。

要素トリガーとは異なり、ページトリガーの追加には、1つのステップしかありません。

「On Current Page」の右にあるプラスマークを押して、ページトリガーの種類を選ぶだけです。

ページトリガーの種類は次の通りです。

  • マウスが画面内で移動している時
  • ページがスクロールしている間
  • ページロード時
  • ページがスクロールされた時

トリガーの設定方法

上記で追加するトリガーの種類を選択した後は、そのトリガーによってどんな動きを引き起こすか選択できます。

選択肢は使用するトリガーの種類によって異なります。

トリガーの適用先の設定

デフォルトではすべてのデバイスでトリガーが起動する様になっていますが、デバイスごとにトリガーを起動させるかどうかを指定することができます。

特定のブレイクポイントでアニメーションを起動する方法

特定のデバイスでトリガーを起動させたくない場合は、該当するデバイスのチェックボックスからチェックマークを外してください。

同じクラスの要素に対してアニメーションを起動する方法

同じクラスを持つ全ての要素でトリガーを起動させたい場合、まず1つの要素にトリガーを適用し、その後同じクラスに適用されるように設定します。

トリガー設定(Trigger Settings)で「Element」から「Class」に選択を切り替えることで、選択した要素と同じクラスを持つすべての要素にトリガーが適用されます。

アニメーションの設定方法

「Action」から実装したいアニメーションの種類を選択します。

また、すでに設定したアニメーションを選択することもできます。

アニメーションタイムラインについて

新しくアニメーションを実装する場合でも、既存のアニメーションを編集する場合でも、キーフレームを指定するためにWebflowではタイムライン画面が用意されています。

例えば、ページのスクロール時に女性の画像が徐々に透明になりながら、右にスライドしていくアニメーションを実装するとします。

タイムラインでは、ミリ秒や秒を使って時間指定のアニメーションを組むことも、パーセントを使ってスクロールに対応したアニメーションを組むこともできます。

パーセントはアニメーションを適用した要素が0%の時に最下部、100%の時に最上部にスクロールしていることを表します。

さらに、Moveで横位置を、Opacityで不当明度を制御しています。

例では、要素が画面の縦位置50%まで初期位置に居て、尚且つ不当明度100%を指定しています。

これが、80%まで要素の縦位置が移動した際に、右に500px移動し、不当明度0%となるように設定しています。

下記画像の様に、タイムライン上にマウスカーソルを充てると、プラスマークが表示されます。任意の箇所でクリックして、実装したい動き(Action)を選択すれば、任意のタイミングで任意の動きを追加できます。

動きの適用先

デフォルトでは、選択した要素に対して、動きが設定されるようになっています。

しかし、この設定先を変更することもできます。

  • 動き(Action)が影響する要素を置き換える
  • 選択した要素にのみ作用するか、同じクラスを持つすべての要素に作用するか、インタラクション・トリガー自体に作用するかを選択する

要素の置き換え

「Action」が影響を与える要素を置き換えるには、アニメーションタイムラインで「Action」を右クリックし、ターゲット変更を選択し、メインキャンバス上の別の要素を選択します。

一言メモ

アニメーションタイムラインの設定を変更すると、このアニメーションを適用しているすべての要素のアニメーションが変更されることに注意してください。

要素そのもの、要素のクラス、インタラクショントリガーに設定先を切り替える

「Action」を作成した後の、そのアクションをどれに作用させるか選択できます。

  • 選択された要素のみ(Selected Element)
  • 選択された要素と同じクラスを持つすべての要素(Class)
  • インタラクショントリガー自体(Interaction Trigger)

選択した要素を設定先にする

作成するActionは基本的に、選択した要素に設定されています。

選択された要素に作用するように設定されたアクションは、常にその要素に作用します。したがって、選択した要素に作用するアクションを持つアニメーションを再利用する場合、どの要素にインタラクショントリガーを付けても、そのアクションはこの特定の要素に影響します。

選択したクラスを設定先にする

選択した要素のクラスを設定先することができます。このオプションは、特定のアニメーションのアクションが、選択された要素と同じクラスを持つすべての要素に作用する様になります。

また、作用する要素をインタラクション・トリガーの子、兄弟、親要素に限定することもできます。

一言メモ

クラスが適用されていない要素を選択してアニメーションを実装している場合、クラスの選択肢が出ませんのでご注意ください。

ページ上のすべての要素を同じクラスで設定先にする方法

例えば、ページが読み込まれたときに、いくつかの要素を同じパターンで動かしたい場合を考えてみましょう。

これらの要素には、すべて同じクラスを割り当てることができます。そして、コンボクラスを使って、それぞれの要素の初期位置を変更します。こうすることで、ベースクラスに対して同じアクションを適用し、各要素を異なる位置から同じパターンで動かすことができるようになります。

子、兄弟、親要素に限定するときの使い方

トリガー要素の子、兄弟、親要素のいずれかを指定することで、アクションによって影響されるクラスを制限することができます。

例えばボタン。クラスターゲットを使って、ボタンにカーソルを置いたときに、すべてのボタンの矢印をアニメーション化することができます。しかし、1つのボタンにカーソルを合わせると、そのページ上のすべてのボタン内の矢印が一斉に動いてしまいます。マウスを置いたボタンに限定して動作させるには、「affect」メニューで「only children with this class(このクラスの子要素に限定する)」オプションを選択してください。

アニメ―ションさせたい要素が、メニューのドロップダウンやポップアップモーダルなどのトリガー要素の兄弟である場合、同じように 「only siblings with this class(このクラスの兄弟要素に限定する)」 オプションで対応出来ます。同様に、アニメーションさせたい要素がトリガー要素の親であるとき、このクラスオプションで 「only parents(親要素に限定する)」 を使うことができます。

インタラクションのトリガーを設定先にするときの使い方

「Interaction Trigger」を選択すると、インタラクションのトリガー要素のみに影響を与えるアクションを作成することができます。このアニメーションを他のインタラクションで再利用すると、アクションの要素(ターゲット)が新しいインタラクションのトリガー要素に置き換わります。これにより、新たにアニメーションを作成することなく、任意の要素に同じアニメーションを素早く適用することができます。

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。

Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

Webflow
Webflow 基礎編
webflow
Webflow
【日本語版Webflow University】 インタラクションの概要

この投稿はWebflow社が提供する「Intro to Interactions」の内容を元に作成しています。

引用元:https://university.webflow.com/lesson/intro-to-interactions

Webflowのインタラクション機能を活用して、ノーコードでダイナミックなデザインや、UXに優れたサイト構築を行うための、概要を解説します。

通常、JavaScriptやCSSを用いたコーディング作業が必要であり、学習コストの高いインタラクションの実装も、Webflowであればノーコードで視覚的に実装することが可能です。

インタラクションはサイトを閲覧するユーザーの使い勝手を向上させるために非常に有効な手段です。

正確な操作を誘導し、スクロールやページ遷移など次のアクションを予想させ、サイトの離脱を防ぐなど、その役割は多岐にわたります。

また、企業やプロダクトのブランディングも図れることから、現代のWebサイトにとって実装必須となる手法です。

従来、インタラクションを実装するには特殊なJavaScriptライブラリで構築されることが多く、

これらのリソースは非常に特殊な JavaScript ライブラリで構築されることが多く、扱いの難しいプラグインを必要とするため、インタラクションの実装スキルの学習コストは非常に高いものになっていました。

しかし、Webflow では、インタラクションを視覚的に構築する(まるでpptのアニメーションの様に)だけでなく、コンテンツを非常に細かく制御するために必要なすべての機能が備わっています。

一言メモ

他のノーコードツールと異なる点は「Webflowではインタラクションを自作できる」ということです。通常のノーコードツールでは、標準機能で定められたインタラクションを個々に設置していくイメージですが、Webflowはあらゆる動きを複雑に組み合わせ、タイミングや時間の長さなど細かく数値で制御できるため、Webデザイナーの意図するインタラクションを実装することができます。

Webflowで実装できるインタラクションの概要

Webflowはトリガーとアニメーションの2つのステップで様々なインタラクションを実装出来ます。

トリガーとは、「クリック」「スクロール」「マウスホバー」「マウス操作」「ページロード」などアニメーションを起動させるきっかけとなるユーザーアクションを指し、アニメーションとはトリガーによって起動されるインタラクティブなサイトの動き自体を指します。

アニメーションは次のような動きをWebサイトの要素単位で設定することができます。

<単純動作>

  • フェード
  • スライド
  • フリップ
  • グロー
  • シュリンク
  • スピン
  • フライ
  • ドロップ

<強調動作>

  • ポップ
  • ジグル
  • パルス
  • ブリンク
  • バウンス
  • フリップ
  • ラバーバンド
  • ジェロ
一言メモ

当社ではアニメーションのニーズをお伺いする際に、下記サイトで挙動についての打ち合わせを行っています。

動くWebデザインアイデア帳

一般的なノーコードツールとは違い、仕様に制限される範囲が狭いため、こうした自由なご提案・検討ができるのも、Webflowのインタラクションの強みです。

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。

Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

Webflow
Webflow 基礎編
webflow
Webデザイン・開発
【Webデザイン・開発】 ボックスモデルの解説と、 要素間スペーシングのしくみ

Webデザインでは特にスペーシングを理解することが重要です。

この投稿では、Webにおける要素のスペーシングの仕組みを学べます。Webデザインの仕組みを理解しようとするデザイナーにとって、有益になるようにスペーシングの基本的な事項について事例を交えてご説明します。

ボックスモデルとは、ページ上のすべての要素の構造、レイアウト、および寸法を決定するものです。Webflowはコーディングのベストプラクティスに基づいて構築されているため、HTMLやCSSを完全にマスターする必要は無く、ボックスモデルを理解すれば Webflowを上手く使いこなすことが可能になります。

webflowのサイトがより良く構造化されることで、webflowのコードもより良く構造化されます。
その理由は、モバイルデバイスの画面サイズに対応するさまざまな「ブレイクポイント」において、より自然に各要素が再配置するようになっているからです。

Webflowについてはこちらをご覧ください

しかし、Webflow云々の前に、デザイナーであるならば(目指すならば)、自分の技術を正しく理解する必要があります。

Webflowを使用していないデザイナーも、ボックスモデルについて学ぶことで多くのメリットを得ることができます。これは、HTMLやCSSを学ぶための基礎となる概念です。この記事では、以上の理由から、この記事では、ボックスモデルについて焦点をあて、わかりやすく説明し、デザイナーとしての力を身に付けていただけるようにいたします。

ボックスモデル

では、"ボックスモデル"とは一体何なのでしょうか?
要するに、ボックスモデルとは、Webページ構造がすべて一連のボックスで構成されているということにつきます。

HTMLとCSSの仕様を管理する W3C標準化団体による公式の定義を以下に示します。

CSS のボックスモデルとは、ドキュメント ツリー内の要素に対して生成され、ビジュアルフォーマットモデルに従ってレイアウトされる矩形(くけい)のボックスのことを指します。

分かりやすく言うと、ボックスモデルとは次の3つの要素に分解できます。

・ウェブページの各要素(ドキュメントツリー)は、長方形の箱である

・これらの長方形のボックスは、高さと幅が同じである

・これらのボックスがウェブページ上でどのように隣り合って配置されるかを規定するルール(ビジュアルフォーマッティングモデル)がある

例えば、ホームページのナビゲーションバーもボックスです。
ナビゲーションバー内の個々のリンクはも、親ボックス(ナビゲーション要素)の中に存在するボックスです。
ヘッダーのヒーロー画像もボックスです。
画像の下にあるキャプションも、ボックスの角・枠が表示されずに、ボックスのコンテンツ(テキスト)だけが表示されているボックスです。キャプションの隣に別の要素を配置し、それぞれの要素の背景色を別々に設定すると、これらの要素が目には見えないボックスで定義されていることがわかります。

ボックスモデルの領域

各ボックスは、4つの領域が重なって構成されています。以下に、一番内側の領域から一番外側の領域へと記します。


コンテンツ領域:単語や画像、親要素の中に含まれる子要素など、要素を構成するコンテンツが自然に占める領域のことを指します。コンテンツ領域は要素のメイン部分です。

パディング領域:すべてのボックスは、任意にコンテンツ領域を囲むパディングを持つことができます。このパディングによって、コンテンツ領域とボックスの見えない境界との間に距離が生じ、要素の形状が決定されます。たとえば、要素の背景色をベタ塗りし、要素のパディングを増やした場合、コンテンツ領域の端に色付きのスペースが多く表示されます。

ボーダー領域:ボックスを囲む境界線のサイズです。ボタンに太い枠線があることがありますが、あの枠線は、要素のボーダー領域です。つまり、ボーダーは、それ自体がコンテンツのコアとなる領域を占め、ボーダーによって要素全体の大きさが拡張されるのです。

マージン部分:ボックスの外側にある目には見えない余白のことで、隣接する要素との距離を調整するものです。マージンは、要素とその周囲との間のスペースを決定するため、要素を互いに押し退ける役割を担っているイメージです。例えば、下部のマージンが20pxの要素は、その下の要素から20pxの間隔を空けることになります。マイナス値でマージンを指定することもでき、これによって周囲の要素を被せることができます。

上図の入れ子になっている一連のボックスは、Webページで見られる通常のボタン要素のようなものだと想像してください。

また、パディング領域がまだ要素内にあることに注意してください。要素の背景はパディングエリアを含むように拡張されます。一方、ボーダーエリアとマージンエリアは、背景色が定義された時点以降に拡張

ディスプレイ

ボックス自体の領域だけでなく、各要素(ボックス)とその周辺の要素との関連性を表示する方法も知っておく必要があります。CSS を使用して要素のディスプレイを設定する方法はWebflowを例に挙げると次の4つです。

block、inline-block、inline、none

以下はその例です。

block:ディスプレイが block の要素は、配置された行の利用可能な幅をすべて使用する様に広がります。つまり、ディスプレイが block の要素が占める領域は、親要素の100%となります。

inline:その要素はコンテンツ領域、パディング領域、ボーダー領域が必要とする分だけスペースを自動的に取ります。

Inline-block:上記と同じですが、要素に任意のボックス領域の値を与えることができるようになる点で異なります。これは通常のインラインでは制御できません。これによって任意でボックスにパディングとマージンを定義できます。

none:この要素は表示されず、どのような寸法に設定されているかにかかわらず、ページ上でスペースを取りません。これは、事実上、ページのコードに存在するにもかかわらず、ページから要素を(視覚的に)削除していることになります。

幅と高さ

Web用の要素のサイズは、PhotoshopやIllustratorなどの静的なデザイン環境での要素のサイズ調整とは異なります。Webページ上の要素は、ユーザーのブラウザウィンドウのサイズによって寸法が異なるだけでなく、ある要素の位置が、実際に近くの要素の位置に影響を与えることがあるのです。この概念をもう少し掘り下げてみましょう。

Web上では、要素の寸法は親要素からの相対寸法か、それとは逆の絶対寸法のどちらかに分類することができます。

相対値によるサイズ設定は例えば、幅が50%の要素は、親要素の幅の50%を使用します。親の幅が変更されると、子要素の幅も自動的に変更されます。

絶対値によるサイズ設定(例:ピクセル値)は、親の幅に基づくものではなく、完全に静的なものです。たとえ親要素の寸法が変わっても、ブラウザのウィンドウサイズが変わっても、決して変更されることはありません。

また、この2種類のサイズに制約を設定することも可能です。これを行うには、要素の幅や高さの最小値と最大値を指定します。これは、要素が高すぎたり広すぎたりしないようにする方法として、相対寸法と組み合わせるのが最も一般的です。

たとえば、ボックスのサイズを親のサイズの50%と指定しつつ、横幅の最大値を500pxに指定したとします。このボックスは親要素が広がると原則親要素の50%の幅になるように広がりますが、ボックスの横幅が500pxを超えるとそれ以上拡大しなくなります。最小値はその逆で、最小値500pxだと、ボックスの横幅が500pxよりも小さくならないようになります。

要素の幅や高さの値を設定しない場合、その値は要素内のコンテンツ(コンテンツ領域)を基に自動的に拡大・縮小されます。

コードで見るボックスモデル

CSS は、Web ページ要素のボックスモデルプロパティを定義するための言語です。これまで説明してきたことは、すべてCSSで定義されています。実際の要素そのものはHTMLで定義しますが、それはまた別の記事で紹介します。

前述したように、最も一般的な表示プロパティは、以下の4つです。

具体的にコードでどのように高さと幅を指定しているのかについて下記に例を挙げます。

まとめ

ボックスモデルをより深く理解することで、ブラウザ上でも、選択したWebモックアップツール(Photoshop、Illustrator、Webflowなど)でも、Webが実際にどのように機能するかを理解した上でデザインを行うことができ、デザインスキルを向上させることができます。

この技術がものにできればできる程、あなたのデザインを、最終的に顧客が目にする実際の制作物(Webサイトなど)に転換する際に、妥協する必要がなくなります

当社では、Webデザイナーの方が意のままにサイト構築できる、次世代型ノーコードツール「Webflow」の無料説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。

Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

Webデザイン・開発
UXデザイン
Webデザイナー
About Blog Owner

堀尾 尭史(ほりお たかふみ)
Webflowによるサイト制作受注業を日本で初めて公に事業化した『Funwork株式会社』代表。
WebflowとWebマーケティングとの相性の良さから、中小企業向けにわかりやすいWebマーケティングサービスを展開。
「敷居は低く、自由度は高く」がモットー。

Samui

Webサイト制作 × webマーケティング支援はFunworkへ
お気軽にご相談ください!

Information

会社名

Funwork株式会社

所在地

東京都千代田区東神田3-4-12

代表者

堀尾 尭史

電話番号

URL

03-5809-2979

設立日

2020年5月18日

資本金

9,000,000円

取引銀行

きらぼし銀行

事業内容

  • Webサイト、ITサービス受託開発

  • マーケティングコンサル事業

  • シェアオフィス及びコワーキングスペースの運営

  • 大学生に向けた就職活動に関する教育サービス業

  • 就職活動に関するコンサルティング事業

制作のご相談、ご依頼はこちらから