リクエストから生まれた、ブログで更新できる最新テンプレート

ユーザーさんが使ってみたいデザイン、欲しかったテンプレートを、とことん作ってみたい！
BiND誕生10周年の節目に、そんな願いを叶える企画が実現しました。

これまでは、トレンドや時流にあわせてデジタルステージから皆さんへテンプレートを提案してきましたが、今回はその逆。おかげさまでこれまでにないレイアウトと仕組みのテンプレートが仕上がりました。

ビルボードのないトップ、可変するグリッドデザインで、そのひとコマはブログから投稿する仕組み。
つまりBiNDでページを作らなくてもOK。スマホからも投稿できるテンプレートです！（BiNDクラウド利用の場合です）

リクエストは「グリッドデザイン＆ブログから更新したい」

今回、テンプレートの共同制作者に選ばれたのは、関東地区にお住まいの「MatsuDonald’s」さん。

ありがたいことに、これまでにすべてのバージョンのBiNDをお持ちで、初期のBiNDもご存じという古くからのBiNDご愛用者さんとのこと。
さすがBiNDを使いこなしているだけに、作られているBiNDサイトも素敵で、

MatsuDonald'sさんの作成したサイト

MatsuDonald’sさんの作成したサイト▲「小原 由起子オフィシャルサイト」
ページをスクロールするとブロックの間から透けて見えるギミックを用いた、シンプルでスタイリッシュなサイトです。

そんなMatsuDonald’sさんのリクエストは、地域のイベント情報やお店紹介、取材記事など地域情報を発信するウェブニュースサイトとしての利用を想定した、オウンドメディア風サイトのテンプレート。

イメージとしてリクエストいただいたデザインはこちらで、

ポイントとしては、
・フロートするグリッドデザイン
・サイドなどに最新記事やピックアップ記事などのエリアが置ける
・BiND Press（ブログ）から更新ができる
こと。

中でも、並んだ記事のうち「これが見せたい」という記事を目立たせてられるところが気に入っている、とのことでした。

これらを実現するために、もっとも奮闘したのは・・
まず、このグリッドデザインをBiND Pressのインデックスブロックで実現できるか？！ということ。
そこから、検証チームとの格闘がはじまったのでした。

BiND初！ブログ投稿で更新できるグリッドデザイン

テンプレートの制作で難しいのは、作り上げたデザインイメージをBiNDで動作するように落とし込んでいく作業です。今回は、新たな機能開発が伴わないので、BiNDの現行製品で動作するものでないと実現できません。
BiNDで表現できたとしても、そこから様々なブラウザを想定して、レイアウトが崩れないか、支障が出ないかなどをチェックしていきます。

仕様上、泣く泣く諦めたこともありつつ、試行錯誤して何とか出来上がったデザインがこちら！

ブログ機能BiND Pressで実現した、可変するトップページ

このグリッドデザインを実現するために各記事のインデックスをフロートデザインで仕上げたのはもちろん、ビルボードエリアをなくし、トップからタイル状に並べるデザインにしています。

シェアボタンやコメント機能の付いた記事ページ

気に入った記事をすぐにシェアしてもらえるように、シェアボタンやコメント機能を加えました。
また最新記事が自動で表示されるようにインデックスブロックをサイドにも配置し、オススメ記事をページ下部へ配置。
残念ながら、オススメ記事は現状タグでのソートができないので手動で設定していただくことになるのですが・・
ぜひゆくゆくは機能で実現したいところです！

共同制作テンプレートのこだわりポイントまとめ

今回、MatsuDonald’sさんのリクエストをヒアリングしながら、こだわりを形にしたポイントをまとめました。

こだわり1：オウンドメディアとして使える、ブログで更新できるTOP

トップページはBiND Pressでブログ化したインデックス・ブロックで構成しているので、BiNDでページを作らなくても、BiND Pressで記事を投稿すればトップが更新され、記事ページが自動生成されるようになっています。オフィシャルサイトとはまた別の、もう一つのオウンドメディアとして運用できることを意識し、思い切ってビルボードを外す設計に。最新記事が最初に目に留まるデザインです。

こだわり2：見せたい記事を目立たせるギミック

背景色

ご要望にもあった読ませたい記事を目立たせるギミックは、コンテンツの背景色を変えることで表現。
希望としては大きさを変えるデザインでしたが、今のBiNDのブロック構造では表現できず、アレンジさせていただきました。

こだわり3：縦にならんだSNSアイコン

SNS

左サイドにSNSの連携パーツを縦に並べたレイアウト。実はこれ、BiNDのサイドブロックで実現しているのですがここまで幅を狭くしたサイドのナビゲーションは初めての試み。ボタンなども任意に配置できるので、アイディア次第でアレンジが生まれそうですね。

BiND10テンプレートの「ANNABELLE」はリクエストに近いデザインのテンプレートですが、こちらはBiND Pressで作られていないため、ブログとして更新したい人にはピッタリのテンプレートとなりました。

次回は、MatsuDonald’sさんのリクエストでもあったカラーバリエーション違いのデザインをレポートします！
MatsuDonald’sさんが希望されたカラーにご期待くださいね。

こちらのテンプレートは、「BiND Site Box Vol.25」として発売中！！興味ある方は追加してみてくださいね。

最新の追加テンプレートをチェックする