Webflow Designer入門

デザイナーへのアクセス方法

Webflow Designer へのアクセス方法は 3 つあります：

1. ダッシュボードからサイトのサムネイルをクリック
2. サイト上部ツールバーのDesignerをクリックしてサイト設定から
3. エディターの左下にあるメニューボタンをクリックし、Designerを選択

Designer の必須要件: 対応するブラウザ

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

ブラウザのサポートの程度は、使用する機能によって異なります（例:フィルターは Edge で部分的にサポートされます）一部のブラウザでサポートが制限されている機能については、関連記事で詳細をご覧いただけます：

• CSS transforms 3d - インタラクションで使用されます
• CSS transitions - インタラクションで使用されます
• CSS flexbox - Style panel > Layoutで使用します
• CSS filters - インタラクションで使用されます
• CSS grid - Style panel > Layoutで使用します

Webflow は Internet Explorer をサポートしていません。Webflow で作成されたサイトは、最新の Web ブラウザでサポートされているすべての業界標準機能を引き続きサポートしますが、Internet Explorer でサイトが正しく機能することは保証できません。Internet Explorer サポート終了の詳細については、こちらをご覧ください。

Designerの必須要件：サポートされる画面解像度

Designer には、マウスとキーボードを使用するデバイス（デスクトップまたはラップトップコンピュータ）で、少なくとも 1268px の画面幅が必要です。この要件は、左サイドバー、Designer キャンバス、および右サイドバーの合計です。

デザイナーの構造

Designerはメインキャンバスとツールバー、パネルで構成されています。その概要を説明します：

• 左のツールバーとパネル
• キャンバス
• トップバー
• ナビゲージョンのパンクズバー
• 右のパネル

左ツールバーとパネル

左ツールバーには、Web サイトを構成するためのリンクとツールがあります。左ツールバーの上部にあるアイコンは、デザイナーパネルの多くを隠していますが、クリックするとパネルを展開します：

• Main menu
• Add panel
• Components panel
• Navigator panel
• Pages panel
• CMS panel
• Logic panel
• Users panel
• Ecommerce panel
• Assets panel
• Settings panel
• Site activity log
• Audit panel
• Quick find
• Video tutorials panel
• Help settings

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 をより簡単に使用するためのツールを提供します。

• Help and feedback - Designer 内で Webflow ヘルプガイドを閲覧できます。ここから、Webflow University のガイド、ビデオ コース、Webflow フォーラムに移動することもできます。またフィードバックやヘルプリクエストを送信することもできます。
• Keyboard shortcuts - Designer でのデザインワークフローを高速化するキーボード ショートカットが表示されます。これらのショートカットは、Shift + / を押しても表示できます。
• CSS preview - 選択された要素に対して生成された CSS をキャンバス上に表示します。このプレビューでは、生成されたCSSをコピーして好きな場所で使用することもできます。

The canvas

デザイナーで最も大きな領域はキャンバスです。ここでページを操作し、リアルタイムでデザインすることができます。ページ上で要素を選択したり、移動したり、コンテンツを編集したりできます。キャンバスについて詳しくは、こちらをご覧ください。

The top bar

上部のバーには、別の表示設定や、サイトの保存、公開、エクスポートに便利なツールがあります。左側のメニューボタンの横から、画面を右に移動すると、次のようなツールがあります：

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

公開ボタンをクリックすると、公開先（どのドメインに公開するか）を選択し、変更を公開することができます。パブリッシュについての詳細はこちらをご覧ください。

The navigation breadcrumb bar

ナビゲーションぱんくずバーは、選択した要素の階層を表示します。このパンくずバーのラベルをクリックすることで、その要素が他の親要素の中のどの位置にあるかを確認し（例えば、下の画像では、BodyがHeroセクションの親要素です）、任意の親要素を選択することができます。

The right panels

Designerの右側のパネルでは、要素を非常に細かく制御することができます。

ここには4つの主要なパネルがあります：

• Style panel
• Element settings panel
• Style manager
• Interactions panel

Style panel — shortcut: S

スタイルパネルでは、選択した要素で利用可能なすべてのCSSプロパティにアクセスできます。これらの値を適切なフィールドに入力または選択すると、スタイルが即座にキャンバス上の要素に適用されます。スタイルパネルについて詳しくは、こちらをご覧ください。

Element settings panel — shortcut: D

要素設定パネルでは、現在選択されている要素で利用可能なさまざまな設定にアクセスできます。

Style manager — shortcut: G

スタイル・マネージャーは、あなたのサイトで作成または編集したクラス、コンボ・クラス、タグの完全なリストを表示します。名前を変更したり、使用しなくなったスタイルを整理したりするのに便利です。スタイルマネージャーについての詳細はこちらをご覧ください

Interactions panel — shortcut: H

インタラクションパネルでは、インタラクションを作成し、選択した要素に適用することができます。インタラクションの詳細はこちらをご覧ください

複数人で共同作業

複数のチームメイトが Webflow Designer でコンテンツを編集している間に、1 人のチームメイトがサイト構造の設計と構築を行うことができます。デザインプロセスを流動的に保つために、チームメイト間でデザインコントロールを譲り合ったり、サイト内で他のユーザーが作業している場所をリアルタイムで確認することができます。Webflow Designer でのコラボレーションについて詳しくは、こちらをご覧ください。

Designerがオンラインアプリである理由

Webflow Designer がオンラインアプリ/ホスト型プログラムである理由は、Web デザインツールはブラウザ上でデザインでき、その結果を即座に反映できるものでなければならないと考えているからです。Webflow がダウンロードではなく、ホスト型プログラムである理由は以下の通りです：

• WYSIWYG（What you see is what you get） - Webflow で行うすべての作業は、Web サイトの HTML と CSS に直接影響します。Webflow で表示される内容は、サイトを公開する際に常に表示されます。
• アップデートや改善が速い - ホスティングされたアプリとして、開発、テスト、新機能やバグ修正を数分でサーバーにプッシュすることができます。これにより、手動でアップデートをすることなく、常に最新かつ最高の Webflow を利用することができます。