Webflowでアカウント解説からサイト公開までの手順を徹底解説

1.はじめに

 1-1.この記事のポイント

Webflowのアカウント解説から、サイト公開までの手順を、Webflowを全く触ったことがない人でもわかるように解説します。 この記事を読むことで、Webflowでサイトを作り、サイトを作るまでの手順が具体的にわかるようになります。

 1-2.この記事を読んで欲しい人

以下のような方に、特におすすめの記事となっています。

・Webflowを全く触ったことがない人 

・Webflowで簡単にクオリティの高いサイトを作りたい人 

2.Webflowは何ができるのか

Webflowは、従来コーディングを行っていたウェブ制作を、クリック・ドラッグ&ドロップで制作できるようにしたノーコードツールです。現在では世界で100万人以上のユーザーが利用している巨大プラットフォームに成長しています。エディターから好きなパーツを選び、マウス操作でまるでレゴブロックのようにパーツを組み合わせてウェブサイトを構築することができます。

WordpressやWixといった、ウェブサイト制作サービスと異なる点は、「デザイン性の高いサイトを作ることができる」ことと、「カスタマイズ性が非常に高い」ことです。従来では作りにくかったアニメーションやレイアウトも、Webflowでは実装することができます。また、Webflowの操作性はHTMLとCSS操作に近いため、既存のウェブ制作ツールとは異なり、レイアウトの変更やマウスオーバー時の動きなどの極めて細かいカスタマイズが可能です。

3.Webflowを始めてすぐにサイトを公開する方法 

では実際に、アカウント作成し、サイト実際に公開してみましょう。Webflowのアカウントを作成し、サイトを公開するところまで順を追って解説していきます。

3-1 アカウント作成・チュートリアル

まずは、https://webflow.com/こちらのサイトからサインアップします。Googleでサインインすることで、簡単にサインアップすることができます。

サインアップが完了すると、4つの質問が表示されます。順番に答えていきます。

質問に答え終わると、チュートリアルが開始されます。チュートリアルでは、Webflowのレイアウトの組み方や、レスポンシブ設定の方法など、基本的な操作を体感できます。チュートリアルが終わると、テンプレート選択画面に移行します。

3-2 テンプレート選択・サイト作成 

テンプレートは無料・有料のものが存在しますが、今回は無料の"Fitnesso"テンプレートを編集します。任意の使いたいテンプレートをクリックし、新しいプロジェクトを作成すると、エディター画面に移行します。

3-3 デザインの編集

チュートリアルで少し触りましたが、Webflowでは左のメニューでレイアウトや要素の追加を行います。そして、エディターに表示されている画像やテキストなどの要素をクリックすると、右に要素の詳細メニューが表示され、ここでフォント・文字の大きさやパディング・マージンといった、要素の細かい設定を行います。フォントの編集やサイズの変更の操作は、Photoshopによく似ているため、触ったことのある人はスムーズに取り組めます。

3-4 ダイナミックデータの編集‍

続いて、WebflowのCMS機能で、投稿した記事の執筆や、タイトルの設定、執筆者の登録などの編集を行います。

エディタ画面左の、「ダイナミックデータ」→「Author」と進むと、記事の執筆者の情報を編集できます。

また、同じく「ダイナミックデータ」→「Blog Posts」と進むと、ブログ記事の編集や、タイトルや挿入する画像を設定することが可能です。

3-5 公開作業 

最後に、エディタ画面上部のメニューにある「Publish」を選択し、「Publish to Selected Domeins」でサイトの公開を行えます。

4.まとめ

いかがだったでしょうか。Webflowを使うことで、従来よりも非常に簡単にウェブ制作をおこなうことができます。Webflowを活用してウェブサイトを効率よく制作しましょう。