Webflow入門 - Webflowヘルプ
Webflowの基本を学びましょう。
Webflowでは、ページ、ブランチ、ロケールを通じてサイトを構築、デザインできます。Webflowは動的なコンテンツとデータを効果的に作成・管理する力を与え、サイトのパフォーマンスを分析・最適化するツールを提供します。また、作業を共有し、フィードバックを求め、最終的に専用の環境（例：ステージングと本番）にサイトを公開することができます。
Webflowには、ダッシュボードからサイトのサムネイルをクリックするか、サイト設定から上部ツールバーのサイトを開くをクリックしてアクセスできます。Webflowでアクセスできるツールは、サイトの役割（例：レビュアー、コンテンツエディターなど）によって異なるため、必要なツールにすばやくアクセスでき、不要なツールを忘れることができます。
始める前に
Webflowのサポートされているブラウザ、デバイス、画面解像度を確認してください。
複数ユーザーのコラボレーション
複数のチームメイトがWebflowでサイトを共同で作業できます。デザインプロセスをスムーズに保つために、チームメイト間でデザインコントロールを引き継ぎ、リアルタイムで他の人がサイト内で作業している場所を見ることができます。
Webflowインターフェースの概要
サイトをWebflowで開くと、メイン画面に表示されるのがキャンバスです。キャンバスの周りには以下のツールバーとパネルがあります。
- トップバーには、タブナビゲーション、コンテキストバー、サイトアクション（例：コラボレーションと公開ツール）が含まれています。
- キャンバスバーには、元に戻す/やり直し、パンくずナビゲーション、拡張ブレークポイント、キャンバス設定が含まれています。
- 左のツールバーには、メインメニュー、さまざまなツールとナビゲーションパネル、設定、サイト監査、チュートリアルがあります。
- 右のツールバーには、要素のスタイル、設定、インタラクションがあります。
キャンバス
Webflowで最も大きなエリアがキャンバスです。ここでページとリアルタイムでデザインを操作できます。要素を選択し、移動し、ページ上でコンテンツを編集できます。Webflowは自動的に作業を保存しますが、手動で保存するにはCommand + S（Macの場合）またはControl + S（Windowsの場合）を押します。
トップバー
トップバーでは、デザインモード、CMS、Analyze、Optimize、ロケール、ページスイッチャー、サイトアクションに素早くアクセスできます。
メインのタブナビゲーションには、デザインタブ、CMSタブ、インサイトタブがあります。
- デザインタブ — 現在のモード（例：デザイン、ビルドなど）を示し、モードを切り替えたり、ページブランチを作成したりできます。メンバーのサイトの役割によって利用可能なモードが決まります。例えば、サイトマネージャーやデザイナーはデザインモードにアクセスできますが、マーケターはビルドモードのみアクセス可能です。
- CMSタブ — CMS（コンテンツ管理システム）パネルを開き、コレクション、コレクションアイテム、Eコマース製品とカテゴリを作成および管理できます。
- インサイトタブ — インサイトパネルを開き、AnalyzeとOptimizeにアクセスできます。Analyzeはサイト全体の分析と実用的なインサイトを提供します。Optimizeでは、異なるスタイル、レイアウト、フロー、文言、画像などをテストするためにサイトで実験を実行できます。
コンテキストバー
コンテキストバーでは、Optimizeでサイトの最適化を管理し、ロケール、ページ、コレクションページ、コレクションアイテムを切り替えることができます。また、メインのコンポーネントを編集しているときや、デザイン承認ステータスも表示されます。
サイトアクション
サイトアクションは、特定のページやサイト自体に関連しています。リアルタイムでサイトに協力しているチームメンバーも、アバターやカウントでここに表示されます。
- 分析モード — ページレベルの分析とインサイトを取得（例：訪問者がどこまでスクロールし、どこをクリックするか）。
- コメント — 他のチームメンバーが残したコメントを確認したり、自分のフィードバックやメモを追加したりします。
- プレビュー — プレビューモードに切り替えます。
- 共有 — 読み取り専用のサイトリンクを生成します。
- 公開 — サイトを公開します。
キャンバスバー
キャンバスバーはデフォルトでキャンバスの上に配置されていますが、キャンバス設定で下に移動できます。
- 元に戻す/やり直しアイコン — 変更をすばやく元に戻したり再適用したりします。
- パンくずリストナビゲーション — 選択した要素の階層を表示します。
- キャンバス設定 — さまざまなオプション（例：定規、ガイド、テキストズームプレビュー）。
- ブレークポイント — 異なるデバイスサイズでのプレビューと編集。
左ツールバー
ウェブサイト構造化のためのメインメニューとパネルを含みます。
Webflowロゴをクリックしてメインメニューにアクセスします。
- 要素、コンポーネント、ページなどのクイック検索
- 元に戻す/やり直し
- コードのエクスポート
- キーボードショートカット
- CSSプレビューを開く
- ヘルプを得るまたはフィードバックを送る
パネルとサイトアクティビティログ
- 追加パネル — ショートカット: A
- ページパネル — ショートカット: P
- ナビゲーターパネル — ショートカット: Z
- コンポーネントパネル — ショートカット: Shift + A
- 変数パネル — ショートカット: G
- スタイルセレクターパネル — ショートカット: J
- アセットパネル — ショートカット: L
- ライブラリパネル — ショートカット: L
- アプリパネル — ショートカット: E
- サイトアクティビティログ — サイトに加えられたデザイン変更
設定、AI学習アシスタント、監査、クイック検索、チュートリアル
- 設定パネル — インターフェース、検索、バックアップ、ローカリゼーション。
- AI学習アシスタント — AIによるヘルプ。
- 監査パネル — ショートカット: U。
- クイック検索 — ショートカット: Command + E (Mac)、Control + E (Windows)。
- ビデオチュートリアルパネル — 無料のビデオコース。
右側のツールバー
要素のスタイル、設定、インタラクションのパネルを含みます。
- スタイルパネル — ショートカット: S。
- 要素設定パネル — ショートカット: D。
- インタラクションパネル — ショートカット: H。
よくある質問
Webflowはどのブラウザをサポートしていますか？
Webflowは、Chrome、Edge、Firefox、Safariの最新の3つのメジャーバージョンを公式にサポートしています。これはプラットフォームと公開されたサイトの両方に適用されます。
サポートが限定されている機能については、関連する記事を参照してください：
WebflowはInternet Explorerをサポートしていません。
Webflowはどの画面解像度/デバイスをサポートしていますか？
Webflowは、少なくとも1268pxの画面幅を持つデスクトップ/ラップトップコンピュータを必要とします。
なぜWebflowはオンライン/ホスト型アプリで、ダウンロード可能なアプリではないのですか？
Webflowは、ブラウザ内でのデザインと迅速な更新を可能にするためにオンライン/ホスト型です。
- WYSIWYGデザイン — HTML/CSSに直接影響。
- 迅速な更新 — 常に最新バージョン、手動更新不要。