記事一覧
この投稿はWebflow社が提供する「Dashboard」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/dashboard
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
ダッシュボードからできること
ダッシュボードから、サイトにアクセスし、作成し、管理することができます。
このレッスンでは、以下のことを学びます：
- ダッシュボードについて
- サイトの作成方法
- サイトの整理方法
- サイトのサムネイルからのサイトの管理方法
ダッシュボードについて
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 Universityでは、Webflowの基本的な使い方を解説しています。
あなたもマーケットプレースに自分のサイトをアップできる！？
あなたやチームは、さまざまな方法でWebflowマーケットプレイスに製品やサービスを提供することができます。
以下の方法で貢献できます：
- Webflowエキスパートになる
- テンプレートの作成者になる
- マーケットプレイス向けのアプリを作成する
- Made in Webflowにサイトをショーケースする
- ライブラリを作成する
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 Universityでは、Webflowの基本的な使い方を解説しています。
好きなサイトや要素を一瞬で自分のワークスペースに複製できる！
Webflowのショーケース(注：現在は”Made in Webflow"）には、クローン可能なプロジェクトが詰まったセクションがあります。
これらのプロジェクトを複製して修正したり、解体して使用したりすることができます。
この投稿では、クローン可能なプロジェクトにアクセスする方法、プロジェクトを複製する方法についてご紹介していきます。
まずはクローン可能なプロジェクトにアクセスするまず、クローン可能なプロジェクトにアクセスしましょう。
- ダッシュボードから、ショーケースに移動します。（現在は”Made in Webflow”)
- そこで、クローン可能なプロジェクトを見つけます。
- Googleなどの検索エンジンを使用することもできます。クローンしたいプロジェクトが見つかったら、それをクリックします。
では、実際にプロジェクトを複製する方法はどうなのでしょうか。
- 好きなプロジェクトを見つけたら、クローンボタンを押します。
- 数個のオプションが表示されますが、選ぶものは1つです。複製したプロジェクトを配置したい場所を選択します。
- 例えば、個人のダッシュボードに配置することにしましょう。
- 実際にプロジェクトを作成する際には、任意の名前を付けることができます。
以上がプロジェクトの複製の手順です。成功した複製を確認しましょう。
クローンされたプロジェクトを確認するために、個人のダッシュボードに移動しましょう。そこに表示されています。
今回は、クローン可能なプロジェクトにアクセスする方法、プロジェクトを複製する方法、そしてダッシュボード内にあるプロジェクトを見る方法について説明しました。
一から作成するのが大変なセクションなどは、このようにクローンしていって作るのもありですね！
時間がある時に気になるサイトをクローンしてみて、仕組みを理解したりできるので、いい勉強にもなりますよ。
この投稿はWebflow社が提供する「Client's guide to the Editor: Pages tab」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/clients-guide-to-the-editor-pages-tab
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
ページタブから一気に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
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
サイトアクティビティログは、成長しているチームにとって非常に重要です。これにより、サイトで行われる変更の詳細な可視化が可能になります。
ただし、本日まで、その可視化は主に重要なデザイン変更に焦点を当てていました。
.png)
今回のアップデートは、サイトアクティビティログ内にコンテンツ編集者向けに新しいフィルターとトラッキング機能が追加されました。
CMSや静的コンテンツの変更をサイトアクティビティログで確認できるようになったことで、チームはより多くのコンテンツエディターをWebflowに参加させることができます。彼らがプロジェクトを達成するのに、効果的なチェック体制をとることができるようになったのは大きな進歩です。
サイトアクティビティログの使用方法や最新の更新について詳しく知りたい場合は、Webflow Universityのドキュメントをご覧ください。サイトアクティビティログへのアクセス方法やデモについての詳細を知りたい場合は、セールスチームにお問い合わせください。
注意：サイトアクティビティログは、Webflowのエンタープライズカスタマーやエンタープライズパートナー向けに提供されています。デザイナーのチームメンバー（デザインモードまたは編集モードを使用している場合）は、サイトアクティビティログとその詳細を表示することができます。
この投稿はWebflow社が提供する「Centralize feedback with commenting in the Designer」の内容を元に作成しています。
引用元：https://webflow.com/feature/commenting-for-workspace-members
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
小規模なエージェンシーまたは大企業組織の一員であろうと、ウェブ開発プロセスはチームスポーツです。
そのプロセスの重要な部分は、フィードバックを迅速かつ効率的にまとめ、共有し、行動する作業です。
これからはWebflow内で直接コメントを行うことで、その作業がより簡単になります。
本日のリリースにより、Workspaceメンバー（そしてゲストも！）はデザイナー内でフィードバックと返信を残すことができ、ビルドプロセスを迅速化し、チームメンバーとのイテレーションをより迅速に行うことができます。
スタイルの詳細についてチームメンバーにコメントを残したり、特定のインタラクションについてヘルプを求めたりするなど、すべてのやり取りをWebflow内で行うことができます。
近日中にコメント投稿者が追加できるように！
今回のリリースは、既にWebflowで作業しているユーザー間のフィードバックを効率化することを目的としていますが、今後数か月でWorkspaceメンバーを超えて無料でコメント投稿者を招待したり追加できるようになり、デザインに対して関係者がフィードバックを残せるようにします。
コメントの残し方
Webflowのデザイナーを開くと、トップバーに新しいアイコンが表示され、コメントモードに切り替わります。ここでは、サイト内を移動する際にフィードバックが共有された場所を確認でき、異なる要素をクリックして新しいコメントを残すことができます。
（興味深い事実：ブレークポイントレベルでコメントを残すこともできますし、エンタープライズチームはブランチページにコメントを残すこともできます）。
右側のパネルには、コメントの一覧が表示され、コメントリスト内のコメントをクリックすることで、フィードバックが残された場所に直接移動することができます。
コメントパネル内のコメントをクリックして、フィードバックが残された場所に直接移動します。コメントパネル内のコメントをクリックして、フィードバックが残された場所に直接移動します。
制作中のフィードバックがデザイナー画面上で行えると、時短になりますし結果的にスムーズな制作が可能になりますよね！
これからのアップデートにも期待しましょう！
この投稿はWebflow社が提供する「Quick Stack」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/quick-stack
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
レイアウトが一発で決まる！クイックスタックの凄さ
クイックスタック要素は、シンプルなものから複雑なレスポンシブデザインまでの構造を提供します。
これはグリッド表示プロパティを使用し、デフォルトでdiv要素からなるセルを含んでいます。
この要素には8つのプリセットがあり、異なる配置でコンテンツを配置することができます。
また、各クイックスタックのプリセットやクイックスタックのセルのサイズを手動で調整することもでき、コンテンツの表示方法に対してより細かな制御が可能です。
クイックスタックは、ヒーローセクションから製品のショーケースまで、さまざまなコンテンツの構造化に対して柔軟で便利です。
この記事ではクイックスタックについて以下のことをご紹介します！
- クイックスタックの追加方法
- クイックスタックのスタイリング方法
- クイックスタックのセルのスタイリング方法
- クイックスタックの追加方法
クイックスタックを追加する方法
クイックスタックを追加するには、AddパネルのStructureセクションからクイックスタックをドラッグアンドドロップします。
Webflowキャンバスにクイックスタックが配置されます。クイックスタックのプリセットを8つのうち1つ選択できるキャンバス上のメニューが表示されます。
クイックスタックのプリセットには以下の8つがあり、セルの構造が異なります：
1列 - 1つのセルで、1列と1行を占める2列 - 2つのセルで、各々が1列と1行を占める
3列 - 3つのセルで、各々が1列と1行を占める
4列 - 4つのセルで、各々が1列と1行を占める
2 + 1 - 3つのセル。左列には2つのセルがあり、各々が1列と1行を占める。右列には1つのセルがあり、1列と2行を占める
1 + 2 - 3つのセル。左列には1つのセルがあり、1列と2行を占める。右列には2つのセルがあり、各々が1列と1行を占める
2 x 2 - 4つのセル。左列には2つのセルがあり、各々が1列と1行を占める。右列にも2つのセルがあり、各々が1列と1行を占める
2 x 2フォーマット - 4つのセル。上の行には左側のセルが2列と1行を占め、右側のセルが1列と1行を占める。下の行には左側のセルが1列と1行を占め、右側のセルが2列と1行を占める
それぞれのクイックスタックには異なる使用例があります。たとえば、ヒーローセクションには2列のプリセットを使用して、文章を右側の列に配置し、左側に画像を配置することができます。また、2 x 2のプリセットを使用して、製品画像のレスポンシブな表示を作成することもできます。
クイックスタックのスタイル方法
クイックスタックのスタイリング方法クイックスタックのグリッドレイアウト、セル間の余白、表示方法をスタイル設定することができます。デフォルトでは、クイックスタックは各セルと親要素の間に20pxのパディングが設定されています。
クイックスタックに行や列を追加または削除する方法は４つ
- キャンバス上のメニュー
- スタイルパネル
- 編集モード
- クイックスタック内部
行や列を追加すると、追加されるセルの数は既存の行や列の数に合わせられます。たとえば、クイックスタックに2行1列のセルがある場合、新しい列を追加すると、既存のセルの右側に2つのセルが新しい列に追加されます。
具体的な手順は以下の通りです：
キャンバス上のメニューから行や列を追加する方法：
- クイックスタックを右クリックし、表示されるメニューで「Add column」または「Add row」を選択します。
- 追加する列や行の位置（左側、右側、上側、下側）を選択します。
スタイルパネルから行や列を追加する方法：
- クイックスタックを選択し、スタイルパネルに移動します。
- レイアウト > グリッドのセクションに移動します。
- 「+」アイコンと「-」アイコンを使用して列や行を追加または削除します。
編集モードで行や列を追加する方法：
- キャンバス上で編集モードに切り替えます。
- クイックスタック要素を選択し、右上の「Edit Quick Stack」をクリックして編集モードを開きます。
- 追加する行や列の上部右側または下部左側の「+」アイコンをクリックします。
- 削除する行や列は、セルヘッダーをクリックし、キャンバス上のメニューで「Delete column」または「Delete row」をクリックします。
クイックスタック内部で行や列を追加する方法：
- クイックスタックのセルを選択します。
- セルの上部、下部、左側、または右側にある「青い点」の上にカーソルを移動し、「+」アイコンをクリックします。
これらの手順に従うことで、クイックスタックに行や列を追加または削除することができます。
クイックスタックのセル間の余白の設定方法
クイックスタックのセル間の余白（要素の外側のスペース）を増減することができます。デフォルトでは、各クイックスタックのセル間には20pxの余白があります。
この余白を調整するには、スタイルパネル > レイアウト > ギャップに移動します。"ロック"アイコンがロックされている場合、ギャップの値は列セルと行セルの両方に適用されます。列セルと行セルで独立した余白サイズを作成するには、"ロック"アイコンを解除し、必要に応じてギャップの値を調整します。
また、編集モードに移動し、2つのセル間の余白にカーソルを合わせてクリックドラッグすることで、セル間の余白を増減することもできます。スタイルパネル > レイアウト > ギャップで"ロック"アイコンがロックされている場合、クリックドラッグすると行セルと列セルの余白の値が同じに調整されます。"ロック"アイコンが解除されている場合、クリックドラッグした余白の値のみが調整されます（行セルの余白または列セルの余白）。
これらの手順に従って、クイックスタックのセル間の余白を調整することができます。
クイックスタックの表示方法の設定
クイックスタックの表示方法をスタイルするには、クイックスタックを選択し、スタイルパネル > レイアウト > 表示に移動します。
ここでは、クイックスタックを表示または非表示にすることができます。
表示する：クイックスタックを表示します。非表示にする：クイックスタックを非表示にします。
非表示になっているクイックスタックを選択する必要がある場合は、ナビゲーターで選択することができます。
クイックスタックの行、列のサイズ設定
デフォルトでは、各列のサイズは1の分数単位（FR）です。各行のサイズは自動で設定されており、セルのサイズは内部のコンテンツに基づいて決まります。
サイズの調整には、編集モードに移動し、行のヘッダーまたは列のヘッダーをクリックし、オンキャンバスメニューでサイズを変更します。
編集モードでは、各行または列ヘッダーの端をクリックしてドラッグすることでもサイズを調整できます。
編集モード以外では、セルを選択し、セルの境界にあるサイズ変更ハンドルをクリックしてドラッグすることでサイズを調整できます。
異なるブレークポイントのクイックスタックのスタイリング
クイックスタック要素を選択し、デフォルトのデスクトップのブレークポイントからブレークポイントを切り替えると、スタイルパネル > レイアウト > グリッドの行オプションがグレーアウトされ、新しい「Auto」という値が表示されます。
Webflowは、既に設定されている列の値に基づいて、クイックスタック内のセルの数に合わせて行の値を自動的に設定します。
クイックスタックの表示とグリッドスタイルには、スタイルパネル > レイアウトでピンクの表示が表示されることがあります。
これは、これらのスタイルが現在のブレークポイントで選択された要素にのみ適用されることを意味します。
詳細はこちらの動画をご覧ください！
クイックスタックのセルのスタイリング
デスクトップのブレークポイント以外のブレークポイントでは、キャンバス上のセルを選択し、スタイルパネル > セルのサイズに移動することで、クイックスタックのセルのスタイルを設定することができます。
セルのサイズを調整して、1つまたは複数の行や列に広げることができます。また、セルの順序を変更することもできます。
順序には、セルを最初にしたり、最後にしたり、カスタムの順序を設定するために「三点リーダー」をクリックし、順序フィールドに値を入力します。
ただし、セルのカスタム順序値を設定する場合は、クイックスタックの他のすべてのセルに0より大きい順序値を設定する必要があります。
デスクトップのブレークポイントでは、セルのサイズをマージおよびアンマージすることで調整できます。
セルのサイズと順序のスタイルには、スタイルパネル > セルのサイズでピンクの表示が表示されることがあります。これは、これらのスタイルが現在のブレークポイントで選択されたセルにのみ適用されることを意味します。
クイックスタックのセルのスペースの設定方法
クイックスタックのセルにはパディングを追加することができますが、マージンは追加することができません。
セル間や親のクイックスタック要素との間にスペーシングを追加したい場合は、クイックスタックのセル間のギャップを調整することができます。
クイックスタックのセルのマージ（合体）の設定方法
クイックスタックのセルを左側、右側、上側、または下側のセルとマージすることができます。ただし、セルをマージすると、マージ先のセルの内容が削除されます。
クイックスタックのセルをマージする方法は2つあります。
- キャンバス上のメニューから行うーマージしたいセルを右クリックし、キャンバス上のメニューで「セルをマージ」にカーソルを合わせ、マージする方向（上、下、右、左）を選択します。
- キャンバス上のコントロールを使用するーマージしたいセルを選択し、セルの右側、左側、上側、または下側にある青いドットにカーソルを合わせます（マージする方向に応じて）。その後、マージセルアイコンをクリックします。
クイックスタックのセルのアンマージ（合体解除）の設定方法
クイックスタックのセルをアンマージ（マージ解除）する方法は2つあります。
・キャンバス上のメニューから — アンマージしたいセルを右クリックし、キャンバス上のメニューで「セルのアンマージ」をクリックします。
・スタイルパネルから — アンマージしたいセルを選択し、スタイルパネル > セルサイズに移動し、「セルのアンマージ」をクリックします。
使いこなせばかなりの時短になるQuick Stack!
レスポンシブにも強く、今後はかなり使える要素になること間違いなしです。
ぜひ使いこなしてみてください！
この度、マイナビ出版より2001年から続くWebサイト構築のためのトータルデザイン誌 Web Designing より、
弊社代表 堀尾が取材を受けました。
掲載されている2023年8月号は、「Web制作とノーコードの良い関係」が題材となっており
弊社が活用しているWebflowについて、4ページにもわたりお話しさせていただきました。
多くの方にお手に取っていただけると幸いです。
ぜひ、ご覧ください。
この投稿はWebflow社が提供する「Introducing new keyboard shortcuts for moving elements」の内容を元に作成しています。
引用元：https://webflow.com/feature/keyboard-shortcuts-moving-elements
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
ショートカットで要素の移動を楽にする
今日は、Webflowのキャンバス上で要素を効率的かつ正確に移動するためのキーボードショートカットをご紹介します。
これにより、マウスやナビゲーターの使用を減らすことができて、作業が圧倒的に効率的になりますよ！
要素を移動するための新しいキーボードショートカットはこちら。
![兄弟要素の後ろに移動するには、アップルであればコマンドキーと]、ウィンドウズ、Windowsであればコントロールと]](https://assets-global.website-files.com/5ffc142379487efdb0e5c552/64848a849c85db77bcb9f19a_Group%2083.png)
- 前の要素の前に要素を移動する：[ または Command + 下矢印（Mac）または Control + 下矢印（Windows）
- 前の要素の後ろに要素を移動する：] または Command + 上矢印（Mac）または Control + 上矢印（Windows）
- 現在の親要素内で兄弟要素の前に要素を移動する：Command + [ または Command + 左矢印（Mac）または Control + 左矢印（Windows）
- 現在の親要素内で兄弟要素の後ろに要素を移動する：Command + ] または Command + 右矢印（Mac）または Control + 右矢印（Windows）
- 親要素の前に要素を移動する：Command + Shift + 上矢印（Mac）または Control + Shift + 上矢印（Windows）
- 親要素の後ろに要素を移動する：Command + Shift + 下矢印（Mac）または Control + Shift + 下矢印（Windows）
これらの新しいショートカットコマンドの詳細については、Webflow Universityの記事をご覧ください！
一言メモ
Adobe製品などを使い慣れている方にとっては、レイヤーの移動などが同じ感じのショートカットなので、直ぐに馴染めるのではないでしょうか？
どんどん使って時短に繋げたいですね！
この投稿はWebflow社が提供する「Client's guide to the Editor: Introduction」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/clients-guide-to-the-editor-introduction
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
エディターでできることの概要
今回は、ウェブサイトのオーナーがログインしてエディターで変更を行い、それらの変更をウェブ上で公開する方法について、詳しく解説します。
ここから始めましょう。
エディターへのの招待が届いたら、リンクに従って、必要なフィールドに入力してアカウントを作成し、ログインします。
するとサイト内へ入ることができ、通常と同様にサイトをナビゲートすることができます。要素や周囲をクリックしたりできます。
ログインしているため、ページの一部のコンテンツが編集可能になっています。
ページの任意の要素の上にマウスを置くと、要素の右上にボタンが表示される場合があります。この場合、テキストを直接ページ上で編集できます。
ボタンも同様です。ここにボタンがあります。リンクの設定（リンク先）やテキスト自体を変更できます。
画像はどうでしょう？画像が編集可能な場合、ボタンが表示され、クリックして選択した画像で画像を置き換えることができます。
ページ上で直接編集するだけでなく、ページの下にあるページリンクを使用してナビゲートすることもできます。これにより、サイト上の任意のページに直接移動できます。
特定のサイトデザインによっては、コレクションやフォームも表示されるかもしれません。
コレクションは、サイト上のコンテンツを整理、編集、追加できるデータベースのようなものです.
フォーム（フォームボタン）を使用すると、サイト上にフォームがある場合にアクセスできます。サイト上でフォームに入力された情報は、CMS内でアクセスできます。
例えば、誰かが私たちのサイトのフォームに記入した場合、その情報はCMS内でアクセス可能です。
最後に、アカウント設定、ヘルプとサポート、そしてログアウトボタンがあります。
また、先ほどいくつかの変更を行った後、公開のオプションが表示されたことに気づいたかもしれません。
サイトで行った変更は、公開するまで実際には公開されません（他の誰もそれらを見ることはできません）。
公開すると、誰でもサイト上の変更を見ることができます。
今後は、既に自分のウェブサイト上にいる場合、アドレスの直後に「？」と「edit」と入力し、Enterキーを押すだけで、簡単にログインして変更を行うことができます。
すでにログインしてサイトにいる場合、右下に小さな上向き矢印が表示されます。
そのボタンを押すだけで、完全なアクセスが可能です。
CMSには非常に強力な機能がありますが、これがその概要です。ページ上で直接コンテンツを編集でき、ページパネルからサイトを移動することが可能です。
特定のサイトではコレクションやフォームデータにアクセスできます。
準備ができたら公開でき、そして、世界中の人々が私たちが行った変更を直ぐに見ることができます！
この投稿はWebflow社が提供する「Private Staging」の内容を元に作成しています。
引用元：https://webflow.com/feature/private-staging
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
Webflowのwebflow.ioステージングリンクを自社のチームメンバーのみがアクセスできるように制限できれば便利だと思ったことはありませんか？
そンなあなたに嬉しいアップデートです！
プライベートステージングのおかげで、それが可能になりました。
プライベートステージングは、webflow.ioステージングドメインの新しいオプションで、
アクセスを自分のワークスペースにログインしているユーザーに制限することができます。
これにより、チームはサイトの変更を公開する前に、プライベートかつ安全に確認することができます。
ただしこの機能は、現在のところエンタープライズプランのお客様のみ利用可能となっています。
ステージングサイトをプライベートにするには、サイト設定で以下の手順を行います：
- プライベートステージングを有効にして、ワークスペースのログインメンバーやゲストのみがアクセスできるようにします。
これは、今年中にリリースされるいくつかの機能の最初であり、Webflowのステージングと公開にさらなるパワーと洗練性をもたらすものです。
近日中にさらなる情報が発表されるので、お楽しみに！
この投稿はWebflow社が提供する「Components can now be used in Collection Lists」の内容を元に作成しています。
引用元：https://webflow.com/feature/components-in-collection-lists
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
コンポーネントをコレクションリストで使えるように！
先月のコンポーネントの改善に続いて、今日は要望の高かったアップデートをさらに行います。
それは、コンポーネントをコレクションリストに追加し、CMSのデータをコンポーネントのプロパティに接続できるようにすることです。
これにより、既にコンポーネントに変換した共通のデザインパターンをCMSのコンテンツと組み合わせて再利用できるようになります。
同時に、ウェブサイト全体でコンポーネントの他のインスタンスとレイアウトを同期させることも可能です。
以下は、新機能の概要です：
・コンポーネントをコレクションリストに追加：コンポーネントをCMSのコレクションリストやページテンプレートにドラッグ＆ドロップで追加できます。
・コレクションリスト内の要素をコンポーネントに変換：コレクションリスト内の要素は、他の要素と同様にコンポーネントに変換することができます。
コンポーネントが、ついにコレクションリストで使用できるようになりました！さらなるアップデートにも期待しましょう！
