Webflow（ウェブフロー）を知っていますか？
Webflowは、サイト構築ができるノーコード（NoCode）アプリです。
ノーコードでサイトを作れて、部品をドラッグアンドドロップで配置できます。
デザインに優れ、今っぽいおしゃれサイトが作れるツール。
ここでは「Webflowの使い方」の疑問に答えていきます。
Webflowの登録方法
まず、Webflowを使用するにはアカウント登録が必要になります。
登録は、Webflowのホームページからアカウントの登録を行います。
Webflowの登録には、グーグルアカウントかメールアドレスが必要です。
登録方法はこちらの記事を参考にしてください
その後、チュートリアルが始まり、チュートリアルを終えると管理画面が開きます。
Webflowのダッシュボード画面
チュートリアルが終わるとWebflowのダッシュボード（管理画面）が開きます。
上部で項目の切り替えが行えます。
- １.Dashboard：ダッシュボード
- ２.Showcase：ショーケースは作品があります。
- ３.Designers：デザイナーの紹介
- ４.Resources：リソースでは価格などをチェックできます
その下には検索窓と+ New Projectがあります。
右には、フォルダマーク(5)とカレンダー(6)があります。
- ５：フォルダーを作る
- ６：Date Created 作成日
Date Createdには以下の内容があります。
- Alphabetical：アルファベット順
- Last Modified：最終更新日
新しくプロジェクトを始めるには、右端の+ New Projectをクリックします。
新しくプロジェクトを作るには、+ New Projectをクリックして、Blank Siteまたは、テンプレートを選択。
次に、プロジェクト名を入力します。
プロジェクトの名前を入力して、Create projectをクリックします。
エディタ画面が立ち上がります。
Webflowのエディタ画面
Webflowのエディタ画面は、左側にそれぞれの要素の項目が並んでいます。
左側上部によく使用する要素があります。
- 1.要素の追加
- 2.記号
- 3.ナビゲーター
- 4.ページ
- 5.CMSコレクション
- 6.Eコマース
- 7.アセットパネル
- 8.セッティング
1の要素には、様々なAppがあります。
ページでは、作成するページを選択して切り替えながらページを作成します。
エディタ画面の上部のブルーの部分では、表示を変えれます。
- デスクトップ
- タブレット991px以下
- モバイル767px以下
- モバイルポートレート478px以下
ツールによっての見え方を確認できます。
- 1.要素のエッジを非表示
- 2.空の要素を非表示
- 3.ライトガイドオーバーレイを設定
- 4.X線モードを有効にする
- 5.検索
- 6.ビデオチュートリアル
- 7.ヘルプ
作成するときは、中央の画面をクリックしたり入力しながら、右側で詳細設定を行いサイトを作成していきます。
初めての方だと、エディタ画面の操作に慣れる必要があります。
ワードプレスとは異なっているので、初めての方だと操作に迷うかもしれません。
試しにテンプレートを選択して、いじってみるといいです。
実際のサイト作成は、別記事で解説します。
⇒ Webflowで出来ることと出来ないこと
⇒ webflowの登録
コメントを残す