Webflow(ウェブフロー)の拡張機能「Sneaps」って？

SneapsはWebflowをより使いやすく、便利にするChrom拡張機能です。

https://www.sneaps.io/

以下、Sneaps公式サイトの日本語訳です。
「SEO改善をサポートし、サイトのランキングを向上させるための措置を講じることができます。」

Sneapsにはいくつか機能があります。

• サイトのSEOを最適化
• SEO関連の設定をチェック（インデックスの作成/サイトマップ/Robots.txt など）
• 公開オプションの確認（SSL/ファイル圧縮 など）
• Webflowのリッチテキストをより使いやすくするエディタ

今回はSneapsのエディタ機能を使ってみて、Webflow標準のエディタとの違いなどをレビューをしていきます。

Sneapsのエディタ画面

Sneapsの使い方

Sneapsの拡張機能をダウンロードする

ダウンロードページから、「Sneaps」をChromeに追加します。

Sneaps

‍

追加したらこれで設定は完了です。

WebflowのDesigner画面を開くと、リッチテキストにRich content by Sneaps が追加されています。

WebflowのCMSの一般的な使い方については下記をご参照ください。

【日本語版Webflow University】Webflow CMSの概要

CMSのリッチテキストで活用してみる

リッチテキスト編集画面にある、Rich content by Sneapsボタンをクリックします。

Sneapsのポップアップが出てくるのでそこに記事の内容を書いていきます。
（UIはWordPressのエディタに似ていますね）

画面上部の表からHTML要素、フォント、文字のサイズを選べるようです。

エディタから直接この辺りを編集できるため、リッチテキストがあまり作りこまれていないサイトなどはこれはうれしいのではないでしょうか。

Formatでフォント関連を細かく設定できますね。

パワーポイントのようにテーブルを作成する機能がありました。Webflowのリッチテキストにはテーブルがないのでこれは便利ですね。

そのまま表に文字を入力することが出来ました。

「ツール（Tool）」→「ソースコード（Source Code）」をクリックするとHTMLが表示されます。

表示されたコードをWebflowに張り付けるために全てコピーします。

ポップアップを閉じ、Webflowのリッチテキストでコード埋め込みを選択しペーストします。

Webflowのコード埋め込みでは公開するまでdesignを確認することが出来ないため、以下のような表示になります。

保存して公開してみました。直感的に操作できてラクですしテーブルも追加されています。

そのままの設定だと質素なデザインのため、Rich textのデザインをWebflow側で変更するとよいと思います。

Sneaps良いと思ったところ

1. WordPressに近いUIのため直感的に操作できる。
2. テーブルが簡単に実装できる。
3. アンカーやフォント周りの細かい設定が簡単にできる。

とりあえず急ぎで簡易的な記事を書きたい場合はSneapsを使うのが良いと思います。

Sneapsの使いにくいと思ったころ

1. 結局Webflowエディタに張り付ける必要がある。
2. デザインにこだわろうと思ったらWebflow側での作りこみが必要。
3. ポップアップで表示される一時的なエディタのため、保存しておくことが出来ない。

本格的にブログを運営したりする場合は、Webflow側でリッチテキストを作りこんで、Webflowのエディタで運用するのがよさそうです。

テーブル機能は本当に使いやすかったため、テーブルだけSneapsを使ってそれ以外はWebflowのエディタを使うというのも大いにありだと思います。

‍