Webflowを使って初心者でもプロのようなデザインを作る方法

くりたまさと
Masato Kurita
栗田 将人 の過去を覗き見る↗︎
Webflowを使って初心者でもプロのようなデザインを作る方法

Web初心者だけどWebflow って使えるのかな?自分でWebサイトを作ったけどなんかダサい。あまり時間がないから手短に終わらせたい。

今回はこんな疑問に答えていきます。

✓記事の内容

  • 初心者でもプロっぽいデザインを作る方法
  • WebflowでWebサイトを作るのにかかる目安時間
  • 最安、最短でWebサイトを作る方法

この記事を書く私は、WebflowでWebサイト制作を行い月に30万円ほど収益を上げています。またこのブログもWebflowで作成・管理されており、Webflowのテンプレートを参考に作成しています。

このような経験を活かし、初心者でもプロのようなデザインを作る方法を解説します。

目 次

Web初心者でもWebflowを使って、プロ同等のデザインを作る方法

手順は下記の5ステップです。

  • 【手順1】WebflowのショーケースからWebサイトをコピー
  • 【手順2】フォントを変える
  • 【手順3】色を変更する
  • 【手順4】写真、ブロックの幅
  • 【手順5】文章を入れる

【手順1】WebflowのショーケースからWebサイトをコピー

Webflowのショーケースからクローン可能なデザインを選択するだけです。

おすすめのショーケースについては「こちら」を参照ください。

【手順2】フォントを変える

クローンしたサイトに日本語のフォントを入れます。
無難ところは「Noto sans」「さわらび」などのGoogleフォントです。

フォントの入れ方については「こちら」をどうぞ。

【手順3】色を変更する

フッターの色は全体よりも暗い色を配色するとバランスがよく見えます。
全体の背景色に悩んだ際は「小林さん」の以下ツイートを参考にするのがおすすめです。
Web制作でスグに使える情報を発信している方で、他にも有益なツイートがたくさんあります。

【手順4】写真を差し替える

僕の場合、先に文章を入れる事が多いのですが、写真がすでに揃っている方は先に写真を入れるのがおすすめです。理由は、Webサイトの構成を一緒に決められるからです。また文章を作るのが少し楽になります。

【手順5】文章を入れる

写真を入れて情報の入れる場所が決まったら併せて文章を入れましょう。フォントサイズが見づらい場合は少し調整します。文字は16pxが平均です。

初心者がWebflowを始めた場合にWeb制作にかかる時間

ステップ1〜5までの時間

上記のステップを使えば、初心者でも1時間程度で完成させることができます。詳しい目安時間はおすすめのテンプレートでテンプレートごとに紹介しています。

素材準備の時間

文章構成やライティング、画像の準備が最も時間がかかります。シングルページで5時間程度を目安に考えると良いでしょう。文章に慣れている方なら1時間〜2時間で終わることもあるでしょう。

初心者がWebflow を使って1番ラクして、1番安くWebサイトを作る方法を2パターン紹介します

簡単なテンプレートをコピーする:0円/7時間

上記で紹介した方法を使い自分ですべて作成する方法です。自分で作成しているので金額は0円

所要時間は以下の通りです。

  • ステップ1〜5:1時間
  • ライティング・画像の用意:5時間
  • その他調整:1時間
  • 合計7時間

写真・文章を委託する:3万円〜/1時間

文章と写真の準備を委託するという方法。自分で行うのは簡単なアンケートとステップ1〜5のみでOK

金額は僕に依頼の場合:シングルページのライティング・写真の用意で3万円〜。これは少し宣伝見たくなってしまうのですが、委先は僕に委託するのが1番楽です。

というのも、ライターを雇うのは単価によって金額が変動しますし、未経験ライター、とプロのライターを見極めるのに苦労します。僕の場合は特にWebflowの説明も必要なく、テンプレートに合わせて文章作成ができます。またWebライターの経験も申し分ないと思います。

とはいってもライターの選定は自由なのでライターを探せる場所を紹介しておきます。

ライターは「ランサーズ」「ココナラ」「クラウドワークス」で探すことで探すことができます。委託する際はお金が無駄にならないように、ライターの見極めをしっかりしましょう。

所要時間は僕に依頼の場合:合計30分ほど。

  • アンケート:15分
  • 完成後の確認:15分

まずこちらから簡単なヒアリングシートをお送りします。
それにお答えいただき、Webサイトに合った文章・写真をお送りさせて頂きます。文字量で値段は前後する場合があるので一度お問い合わせ下さい。

まとめ:初心者でもWebflowは使える

初心者でWebflowを使うのは難しいとも聞きますが、
今回紹介したステップを使えば誰でも簡単にWebサイトを作ることができます。

プラスでデザインを少し勉強すれば、さらにいいWebサイトが作れるでしょう。

Webflowは無料で始めることができます。
まずは登録し、使用感を確かめて見ましょう。
>>>Webflowの登録は「こちら

「制作途中でわからなくなってしまった」「制作を委託したい」「なんだかダサくなってしまった」という方向けに手直し・制作代行も行っているので困ったことがあれば気軽にお問い合わせ下さい。

無料メルマガで追加情報を告知します。

Webflow専門家として事業を行っている栗田自身が実際に使用して便利だと感じたWebflowの使い方や小技などを共有しています。他にもノマドライフや、事業計画、経験と過程について発信しています。

これは僕からあなたへの手紙です。飾らない言葉で発信しています。登録が励みになります。メルマガ登録100人を最初の目標にしています。100人集まったら旅企画を告知します。海外旅行に一緒に行って新しい価値観を広げましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

【Webflow】今日から使える無料のテンプレート10選

Webflowで初心者でもスグに使えるテンプレートを知りたいですか?本記事ではWebflowの今日から使えるテンプレートをジャンル別にまとめました。Webflowでテンプレートを使用して自社サイトを自作してみましょう。

Read more...

【初心者でも簡単】Webflowで独自ドメインを設定する方法

Webflowの独自ドメインについて知りたいですか?本記事ではWebflowで独自ドメインを設定する方法や独自ドメインの設定に必要な料金プランの解説を行っています。Webflowでウェブサイト運用を考えている方は是非ご覧ください。

Read more...

Webflowの使い方をformsを活用して質問する方法

Webflowの使い方がどう調べてもわからない?それならWebflow公式に質問してみましょう。本記事ではWebflow formsの使い方、公式サポートへのお問い合わせ方法などWebflowの使い方を質問する方法をまとめてみました。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup