お問い合わせ

何を探していますか？

によるユアン・マック
2024年4月14日

Webflow デザイナーの紹介

Webflow Designer の使い方を学びます。

Webflow デザイナーを使用すると、サイト フレームワークを構築し、サイトの外観と雰囲気を概念化し、コンテンツ、インタラクション、アニメーション、カスタマイズされたコードを追加して、完全に機能する Web サイト、ランディング ページ、プロトタイプ、プレゼンテーションなどを作成できます。

デザイナーでは、コードを記述することなく、HTML 要素を処理し、CSS スタイルを定義し、インタラクションを確立することができます。Web サイトを構築する際に、デザイナーは Web ブラウザーがサイトを表示するために使用する、純粋でセマンティックな Web に最適化されたコードを生成します。さらに、デザイナーのコードは他のアプリケーションにエクスポートできます。

このチュートリアルでは以下の内容を取り上げます。

  1. デザイナーへのアクセスに関するガイダンス
  2. デザイナー構造の概要
  3. 複数のユーザー間のコラボレーション
  4. デザイナーがオンラインアプリケーションである理由

デザイナーに会う

デザイナーに連絡するには:

  • アクセスすることで ダッシュボード サイトのサムネイルをクリックすると
  • 経由 サイト設定 選択して デザイナー 上部のツールバーから
  • を通って 編集者 選択することで デザイナー クリックした後 メニューボタン 左下隅

デザイナーの前提条件: 互換性のあるWebブラウザ

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

ブラウザの互換性の範囲は、使用される機能によって異なります (例: フィルターは Edge では部分的にサポートされています)。特定のブラウザでサポートが制限されている機能については、それぞれの記事で詳細を確認できます。

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

インサイダーヒント: ブラウザとOSのバージョンを確認するには、次のサイトをご覧ください。 私のブラウザは何ですか.

デザイナーの前提条件: 互換性のあるディスプレイ解像度

デザイナーは、マウスとキーボードを備えたデバイス（デスクトップまたはラップトップなど）を必要とし、画面幅は 少なくとも1268ピクセルこの幅は、左サイドバー、デザイナー キャンバス、右サイドバーを合わせた幅です。

デザイナーの構造

デザイナーには主要な キャンバス ツールバーとパネルのコレクション。概要については以下をお読みください。

  • 左側のツールバーとパネル
  • キャンバス
  • 上部のバー
  • 下部ナビゲーションパンくずバー
  • 適切なパネル

左側のツールバーとパネル

左側のツールバーには、Web サイトを整理するためのさまざまなリンクとツールが表示されます。左側のツールバーの上部にあるアイコンをクリックすると展開されるデザイナー パネルの大部分を非表示にすることができます。

  • メインメニュー
  • パネルを追加
  • ページパネル
  • ナビゲーターパネル
  • コンポーネントパネル
  • 変数パネル
  • スタイルセレクタパネル
  • アセットパネル
  • CMSパネル
  • ロジックパネル
  • ユーザーパネル
  • 電子商取引パネル
  • アプリパネル
  • サイトアクティビティログ
  • 設定パネル
  • ヘルプ設定
  • 監査委員会
  • クイック検索
  • ビデオチュートリアルパネル

メインメニュー — Webflow ロゴ

Webflow アイコンを選択すると、ドロップダウン メニューが表示され、ダッシュボード、現在表示しているサイトのサイト設定、またはエディターに移動できます。さらに、メイン メニューには次の機能があります。

  • へのアクセス クイック検索
  • 最後の操作を元に戻す
  • 最後の操作をやり直す
  • コードのエクスポート
  • キーボードショートカットの表示
  • 活性化する CSSプレビュー
  • 支援を受ける、またはフィードバックを提供する

パネルの追加 — ショートカット: A

の パネルを追加 の要素を組み込むことを可能にする 要素 タブまたはあらかじめ用意されたレイアウトから レイアウト タブ。

設定パネル

の 設定パネル さまざまな設定を処理できます。 検索設定 そして バックアップ設定、 同様に ローカリゼーション設定このセクションでは、 ユーザーインターフェース タブでは、デザイナー インターフェースの希望する明るさ設定を選択できます。

