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

webflowはノーコードツールとして有名ですが、開発者向けにAPIも公開されています。

WebflowAPIs

今回はwebflowAPIを使って、webflowでサイトをパブリッシュした際にChatworkに通知させるようにしたいと思います。

APIの実行環境はGAS(Google App Script)を使用します。

Apps Script

設定は以下の流れで行います。

1. ChatworkのAPIトークンとルームIDを取得
2. GASの設定、デプロイ
3. webflowでwebhookのURLを設定

1. ChatworkのAPIトークンとルームIDを取得

まずは、下記の公式の手順に沿ってAPIトークンを取得します。

APIトークンを発行する

次に下記の公式の手順に沿ってルームIDの取得をします。

ルームIDを確認する

APIトークンとルームIDは以降の手順で使うので、どこかに書き留めておいてください。

2. GASの設定、デプロイ

以下の流れでGASの設定を行っていきます。

1. プロジェクトの作成
2. コード貼り付け
3. スクリプトプロパティの設定
4. デプロイ

1. プロジェクトの作成

以下のリンクにアクセスして新しいプロジェクトを作成をクリックします。

Apps Script

2. コード貼り付け

コードの編集画面で下記のコードを貼り付けます。

最初からあるmyFunction()は不要なため削除してください。

const CHATWORK_BASE_ENDPOINT = 'https://api.chatwork.com/v2/rooms/';

function doPost(e) {
    try {
        // payloadの取得とバリデーション
        const payload = getValidatedPayload(e);
        const domains = formatDomains(payload.payload.domains);
        const displayName = payload.payload.publishedBy.displayName;
        
        // メッセージの送信
        sendNotificationToChatwork(domains, displayName);
    } catch (error) {
        Logger.log(error.message);
    }
}

function getValidatedPayload(e) {
    const payload = JSON.parse(e.postData.contents);
    if (!payload || !payload.payload || !payload.payload.domains || !payload.payload.publishedBy || !payload.payload.publishedBy.displayName) {
        throw new Error("Invalid payload format");
    }
    return payload;
}

function formatDomains(domains) {
    return domains.join('\n');
}

function sendNotificationToChatwork(domains, displayName) {
    const chatworkToken = PropertiesService.getScriptProperties().getProperty('CHATWORK_TOKEN');
    const chatworkRoomId = PropertiesService.getScriptProperties().getProperty('CHATWORK_ROOM_ID');
    
    if (!chatworkToken || !chatworkRoomId) {
        throw new Error("Chatwork token or room ID not found");
    }
    
    const endpoint = `${CHATWORK_BASE_ENDPOINT}${chatworkRoomId}/messages`;
    const message = `Webflowでサイトがパブリッシュされました！\nPublished by: ${displayName}\n${domains}`;
    
    const options = {
        'method': 'post',
        'headers': {
            'X-ChatWorkToken': chatworkToken
        },
        'payload': {
            'body': message
        }
    };

    const response = UrlFetchApp.fetch(endpoint, options);
    if (response.getResponseCode() !== 200) {
        throw new Error("Failed to send message to Chatwork");
    }
}

‍

保存ボタンをクリックしてプロジェクトを保存します。

3. スクリプトプロパティの設定

APIトークンとルームIDはスクリプトに入力するようにしました。

プロジェクトの設定をクリックします。

スクリプトプロパティを作成をクリックします。

下記のように設定します。

‍

4. デプロイ

右上のデプロイ→新しいデプロイをクリックします。

種類はウェブアプリを選択します。

アクセスできるユーザーは全員にし、デプロイします。

デプロイが完了すると、ウェブアプリURLが表示されるので、書き留めておいてください。

これでGASの設定は完了です。

3. webflowでwebhookのURLを設定

最後にwebflowでwebhookの設定をして完了となります。

パブリッシュを通知させたいwebflowプロジェクトの設定を開きます。

App & Integrationsをクリックします。

Webhook設定のAdd webhookをクリックします。

下記のように設定し、Add webhookをクリックします。

これでパブリッシュをするとChatworkに通知されるようになりました。

実際に通知させてみる

設定が完了したので実際にパブリッシュしてチャットワークに通知させてみます。

パブリッシュさせるドメインを選択してパブリッシュします。

するとチャットワークに無事通知されました！

まとめ

webflowでサイトをパブリッシュした際にChatworkに通知させる手順でした。
webflowAPIを試しに使ってみるという趣旨で書き始めたのですが、思ったより実用的なものができたと思います。

実際に運用しているサイトに導入することで、誤ってパブリッシュしてしまったことに気づきやすくなると思います。
誤ってパブリッシュしてしまったことに気づければ、webflowは自動バックアップがされているのですぐに切り戻しして、被害を最小限にすることができます。

‍

‍

Webflowでブログやお知らせを投稿する場合は、CMSのリッチテキストを利用しますが、このリッチテキストには少し癖があります。

1. 日本語入力の挙動が安定しない
2. ソースコードをきれいに表示させる機能がない
3. テーブル要素がない

今回はこれらの問題を解消する方法をまとめました。

日本語入力の挙動が安定しない

Webflowのリッチテキストは日本語入力の挙動が安定しません。そのため、Google Docs(ドキュメント)をエディタとして使い、完成後にWebflowのリッチテキストにコピペするのがおすすめです。

Google Docs

Google Docsをおすすめする理由は、

1. リッチテキストで使える要素が使える（画像、箇条書き、リンク、タイトル、太字など）
2. 1.の要素をそのままコピペできる
3. 誤字脱字やスペルをチェックしてくれる
4. 無料で使える

