【最新版】BiNDup 今冬の新作テンプレートをデザインアレンジ術とともに紹介

アレンジ例こんにちは!ホームページ作成サービスBiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。
最新のテンプレートが、10月・11月・12月の計3ヶ月に渡って連続リリースとなりました。ビジネスコースで使える予約サービス「SmoothBooking」の利用を想定した予約サイトのテンプレートも含まれているのでおすすめです。

前回の記事では、10月搭載したホームページ作成サービス「BiNDup」の追加テンプレートSiteBoxより新しい4つのテーマに触れましたので、今回は、新たに搭載されたてのプリセットテンプレートの6つのテーマについてデザインのポイントやおすすめのぷちアレンジ方法をご紹介します!

→テンプレートでハイクオリティなサイトが作れる「BiNDup」を30日間無料体験

Webサービス向けのテンプレート「MILLION」

MILLION
Webサービスの公式サイトを想定したテンプレート。明るいタッチで、ピクトグラムやUIを効果的に見せるデザインになっています。
導入の流れ
プランや導入までの流れ、お客様の声(事例)、無料トライアル用のフォームなど、サイトを見た人が納得してCVできるような情報が掲載されているので、ダミーの文章と画像を差し替えるだけで、WEBサービスの公式サイトが完成してしまいます!
またシングルページ用のサイトでは、こうした情報が1ページに収まっているので、LPとしても活用できますよ。

プレビューを見る

ぷちアレンジ例 一番推したいプランの背景色を変えてみる

アレンジ例
設定
2022年の初頭に実装された新ブロックエディターでは、カラムごと背景を変えるのが簡単になりました。ブロックエディタ右下のカラムを選択し、背景色を設定することで、任意のカラムの背景を変えることができますのでぜひやってみてくださいね。

→テンプレートでハイクオリティなサイトが作れる「BiNDup」を30日間無料体験

お固めなビジネス向けにちょうどいいテンプレート「SKILIT」

SKILIT
人材育成業を想定したテンプレート。BiNDupのテンプレートはいい意味でも悪い意味でもデザイン性がありすぎてしまうな…というのを課題に感じていたので、「おしゃれすぎる」に理解が薄い会社のサイトにも使えそうな、ちょうどいい温度感に仕上げました。

プレビューを見る

ラインでタイトルを装飾
いい意味で無難に仕上げながらも、タイトルの前にラインを入れたり装飾を入れているので、シンプル過ぎないデザインになっています。

ぷちアレンジ例 フォントを変えてみる

アレンジ例
フォント
デフォルトでは、フォント全体に対して「セザンヌPro」を使用していますが、業界でよく使われるフォントの「Noto Sans」にしてみたり、英語のフォントを変えてみるだけで雰囲気が変わりますよ。

英語は、文字の横幅が押さえられ、長い文章が入った時にも対応できるRoboto CondensedやBebas Neue、Oswald、そこまで圧縮する必要がないなら、PopinsやManrope、Latoが個人的には特におすすめです!Webフォント選択画面の、欧文フォントタブの上の方のフォントを使ってみてくださいね!
ちなみに英語のタイトルだけフォントを変えたい場合は、Dressの「タイトル」に対して英語のフォントを設定してみてください。

→テンプレートでハイクオリティなサイトが作れる「BiNDup」を30日間無料体験

洗練された美容院向けのテンプレート「HENRY.」

HENRY
美容院を想定したテンプレート。似たようなテイストのBiNDupのテンプレートで「HAJIMARI Salon」というのがありますが、水色などの色味が多少入っていたりグラデーションを使っていたりと、完全なミニマルではなかったので、線とベタだけの表現というものに、今回はチャレンジしてみました!

プレビューを見る
華奢なアイコン
斜め線
ドット
華奢なアイコンと少なめな文章の組み合わせで空間が広く見え、ミニマルな印象に仕上げています。

ぷちアレンジ例 予約機能をカスタマイズしてみよう

