ミニマルなブログやオウンドメディアに最適!超シンプルなモノトーンのテンプレ登場

ユーザーさんと一緒に作るテンプレート企画より、今回はカラーのお話。BiND史上一番の真っ白さを誇るテンプレートに仕上がりました。それはもちろん主役である「写真」を引き立たせるため。ぜひご覧ください。

こんにちは!
BiND10テンプレートのデザインディレクターを担当している、デザイナーのオモトです。
前回のブログで、ユーザーさんと共同制作している「オウンドメディア風サイトのテンプレート」についてご紹介させていただきましたが、今回はその続き。

MatsuDonald’sさんのリクエストでもあったカラーバリエーション違いのデザインについてお話ししたいと思います。

カラーバリエーションはコレ!

きちんと見えするから、誰でも使いやすい「白ベース」のカラーバリエーション

ap015b

MatsuDonald’sさんのリクエストであったモノトーンのサイトは、BiND史上(?)一番の真っ白さを誇るテンプレートとなりました。
真っ白すぎて、一見何もデザインされていないようにも見えますが、全てはこのサイトの主役となる「画像」を目立たせるためにあらゆる配慮がなされています。

画像とはもちろんタイル状に並んだ記事の画像のこと。
トップページはBiND Pressでブログ化したインデックス・ブロックで構成しているので、BiNDでページを作らなくてもBiND Pressで記事を投稿すればトップが更新され、記事ページが自動生成されるようになっています。画像より目立つ色をとことん排除し必要最低限の要素を目立たせ、罫線の色にもこだわり、ミニマリスティックさをこれでもかと追求しました。

最初は、ページ上部の「COME ON〜」のエリアをグレーのベタにしていましたが、少しでも色が入っていると、その色のイメージに引っ張られてカスタマイズしにくいサイトとなってしまうと思い、
情報と情報の境目を罫線で分けるという、BiNDのテンプレートでは今ままで表現してこなかったデザインにチャレンジしました。

ap015b_article1
記事ページもご覧の通り真っ白です!

余計な色がないので、写真の色がグーンと引き立っていますね。
テンプレートは「誰にでも使いやすくあるべき」というのは私も思うところなので、今後このようなモノトーンのテンプレートを増やしていければと思っています。

引き締まったモノトーンカラーで、きれい見え「黒ベース」のカラーバリエーション

ap015c

BiNDでは、1つのテンプレートにつき3カラバリ提供しているのですが、そのうち2つともがシンプルになりすぎないよう、こちらのテンプレートは、差し色に薄い桃色を入れてみました。これも、MatsuDonald’sさんのアイディア、リクエストでもあります。

こちらは、先ほどのの白ベースのデザインを反転させたデザインですが、ただ全ての要素を反転させてしまうとかえって読みづらい箇所が出てきてしまうので、
瞬間的に目を引きたい、トップページの記事の見出しのエリアは白いままにしました。

ap015c_article2

こちらは記事ページです。
先ほど、瞬間的に読ませたいところは白にしたと言いましたが、記事ページも読んで欲しいから白くすればいいか、というとまた違います。
私は、モニターの明るさで目がちらついて疲れてしまうので、iPhoneの設定で背景を黒くして記事を読んだりしています。Twitterでも、背景を黒くするナイトモードが選べますよね。
ちゃんと読んで欲しいときは逆に、背景が黒い方がじっくり読めるんです。
タイトルは、もう知ってるはずなので、やや暗めに。それよりもサイトにきたユーザにとって重要度の高い、記事の内容は、文字を白くし、目立たせるような作りにしたり、細部にこだわりました。

■アレンジアイデア
コンテンツをアレンジすれば、たとえば採用サイトとしてもつかえそうですね。

なおこちらのテンプレートは、「BiND Site Box」として12月中旬に発売が決定。お楽しみに!

  • BiND史上もっともミニマムなブログテンプレートが登場
  • 主役となる「記事の画像」を引き立たせるデザインに
  • 「BiND Site Box」として12月中旬に発売決定

関連記事