その他おすすめのサービスがあれば教えてください。

ソースコードをきれいに表示させる機能がない

Webflowには、ソースコードをきれいに表示させる機能が標準ではありません。そのため、Prism.jsというシンタックスハイライトライブラリを使用します。

Prism.js

Prism.jsがおすすめな理由としては、

1. 軽量
2. 表示がきれい

個人的には軽量というのが一番の選定理由かなと思います。

今回はカスタマイズの方法については割愛します。カスタマイズの方法は以下の記事が参考になると思います。

Prism.js 使ってみた

Prism.jsの使い方！シンタックスハイライトにおすすめ

導入方法

Prism.jsの導入方法は、プロジェクト設定のHead codeとFooter codeにコードを追加するだけです。

以下のコードを、プロジェクトの設定画面のHead codeに追加します。

以下のコードを、プロジェクトの設定画面のFooter codeに追加します。

使い方

HTML/CSS等のマークアップを追加する場合を例に使い方を説明します。

リッチテキストのカスタムコードを使用します。

以下のコードをカスタムコードに貼り付け、<!-- -->の中にHTML/CSS/Javascriptのコードを記載します。

<pre class="line-numbers"><code class="language-markup"><!--ここにソースコードを貼り付ける--></code></pre>

Save & Closeをクリックすると、以下の表示になります。

残念ながらWebflowで、サイトを公開しないとカスタムコードの表示を確認することはできません。

なお、HTML/CSS/Javascript以外のコードを書く場合、code要素のclass名を変更する必要があります。

language-以降を言語名に変える必要があります。

テーブル要素がない

Webflowにはテーブル要素が標準で備わっていないので、カスタムコードを使って実装する必要があります。

導入方法

プロジェクト設定のHead codeにCSSを追加することで、テーブル要素のdesignを行います。

本サイトの場合は以下のようにCSSを追加しています。

インターネットで検索すれば、コピペOKのデザインがいろいろあるので、自分のサイトに合うデザインを見つけられると思います。

コピペで使えるテーブル（表）のCSSデザイン＆サンプルコード17選

使い方

リッチテキストのカスタムコードを使用します。

htmlのtable要素を追加します。

テーブル要素の使い方は色んな方がわかりやすく解説しているのでそちらを参考にしてください。

HTML tableタグの使い方・テーブル 表の作り方

表（テーブル）を表す要素

また、Table Tag Generatorは、視覚的にテーブル要素を作成できるので便利です。

Table Tag Generator | HTMLの表を簡単に作成・結合ツール

Save & Closeをクリックすると、以下の表示になります。

繰り返しになってしまいますが、Webflowでは、サイトを公開しないとカスタムコードの表示を確認することはできません。

テーブルがちゃんと表示されるか不安な方は、HTMLをCodePenに貼り付けて確認できますので、活用してみてください。

CodePen

まとめ

Webflowでのブログ投稿は少し工夫が必要なのでまとめてみました。
もっと良い投稿方法があれば教えてください。

Webflowが早く日本語対応されることを願ってます。。

‍

WebflowのCMS機能は簡単で柔軟に使えるのですが、制限事項がいくつかあるため注意が必要です。
この記事では、WebflowのCMSの制限事項とその対処方法についてまとめました。

WebflowのCMSの概要については、Webflow CMSの概要をご参照ください。

WebflowのCMSの制限事項

WebflowのCMSの制限事項は以下の4つです。

• 1ページに置けるコレクションリストは20まで
• 一度に一覧表示できるコレクションアイテムは100まで
• ネストしたコレクションリストは1ページに1つまで
• ネストしたコレクションリスト内のコレクションアイテムの表示は5まで

公式ドキュメント：Dynamic content limitations

1ページに置けるコレクションリストは20まで

1ページにつき、コレクションリストは20個までしか使用できません。

21個目を配置しようとすると以下のエラーとなります。

1ページに20以上のコレクションリストを使用することはほとんどないと思うので、あまり気にしなくてもよいかもしれません。

一度に一覧表示できるコレクションアイテムは100まで

一度に一覧表示できるコレクションアイテム数は100までです。

一度に101件以上表示させたい場合はあまりないと思うので、こちらもあまり気にしなくてよいかもしれません。
一度に表示する件数(Show)は、20件程度にしてページネーションを設定するパターンが多いと思います。

ネストしたコレクションリストは1ページに1つまで

ネストが分かりづらいと思うので例を挙げて解説します。

まず、投稿(Blog Post)コレクションと著者(Authors)コレクションを作成します。

投稿コレクションのフィールドにマルチリファレンスで著者コレクションを追加します。
これにより投稿するときに著者を選択することができます。

投稿コレクションを配置し、その中に著者コレクションを配置します。

このように投稿コレクションと著者コレクションが入れ子（ネスト）となっているため、ネストしたコレクションリストと呼びます。

ネストしたコレクションリストは1ページにつき1つまでのため、複製しようとすると以下のエラーが出ます。

CMSをがっつり使用したサイトを作成しようと思うと、この制限に引っかかることが結構あるので、設計時には注意が必要です。

ネストしたコレクションリストのコレクションアイテムは5まで

表現が少しややこしいですが、先ほどの投稿コレクションと著者コレクションの例で解説すると、
投稿内で著者を6人以上登録すると、6人目以降の著者は画面に表示されません。

実際に確認していきます。
まずは、投稿内で著者を10人登録します。

画面で確認すると著者は5人しか表示されていません。

個人的にこの制限が一番衝撃的でした。