アシスタンス設定

アシスタンス設定では、デザイナーの使用を簡素化するツールが提供されます。

  • サポートと提案 — デザイナー内で直接 Webflow ヘルプガイドを参照できます。ここから Webflow 大学ガイド、ビデオコース、または Webflow フォーラムフィードバックやサポート リクエストを送信することもできます。‍
  • キーボードショートカット — デザイナーでのデザインワークフローを強化するキーボードショートカットを表示します。これらのショートカットは、 シフト + /.‍
  • CSSプレビュー — キャンバス上の選択された要素に対して作成された CSS を示します。このプレビューでは、生成された CSS をコピーして、好きな場所で使用することもできます。

チェックパネル — ショートカット: U

の チェックパネル サイト上で一般的なアクセシビリティ関連の問題を表示し、その解決方法を提案します。チェック パネルの詳細をご覧ください。

効率的な検索 - ショートカット: Command + E (Mac) または Control + E (Windows)

効率的な検索 は、Webflow でサイトを構築する際のワークフローを加速し、効率性を高める検索ツールです。効率的な検索について詳しくは、こちらをご覧ください。

教育ビデオパネル

の 教育ビデオパネル Webflow の無料ビデオ コースをすべて視聴する実用的な方法を提供します。

ワークスペース

デザイナーの最も広い領域は ワークスペースここでは、ページやデザインをリアルタイムで操作できます。要素を選択したり、位置を変更したり、ページ上で直接コンテンツを調整したりできます。ワークスペースの詳細をご覧ください。

上部

上部のセクションには、表示設定の別のコレクションと、サイトの保存、公開、エクスポートに役立つツールが用意されています。左側のメニュー ボタンの横から始まり、画面の右側まで移動すると、次のツール セットが表示されます。

  • ロケールの概要
  • ページインジケーター
  • 適応ブレークポイント
  • チームプロフィール写真
  • ステータスモード
  • ステータスを保存
  • コードのエクスポート
  • 意味合い
  • プレビュー
  • 共有
  • 出版

ロケールの概要

の ロケールの概要 現在表示または編集している場所が表示されます。 ロケールの概要 ドロップダウンを使用すると、サイト上で構成した任意のセカンダリ ロケーションを選択して移動できます。ローカリゼーションの詳細については、Webflow を参照してください。

ページインジケーター

の ページインジケーター 現在開いているページを表示します。クリックすると、 ページインジケーター 発表する ページパネル.

適応ブレークポイント

の 適応ブレークポイントアイコン さまざまなブレークポイント ビューを切り替えて、さまざまなデバイスの画面サイズでのサイトの外観をプレビューおよび変更できます。アダプティブ ブレークポイントの詳細をご覧ください。

チームプロフィール写真

の チームプロフィール写真 サイトであなたと共同作業している同僚をリアルタイムで表示します。あなたと同僚がサイトの別のページで作業している場合、これはチーム番号 (例: 「2」) として表示されることがあります。プロフィール写真または番号をタップすると、同僚が設計または編集しているページの詳細を表示できます。

ステータスモード

の ステータスモード ドロップダウンには、現在デザイン中か編集中かが表示されます。クリックすると、デザイン モードと編集モードを切り替えたり、メイン サイトに影響を与えずにデザイン用のページ ブランチを生成したりできます。

ステータスを保存

の ステータスを保存 作業が保存されているとき、灰色の「回転する矢印”アイコンが表示され、作業が正常に保存されると緑色の“丸で囲まれたチェックマーク”アイコンをクリックします。

デザイナーでの作業は自動的に保存されます。手動でサイトを保存したい場合は、 指示 + ス iOSまたは コントロール + ス Windowsでは、 ステータスを保存 サイトは保存されません。

コードのエクスポート

の コードのエクスポート ボタンを使用すると、現在のサイトのコードをエクスポートして、zip ファイルでダウンロードできるように準備できます。コードのエクスポートの詳細については、こちらをご覧ください。

意味合い

「含意「 」アイコンをクリックすると、コメント モードに入り、デザインに関するコメントを表示したり追加したりできます。コメント モードの詳細については、こちらをご覧ください。

