【日本語版Webflow University】 日本語版Webflow Universityで基本機能を徹底解説
Webサイト制作のためのノーコードツール『Webflow』。Webflowが日本語対応していないことから、英語はおっくう、、、でもノーコードでイケてるサイトを作りたい、という(私みたいな、、、)方向けに、Webflowの解説サイト『Webflow University』の日本語版を開校しました。初心者でも分かりやすく、Webflowの基本的な使い方を機能ごとにシリーズで解説していきます。
See More【日本語版Webflow University】 デザイナー画面の紹介
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、実際にサイト構築する際に使用する「Designer画面」について簡単に解説しています。Webflowとは何か?Webflowの始め方が分からない。という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 HTMLとCSSの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、実際にサイト構築する際に必要な基礎知識「HTMLとCSS」について簡単に解説しています。Webデザイナーになりたい方だけでなく、社内でWebflow運用を考えている方にもおすすめの入門書です。是非ご覧ください。
See More【日本語版Webflow University】 ボックスモデルとは
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、実際にサイト構築する際に必要な知識「ボックスモデル」について簡単に解説しています。 Webflowを使ってイケてるサイトを作りたい、Webflowを自社で運用してマーケティング活動に活かしたいという方必見の内容となっています。
See More【日本語版Webflow University】 要素の階層構造
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、実際にサイト構築する際の基礎知識「要素の階層構造」について簡単に解説しています。Webサイトは要素1つひとつが階層構造になってできています。また、Webflowはこの階層構造を可視化することでより操作しやすいツールになっています。Webサイトを理解するカギとなる内容です。
See More【日本語版Webflow University】 ナビゲーターパネル
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能「ナビゲーターパネル(Navigator Panel)」について簡単に解説しています。Webflowとは何か?Webflowの始め方が分からない。という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 エレメント追加パネル
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能「エレメント追加パネル(Add Elements Panel)」について簡単に解説しています。Webflowとは何か?Webflowの始め方が分からない。という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 要素解説「セクション」
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、サイトの構成を決める基本要素「セクション(Sectionl)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 コンテナ
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、サイトの構成を決める基本要素「コンテナ(Container)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 コラム
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、サイトの構成を決める基本要素「コラム(Column)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 ディブブロック
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、サイトコンテンツの骨格要素「ディブブロック(Div Block)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 フォーム(問い合わせフォーム)
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、コンバージョンの要「フォーム(Form)」について簡単に解説しています。Webflowで問い合わせフォームを実装したサイトを作りたい、Webflowの問い合わせフォーム機能の使い方を知りたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 ナビゲーションバー
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、回遊率・PV数の要「ナビゲーションバー(Navbar)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 スライダー
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、サイトUXの要「スライダー(Slider)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 シンボル
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本要素であり、効率的にサイト構築するための便利機能「シンボル(Symbol)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 サイズ
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能であり、サイト制作に必須の知識「サイズ(Size)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 スタイル パネルの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflow注目の機能の一つであり、サイト制作をパワフルに効率化する「スタイルパネル(Style Panel)」について簡単に解説しています。Webflowがなぜ効率的なのか、なぜほかのツールよりも優れているのかが分かる内容になっています。
See More【日本語版Webflow University】 HTMLタグ
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「HTMLタグ」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 クラス
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「クラス(Class)」について簡単に解説しています。Webflowがなぜ効率的なツールなのか、Webflowがなぜ柔軟で自由度の高いツールなのかが分かる内容となっています。
See More【日本語版Webflow University】 Webタイポグラフィ(フォント)の設定
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能であり、サイト制作に必須の知識「Webタイポグラフィ(Typography)」について簡単に解説しています。フォントなどWebflowの基本的な使い方が知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 ステート
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「ステート(State)」について簡単に解説しています。UXの優れたサイトをWebflowで作りたい、Webflowがなぜ柔軟で自由度の高いツールなのか知りたいという方におすすめの内容となっています。
See More【日本語版Webflow University】 スペーシング
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能であり、サイト制作に必須の「スペーシング(Spacing)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 ディスプレイの設定
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「ディスプレイ(Display)」について簡単に解説しています。Webflowがなぜ効率的なツールなのか、Webflowがなぜ柔軟で自由度の高いツールなのかが分かる内容となっています。
See More【日本語版Webflow University】 フレックスボックス
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「フレックスボックス(Flexbox)」について簡単に解説しています。Webflowがなぜ効率的なツールなのか、Webflowがなぜ柔軟で自由度の高いツールなのかが分かる内容となっています。
See More【日本語版Webflow University】 グリッド
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowがサイト制作を大幅に効率化するカギとなる「グリッド(Grid)」について簡単に解説しています。Webflowがなぜ効率的なツールなのか、Webflowがなぜ柔軟で自由度の高いツールなのかが分かる内容となっています。
See More【日本語版Webflow University】 CSSポジション設定
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの基本機能であり、サイト制作に必須の知識「CSSポジション(Position)」について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 レスポンシブデザインの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、レスポンシブデザインでサイト制作するための基礎知識について簡単に解説しています。Webflowの使い方を知りたい、Webflowでサイトを作ってみたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 ブレイクポイントの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowでレスポンシブデザインを制作するための「ブレイクポイント機能」について簡単に解説しています。Webflowがなぜ効率的なツールなのか、Webflowがなぜ柔軟で自由度の高いツールなのかが分かる内容となっています。
See More【日本語版Webflow University】 インタラクションの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのインタラクション機能についての概要を説明しています。Webflowで作ったサイトに動きを付けたい、Webflowの使い方を知りたい、Webflowで何ができるのか知りたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 トリガーとアニメーション
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのインタラクション機能の設定方法について詳細に説明しています。Webflowで作ったサイトに動きを付けたい、Webflowの使い方を知りたい、Webflowで何ができるのか知りたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 動的コンテンツの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、ブログやメディアサイトなどで必須の基礎知識「静的コンテンツ」と「動的コンテンツ」の違いについて簡単に解説しています。そもそもサイト制作について勉強中の方や、Webflowの使い方を知りたい、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 Webflow CMSの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能についての概要を説明しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 コレクションリスト
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能を使って一覧ページを構築する方法について説明しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 コレクションリストのフィルタ機能について
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのコレクションリスト(動的一覧コンテンツ)にフィルタを掛ける方法について説明しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 コレクションページの構成とスタイリング
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能を使って生成される動的ページのテンプレートをデザインする方法を解説しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 エディター機能の概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webに詳しくない方でもWebサイトを簡単に更新できるEditor(エディター)機能の基本的な使い方について解説しています。静的ページも簡単に更新できる優れものです。
See More【日本語版Webflow University】 CMS解説_プレーンテキストの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能で使えるフィールドの一種「プレーンテキスト」で出来ることを紹介しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 CMS解説_リッチテキストの概要
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能で使えるフィールドの一種「リッチテキスト」で出来ることを紹介しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 CMS解説_画像フィールド
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能で使えるフィールドの一種「画像フィールド」で出来ることを紹介しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 CMS解説_スイッチフィールド
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのCMS機能で使えるフィールドの一種「スイッチフィールド」で出来ることを紹介しています。Webflowでブログを作ってみたい、WebflowのCMS機能はどうなっているの?、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 オートマージン
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのオートマージンの使い方を紹介しています。Webflowで要素を水平方向に中央に揃えたい!、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 ブレイクポイントのショートカット
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのブレイクポイントのショートカットの使い方を紹介しています。Webflowでブレイクポイントを瞬時に変更したい!、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 クライアントのためのエディターガイド :コレクションタブ
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのエディター画面のコレクションタブの使い方を紹介しています。Webflowでエディター画面のコレクションタブの使い方を知りたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 コンポーネントがコレクションリストで 利用可能に!
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのコンポーネントがコレクションリストで利用可能に!を紹介しています。Webflowででコンポーネントをコレクションリストで利用したい!、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 クライアントのためのエディターガイド:序章
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのエディターの使い方の最初の一歩を紹介しています。Webflowでエディターを使ってみたい!、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 要素の移動が楽になる! 新しいキーボードショートカット
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの新しいキーボードショートカットをご紹介しています。Webflowで新しいキーボードのショートカットを使ってみたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 圧倒的時短に!クイックスタックを使ってみよう!
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのクイックスタックの使い方を紹介しています。Webflowでクイックスタックを使ってみたい!、という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow (ウェブフロー)University】 クライアントのための エディターガイド:ページタブ
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのエディター画面のページタブを紹介しています。Webflowでエディター画面のページタブを知りたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 Webflowでサイトを複製
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowでサイトを複製する方法を紹介しています。Webflowでサイトを複製する方法が知りたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 ダッシュボードの全て
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowのダッシュボードの使い方を紹介しています。Webflowでダッシュボードの使い方を知りたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 要素の階層について
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、Webflowの要素の階層を紹介しています。Webflowで要素の階層について詳しく知りたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow University】 Webflow(ウェブフロー)Expertsについて
Webflowの基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのWebflow Expertsを紹介しています。WebflowでExpertsになってみたい!という方にぜひ見ていただきたい内容になっています。
See More【日本語版Webflow(ウェブフロー) University】 HTMLの構造について
Webflow(ウェブフロー)の基本的な使い方を分かりやすく日本語で解説します。この記事では、WebflowのHTMLの構造について紹介しています。WebflowでHTMLの構造を理解したい!という方にぜひ見ていただきたい内容になっています。
See Moreコンポーネント機能の使い方
Webflowのコンポーネント機能の使い方について解説します。 コンポーネントを使用すると、要素や子要素からカスタマイズ可能なブロックを作成して、一貫性があり、効率的な設計を維持できます。
See MoreChromeプラグイン「Webflow日本語化」でデザイナー画面が日本語で使える!! 開発元:supasaito.com
Chromeプラグイン 「Webflow日本語化」で デザイナー画面の日本語翻訳を実現!Google一押しの『Webflow』を日本語で操作できるようになりました!
See More最もおすすめされているWebサイト制作ノーコードツールWebflow(ウェブフロー)の活用方法とは?
あのGoogleが大きな期待を寄せる、今注目のノーコードツール『Webflow』(ウェブフロー)を知っていますか?手軽さは残しつつも、圧倒的多機能により、スムーズで自由なWebサイト制作が実現できるWebflowについて解説します。
See MoreWebP変換ツールについて
Webflow(ウェブフロー)で組み込みの WebP 変換ツールを使用して、既存の画像アセットを圧縮する方法をご紹介します。WebP画像ファイル形式とは、画像の高品質の大部分を保持しながら、より小さいファイルサイズに圧縮された形式です。WebPを使用することにより、Web ページの読み込みが速くなりWeb サイトのストレージ容量が節約されます。
See Moreワークスペースのシートとメンバーを追加・削除する
Webflow(ウェブフロー)のワークスペースのシートは、ワークスペース内のチーム メンバーが利用できる場所です。ワークスペースプランにシートを追加または削除して、独自のニーズに合わせて柔軟なサイズのコラボレーションスペースを作成できます。今回はWebflowのワークスペースのシートとメンバーを追加・削除する方法をご紹介します。
See MoreAlign boxについて
Webflow(ウェブフロー)の便利な機能、Align boxについてご紹介します。Align boxは視覚的に配置できる便利な機能です。使いこなしてWebflowでの制作パフォーマンスを向上させましょう。
See Moreサイトをアーカイブする方法
Webflow(ウェブフロー)のダッシュボードにサイトを表示したくない場合は、アーカイブするする事ができます。本記事ではその詳しい方法についてご紹介いたします。
See Moreアセットやファイルのプライバシー管理について
Webflow(ウェブフロー)のアセットパネルまたはコレクションフィールドにアセット(PDF ファイルや画像など)をアップロードすると、そのアセットも Amazon Web Servers(AWS)にインポートされ、コンテンツ配信ネットワーク(CDN)経由で配信されます。詳しい情報をご紹介します。
See Morelocale switcherの構築
Webflow(ウェブフロー)は、サイトのロケール間を効率的に移動できるように、custom locale switcherを設計することができます。ローカライズされたサイトを公開したら、サイト訪問者がニーズに合った適切なロケールまたは言語を選択できる方法を構築する必要があります。デザインは自由にカスタマイズできますが、今回はナビゲーションバーにドロップダウンでlocale switcherを構築する方法について紹介します。
See MoreCanvasの各設定について
キャンバス設定には、Webflow(ウェブフロー)でのデザインプロセスを最適化し、効率と精度を向上させるためのさまざまなオプションとツールが用意されています。上部バーのさまざまなデバイスに対応したブレイクポイントの横にあるキャンバスサイズをクリックすると、キャンバス設定を開くことができます。
See More様々な要素を変換する方法
Webflow(ウェブフロー)の要素変換機能を使用すると、ブロック要素、タイポグラフィ要素、インラインテキスト要素など、さまざまな要素タイプを最初から再構築することなくシームレスに変換することが可能です。
See Moreサイトプランについて
Webflow(ウェブフロー)のサイトプランを使用すると、独自のカスタムドメインで Web上にサイトを公開できるようになります。カスタムドメインに公開する各サイトには、独自のサイトプランが必要です。サイトプランを使用すると、カスタムドメインを Webflow サイトにポイントしてWebflow でホストすることができます。
See Moreコンポーネントのプロパティ
Webflow(ウェブフロー)では、コンポーネントプロパティを使用するとコンポーネントインスタンス上の一意の値を使用して変更できるコンポーネント内の特定の要素を定義できます。これは、構造は均一であるが各インスタンスに固有のコンテンツを持つ必要がある、繰り返しレイアウトパターンに最適です。今回はWebflow内の機能である、コンポーネントプロパティについて詳しく解説していきます。
See Moreワークスペースを作成する
Webflow(ウェブフロー)のワークスペースを使用すると、独自に設計するか、チームメイト、クライアント、請負業者、その他の共同作業者と一緒にサイトで作業するための共有スペースを作成することができます。
See MoreカスタムCSS プロパティと値
ネイティブのスタイルパネルコントロールがないプロパティであっても、カスタムCSS プロパティをクラスに適用することができます。今回はWebflow(ウェブフロー)でのカスタムプロパティと値を追加する方法についてご紹介します。
See MoreCustom elementについて
Webflow(ウェブフロー)のCustom elementを使用して、サイトにカスタムHTML属性とタグを追加します。Custom elementとは、任意の HTMLカスタム属性、タグ、またはテキストを追加できるプレースホルダー要素です。
See Moreコレクションを削除する方法
Webflow(ウェブフロー)のコレクションは不要になったら、削除することができます。コレクションを削除すると、そのコレクションページもサイトから削除されます。
See More