6人以上登録はできてしまうので、知らないとかなり危ない制限だと思います。

‍

webflow標準のスライダーは簡単に使用できて便利ですが、細かいカスタマイズをしようと思うと面倒な仕様があるなと思ったのでまとめてみました。

スライダーの構成や基本的な使い方についてはスライダーをご参照ください。

webflowスライダーの仕様

webflowスライダーのDesigner画面から変更できない仕様を表にまとめました。

工夫することで変更できる仕様

上記表の中で丸がついているものは、ちょっと工夫することで変更できる仕様です。

ホバーしている間自動スクロールが止まる

ホバーしていると自動スクロールが止まってしまうため、透明な要素を上にかぶせることでホバーしていないようにさせます。

スライダーをwrapperで囲い、wrapperのpossitionをrerativeにする。そしてその中にスライダーの兄弟要素としてmaskを作成する。

 maskのcssを以下の通りにする。また、sliderの点々もcssを変更する。

なお、タブレット表示やスマホ表示のときはmaskのdisplayをnoneにしないとフリックで画像を変更できなくなる。

スライダーのドットの色の変更

webflowではなぜかドットの色の変更はDesigner画面から変更することができません。
カスタムコードで!importantを指定することで強制的にCSSを上書きします。

以下のコードをプロジェクトのHead Codeに記載してください。

そのほかカスタムコードで使用したスライダーのデザイン変更すはスライダー「高度なカスタマイズ」をご参照ください。

CMSコンテンツをスライダーに出力すると空白のスライダーが作成される

スライダーにCMSを突っ込んで表示 / 非表示を制御すると、表示されているスライドに
プラスで空白のスライダーが表示されてしまう。この現象を回避するには以下コードをプロジェクトの footer code に記入してください。

クローン可能なスライダー

いろいろと工夫してもwebflowのスライダーではデザイン要件を満たせない場合も結構あると思います。
その場合はwebflowユーザが作成したスライダーを活用する方法もあります。‍

クローン可能なスライダーからwebflowプロジェクトをクローンすることができます。
カスタマイズするにはプログラミングの知識が必要ですが、webflow標準のスライダーよりも柔軟にカスタマイズすることができます。

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

引用元：https://university.webflow.com/lesson/html-structure

‍

適切なコードを自動で生成してくれるWebflow

‍

既にご存知の通り、HTMLはウェブ上で最も重要な基盤の1つです。

そしてウェブページを見るとき、ほとんどの場合、そのページのコンテンツと設定はHTMLに含まれています。

そして、私たちのHTMLには2つの主要な構造的要素があります。

1つは本文（body）で、コンテンツを含み、もう1つはヘッド（head）で、ページの設定を含んでいます。

本文には見出し（heading)などのコンテンツを保存できます。見出し（heading)内に入れたものはすべて見出しになります。同様に、段落(paragraph)を追加すると段落になります。画像も同じです。

画像を本文に追加すると、ブラウザによってレンダリングされます。

ここで重要なのは、普通であれば見出しには見出しのタグ、段落には段落のタグなど適切なタグを自分でコーディングしなければなりませんが、Webflow ではこれらのタグとコードは、自動的に生成されます！

次に、ヘッドについて話しましょう。ここにはページの設定が入ります。ウェブページに関するすべての情報をここに取り込みます。タイトルタグなどの情報が含まれます。

タイトルタグを変更すると、Googleに伝わる可能性があります。また、一般的なメタタグもあります。

たとえば、説明（description）タグは、Googleの検索結果でよく使用されます。

ヘッドにはカスタムHTMLやCSS、さらにはより具体的なOpen Graphタグなど、追加のコンテンツを取り込む柔軟性もあります。

したがって、本文にはページのコンテンツが含まれており、ヘッドにはページの設定が含まれています。

これらの2つの構造的要素は、ウェブブラウザがウェブページを読み込むときに適用されます。

Chrome、Firefox、Edge、Safari、Internet Explorer 3.0、Windows 95など、すべてのウェブブラウザに適用されます。

Webflowで行っていることは、本文のコンテンツとヘッドの設定を視覚的に作成し操作することで、ウェブページの外観と機能をプレビューするためのものです。

したがって、コードを90分間チェックしまくって、タグを閉じ忘れたことに気付いてしまうことを心配する必要はありません！

代わりに、私たちはコンテンツの作成に完全に集中できます。

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

引用元：https://university.webflow.com/lesson/webflow-experts

‍

Expertsになって世界中から仕事を受けよう！

あなたは、ウェブフローエキスパートになることで、ウェブフローエキスパートディレクトリとエキスパートマッチングツールに掲載されることができます。

それによって、クライアントはあなたを見つけて仕事をオファーすることができます。

ウェブフローエキスパートになるには、専門家ページを訪れてください。

専門家として承認されると、カスタマイズ可能なウェブフローエキスパートプロファイルを作成でき、クライアントがエキスパートディレクトリとエキスパートマッチングツールで見つけることができるようになります。

このレッスンでは、以下について学びます：

・エキスパートプロファイルとは何か

・エキスパートプロファイルを活性化し、更新する方法

・ウェブフローアカウントのオーナーのメールアドレスを見つける方法

・エキスパートディレクトリ

・エキスパートマッチングツール

エキスパートプロファイルとは何か

エキスパートプロファイルは、クライアントがあなた、あなたのスキル、過去の仕事を知ることができる場所です。

それはエキスパートディレクトリとエキスパートマッチングツールで表示されます。

