サービスへのCSSフレームワーク採用におけるブランド戦略

CSSフレームワークを適切に選択することで、簡単にデザインを組み込めるだけでなく、サービスのブランドイメージを形成・強化することができます。 これについて、3つの代表的なCSSフレームワークを例に解説します。

ブランドイメージ

CSSフレームワークは、本来の意義である「デザインを簡単に組み立てられる」だけではなく、フレームワーク自体が持つ「ブランド」を借りることができます。

サービスの性質にあったブランドをもつCSSフレームワークを採用することで、ユーザに与えたいブランドイメージをより強化することができます。

以下に、ブランドイメージの例を示します。

注意

この記事では、各CSSフレームワークの「印象」をテーマとして扱うため、どうしても筆者の主観が入ってしまいます。

主観の部分に関しては、参考程度に読み進めてください。

CSSフレームワーク

それでは、3つの代表的なCSSフレームワークについて、概要とそれぞれのもつイメージを示します。

1. Primer

Primerは、GitHubが提供するCSSフレームワークです。 GitHubというサービス自体、このPrimerを用いてデザインを構築しています。

Primerを用いることで、GitHubのようなデザインを制作できます。 そのため、エンジニア向けのサービスをつくる際に採用することで、ターゲットユーザにとって親しみのあるデザインにすることができます。

2. Material Design

Material Design自体は、CSSフレームワークではなくデザインガイドラインであり、これはGoogleが提唱しています。

「要素に対して現実世界のルールを与える」というユーザビリティの高さは言うまでもありませんが、これを採用することで、ブランドイメージとしてはGoogleのもつ公式感・信頼感を得ることができそうです。

実際にこれを採用する際は、CSSフレームワークとしてMaterializeやMUIを導入することになると思います。

3. Bootstrap

BootstrapはTwitterが提供するCSSフレームワークで、コミュニティサービスなど雑多な情報を扱うサービスに向いています。

一方で、利用しているユーザも多く、チープというネガティブなイメージもあります。

導入する際は、多少なりともオリジナリティを出す工夫も必要かもしれません。

おわりに

CSSフレームワークを選ぶ際は、見た目や使いやすさだけでなく、「ブランド」という観点からも選んでみてはどうでしょうか。 導入の際の参考にしてみてください。