ホーム
サービス
ノーコード相談サービスShopifyを用いたEC制作飲食店特化のWEB制作
ブログ一覧会社概要
採用情報
NEW
お問い合わせ
公開日 
2021-07-06
更新日 
2021-07-06

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を活用してウェブサイトを効率よく制作しましょう。

Tweet
Tagged:
アカウント作成
室伏 正裕
代表取締役 CEO
全てのブログを見る
人気記事
ノーコード全般
ノーコードでシステム開発費用はどれくらい安くなる!?
ノーコード全般
システム開発でノーコードを検討すべき事例5選とは
ノーコード全般
【サイト制作編】シーン別!ノーコードツールの使い分けを徹底解説
ノーコード全般
ノーコードでLP制作費用はどれくらい安くなる!?
Shopify
ECサイトを今すぐShopifyに移行すべき3つの理由
Tags
LP制作
SNS
アカウント作成
カゴ落ち
コーポレートサイト制作
サイト制作
シェアボタン
テンプレート
モール型EC
レスポンシブ
ローコード
一元管理
売上
外部連携
料金体系
施策
移行
購入率
開発
新着記事を受け取る
ありがとうございます。登録が完了いたしました。
登録に失敗しました。メールアドレスを確認し、再度お試しください。
Follow Us
Subscribe

新着記事を受け取る

ご登録ありがとうございます!
登録に失敗しました。
More Posts

オススメの投稿

ノーコード全般
ノーコードでシステム開発費用はどれくらい安くなる!?
2021-07-06
 by 
室伏 正裕
ノーコード全般
システム開発でノーコードを検討すべき事例5選とは
2021-07-06
 by 
室伏 正裕
Webflow
コーポレートサイト制作にオススメのWebflowテンプレート8選 - 無料&有料テーマ
2021-07-06
 by 
室伏 正裕
ノーコード全般
【サイト制作編】シーン別!ノーコードツールの使い分けを徹底解説
2021-07-06
 by 
室伏 正裕
ノーコード全般
ノーコードでLP制作費用はどれくらい安くなる!?
2021-07-06
 by 
室伏 正裕
Shopify
Shopifyの料金体系について徹底解説
2021-01-15
 by 
室伏 正裕

我々は、お客様の成功をもってして
我々の提供物の価値が示されると信じています。

ホーム
ブログ一覧お問い合わせ
ブログ
ShopifyBubble
サービス
ノーコード相談サービスShopifyを用いたEC制作
© 2020 QED inc.