NoCodeでものを作ってみるシリーズ第二弾です。第一弾では、Zapierを使ってツイートをFirestoreに保存するということを試してみました。
今回は、Webflowを利用して、利用開始~普通のLPがなんとなく形になるまでを紹介します。
Webflowとは
コードを書かずにwebページが作れるサービス。
Break the code barrier
Build better business websites, faster. Without coding.
(公式より)
コードを書かないでいい感じに仕事しようぜ的なことが謳われています。実際、Webflowではコードを書かなくてもコードを書くのと同じくらい多様な表現が可能になっています。トップページで紹介されているデモも、モダンな感じがあり好印象です。
なお、今回お試しで作るLPは弊社事業「開発チームレンタル」のものです。
さて、触っていきましょう。
利用開始
Google、メールアドレスが選択できますね。今回はGoogleを選択しました。
- 名前入力画面: ニックネーム的なもの?適当に入力。
- アンケート画面: 職業とか聞かれます。正直に答えてあげましょう。次のフローのレコメンドの材料になるように思います。
- テンプレートの選択画面: 雛形を選ばせてくれます。機能を一通り触りたいので、
Blank Site
を選択します。なお、アンケートの選択肢によっては違うものがレコメンドされているかもしれません。
作る
ファーストビュー
まずはページの顔を作っていきましょう。
Webflowが用意しているプリセットを利用します。ページ左上の追加ボタンから、Layouts
タブを選択し、Hero Overlay
をページにドラッグ&ドロップします。
これだけでそれらしい体裁が整います。すごい。
文言を編集し、画像を差し替えます。ページ右側のメニューを操作します。
筆のタブを選択 > 下へスクロール > Backgrounds
セクションの、example-bg.png
をクリック
Choose image
ボタンをクリックすると、ページ左側に画像をアップロードできるフォームが出てきます。背景に表示したい画像を上げましょう。
アップロードが完了すると、自動でその画像が背景に設定されます。しかも、いい具合にマスクしてくれてますね。
ヘッダを追加する
グローバルナビゲーションを設置しましょう。これもWebflowが用意してくれてます。
追加ボタン > Layouts
> Sticky Nav
をページにドラッグ&ドロップしましょう。ページの上端に追加するようにすると、うまくヘッダっぽく表示されます。ならない場合は、 Hero Overlay
の配下に追加してしまっている可能性があります。
ロゴの変更は、歯車のタブから行います。先ほど同様 Choose Image
ですね。
ヘッダのメニューは、List Item
を追加することで増やせます。リンクを設置する都合上、以下の手順で行うと作業が楽です。
List Item
をロゴの左に配置
- 設置した
List Item
内にText Link
を設置
- 文言を編集して、順番を入れ替える
Nav Grid
下の、一番上のものが今追加したリンクです。これを、下から二つ目の位置にドラッグしましょう。
するとちょうどいい位置に移動します。これでファーストビューは完成ですね。次のセクションを追加しましょう。
セクションを追加
サービスのざっくりした紹介セクションを追加します。先ほどと同じような手順で、今度はHero
を追加しましょう。こうなります。
なんとなく画像と文字の位置を逆にしたいので、並び順を操作します。
このセクションは Flex container
になっているので、リバースしてあげればOKです。右のメニューから、
筆のタブ > Layout
内 > Direction
の矢印マークをクリックします。
こうなります。
ボタンの位置が微妙なので、移動させます。追加 > Basic
> Div
をボタンの上に配置しましょう。
ボタンをこのDivの中にドラッグ&ドロップし、Divを選択した上で右のメニューから Typography
> Align
を真ん中寄せにします。するとこんな感じ。
まだ少し微妙ですが及第点でしょう。ボタンは、クリック時に表示される歯車アイコンからクリック時の挙動を設定することができます。試しにリンクを貼ってみましょう。
ここまでできたら一度ページがどのように見えるのか確認してみます。画面左上の目のアイコンをクリックします。
ちゃんとボタンも設定した通りの動作をします。すごい。
まとめ
これ以降はやっていたらキリがないので、ここでおしまいにします。あとは同じような作業を繰り返してページを構築していくだけですね。
コードを書かなくても、コードを書いているのと同じくらい柔軟にページを作成することができました。少ない労力で簡単なページを作るのであればもっと適したサービスがありますが、一方でそうしたサービスは「そのサービスらしさ」が出がちです。見る人が見れば「これはあのサービスを利用して作ったんだな」とわかりますよね。 しかしWebflowであれば完全にオリジナルのサイトを構築することができます。ほぼ何の制約もなく、自由自在にイメージを形にすることができます。
できることが多すぎて最初は戸惑いますが、慣れてしまえばこれほど心強いサービスはないのではないでしょうか。
以上、WebflowでLP作成入門編でした!