エキスパートプロファイルはワークスペースクリエータープロフィールの拡張ですが、エキスパートプログラムのメンバーとして、サービスやその料金などの追加のエキスパート専用の詳細をプロフィールに追加できます。

エキスパートプロファイルには以下が含まれます：

・自己紹介に関する情報（バイオ、アバター、場所、言語、個人ウェブサイトなど）

・提供するサービス

・ショーケースしたいサイト

・サービスの一般的な料金情報

あなたのプロフィールには、承認されたプロフェッショナルパートナーやエンタープライズパートナーであることを示すバッジも表示されます。

クライアントはプロフィールからもあなたに連絡してお仕事をができます。

注意：エキスパートプログラムに参加する際、エキスパートステータスを主要なワークスペースに割り当てるよう最善を尽くします。エキスパート情報を別のワークスペースにリンクさせたい場合は、サポートにお問い合わせください。

エキスパートプロファイルをアクティベートし、更新する方法

エキスパートプロファイルをアクティベートするには、まずワークスペースプロフィールページに移動します。

以下の手順に従ってワークスペースプロフィールページにアクセスできます。

１、ワークスペース設定 > パブリックプロフィール設定に移動します

２、プロフィールに移動をクリックします

次に、ワークスペースプロフィールページに移動したら、右上隅にある「プロフィールを編集」をクリックします。

モーダルが表示され、異なるタブで情報を追加できます。各タブの必須フィールドをすべて入力したら、「エキスパートプロファイルをアクティベート」タブが有効になります。その後、「エキスパートプロファイルをアクティベート」タブに移動し、「エキスパートプロファイルをアクティベート」をクリックしてエキスパートプロファイルを活性化します。

後でエキスパートプロファイルの情報を更新する場合は、ワークスペースプロフィールページに移動し、右上隅にある「プロフィールを編集」をクリックします。

その後、必要に応じて情報を更新し、保存をクリックします。

エキスパートプロフィルには次のような情報を追加できます：

・一般的な詳細

・エキスパート詳細

・利用可能性

・ポートフォリオハイライト

一般タブ

一般タブでは、次の情報を追加または更新できます：

・プロフィール名

・プロフィールアバター

・プロフィールURL

・ウェブサイトへのリンク

・あなたの都市

・あなたの国

・

注意：一般タブの「プロフィール名」と「プロフィールアバター」フィールドは、公開エキスパートプロフィールにのみ影響します。

内部ワークスペース名とアバターを変更するには、ワークスペース設定 > ワークスペースタブ > ワークスペースセクションに移動してください。

エキスパート詳細タブ

エキスパート詳細タブでは、次の情報を追加または更新できます：

ビジネスタイプ（会社または個人のフリーランサー）

・話す言語

・あなたのサービスの特長（最大3つ）

・提供されるサービス

・最小プロジェクト料金

・典型的なプロジェクト規模、時間当たりの設計レート、および時間当たりの開発レート（注：この情報はプロフィールに表示されません）

・プロジェクトの問い合わせメールアドレス（つまり、プロジェクトの問い合わせが送信されるメールアドレス）

・ディレクトリカバーイメージ（エキスパートディレクトリのカードに表示されるイメージ）

注意：ディレクトリカバーイメージは、幅460 px、高さ325 pxで表示されますが、高解像度のリタイナディスプレイで高解像度を確保するためにこれらの寸法の4倍のイメージをアップロードすることをお勧めします。ディレクトリカバーイメージのサポートされるファイルタイプには、GIF、PNG、JPEGが含まれ、最大ファイルサイズは3MBです。

利用可能性（受注可能性）タブ

利用可能性タブで利用可能性を追加または更新して、エキスパートマッチングツールを介してクライアントとより正確に接続できるようにすることができます。

これにより、潜在的なクライアントに新しいプロジェクトを受ける準備ができている時期や、予約済みの時期を伝えることができます。

いつでも利用可能性を更新できます。

利用可能性ステータスを更新するには、利用可能性タブに移動して「利用可能性ステータスを設定」をクリックします。

利用可能性ステータスを「利用可能」または「利用不可」に設定できます。

ステータスを「利用不可」に設定した場合、将来の利用可能性の見積もり日を追加することもできます。この情報は、エキスパートプロファイルとエキスパートマッチングフォームに表示されます。

注意：利用可能性を長らく更新していない場合、リマインダーメールを送信します。エキスパートマッチングツールを通じてクライアントに推薦されるためには、利用可能性を常に最新の状態に保つ必要があります。

ポートフォリオハイライトタブ

ポートフォリオハイライトタブでは、エキスパートプロフィールにポートフォリオハイライトを追加できます。

これは、ウェブフローで作成したサイトの1つ、またはシングルサイトまたはたくさんの作品のコラージュをショーケースする画像（JPEG、PNG、WebP、またはGIF）です。

また、画像を外部サイト（例：会社のウェブサイトまたはクライアントのケーススタディ）にリンクすることもできます。

ポートフォリオハイライトに画像をアップロードする場合は、静止画像（例：JPEGおよびPNG）の最大ファイルサイズは3MBであり、GIFの最大ファイルサイズは8MBです。ただし、プロフィールページの読み込み時間が長くならないよう、これらの制限を下回るよう画像を圧縮することをお勧めします。ポートフォリオハイライトイメージは、幅984 px、高さ625 pxで表示されますが、高解像度のリタイナディスプレイで高解像度を確保するためにこれらの寸法の2倍または4倍のイメージをアップロードすることをお勧めします。

ウェブフローで作成したサイトをポートフォリオハイライトとして表示するには：

１、サイトが「ウェブフローで作成」されていることを確認します