アレンジ例
HENRY.Salonには、最近実装された予約機能のSmoothBookingを搭載しています。詳しくは別記事でアレンジ例をご紹介してますので良かったら見てみてくださいね。
また、ここ3年ほど、カラバリの差分だけでなく、コーポーレートサイトverポートフォリオverなど、同じデザインの業種が異なるテンプレートを提供していますので、こちらも併せてチェックしてみてください!

→テンプレートでハイクオリティなサイトが作れる「BiNDup」を30日間無料体験

モノやサービスの魅力をストーリーで伝えるテンプレート「HOUR CRAFT」

HOUR CRAFT
レザークラフトショップを想定したテンプレート。今回のBiNDupテンプレートの中でスクロールテリングというものを最大限表現した構成になっています。
説明文も含めて縦文字で構成され、雑誌のように読みすすめることができます。一つ一つの文章が詩的でエモーショナルになっていて、読むほどに続きが気になっていくはずです…!
スクロールテリングの用語は、こちらの記事で詳しく解説しています。

2022年大きなWebデザイントレンドの傾向。UX事情を踏まえながら解説

雑誌風
ここだけ見ると、ほんとに雑誌と思っちゃいますね!

ぷちアレンジ 背景スライドショーを変えてみる

アレンジ例
デフォルトだと静止画にしていますが、背景スライドショーを設置するとより、エモーショナルな表現になりますよ!
また任意の場所に縦書きの文章を追加したい場合は、こちらの記事を参考にしてみてください。

癒しやゆったりした時間を印象づけたい時に最適なテンプレート「Birdie」

Birdie
整骨院を想定したテンプレート。ベージュのベースの配色や植物のラインイラストや手書き風の文字で、ナチュラルで暖かな印象に仕上げています。

プレビューを見る

予約
予約機能のSmoothBookingを使ったWEB予約と電話予約の2種類の予約方法に対応しており、SmoothBookingを使っていれば、今週の予約状況などをサイト内で確認できるので、とても便利です。

アレンジ例 色を統一してみる

アレンジ例
デフォルトでは、手書き風の文章の部分に明るい水色を使っていますが、全部紺色にすると、よりシックな仕上がりに!暗すぎる場合は、紺色の色味を少し明るい方向に調整するといいですよ。

→テンプレートでハイクオリティなサイトが作れる「BiNDup」を30日間無料体験

職人の洗練された技を表現するのに最適なテンプレート「AJIMI」

AJIMI
シンプルな構成ながらも、縦文字の部分使いや黒背景に統一された縦長の写真で鋭く研ぎ澄まされた印象に仕上げています。
ボタン
明朝体とゴシック体を組み合わせることで、和風すぎない和モダンなデザインに。
リンク以外に下線を引かないことで他の文章と差別化させ、写真やデザインの雰囲気を壊さずにナビゲーションさせることができます。

アレンジ例 スマホメニューをアレンジしてみよう

アレンジ例
プレビューを見る
スマホメニューを少しアレンジしてみると、また少し印象が変わりますよ!
詳しいやり方はこちらの記事で!

ちょっと変わったスマホメニューに挑戦するテクニック・応用編

まとめ

いかがでしたでしょうか?今回ご紹介した6つのテーマには、それぞれ3つずつ想定業種やサイトの目的が異なるテンプレートをご用意しております。レイアウトや機能も変化しているので、まだご覧になっていない方はぜひ新作テンプレートをチェックしてみてくださいね!
BiNDupのテンプレート紹介ページ

ホームページ作成サービスBiNDupのテンプレートをみるBiNDの制作事例を見る

ノーコードでできる!予約サイトの作り方ガイド

ノーコードCMS「BiNDup」の予約サービスがわかる使い方ガイド。予約フローや設定、管理方法を詳しく解説します。あらゆる予約タイプに対応する万能タイプのサービスです。

今すぐ資料をダウンロード
  • POINT

  • 紙面風のWebレイアウトは、ストーリー仕立ての構成に最適
  • 予約機能を活用してページをアレンジしてみよう
  • フォントや要素を少しアレンジしてよりブランドイメージを伝わりやすく

あわせて読みたい