NoCodeでものを作ってみるシリーズ第二弾です。第一弾では、Zapierを使ってツイートをFirestoreに保存するということを試してみました。

今回は、Webflowを利用して、利用開始~普通のLPがなんとなく形になるまでを紹介します。

Webflowとは

コードを書かずにwebページが作れるサービス。

公式

Break the code barrier

Build better business websites, faster. Without coding.

(公式より)

コードを書かないでいい感じに仕事しようぜ的なことが謳われています。実際、Webflowではコードを書かなくてもコードを書くのと同じくらい多様な表現が可能になっています。トップページで紹介されているデモも、モダンな感じがあり好印象です。

なお、今回お試しで作るLPは弊社事業「開発チームレンタル」のものです。

さて、触っていきましょう。

利用開始

Google、メールアドレスが選択できますね。今回はGoogleを選択しました。

1. 名前入力画面: ニックネーム的なもの？適当に入力。

2. アンケート画面: 職業とか聞かれます。正直に答えてあげましょう。次のフローのレコメンドの材料になるように思います。

3. テンプレートの選択画面: 雛形を選ばせてくれます。機能を一通り触りたいので、Blank Siteを選択します。なお、アンケートの選択肢によっては違うものがレコメンドされているかもしれません。

作る

ファーストビュー

まずはページの顔を作っていきましょう。

Webflowが用意しているプリセットを利用します。ページ左上の追加ボタンから、Layoutsタブを選択し、Hero Overlayをページにドラッグ&ドロップします。

これだけでそれらしい体裁が整います。すごい。

文言を編集し、画像を差し替えます。ページ右側のメニューを操作します。

筆のタブを選択 > 下へスクロール > Backgroundsセクションの、example-bg.pngをクリック

Choose imageボタンをクリックすると、ページ左側に画像をアップロードできるフォームが出てきます。背景に表示したい画像を上げましょう。

アップロードが完了すると、自動でその画像が背景に設定されます。しかも、いい具合にマスクしてくれてますね。

ヘッダを追加する

グローバルナビゲーションを設置しましょう。これもWebflowが用意してくれてます。

追加ボタン > Layouts > Sticky Nav をページにドラッグ&ドロップしましょう。ページの上端に追加するようにすると、うまくヘッダっぽく表示されます。ならない場合は、 Hero Overlayの配下に追加してしまっている可能性があります。

ロゴの変更は、歯車のタブから行います。先ほど同様 Choose Imageですね。

ヘッダのメニューは、List Itemを追加することで増やせます。リンクを設置する都合上、以下の手順で行うと作業が楽です。

1. List Itemをロゴの左に配置

2. 設置したList Item内に Text Link を設置

3. 文言を編集して、順番を入れ替える Nav Grid下の、一番上のものが今追加したリンクです。これを、下から二つ目の位置にドラッグしましょう。

するとちょうどいい位置に移動します。これでファーストビューは完成ですね。次のセクションを追加しましょう。

セクションを追加

サービスのざっくりした紹介セクションを追加します。先ほどと同じような手順で、今度はHeroを追加しましょう。こうなります。

なんとなく画像と文字の位置を逆にしたいので、並び順を操作します。 このセクションは Flex containerになっているので、リバースしてあげればOKです。右のメニューから、

筆のタブ > Layout内 > Directionの矢印マークをクリックします。

こうなります。

ボタンの位置が微妙なので、移動させます。追加 > Basic > Divをボタンの上に配置しましょう。

ボタンをこのDivの中にドラッグ&ドロップし、Divを選択した上で右のメニューから Typography > Align を真ん中寄せにします。するとこんな感じ。

まだ少し微妙ですが及第点でしょう。ボタンは、クリック時に表示される歯車アイコンからクリック時の挙動を設定することができます。試しにリンクを貼ってみましょう。

ここまでできたら一度ページがどのように見えるのか確認してみます。画面左上の目のアイコンをクリックします。

ちゃんとボタンも設定した通りの動作をします。すごい。

まとめ

これ以降はやっていたらキリがないので、ここでおしまいにします。あとは同じような作業を繰り返してページを構築していくだけですね。

コードを書かなくても、コードを書いているのと同じくらい柔軟にページを作成することができました。少ない労力で簡単なページを作るのであればもっと適したサービスがありますが、一方でそうしたサービスは「そのサービスらしさ」が出がちです。見る人が見れば「これはあのサービスを利用して作ったんだな」とわかりますよね。 しかしWebflowであれば完全にオリジナルのサイトを構築することができます。ほぼ何の制約もなく、自由自在にイメージを形にすることができます。

できることが多すぎて最初は戸惑いますが、慣れてしまえばこれほど心強いサービスはないのではないでしょうか。

以上、WebflowでLP作成入門編でした！