２、ワークスペースプロフィールページに移動します

３、「プロフィールを編集」をクリックします

４、「ポートフォリオハイライト」タブに移動します

５、「ウェブフローで作成されたサイトを選択」を選択します

６、ドロップダウンからサイトを選択します

７、「保存」をクリックします

ポートフォリオハイライトとして画像をアップロードする場合は：

１、ワークスペースプロフィールページに移動します

２、「プロフィールを編集」をクリックします

３、「ポートフォリオハイライト」タブに移動します

４、「画像をアップロード」を選択します

５、「アップロード」をクリックします

６、画像のタイトルを追加します（オプション）

７、外部サイトに画像をリンクするためのウェブサイトURLを追加します（オプション）

８、「保存」をクリックします

ウェブフローアカウントのオーナーのメールアドレスを見つける方法

ウェブフローエキスパートになる際にウェブフローアカウントのオーナーのメールアドレスを提供する必要があります。

これは、クライアントのためにサイトを構築するウェブフローアカウントの所有者のメールアドレスです（フリーランサーの場合、これは自分のメールアドレスかもしれません）。正しいメールアドレスを提供すると、アカウントを確認して手数料支払いを送信できるようになります。

ウェブフローアカウントのオーナーのメールアドレスを見つけるには：

１、ダッシュボードに移動します

２、ワークスペースドロップダウンからクライアント向けにサイトを構築するワークスペースを選択します

３、ワークスペース設定 > メンバータブ > メンバーに移動します

４、「オーナー」の役割を持つメンバーを見つけます

オーナーのメールアドレスは、その名前の横にリストされています。ウェブフローエキスパートに申し込む際にこのメールアドレスを提供してください。

エキスパートディレクトリ

エキスパートディレクトリでは、見込みのクライアントはエキスパートのリストをスクロールするか、基準（例：提供されるサービス、予算、話す言語など）でフィルタリングできます。見込みのクライアントがディレクトリのエントリをクリックすると、エキスパートプロファイルセクションに記載されている情報が表示されます。ここで、クライアントは雇用のためにもあなたに連絡できます。

エキスパートマッチングツール見込みのクライアントは、ウェブフローエキスパートマッチングツールを使用してエキスパートを見つけることもできます。

ここでは、彼らは自分の基準に合う少数のエキスパートとマッチングされるように希望を提出できます。

エキスパートマッチングツールは、受注可能性のステータス、最小プロジェクト価格、提供されるサービスなどの基準に基づいて、クライアントとエキスパートをマッチングします。エキスパートプロファイルの情報が正確で最新であることを確認することをお勧めします。

これにより、見込みのクライアントとより正確にマッチングされることができます。

クライアントのリクエストに対応する方法

クライアントがリクエストを送信すると（エキスパートディレクトリまたはエキスパートマッチングツールを通じて）、そのリクエストの詳細が含まれたメールが届きます。

クライアントのプロジェクトの詳細（タイムライン、予算など）を表示し、プロジェクトを受け入れるかどうかを示すために、メール内の「プロジェクトリクエストをレビュー」をクリックできます。希望するクライアントのリクエストを受け入れるか拒否するかは自由です。プロジェクトを受け入れる場合、クライアントとの連絡がメールで確立されます。プロジェクトを拒否する場合、クライアントにはあなたがプロジェクトに協力することができないことが通知されるメールが届きます。

プロジェクトを受け入れるには：

１、メールの「プロジェクトリクエストをレビュー」をクリックします

２、「はい、このプロジェクトについてクライアントと連絡を取りたいです」と選択します

３、「送信」をクリックします

プロジェクトを拒否するには：

１、メールの「プロジェクトリクエストをレビュー」をクリックします

２、「いいえ、このプロジェクトを進めたくないです」と選択します

３、「送信」をクリックします

プロのヒント：クライアントのリクエストにすぐに対応することをお勧めします（営業日内で1日以内）。

クライアントのリクエストに迅速に対応するエキスパートは、エキスパートマッチングツールのアルゴリズムでより高いランク付けを受けます。

‍

Webflowに精通して、素敵なサイトをたくさん制作したら、Experts申請して世界中から様々なプロジェクトに参画してみたいですね！

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

引用元：https://university.webflow.com/lesson/element-hierarchy

‍

階層をしっかりと理解しよう

階層（ヒエラルキー）は、ドイツ語に由来する興味深い単語の1つです。

今回は、階層について次の3つの方法で説明します

1. オブジェクトがお互いにネストされて親、子、兄弟になる方法。
2. テキストスタイルがこの階層を通じて伝達される方法。
3. 親要素と子要素のサイズがお互いに影響を与える方法。

ネスティング

まず、ネスティングについて見てみましょう。

ネスティングとは、単に1つのオブジェクトを別のオブジェクトの中に配置することです。

例えば、プロジェクトにセクションを追加し、その中に見出しを追加すると、その見出しはセクションの中に配置されます。

ナビゲーターでこれを非常に明確に見ることができます。

セクションがあります...そして見出しがあります。見出しはセクションの子要素になります。

そして、ここにパラグラフとボタンを追加してみましょう。

それらもセクション要素の子要素になります。それらは兄弟要素です。

では、階層はどうなっていますか？

最上位レベルでは、Bodyをクリックし、ビューがページの上部にスライドします。これが最上位要素です。

そして、すぐにその下にあるすべての子要素は少しインデントされています。

水平のインデントは、これらがBodyの子要素であることを示しています。

このレベルの要素にとって、親要素はBodyです。

次に新しいセクションはどうですか？それはBodyの子要素であることはわかっていますが、その中に入れたコンテンツに対しても親要素になります。

そして、そのコンテンツはさらにインデントされています。水平のインデントは、これらの要素がセクションの子要素であることを示しています。

階層の2番目の視覚的な表現は、キャンバスの下にあるボトムナビゲーションにアクセスできます。

任意の要素を選択し、親要素との関係をすぐに確認できます... Bodyまで遡ります。

兄弟要素は表示されません。例えば、新しい見出しをクリックすると、段落やボタンは表示されませんが、直接の親要素は表示されます。

そして、直接の親要素。ナビゲーターと同様に、これらの要素は完全にクリックでき、階層内の任意の要素にアクセスできます。それがネスティングです。

テキストスタイリング

次はテキストスタイリングです。テキスタイリング（textiling）やテックスタイリング（tech styling）とは混同しないようにしましょう。

セクションを選択します。そして、いくつかのタイポグラフィオプションを調整し始めると、それがそのまま下に伝達されることがわかります。

タイポグラフィスタイルだけがこのように動作します。親要素のタイポグラフィスタイルを変更すると、その子要素、そしてこの場合は子要素の子要素に影響を与えることができます。これはどんどん深くなります。

子要素はこれらのスタイルをオーバーライドできます。たとえば、セクションを選択してその中のタイポグラフィを調整することができます。

これらの変更が本文に加えた変更をオーバーライドしていることに注意してください。

子要素は、親によって設定されたタイポグラフィスタイルを上書きできます。さらに深く行ってみましょう。見出しを選択し、そこでタイポグラフィを調整します。同じです。

子要素はこれらのスタイルをオーバーライドできます。そして、スタイルパネルは、何が起こっているかを判断しようとしているときに最も役立つツールです。

要素を選択してスタイルを継承している場合は？インジケータを押すだけで、そのスタイルを取得している場所がわかります。

これが、プロジェクトに関連する階層とテキストスタイリングです。

サイズ

最後に、サイズについてです。ほとんどの要素は、その中のコンテンツによってサイズが決まります。

このセクションは定義された値がありません。さらにコンテンツを追加すると、セクションが高くなります！

ただし、親要素は自然なドキュメントの流れをオーバーライドすることがあります - これは、固定値を設定した場合に発生します。

たとえば、高さを定義する場合、または幅を定義する場合。

子要素は親要素のサイズに影響を与えますが、親要素に固定サイズを設定することで自然なドキュメントの流れをオーバーライドできます。

それが要素の階層に関連する3つの側面です。

‍

まず、ネスティングでは、親要素が他の要素を含んで子要素になることがあります。

これはナビゲーターとキャンバスの下のボトムナビゲーションで見ることができます。

次に、テキストスタイリングでは、親オブジェクトからテキストにスタイリングが伝達されることがあります。

または、その子要素やその子要素の子要素に対してもスタイリングが伝達されることがあります。

そしてもちろんサイズです。親要素のサイズは、内部にある内容によって決まる場合があります。

親要素の子要素は親要素のサイズを決定します...ただし、親要素のサイズを覆す場合もあります。

これが、プロジェクトに関連する要素の階層です。

‍

Webflowでは、パッとみて階層がわかりやすいように表示されており、子要素への影響なども把握しやすくなっています。

コーディング知識がある方なら、インデントのおかげで直感的に理解できると思います！

‍

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

引用元：https://university.webflow.com/lesson/dashboard

‍

ダッシュボードからできること

ダッシュボードから、サイトにアクセスし、作成し、管理することができます。

このレッスンでは、以下のことを学びます：

• ダッシュボードについて
• サイトの作成方法
• サイトの整理方法
• サイトのサムネイルからのサイトの管理方法

ダッシュボードについて

Webflowアカウントにサインアップすると、最初のスターターワークスペースに移動し、サイトの作成を開始できます。

複数のワークスペースに参加している場合は、各ワークスペースに個別のダッシュボードがあります。

ワークスペースの切り替え

ワークスペースドロップダウンメニューからワークスペースダッシュボードを切り替えることができます。

また、ワークスペースドロップダウンメニューから新しいワークスペースを作成することもできます。

ダッシュボードの要件

Webflowは公式に、Chrome、Edge、Firefox、Safariを含むすべての最新バージョンの主要なブラウザでDesignerをサポートしています。

ブラウザのサポート度合いは、使用される機能によって異なります（例：Edgeで部分的なサポートがあるフィルター）。

一部のブラウザで限られたサポートを持つ機能については、関連する記事で詳細を確認できます。

CSS変換3D：インタラクションで使用

CSSトランジション：インタラクションで使用

CSSフレックスボックス：スタイルパネル> レイアウトで使用

CSSフィルター：インタラクションで使用

CSSグリッド：スタイルパネル> レイアウトで使用

WebflowはInternet Explorerをサポートしていません。

Webflowで作成されたサイトは、最新のWebブラウザでサポートされている業界標準の機能を引き続きサポートしますが、

Internet Explorerで正しく動作することを保証できません。

プロのヒント：What's My Browserでブラウザとオペレーティングシステムのバージョンを確認できます。

サイトの作成方法

新しいWebflowサイトを作成するには、ダッシュボードの右上にある「New site」をクリックします。

空のサイトを作成するか、テンプレートから始めるかを選択できます。

サイトの整理方法

ダッシュボードに多数のサイトがある場合、予め設定されたソートオプションを使用してサイトを並べ替え、フォルダに整理し、検索バーを使用してフィルタリングや検索を行うことができます。

