Webflow Designer の使い方を学びましょう。
Webflow Designer では、サイト構造の構築、見た目と＆雰囲気をデザインし、コンテンツ、インタラクション、アニ メーション、カスタム コードの追加を行い、完全に機能するウェブサイト、ランディングページ、プロトタイプ、プレゼンテーションなどを作成できます。
Designerでは、コードを1行も記述することなく、HTMLコンテンツの操作、CSSプロパティの設定、インタラクションの作成ができます。ウェブサイトを構築すると、Designerはウェブブラウザがサイトを表示するために使用する、クリーンでセマンティックなコードを出力します。また、このコードをDesignerから他のアプリケーションにエクスポートすることもできます。
Webflow Designer へのアクセス方法は 3 つあります：
Webflow は、Chrome、Edge、Firefox、Safari を含むすべての最新ブラウザの最新3バージョンで Designer を正式にサポートしています。
ブラウザのサポートの程度は、使用する機能によって異なります（例:フィルターは Edge で部分的にサポートされます）一部のブラウザでサポートが制限されている機能については、関連記事で詳細をご覧いただけます：
Webflow は Internet Explorer をサポートしていません。Webflow で作成されたサイトは、最新の Web ブラウザでサポートされているすべての業界標準機能を引き続きサポートしますが、Internet Explorer でサイトが正しく機能することは保証できません。Internet Explorer サポート終了の詳細については、こちらをご覧ください。
Designer には、マウスとキーボードを使用するデバイス（デスクトップまたはラップトップコンピュータ）で、少なくとも 1268px の画面幅が必要です。この要件は、左サイドバー、Designer キャンバス、および右サイドバーの合計です。
Designerはメインキャンバスとツールバー、パネルで構成されています。その概要を説明します：
左ツールバーには、Web サイトを構成するためのリンクとツールがあります。左ツールバーの上部にあるアイコンは、デザイナーパネルの多くを隠していますが、クリックするとパネルを展開します：
Main menu — Webflow logo
Webflowのアイコンをクリックすると、ドロップダウンメニューが表示され、現在開いているサイトのダッシュボード、エディター、サイト設定に移動することができます。
Add panel — shortcut: A
Addパネルでは、[要素]タブから要素を追加したり、[レイアウト]タブからデザイン済みののレイアウトを追加したりできます。
Components panel — shortcut: Shift + A
コンポーネントパネルでは、コンポーネントを作成し、キャンバスに追加することができます。コンポーネントの詳細については、こちらをご覧ください。
Navigator — shortcut: Z
ナビゲータは、現在のページのキャンバス上の要素階層を表示します。ここで、これらの要素を操作することができます。ナビゲーターの詳細については、こちらをご覧ください。
Pages panel — shortcut: P
ページ・パネルでは、サイト・ページやページ設定を整理、管理することができます。ページ・パネルの詳細については、こちらをご覧ください。
CMS panel
CMSパネルでは、コレクションとコレクションアイテムを作成、表示、変更できます。CMSコレクションの詳細については、こちらをご覧ください。
Logic panel
Logicパネルでは、自動化されたワークフロー（「フロー」とも呼ばれる）の作成、表示、修正を行うことができます。Logicの詳細については、こちらをご覧ください。
Users panel
ユーザー パネルでは、サイトのメンバーのためのユーザーアカウントとアクセスグループを作成および管理できます。Usersパネルの詳細については、こちらをご覧ください。
Ecommerce panel
Eコマースパネルでは、商品や商品カテゴリーを作成・変更することができます。ここではまた、あなたが受け取った注文を表示することができます。Eコマースの詳細についてはこちらをご覧ください。
Assets panel
アセットパネルでは、サイトで使用するアセット（ドキュメント、画像、アニメーションなど）をアップロードして整理することができます。アセットパネルについて詳しくは、こちらをご覧ください。
Settings panel
設定パネルでは、検索設定やバックアップ設定など、さまざまな設定を管理できます。
Site activity log
サイト・アクティビティ・ログは、サイトに対して行われた最も重要な設計変更について、あなたやあなたのチームメイトに貴重な可視性を提供します。このログには、パブリッシュ・アクティビティ、バックアップの作成と復元、ページの作成、削除、複製、名前の変更、クラス、コンポーネント、カスタム・コードの変更が記録されます。サイト・アクティビティ・ログの詳細については、こちらをご覧ください。
注： サイト アクティビティ ログは、Webflow Enterprise の顧客および Enterprise パートナーが利用できます。デザイナー（DesignerモードまたはEditorモードを使用）のチーム メンバーであれば誰でも、サイトアクティビティログとその詳細を見ることができます。
Audit panel — shortcut: U
監査パネルは、サイト上のアクセシビリティに関連する一般的な問題を表示し、それらに対処するための提案を提供します。監査パネルの詳細については、こちらをご覧ください。
Quick find — shortcut: Command + E (on Mac) or Control + E (on Windows)
Quick find は、Webflow でサイトを構築する際のワークフローをスピードアップし、作業効率を高める検索ツールです。クイック検索について詳しくはこちら
Video tutorials panel
ビデオチュートリアルパネルでは、Webflowの無料ビデオコースをすべて視聴できます。
Help settings
ヘルプ設定は、Designer をより簡単に使用するためのツールを提供します。
デザイナーで最も大きな領域はキャンバスです。ここでページを操作し、リアルタイムでデザインすることができます。ページ上で要素を選択したり、移動したり、コンテンツを編集したりできます。キャンバスについて詳しくは、こちらをご覧ください。
上部のバーには、別の表示設定や、サイトの保存、公開、エクスポートに便利なツールがあります。左側のメニューボタンの横から、画面を右に移動すると、次のようなツールがあります：
Page indicator
ページ・インジケータは、現在どのページにいるかを表示します。ページ・インジケータをクリックすると、ページ・パネルが開きます。
Preview
プレビューの「目」アイコンは、デザイナーのプレビューモードとデザインモードを切り替えることができ、公開時にサイトがどのように表示され、どのように機能するかをプレビューできます。
Breakpoints
ブレイクポイントアイコンを使用すると、さまざまなブレイクポイントを切り替えて、異なるデバイスサイズでのサイトの見え方をプレビューおよび編集できます。ブレイクポイントについて詳しくは、こちらをご覧ください。
Undo and Redo
[元に戻す(Undo)] および [やり直し(Redo)] ボタンを使用すると、スタイルの適用や要素の削除など、デザイナーで行った操作を元に戻したりやり直したりできます。
Save
保存インジケータは、プロジェクトが保存されているとき（グレーの楕円（...））と、作品が正常に保存されたとき（緑のチェックマーク）を示します。
Designer での作業は自動的に保存されます。iOSではCMD + S、WindowsではCTRL + Sを押すことで、手動でサイトを保存することもできます。保存インジケータをクリックしても、サイトは保存されません。
Export code
コードのエクスポートボタンを使用すると、現在のサイトのコードをエクスポート（書き出し）することができます。コードエクスポートの詳細はこちら。
Share
共有ボタンを使用すると、アドバイスやデザインのヘルプが必要なときに、デザイナーの現在のページへのプレビューリンクを有効にして、友人やWebflow コミュニティと共有することができます。また、コンテンツエディターを招待して、サイト上で共同作業を行うこともできます。
読み取り専用リンクでは、リンクを持つ誰もが Designer でサイトを開き、レイアウトやデザインを操作できます。このモードは、トラブルシューティングと調査目的でのみ使用されます。読み取り専用リンクの共有については、こちらをご覧ください。
招待したコンテンツエディターは、Webflow Editor でサイトを表示したり、サイトコンテンツ（テキスト、リンク、画像、商品、CMS コンテンツなど）を編集したり、ページ設定を変更したりできます。コンテンツエディターの招待について詳しくは、こちらをご覧ください。
Publish
公開ボタンをクリックすると、公開先（どのドメインに公開するか）を選択し、変更を公開することができます。パブリッシュについての詳細はこちらをご覧ください。
ナビゲーションぱんくずバーは、選択した要素の階層を表示します。このパンくずバーのラベルをクリックすることで、その要素が他の親要素の中のどの位置にあるかを確認し（例えば、下の画像では、BodyがHeroセクションの親要素です）、任意の親要素を選択することができます。
Designerの右側のパネルでは、要素を非常に細かく制御することができます。
ここには4つの主要なパネルがあります：
Style panel — shortcut: S
スタイルパネルでは、選択した要素で利用可能なすべてのCSSプロパティにアクセスできます。これらの値を適切なフィールドに入力または選択すると、スタイルが即座にキャンバス上の要素に適用されます。スタイルパネルについて詳しくは、こちらをご覧ください。
Element settings panel — shortcut: D
要素設定パネルでは、現在選択されている要素で利用可能なさまざまな設定にアクセスできます。
Style manager — shortcut: G
スタイル・マネージャーは、あなたのサイトで作成または編集したクラス、コンボ・クラス、タグの完全なリストを表示します。名前を変更したり、使用しなくなったスタイルを整理したりするのに便利です。スタイルマネージャーについての詳細はこちらをご覧ください
Interactions panel — shortcut: H
インタラクションパネルでは、インタラクションを作成し、選択した要素に適用することができます。インタラクションの詳細はこちらをご覧ください
複数のチームメイトが Webflow Designer でコンテンツを編集している間に、1 人のチームメイトがサイト構造の設計と構築を行うことができます。デザインプロセスを流動的に保つために、チームメイト間でデザインコントロールを譲り合ったり、サイト内で他のユーザーが作業している場所をリアルタイムで確認することができます。Webflow Designer でのコラボレーションについて詳しくは、こちらをご覧ください。
Webflow Designer がオンラインアプリ/ホスト型プログラムである理由は、Web デザインツールはブラウザ上でデザインでき、その結果を即座に反映できるものでなければならないと考えているからです。Webflow がダウンロードではなく、ホスト型プログラムである理由は以下の通りです：
