ノーコード情報満載!

  1. ノーコード
  2. 255 view

Webflowの使い方を日本語で解説!基本操作の流れをマスター

Webサイト やアプリを制作する場合、以前は自分でコードを書いて設計する必要がありました。しかし、プログラミングに関する知識がない場合は、外部のサービスに頼らざるを得ず、実際のところ自社に適したアプリを使用できないケースも少なくありません。

そんなときに便利なのが、コードを書くことなくWebサイトやアプリの制作を行える「Webflow」というツールです。今回は、Webflowの使い方や基本操作などをご紹介します。英語でわかりづらい部分も解説しますので、Webflowを使用する際の参考にしてください。

Webflowの概要とアカウントの作成方法

webflowのトップページ
画像:webflow.com

Webflowは、プログラムを組むことなく Webサイト やアプリを制作できるツールのひとつです。「ノーコード開発ツール」などと呼ばれ、専任のプログラマーなどが常駐していない企業や、個人事業主の方などに人気があります。サイトの制作から開発までを、このツールひとつですべて行えます。

Webflowの特徴は以下の3点です。

  • テンプレートが豊富に揃っている
  • SEOやSSLなどの機能が充実している
  • Webサイトやアプリの制作を一から学べる公式チュートリアルが用意されている

また、Webflowには、以下の3つのプランが用意されており、使用目的に応じて選ぶことができます。

  • Starterプラン(無料プラン)
  • Liteプラン
  • Proプラン

無料プランと有料プランの違いは、作成したデザインを書き出すことができるかどうかです。有料プランの場合は、 HTMLCSS として書き出されます。

LiteプランとProプランの違いは、作成したWebサイトやアプリの右下にWebflowのロゴが入るかどうかにあります。企業として利用する場合は、Proプランの導入が必須でしょう。

Webflowのアカウントの作成方法

Webflowのアカウントを作成するには、公式サイトの右上にある「Get started-it’s free」をクリックしましょう。次のページでGoogleアカウントを利用したり、その他のメールアドレスを入力したりしてアカウントを作成しましょう。なお、有料プランへの移行は、アカウント作成後の管理画面で行えます。

Webflowの画面の見方

Webflowでは、アカウント作成が完了するとチュートリアルが始まり、完了すると管理画面が開きます。こちらでは、管理画面や編集画面の見方をご紹介します。

管理画面の見方

管理画面の上部には、以下の4つの項目が並んでいます。

  • Dashboard……ダッシュボード画面への移動
  • Showcase……Webflowを使った作品一覧
  • Designer……デザイナーの紹介
  • Resources……有料プランの確認

管理画面の右側には、以下の3つの項目が配置されています。

  • フォルダー作成アイコン
  • Date Created……カレンダー
  • New Project……新規プロジェクト

編集画面の見方

編集画面にはさまざまな要素が並んでおり、それらを使い分けて Webサイト やアプリを作成することになります。こちらでは、その一部をご紹介します。

編集画面の左側には、以下のような項目が配置されています。

  • エレメントやシンボルなどの追加
  • ページの追加
  • 画像フォルダ

編集画面の上側に並んでいるのは、以下のような項目です。

  • サイト全体のプレビュー
  • モバイルビューへの切り替え
  • Undo、Redoボタン
  • プロジェクトのエクスポート

画面の右側には、画面を詳細に編集するためのアイコンが並んでいます。エフェクトの挿入や画面上下の余白の設定などが可能です。

Webflowの基本的な操作方法

Webflowで Webサイト やアプリを制作する場合、編集画面に並んでいるパネルを操作することになります。こちらでは、よく利用するパネルの基本的な使い方をご紹介します。

Addパネル

画面の左側に並んでいるパネルです。エレメントの追加やレイアウトの変更などを行えます。すべての操作がドラッグ・アンド・ドロップで行えるのが魅力です。

Styleパネル

Styleパネルでは、 CSS の設定が可能です。余白やテキストのサイズ、要素の並び具合などを細かく設定することができるため、最初にイメージしたものに近いデザインを実現できます。

ナビゲーターパネル

作成したページがレイヤー状に管理されています。ドラッグ・アンド・ドロップで階層を入れ替えたり、選択ページを切り替えたりすることが容易です。

パブリッシュパネル

作成した Webサイト やアプリは、完成後に公開する必要があります。その際に利用するのがパブリッシュパネルです。無料プランを利用している場合は、「webflow.io」のドメインを活用して公開されます。有料プランに登録している場合は、このタイミングで独自ドメインとの接続が可能です。

まとめ

Webflowは、ノーコードで Webサイト の制作やアプリの開発を行える便利なツールです。プログラミングに関する深い知識は必要ないため、専任のプログラマーがいない企業や、領域の異なる仕事をしている個人事業主の方などにおすすめです。 基本的な操作はすべてドラッグ・アンド・ドロップで行うことができます。また、説明はすべて英語ですが、難読な単語は使用されていないため、比較的簡単に使いこなせます。よりデザイン性の高いサイトやアプリ制作に役立つはずです。無料プランも用意されているので、他のサービスと比較してみたい場合にもぜひ活用してください。

ノーコードの最近記事

  1. Autifyの概要からテスト自動化への導入事例までを徹底解説

  2. Platioはノーコードで作成できる便利な業務アプリ!機能や特徴を解説

  3. UNIFINITYで業務効率アップ!使い方とメリットやデメリット

  4. WebアプリとWebシステムの開発に役立つ!FastAPPの概要

  5. STORESの使い方を解説!初心者でも分かる基本や応用のまとめ

関連記事

PAGE TOP