かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

カードベースデザインとグリッドシステムとflexbox


冗長なタイトルになりました(笑)


カードベースデザインについては6 Web Design Trends for 2015 | TrackDuckの「Card-based design」の項目に詳しいです。

先日、このカードベースデザインの思わぬところでつまずきました。いろいろとやった揚げ句結局flexboxで書いたのですが、その際にいろいろと気づきがあったので備忘録的に書いていきたいと思います!


※flexboxの書き方については、よい記事を書かれているブログが多いので、そちらをご参照ください。


カードベースデザインのメリットは、

  • 直感的にカラムを把握してもらえる
  • 大見出しとして用いるとポイントを視覚的に明示できる
  • バランスを保ったデザイン

などなどでしょうか。


当初より、レスポンシブデザインのデメリットは、

  • デバイスによって組み立てが変わるのでカラムを把握してもらいにくい
  • レイアウト崩れを起こしやすい

など言われていましたので、それをカバーしてくれるカードベースデザインが多く使われるようになっています


例えば…PCサイズで4カード横並び、スマホサイズで2カード横並びにしたい場合があるとします。グリッドシステムを使って、ちゃちゃっと出来そうです。


あれ?!heightが文字量やレスポンシブの伸縮によって変わるので揃わないんですね!これではおさまりが悪くて落ち着かないですね!!例えばこのカードを、固定コンテンツではなく、ニュースやブログページなど次々に更新されるコンテンツに使用したい場合もあろうかと思います。そうなると文字数なんて無制限ですから、これではいけません!


そういえば最近こういうデザインをよく見るようになりました。


枠を設けることで、文字量に加えてmargin、padding、borderなどサイズに影響する要素を気にするくらいなら、カラムの直感的な把握は劣るけれども、枠をとっぱらってしまえばグリッドシステムで対応できるというわけなんですね!文字も中央揃えにしてしまえば、例え何文字になろうが、バランスもいいです。


しかしこのデザインはあまりにも目にするし、日本語は中央揃えにはもともと向いていません。さらに、こういったデザインは、使用できる業態が限られると考えます。なぜなら枠無しカードの場合、使用できる画像が上記のようなアイコンか、もしくはこのようなラウンド型に切り出した写真でしょう。


「そこにwidthがあることを意識させないもの」です。シンプルな作りだけにインパクトの大きいデザインです。逆にいえば、コーポレートカラーを使えばサイトイメージを統一できるほどに目立ちますので、シンプルにスタイリッシュにサイトをデザインしたい場合には、ぜひ使いたい手法です!


しかし、今回制作しているサイトは優しいふんわりとしたイメージのサイトなので、

  • 箱影あり
  • 枠有り
  • PCサイズで4カード横並び、スマホサイズで2カード横並びの配列

というカードメニューを設置したかったんです。そこでBootstrapのFlexやCardsを試してみました。


2016/10現在で最新の「Bootstrapバージョンv4.0.0-alpha.2」は、カードベースデザインを簡単に装飾できるclassや、Flexboxもサポートしています。

しかしこういったフレームワークは便利ではありますが、「いやいや、わたしはこうデザインしたいんだよ!」と細部にこだわった場合なかなかうまくいかない時もあります。


例えば、カードベースデザイン単体を考えれば、Cardsを利用するのが便利です!cssで独自のスタイリングも簡単にできます。

しかし、スマホサイズ(xs)ブレイクポイントで1カードの縦並びになってしまうんです。1カード縦並びのデザインをする時は、本当に楽。でも、今回わたしは2カード横並びなので、あれこれやってみましたが、あちらができればこちらができず…どうにもうまくいかない。


Flexboxも使えるようになったとのことなのでやってみましたが、こちらはひとつのブレイクポイントで何カード横並びにするかの制御はできるようですが、複数のブレイクポイントでの制御ができない??色々なサイトを読みましたが、まだ情報が少なくて使いこなせず!!


ということでFlexboxでスタイリングしたわけですが、こちらはメディアクエリでflex-basisを%で指定すれば、完全にカード数を制御できる。分かりやすくて速かった(;'∀')


グリッドシステムではなくFlexboxで作られているサイトさんも拝見しましたが素晴らしかったです。

ちょっと前まではFlexboxにはベンダープレフィックスが必要でしたが、ブラウザが淘汰されてきたことやWindowsOSの強制バージョンアップでflexboxがほぼ心配なく使えるようになってきたと言われています。

12列のグリッドシステムではなかなかできなかった部分も、色々表現して行けそうですね!