2025年にunitoneで3サイト作って感じたこととおすすめ機能
Snow Monkey / unitone アドベントカレンダー21日目の記事です🥳
今年はありがたいことにunitoneだけで3サイトをリリースさせていただきました🙇
お世話になっているunitoneに何かお返しが出来ればと、はじめてアドベントカレンダーに参加させていただくことにしました！
バタバタしながら書いた記事ですので、あまり参考にならないかもしれませんがどんなサイトが作れるのか？や使ってみて良かったことを書いてみたいと思います。
1.リリースしたサイトについて
株式会社ホーホゥさまについてはWordCamp Kansai 2025でもお話しさせていただきました。
セッションの中でunitoneのことも大きく紹介させていただいてるので、ぜひ動画やスライドを見ていただければと思います。
これからの「Webデザイン」の話をしよう
～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
※余談ですが、実はこのセッション内容は「デザイナー目線から見たB面」です👀
一緒に制作したつぶさんがエンジニア目線から見たA面をKansai WordPress Meetupで話されています。
スライドもあるのでぜひ合わせて見ていただければと思います。
「MSW地域生活支援室さま」と「FCNさま」は株式会社輝月さまより2件口でのご依頼となりました。
1サイト目のご依頼でunitoneで使ったことから、テーマをまとめて運用したかったので2サイトともunitoneでお作りしました。
unitoneを使う理由
unitoneを使う大きな理由はブロックテーマであることです。
モダンな印象のブロックテーマですが、リリースされてすでに3年が経っており、実案件で導入可能なレベルまで進化しています（進化し続けています）
ブロックテーマはまだ様子見…という方もいるかもしれませんが、私がWordCamp Kansai 2025に参加した感覚だと【ブロックテーマ前提の制作】にシフトしている方も多い印象でした。
Web制作でクラシックテーマからブロックテーマへの変化は非常に大きなインパクトがあったため、うちでも「今後新しく作るWordPress案件ではブロックテーマにしていこう！」という方針にしました。
これにはセッションでお話しした
表現（デザイン）の自由度 < 編集の自由
という価値提供のシフトが大きく関わっています。
そしてその方針転換が当たったことで受託のご相談やご依頼が増えていると感じています。
テーマ≠テンプレ
「テーマ」を使うということに皆さんはどんなイメージをお持ちでしょうか？
テーマを使うと「テンプレ」っぽい見た目になると思われる方もいる気がします（かく言う私も以前は少しそのような捉え方をしていました）
だけど先日オンライン勉強会でunitoneで作ったサイトを見てもらったとき
「ホーホゥさんのサイトはテーマっぽくないから良いね」😊
と言ってもらったことがあり嬉しかったです。
今回ご紹介した3サイトを比較してみてもそこまで似通った雰囲気はしないのでは…？と思います👀
こうした点でもテーマはコードが書けない人がそれっぽいサイトを作れるだけではなく、制作現場のプロが活用してクライアントが編集しやすく出来るものという認識の元で活用しています。
これはunitoneに限らずですが、デザインカンプを作るとき特定のテーマを意識することはほとんどありません。
これは自分がコーディングもすることや、比較的Webのコンポーネントを意識したデザインをするのでそもそもテーマとの親和性が高いのかもしれません。
unitone含め素晴らしいテーマが多く開発されています。
私はこのようなテーマ開発者の方々と共にWordPressでサイトを制作していきたいと考えています。
リリース後の更新サポートも承っているのですが、更新サポートが外れる日が来てもテーマのライセンスは継続してほしい旨をお伝えしています。
unitoneのおすすめ機能
A.コードが書けない人がそれっぽいサイトを作れるもの
B.制作現場のプロが活用してクライアントが修正しやすく出来るもの
どちらであっても非常に便利だと感じるのが【パターン】と【スタイル】です。
このふたつを使えばほとんどパーツを選んでいくだけでサイトが完成すると思います。
伝え方が難しいのですが、unitoneの好きなところはこうしたパーツが完成されたデザインとして用意されているのではなく、ブロック（レイアウト）の組み合わせとして用意されていることです。
非常に豊富なパターンが用意されていますが、どのパターンを選んでもそのサイトのトンマナにあったデザインに組み込むことが可能です。
ブロックテーマを使っていると（レイアウト組むのだるいな…）と感じることがあると思うのですが、用意されているパターンがこのだるさを解消してくれてるので構築時間が圧倒的に速くなりました。
追加したパターンはページ内で柔軟に編集出来るので、運用に入っても破綻することがないと感じています。
※アップデートによってunitoneブロックに新たな機能が追加されたりすることがあるので、この辺りはステージング環境を用意してテストする必要はあると思います。
unitoneのおすすめパターン
そんな便利なunitoneですが、公式サイトに掲載されているパターンの中からおすすめのパターンを紹介します。
ぜひ開発者ツールでデバイスの幅を切り替えながら確認してほしいです。
Header: Logo / Centered Navigation / Button
Header: Logo / Centered Navigation / Button
ナビゲーションも4種類（2025/12/24現在）パターンが用意されています。
このパターンはメニューとは別にボタンを追加出来るので使いやすそうだなと感じました。
ナビゲーションはブロックテーマではけっこう鬼門な気がするので、制作するときはなるべく複雑なレイアウトにならないようにしています。
Section: Query (Separated Border / Chevron)
Section: Query (Separated Border / Chevron)
よくあるお知らせのレイアウトですが、とりあえず使うんじゃないでしょうか？
右に矢印アイコンが付いているパターンで、ブロックで作るのが地味にめんどくさいです。
Section: Company History Table / 1st Column Background Color
Section: Company History Table / 1st Column Background Color
こちらもよくある表組ですが、個人的に表組のデザインもコーディングも苦手なのでこのようなパターンがとてもうれしいです！
Section: Media Box / Buttons / Background
Section: Media Box / Buttons / Background
まったく同じようなブロックをパターンを使わずに作ったことがあるのですが、画像だけ上下と横にくっつけるのが難しかったです。
地味に苦労したので、このパターンは流石キタジマさんだな…！と感じました。
Section: FAQ / Left Title / Simple Box Accordion
Section: FAQ / Left Title / Simple Box Accordion
6.9でアコーディオンブロックが追加されたので、もしかすると違う方法があるかもしれませんがアコーディオンのパターンもありました。
Profile Box
親ブロックの幅に合わせたり、最大幅を設定したりしながら使うことが多いプロフィールのレイアウトです。
流体タイポグラフィをオンにしてレスポンシブ時にブロック内のテキストを本文より少し小さくなるようにして使っています。
Schedule Table 2
うちではクリニック系のクライアントが少ないのですが、これもよくあるレイアウトなので嬉しいです。
※追加後にレスポンシブのレイアウトを調整する必要がありそうでした。
Section: Team / Left Title and Description / Right Slider
Section: Team / Left Title and Description / Right Slider
似たような表現をスライダーで作ったのですが、このパターンの方がかっこいい気がします…
スライダーはハマりやすいのですが、ほぼほぼこのまま使えるやん…と衝撃を受けました。
unitoneのおすすめスタイル
見出しやボタンのスタイルなども用意されています。
丸アイコン（右）
ホバー（ボックスシャドウ）
色付きアンダーライン
なんとなく言わんとしてることが伝わるでしょうか？
こうしたパターンやスタイルが完成されたデザインとして用意されているのではなく、ブロックの組み合わせとして用意されているので各々のパーツが作り込まれている必要はありません。
もし、そっけないパーツだな…👀と感じたなら、それはパーツのデザインを敢えて作りこまないためだと思います。
言語化するのが難しいのですが味付けされた料理が陳列されているのではなく、料理に必要な素材が用意されていてそれを出してきて味付けしていくような感覚です。
これらのパターンを見ているだけでも、Webデザインを学ぶ上で必要な知識（再利用可能なデザインやコンポーネント）を学ぶことが出来る気がしました。
まとめ
unitoneで制作したサイトとおすすめ機能をご紹介しました。
unitoneを導入したことでクライアントと共にサイトを育てていける形が作れたと実感しています。
リリースしたあと、お客さまがやりたいことや前向きに参加できるような体制が作れればサイトはきっと成長します。これからも様々なテーマを使いながら色んな人との関係を築いていきたいと思っています🙇
unitoneは無料でも利用可能
この他にもかんたんなアニメーションならアニメーションパネルから設定・動作確認が可能です。
どうしてもCSSを書くことはあるのですが、その記述量は大幅に減りました。
今回ご紹介したパターンライブラリーやスタイルライブラリーの使用にはライセンスキーの設定が必要です。
※無料プランも用意されているので、試しに使ってみたいという方は無料で利用可能です。
ただ、どのテーマでもそうなのですが、やはり有料プランやサブスクリプションを購入することで便利な機能をフルに使うことが出来ます。
最初にお話ししたように、私はテーマ開発者の方々と共にWordPressでサイト制作していきたいと考えています（それはテーマであれプラグインであれ同じです）
お金は掛かってしまいますが、 その分だけ良い物を作れば問題ない気がします。
このようなテーマを有料プランで使うことで業界全体の発展に寄与出来たらいいな…と思っています😊
カテゴリー
アーカイブ
Most View