サイトの並べ替え

デフォルトでは、サイトは作成日によってソートされます。

アルファベット順または最終更新日によって並べ替えることもできます。

フォルダにサイトを整理

ダッシュボード内のフォルダにサイトを整理することもできます。

以下のように進めます。

• フォルダの作成
• サイトをフォルダに移動
• フォルダの削除

フォルダの作成

新しいフォルダを作成するには、「フォルダ」アイコンをクリックし、新しいフォルダに名前を付けます。

サイトをフォルダに移動サイトメニューからサイトをフォルダに移動できます：

• フォルダに移動したいサイトの「3つのドット」をクリックします
• 「フォルダに移動」を選択します
• 移動先のフォルダを選択します（または新しいフォルダを作成します）
• 「サイトを移動」をクリックします

注意：フォルダ内でも直接サイトを作成することができます。フォルダをクリックして開き、新しいサイトを作成すると、自動的にそのフォルダ内にサイトが追加されます。

フォルダの削除

フォルダはいつでも削除できます。「フォルダ」を開き、「ゴミ箱」アイコンをクリックします。

安心してください。サイトは安全です！フォルダを削除すると、そのフォルダ内のすべてのサイトが「All Sites」（ダッシュボードのメインエリア）に移動します。

サイトの検索

多数のサイトを管理している場合は、ダッシュボード内で検索できます。検索機能はフォルダ内でも機能します。

注意：他のワークスペース内のサイトを検索する場合は、まずワークスペースを切り替えてください。

サムネイルからのサイトの管理方法

ダッシュボードには、各サイトのサムネイルとサイトに関する便利な詳細情報が表されます。

例えば、各サイトにはSiteプランとそのサイトのサムネイルの下にある「ロケット」アイコンが表示され、そのサイトが公開されているかどうかがわかります。

アイコンにカーソルを合わせると、サイトが最後に公開された時期についての詳細が表示されます。

デザイナーでサイトを開く

サイトをデザイナーで開くには、サムネイルにカーソルを合わせ、Open Designerをクリックします。

プロのヒント：デザイナーで複数のサイトを一度に開くことができます。Macの場合はCommand + クリック、Windowsの場合はControl + クリックして、それぞれのサイトのデザイナーを別々のブラウザタブでロードすることができます。

これは、サイトを比較したり、サイト間でコピー/ペーストしたりする場合に便利です。

サイトメニューからサイトを管理

サムネイルのサイト上で「3つのドット」をクリックして、サイトメニューにアクセスできます。

サイトメニューでは、以下のことができます。

• サイトの削除
• サイトの複製
• サイトをフォルダに移動
• サイトの読み取り専用リンクを共有
• CMSエディターへのアクセス
• サイトの設定へのアクセス

サイトサムネイル

サイトのサムネイル画像は、ダッシュボード内のサイトに自動的に生成されます。サイトを .webflow.io サブドメインに公開するたびに更新されます。

正確でないサイトのサムネイルをリセット

サイトのサムネイル画像が正確でない場合は、サイトを .webflow.io サブドメインから非公開にし、再度公開します。ダッシュボードを強制リフレッシュして、更新されたサムネイルを確認します - Macの場合は Shift + Command + R、Windowsの場合は Shift + Control + R。

‍

サイトの管理はこのダッシュボードから全てできるようになっています！

サイトが増えてきたらきちんと整理しておきましょう！

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

引用元：https://university.webflow.com/lesson/contribute-to-the-webflow-marketplace

‍

あなたもマーケットプレースに自分のサイトをアップできる！？

あなたやチームは、さまざまな方法でWebflowマーケットプレイスに製品やサービスを提供することができます。

以下の方法で貢献できます：

1. Webflowエキスパートになる
2. テンプレートの作成者になる
3. マーケットプレイス向けのアプリを作成する
4. Made in Webflowにサイトをショーケースする
5. ライブラリを作成する

Webflowエキスパートになる

あなたやあなたのチームは、Webflowエキスパートとして応募し、エキスパートディレクトリに掲載されることができます。

見込みのあるクライアントは、エキスパートのマッチングツールを介してあなたを見つけて雇用することもできます。

Webflowエキスパートになるには、エキスパートページを訪れて詳細を確認してください。

テンプレートの作成者になる

Webflowマーケットプレイスのコミュニティメンバーがダウンロードできるサイトテンプレートを作成できます。

無料または有料（プレミアム）のテンプレートを作成し、ポートフォリオとビジネスを拡大できます。

テンプレートの作成者として承認される必要があるため、Webflowマーケットプレイスにテンプレートを作成して提出する前に承認される必要があります。

アプリをマーケットプレイス向けに作成する

アプリを作成し、それらをWebflowマーケットプレイスにリストアップすることができます。

マーケットプレイス向けのアプリを作成する方法については、開発者ページをご覧ください。

Made in Webflowにサイトをショーケースする

Made in Webflowは、あなたのサイトデザインを他のWebflowクリエーターと共にショーケースできる場所です。

テンプレートとは異なり、Made in Webflowでは誰でもいつでも自分のサイトをショーケースすることができます（ただし、利用規約に従う必要があります）。

Made in Webflowのサイトをコピー可能にすることもできます（コミュニティメンバーに対して無料で提供されます）。

ライブラリの作成

コミュニティが作成したライブラリは現在ベータ版です。ライブラリ作成者のウェイトリストに登録してください。

‍

素敵なサイトを作っていつかショーケースに載せてみましょう！

