「ウェブフローデザイナー」では、サイト構造の構築、視覚的&直感的なデザイン、コンテンツ、インタラクション、アニメーション、カスタムコードの追加を行い、完全に機能するWebサイト、ランディングページ、プロトタイプ、プレゼンテーションなどを作成することが可能です。
デザイナー機能では、JavaScriptを記述することなく、HTMLコンテンツの視覚的な操作、CSSプロパティの設定、インタラクションの作成が可能です。ウェブサイトを構築すると、ウェブに適したコードを自動的に作成します。
デザイナーへのアクセス方法
Webflow Designerへのアクセス方法は、3通りあります。
- ダッシュボードからプロジェクトのサムネイルをクリックします。
- プロジェクト設定から、プロジェクトの上部ツールバーのDesignerをクリックします。
- エディタの左下にあるメニューボタンをクリックし、Designerを選択すると、エディタから表示されます。
デザイナー要件：対応ブラウザ
Webflow は Chrome または Safari の最新バージョンと、さまざまな更新サイクルに対応する 2 つのバージョンでデザイナーを公式にサポートしています。
デザイナー機能の構造
- Designer は、メインキャンバス、ツールバー、パネルで構成されています。以下は、その概要です。
- 左のツールバーとパネル
- キャンバス
- 上部のバー
- 下部のナビゲーション・ブレッドクラムバー
- 右側のパネル
1. 左のツールバーとパネル
左のツールバーには、Webプロジェクトを構成するためのリンクとツールが用意されています。左のツールバーに含まれるパネルが以下のものです。左ツールバーの上部にあるアイコンは、Designer パネルの要素を非表示にして隠すこともできます。
それでは、左のツールバーのボタンをひとつひとつ確認してみましょう！
- 「メインメニュー」 - Webflow ロゴ
Webflow のアイコンをクリックすると、メニューが表示され、現在開いているプロジェクトのダッシュボード、エディタ、プロジェクト設定に移動することができます。
- 「要素の追加パネル」 - ショートカット：A
追加パネルを開き、要素パネルから要素を追加したり、レイアウトパネルからあらかじめ作成されたレイアウトを追加することができます。
- 「シンボル・パネル」 - ショートカット：Shift+A
シンボルパネルを開き、シンボルパネルからシンボルを追加できます。
- 「ナビゲータ」- ショートカット：Z
現在表示されているページ上の各要素の階層を表示します。ここでは、これらの要素を視覚的に操作することができます。
- 「ページパネル」アセットパネル
ページの設定を整理・管理できる「ページパネル」を開きます。
- 「CMSパネル」
CMS Collectionsパネルを開き、CollectionとCollection itemを作成および変更できます。
- 「Ecommerceパネル」
Ecommerceパネルを開き、商品と商品カテゴリを作成および変更できます。また、受注した商品も表示されます。
- 「アセットパネル」
アセットパネルが表示されます。プロジェクトで使用するアセットやリンクしているアセットをアップロードして整理することができます。
- 「設定パネル」
設定パネルを開き、検索設定やバックアップ設定など、様々な設定を行うことができます。
- 「監査パネル」 - ショートカット：U
監査パネルを開き、プロジェクトのアクセシビリティに関する一般的な問題に対処することができます。
- 「クイック検索ツール」 - ショートカット：Command + E 又は Control + E
Designerの強力な検索バーであるQuick findツールを開き、Webflowで構築する際のワークフローを高速化し、効率を向上させることができます。
- 「ビデオチュートリアルパネル」
ビデオチュートリアルパネルを開き、Webflow のビデオコースをすべて見ることができます。
- 「ヘルプ設定」
ヘルプの設定は、Designer をより簡単に使用するためのツールを提供します。
- ヘルプとフィードバック
Designer 上で Webflow のヘルプガイドを参照できます。ここから、Webflow University Guides、ビデオコース、Webflowフォーラムに移動することもできます。また、フィードバックやヘルプリクエストを送信することもできます。
- キーボードショートカット
Designer でのデザインワークフローを高速化するためのキーボードショートカットが表示されます。これらのショートカットは、Shift + / を押すことによっても表示できます。
- CSS プレビュー
選択された要素に対して生成された CSS をキャンバス上に表示します。このプレビューでは、生成された CSS をコピーして、好きな場所で使用することもできます。
- ウォークスルーのリセット
ウォークスルーのビデオを見ることができます。これをクリックすると、もう一度チュートリアルを確認することができます。
2. キャンバス
Designer の主要な領域はキャンバスです。ここでは、ページをリアルタイムで操作することができます。要素を選択したり、移動させたり、ページ上でコンテンツを編集することができます。
- 「トップバー」
トップバーには、表示設定のほか、サイトの保存、公開、エクスポートに便利なツールも用意されています。左側のメニューボタンから右側に向かって、次のようなツールが並んでいます。
- 「ページインジケーター」
現在、どのページにいるのかを表示します。また、このインジケータをクリックすると、ページパネルが開きます。
- 「プレビュー」
Designerのプレビューモードとデザインモードを切り替えて、パブリッシュ時のプロジェクトの見え方を確認することができます。
- 「ブレイクポイントボタン」
異なるデバイス表示に切り替えて、その画面におけるプロジェクトのデザインを確認・編集することができます。
- 「元に戻す」と「やり直し」ボタン
スタイルの適用や要素の削除など、Designerで行った操作を元に戻したり、やり直したりすることができます。
- 「保存」
作業内容が保存されると灰色の楕円（...）で表示され、保存されると緑のチェックマークで表示されます。Designerでの作業は自動的に保存されます。MacではCMD+S、WindowsではCTRL+Sを押して、プロジェクトを手動で保存することができます。このアイコンをクリックしても、プロジェクトは保存されません。
- 「コードの書き出し」
現在のプロジェクトのコードをエクスポートし、ZIP ファイルとしてダウンロードできます。
- 「共有」
このオプションを使用すると、アドバイスやデザインのヘルプが必要なときに、デザイナーの現在のページへのプレビューリンクを有効にして、友人やWebflowコミュニティ、スタッフと共有することができます。
このリンクは、読み取り専用モードでデザイナーを開き、アクセスできる人なら誰でもプロジェクトのレイアウトやデザインを見たり操作したりすることができるようにします。読み取り専用モードで開いているときは、プロジェクトに変更を加えることはできません。トラブルシューティングや探索の目的にのみ使用されます。
ここから、共同作業者を招待し、サイトのコンテンツを編集できるようにすることもできます。
- 「パブリッシュ」
公開先を選択し、サブドメインやカスタムドメインに変更を即座に公開することができます。
3. 下部のナビゲーション・ブレッドクラムバー
ボタンバーには、選択した要素の階層が表示されます。選択した要素が、他のどの親要素の中にあるのか、任意の親要素を選択することができます。
また、このパンくずバーのラベルをクリックすることで、任意の親要素を選択することができます。
4. 右側のパネル
3つ目の主要セクションである右側のパネルは、エレメントを非常に細かくコントロールすることができます。
ここでは、大きく分けて4つのパネルがあります。
- 「スタイルパネル」 - ショートカット：S
選択した要素で利用可能なすべてのCSSプロパティにアクセスできるようにします。これらの値を適切なフィールドに入力するだけで、キャンバス上の要素に適用されたスタイルを即座に確認することができます。
- 「要素設定パネル」 - ショートカット：D
選択要素で利用可能なさまざまな設定にアクセスできるようにします。
- 「スタイルマネージャ」 - ショートカット：G
プロジェクトで作成または編集したクラス、コンボクラス、タグの完全なリストが表示されます。名前を変更したり、使わなくなったスタイルを整理するのも簡単です。
- 「インタラクションパネル」 - ショートカット：H
インタラクションを作成し、選択した要素に適用できます。
複数ユーザーによるコラボレーション
チームプランの場合、Designer機能で複数の人が同じWebflowプロジェクトに同時にアクセスすることは不可能です。一方、Editor機能では、複数の人が静的コンテンツと動的コンテンツを同時に編集することが可能です。一方、エディターでは、複数の人が静的および動的コンテンツを同時に編集することができます。
同じコンテンツを2人が同時に編集した場合、最後に編集した方が反映されるため、複数名で編集する時は編集時間の調整が必要です。
デザイナー機能がオンラインアプリである理由
Webflow Designerがオンラインアプリ/ホストプログラムである理由は、Webデザインツールはブラウザ上でデザインを行い、その結果をすぐに確認できることが重要であると考えるからです。Webflow がダウンロードプログラムではなく、ホスティングプログラムである理由は以下のとおりです。
- WYSIWYG（What you see is what you get）
Webflowでは、あなたが行っているすべてのことが、あなたのウェブサイトのHTMLとCSSに直接影響を与えます。そのため、Webflow で表示されるものは、サイトを公開する際に常に表示されるものとなります。
- 更新や改善のプッシュが速い
ホスティングされたアプリとして、新機能やバグフィックスを数分で開発、テスト、サーバーにプッシュすることができます。これにより、誰もが常に最新かつ最高のバージョンの Webflow を使用することができます。
- 真のコラボレーション
Webデザインワークフローのコラボレーションが進む中、オンラインプラットフォームがあれば、チーム全体がWebサイトにアクセスし、編集することが容易になります。
その他にも、クラウドでのホスティング、非常にシンプルなフォーム処理、最先端のウェブ技術に合わせて進化するツールの構築など、多くの理由がありますが、時間が経つにつれ、そのメリットはより明確になっていきます。