これからはブロックテーマ!unitoneでWebサービス作ってみた

これからはブロックテーマ!unitoneでWebサービス作ってみた

つぶ式ではコンテンツ連動型広告やアフィリエイト広告を利用しています。

この記事は「Snow Monkey / unitone Advent Calendar 2023」16日目の記事のつもりで書きましたが「Snow Monkey / unitone Advent Calendar 2023」が開催されなかったので通常の記事として公開したものとなります。


Snow Monkey Advent Calendar 2022から1年がたちました。
勝手に5年連続16日目を担当させていただくつもりでしたが、「Snow Monkey / unitone Advent Calendar 2023」が開催されなかったので叶わぬ夢となりました。でも勝手にAdvent Calendarします。

https://tbshiki.com/textmanagementtoolwithunitone/

2022年のアドベントカレンダーではunitoneを社内用テキスト管理ツールにしたという記事を書きました。
unitoneはブロックテーマなのですが、ブロックテーマであるメリットを全然活かせていない内容になっていたと反省しました。

そしてこの2023年にはunitoneを使ってWebサービスを作ってみたという記事を書いていこうと思います。

ブロックテーマってなに?という人は.orgの記事を読んでいただくのがいいと思う。

ブロックテーマってどんなの?っていうのをまとめると、今までメニューとかウィジェットからしか変更できなかったところもブロックでレイアウトすることができて、ヘッダーやフッターなんかのテーマに依存していた部分までブロックでレイアウトができるようになったテーマのことです。

カスタマイザーも触ることがなくなったしノーコードのWebサイトビルダー的な立ち位置に置き換わっていくんじゃないかという素敵なものになっています。

ブロックテーマ楽しいよ、unitone楽しいよ。

作ったもの

https://walkstory.jp/

Walkstoryという道案内動画の作成サービスのWebサイトを立ち上げました。

ここではWalkstoryの詳しいことはお伝えしないのですが簡単にお伝えすると、自身で撮影した最寄り駅からの動画をわかりやすい道案内動画へ編集する動画編集サービスのサイトとしてunitoneを使わせていただきました。

お店や事業所までの案内の問い合わせの電話がかかってきて業務が進まないというペインを解消できるサービスとして展開しています。

まだまだプロトタイプの段階ですが、これからもっとサービスの拡充をおこなっていく予定です。

なぜブロックテーマかつunitoneなのか

個人的に思うブロックテーマのメリットとしてはログイン・非ログインのユーザーに対してヘッダーやメニューの出し分けがしやすいということがあると考えています。

非ログインユーザーに対してはCTAエリアを見せたい
ログインユーザーにはサービスの新着情報を伝えたい

みたいな出し分けがブロックテーマだとかなりしやすくなると思います。

Walkstoryではサービスの販売にWooCommerceを使用しているので、購入時にはユーザー登録が必要になります。

リピーターのお客様の場合にはCTAを隠して今使用していただけるクーポンページを表示するという運用が可能になるのでブロックテーマを採用しました。

unitoneを選択した理由としては、見た目が綺麗なところとWooCommerce用のプラグインが用意されていたことです。

unitoneの美しさに関しては去年の記事を読んでいただければと思います。

WooCommerceを導入してもレイアウトが崩れることが多いので専用プラグインを用意していただけているのはかなりのアドバンテージになります。

使用したもの

テーマ

unitone

Every Layoutにインスパイアされたテーマ。美しい。

プラグイン

基本的にWordPressやテーマ、プラグインの機能で実装しているので自前のプラグインは不要でした。

Reusable Blocks Extended

SEO SIMPLE PACK

OGPやGoogle Analytics、Google Search Consoleのタグ埋め込みの簡略化として導入

Snow Monkey Editor

Snow Monkey Editorのロール(権限)出し分け機能を使ってログインユーザーと非ログインユーザーへの表示を変えています。

ブロックテーマとSnow Monkey Editorの組み合わせはほんと鬼に金棒。

SVG Support

サイトアイコンやロゴにSVGを使いたかったので採用。

unitone WooCommerce integrator
WooCommerce
WooCommerce Stripe Gateway

WooCommerceまわりのプラグイン。

このサイトではStripe決済のみを使いたかったのでStripeが使えるようにするプラグインを導入

WP Multibyte Patch

XO Security

プラグイン一覧

  • Reusable Blocks Extended
  • SEO SIMPLE PACK
  • Snow Monkey Editor
  • SVG Support
  • unitone WooCommerce integrator
  • WooCommerce
  • WooCommerce Stripe Gateway
  • XO Security

追加機能

WordPressと関係の無いところになるのですが、サービスのお客様とのやりとりにはLINE公式アカウント(旧 LINE@)を使用しています。

いままではメールでのやりとりを行うことが多かったと思いますが、身近で多くの人が使用しているLINEというサービスでコミュニケーションの円滑化を図ろうとしています。

道案内動画を作成する中で「写ってしまった人の顔にモザイクかけることはできますか?」というご要望を多くいただきます。

その為に人の顔に自動でモザイクをかけることを標準でつけています。

この自動モザイクツールをLINE公式アカウントからお試しいただけるようにしています。

顔が写った動画を送ると冒頭10秒にカットされてモザイクがかかって返信されます。

是非お試ししてみてください!
そして気になるところがあったら教えてくださいw

WalkstoryLINE公式アカウント
https://lin.ee/6ZIsiI9

最後に

2022年ではブロックテーマはどんな時に使えばいいのかわからないまま使っていましたが、2023年にはブロックテーマはこういう場合に使うと効果的ですよみたいなことがわかってきました!

聞いた話によると海外ではブロックテーマでの開発が主流になっているんだとか。

クラシックテーマで実装が大変だったヘッダー・フッターを自在に操ることができるブロックテーマを是非使ってみてほしいです。

そしてコーダーさんやデザイナーさんには綺麗なレイアウトで実装できるunitoneで開発してみてほしいです。

PCやスマホ用のレイアウトを個別に用意しなくてもunitoneが面倒みてくれます。

一度騙されたと思って使ってみてください。

今年もこう言います!

unitone本当にオススメなので騙されたと思って使ってみてください!

ここまで読んでいただいてありがとうございました!

この記事は「Snow Monkey / unitone Advent Calendar 2023」16日目の記事のつもりで書きましたが「Snow Monkey / unitone Advent Calendar 2023」が開催されなかったので通常の記事として公開したものとなります。

あなたにも素敵な情報収集生活が訪れますように

Xでいろいろつぶやいています。
フォローお待ちしております。

この記事を書いた人

つぶ

I'm a computer nerd.

月曜夜のもくもく会 #西中島StudyGroup で西中島だけの?情報サイト 西中島 #ヌードル倶楽部 を作っています
Web制作とPythonでの業務効率化とリユースと経営と?が好き

https://nishinakajima.ramennoodleclub.com/