この投稿はWebflow社が提供する「Clone a site in Webflow」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/clone-a-site-in-webflow

‍

好きなサイトや要素を一瞬で自分のワークスペースに複製できる！

Webflowのショーケース(注：現在は”Made in Webflow"）には、クローン可能なプロジェクトが詰まったセクションがあります。

これらのプロジェクトを複製して修正したり、解体して使用したりすることができます。

この投稿では、クローン可能なプロジェクトにアクセスする方法、プロジェクトを複製する方法についてご紹介していきます。

まずはクローン可能なプロジェクトにアクセスするまず、クローン可能なプロジェクトにアクセスしましょう。

1. ダッシュボードから、ショーケースに移動します。（現在は”Made in Webflow”)
2. そこで、クローン可能なプロジェクトを見つけます。
3. Googleなどの検索エンジンを使用することもできます。クローンしたいプロジェクトが見つかったら、それをクリックします。

‍

では、実際にプロジェクトを複製する方法はどうなのでしょうか。

1. 好きなプロジェクトを見つけたら、クローンボタンを押します。
2. 数個のオプションが表示されますが、選ぶものは1つです。複製したプロジェクトを配置したい場所を選択します。
3. 例えば、個人のダッシュボードに配置することにしましょう。
4. 実際にプロジェクトを作成する際には、任意の名前を付けることができます。

以上がプロジェクトの複製の手順です。成功した複製を確認しましょう。

クローンされたプロジェクトを確認するために、個人のダッシュボードに移動しましょう。そこに表示されています。

今回は、クローン可能なプロジェクトにアクセスする方法、プロジェクトを複製する方法、そしてダッシュボード内にあるプロジェクトを見る方法について説明しました。

‍

一から作成するのが大変なセクションなどは、このようにクローンしていって作るのもありですね！

時間がある時に気になるサイトをクローンしてみて、仕組みを理解したりできるので、いい勉強にもなりますよ。

この投稿はWebflow社が提供する「Client's guide to the Editor: Pages tab」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/clients-guide-to-the-editor-pages-tab

‍

ページタブから一気にSEO設定が可能！

ログインした状態でエディターにはいると、ページを表示するためにページパネルを表示することができます。

プロジェクト内のすべてのページの完全なリストを表示できます。

スクロールして選択するか、検索を行って絞り込むこともできます。編集したいページが決まったら、そのページをクリックします。

もしページのコンテンツが編集可能な場合は、変更を行って公開することができます。とっても簡単です。

さて、再度ページパネルを開きましょう。各ページの上にカーソルを移動すると、「設定」ボタンが表示されます。それをクリックしましょう。

ここには4つのコンポーネントがあります：一般設定、SEO設定、オープングラフ設定、サイト検索設定です。これらを順番に見ていきましょう。

一般設定では、このページにパスワードを設定することができます。特定のページへのアクセスをパスワードを持つ人に限定したい場合に使用します。

パスワードを持っていない人はこのページに入ることができません。

‍

次に、SEO設定です。ここでは、タイトルタグやメタディスクリプションを設定することができます。

これは通常、Googleなどで表示される情報です。説明的なタイトルや説明文を入力することができますが、スパムと見なされることやペナルティを受ける可能性があるため、過度なキーワードの使用には注意が必要です。

‍

次に、オープングラフ（Open Graph）設定です。これは、Facebookなどのプラットフォームでリンクを共有した際にページのプレビューとして使用されることがあります。

ここではSEO設定と一致させることもできますし、独自の内容を入力することもできます。画像URLには、サイト内またはウェブ上の任意の画像へのリンクを貼り付けることができます。

‍

最後に、サイト検索設定です。

もしサイトにサイト検索機能が組み込まれている場合、現在のページを検索結果から除外したり、ページが検索結果に表示される方法を細かく設定することができます。

タイトルや画像の使用など、細かな設定が可能です。

‍

設定が完了したら、「保存」ボタンをクリックします。変更内容は公開されるまで反映されないことに注意しましょう。

公開するためには、「公開」ボタンをクリックします。これがページパネルです。

エディター内で他のページを表示したり、ナビゲーションしたりするだけでなく、ページの設定、パスワード、SEO、オープングラフ、サイト検索の追加や変更も行うことができます。

‍

この投稿はWebflow社が提供する「Site Activity logs for Content Editors」の内容を元に作成しています。

引用元：https://webflow.com/feature/site-activity-log-for-content-editors

‍

サイトアクティビティログは、成長しているチームにとって非常に重要です。これにより、サイトで行われる変更の詳細な可視化が可能になります。

ただし、本日まで、その可視化は主に重要なデザイン変更に焦点を当てていました。

‍

今回のアップデートは、サイトアクティビティログ内にコンテンツ編集者向けに新しいフィルターとトラッキング機能が追加されました。

CMSや静的コンテンツの変更をサイトアクティビティログで確認できるようになったことで、チームはより多くのコンテンツエディターをWebflowに参加させることができます。彼らがプロジェクトを達成するのに、効果的なチェック体制をとることができるようになったのは大きな進歩です。

サイトアクティビティログの使用方法や最新の更新について詳しく知りたい場合は、Webflow Universityのドキュメントをご覧ください。サイトアクティビティログへのアクセス方法やデモについての詳細を知りたい場合は、セールスチームにお問い合わせください。

‍

注意：サイトアクティビティログは、Webflowのエンタープライズカスタマーやエンタープライズパートナー向けに提供されています。デザイナーのチームメンバー（デザインモードまたは編集モードを使用している場合）は、サイトアクティビティログとその詳細を表示することができます。