プレビュー

プレビュー「遊ぶ「」アイコンを使用すると、デザイナーのプレビュー モードとデザイン モードを切り替えることができ、公開時にサイトがどのように表示され、機能するかをプレビューできます。

注記： プレビュー モードでは、カスタム コードの埋め込みは表示されず、カスタム コードの機能がサイトのプレビューに適用されません。カスタム コードのスクリプトまたは埋め込みは、サイトが公開されるかエクスポートされたときに有効になります。カスタム コードのプレビューの詳細については、こちらをご覧ください。

共有

の 共有 ボタンを使用すると、アドバイスやデザインのサポートが必要なときに、デザイナーの現在のページへのプレビュー リンクをアクティブにして、知人や Webflow コミュニティと共有できます。また、コンテンツ編集者を招待して、サイトで共同作業を行うこともできます。

読み取り専用リンクを使用すると、リンクを知っている人なら誰でもデザイナーでサイトのレイアウトとデザインを開いて操作できます。読み取り専用モードでサイトを開いた場合、サイトに変更を加えることはできません。このモードはトラブルシューティングと調査の目的でのみ使用されます。読み取り専用リンクの共有の詳細については、こちらをご覧ください。

招待したコンテンツ編集者は、サイトを表示し、サイト コンテンツ (テキスト、リンク、画像、製品、CMS コンテンツなど) を編集したり、Webflow エディターでページ設定を変更したりできます。コンテンツ編集者の招待の詳細については、こちらをご覧ください。

出版

の 出版 ボタンを使用すると、公開先 (つまり、公開先のドメイン) を選択し、変更を公開できます。公開の詳細については、こちらをご覧ください。

パスインジケータバー

パス インジケーター バーには、選択した要素の階層構造が表示されます。親要素間の要素の位置が視覚化され (たとえば、以下の例では、Body は Section 要素の親です)、バー内のラベルをクリックして任意の親要素を選択できます。

右側のパネル

Designer インターフェイスの右側にある残りの 3 つのパネルでは、要素のスタイル、構成、アクションを細かく制御できます。

  • スタイリングパネル
  • 要素構成パネル
  • アクションパネル

スタイリングパネル — 略語: S

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

要素構成パネル — 略語: D

の 要素構成パネル 現在選択されている要素に関連するさまざまな設定にアクセスできます。

アクションパネル — 略称: H

の アクションパネル 選択した要素へのインタラクションの作成と適用を可能にします。アクションの詳細をご覧ください。

複数ユーザーによるコラボレーション

Webflow デザイナーでは、1 人のチーム メンバーが Web サイトの設計と構造化に集中する間に、複数のチーム メンバーが同時にコンテンツを編集できます。チーム メンバー間で設計管理を移行し、サイト内での位置をリアルタイムで追跡することで、設計プロセスがスムーズになります。Webflow デザイナーでのコラボレーションについて詳しくは、こちらをご覧ください。

デザイナーのオンライン性の利点

Webflow は、Web デザイン ツールではブラウザーで直接デザインし、即座に結果を出すことができるべきだと考えているため、オンライン アプリケーション アプローチを採用しています。Webflow をダウンロード可能なプログラムではなくホスト プログラムとしてサポートする理由は他にもあります。

  • リアルタイム視覚化 (WYSIWYG) — Webflow でのすべてのアクションは、Web サイトの HTML と CSS に直接反映されます。Webflow に表示される内容は、サイト公開時に表示される内容を反映します。
  • 迅速なアップデートと機能強化 — ホスト型アプリケーションであるため、新機能や修正プログラムの迅速な開発、テスト、展開が可能になり、ユーザーは手動で更新することなく常に Webflow の最新バージョンにアクセスできます。
  • 強化されたコラボレーション — 共同 Web デザイン ワークフローのトレンドを考慮すると、オンライン プラットフォームにより、チーム全体のアクセスと Web サイトの編集が簡素化されます。

‍

ユアン・マック
Ewan Mak による最新の投稿 (すべてを見る)

関連記事

によるユアン・マック
更新日