フロントエンドWEBアプリケーションフレームワークの紹介

ウェブ

フロントエンドWEBアプリケーションフレームワークとは、デザインやレイアウトのベースを簡単に作ることができるライブラリです。

デザインのベースとなる部分はCSSフレームワークに任せてしまうことで、クラス名を付与するだけで簡単にデザインを整えることができるので、作業時間を大幅に短縮することができます。

この記事では、お勧めできるフレームワークをいくつかご紹介します。

フレームワークを選ぶ時のポイント

フレームワークを選ぶ時には、下記のポイントに注意して選ぶようにしましょう。

フレームワークを使用する目的

フレームワークには、細かなボタンのデザインやアコーディオン、スライダーなど様々なコンポーネントが詰まっているものから、ページのレイアウトを行うためだけのフレームワークもあります。CSSフレームワークを使用する時には、どの部分にフレームワークを使用するかを先に決めておくことで、最適なフレームワークを見つけることができます。

デザインテーマ

デザインまですべてCSSフレームワークを使ってしまいたいと考えていても、サイトの目的と合うデザインのCSSフレームワークが無ければ、デザインは自分で行うべきです。レイアウトを整える所まではCSSフレームワークを活用して、細かなデザインはCSSを書いて調整するようにしましょう。

ファイルサイズ

ファイルサイズが大きいと、その分だけページの読み込みに時間がかかってしまいます。いくら優れたフレームワークだと言っても、余計な機能ばかりの場合はもっと軽量のフレームワークを使用した方がいい場合があります。自分の目的をしっかりと整理して、サイトに合ったCSSフレームワークを使うようにしましょう。

お勧めのフレームワーク

Bulma

Bulmaは、Flexboxが使われていて、じわじわと人気を増してきているモダンなCSSフレームワークです。

Flexboxは、CSSによるレイアウト作成の主流になってきている方法であり、それも相まって利用者が増えてきています。

また、Bulmaはコンポーネント単位でスタイルをインポートすることができるので、一部の要素にだけBulmaのスタイルを適用するなど、必要な部分だけ利用できるというのも特徴の一つです。

Bulma: Free, open source, & modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

Tailwind CSS

ailwind CSSは、予め用意されたコンポーネントを利用するのではなく、ユーティリティクラスを使い回すことでデザインをカスタムするためのCSSフレームワークです。

例えば、rounded-fullというクラスを付与すれば要素が円形になったり、text-centerというクラスを付与すればテキストが中央寄せになるなど、クラス名を加えたり変更するだけで基本的なデザインを作り上げることができます。

HTMLとCSSを行き来する回数が減るので、コーディング作業に必要な時間を短縮することができますね。クラス名を覚えるまでが少し大変ですが、覚えてしまえばとても頼りになるCSSフレームワークです。

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
Documentation for the Tailwind CSS framework.

UIkit

UIkitは、数あるCSSフレームワークの中でも圧倒的にデザインに優れていて、かつ使いやすいモダンなCSSフレームワークです。(個人的に一番オススメ)

機能もとても豊富で、パンくずリストやページネーション、ノーティフィケーションなど様々なコンポーネントが用意されているので、幅広いWebサイトで使用することができます。

とても使い勝手のいいフレームワークにも関わらずとても軽量のCSSフレームワークで、できるだけ時間を使わずに、かつ見た目も美しいWebサイトを作りたい場合におすすめです。

UIkit
UIkit, a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Bootstrap4

Bootstrapは世界中で多くの人に利用されているCSSフレームワークです。最新版のBootstrap4が2018年1月に正式にリリースされました。

Bootstrap4になり、Bootstrap3の時に出ていた課題の多くが解決されていて、より使いやすいCSSフレームワークとなりました。

レイアウトにグリッドシステムを採用していて、色々なカラム幅のページを自由自在に作成することができます。

また、一般に公開されているWebサイトだけでなく、管理画面のWebページでは積極的にBootstrapを使って作られている場合も多いです。

Webデザイナーを目指している人は、Bootstrapを使いこなせるようになっておくと、色々な場面で役に立つでしょう。

Bootstrap
The most popular HTML, CSS, and JS library in the world.

Materialize

Materializeは、マテリアルデザインを簡単に実装することのできるCSSフレームワークです。

マテリアルデザインはGoogleが提唱したデザイン手法ということでとても高い人気が高く、見た目が美しく、ユーザーにとって使いやすいWebサイトを作ることができます。

サイト全体をマテリアルデザインで作ってしまうと、まるでGoogleを真似たかのようなデザインになってしまい、個性が無くなってしまいます。例えば、カードUIやボタンだけマテリアルデザインを取り入れるなど、アクセントとしてマテリアルデザインを使うようにすると、オリジナリティと使いやすさが両立されたWebサイトを作ることができます。

Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.

Foundation

FoundationはBootStrapと肩を並べる人気のCSSフレームワークです。

ポイントは高いカスタマイズ性で、BootStrapよりも色々とカスタマイズしやすい作りになっています。

フレームワークを使いたいけれどあまり全面に押し出したくないという場合は、Foundationを使用するとオリジナリティを保ちながら効率のいいWeb制作を行うことができます。

The most advanced responsive front-end framework in the world. | Foundation

Semantic UI

Semantic UIは、セマンティックなマークアップでページを作成できるCSSフレームワークです。

要素ごとの意味合いを考慮しながらページを作成するため、直感的なイメージでページを作成することができます。

「セマンティック」や「意味合い」など、言葉で説明されてもあまり理解しづらいと思いますが、実際に他のフレームワークと使い比べてみると、Semantic UIのシンプルさや使いやすさに魅力を感じるはずです。

Semantic UI
Semantic empowers designers and developers by creating a shared vocabulary for UI.

Pure

PureはYahoo!が提供するCSSフレームワークで、ファイルが軽量ということで人気を集めています。

非常にシンプルなフレームワークなので、細かいデザインやカスタマイズは自分で行いたい時に使えるフレームワークです。

Pure
A set of small, responsive CSS modules that you can use in every web project.

SkyBlue

SkyBlueはシンプルなCSSフレームワークで、とても軽量な点が魅力です。

SkyBlueを使用してページの大まかな部分は作成して、細かい部分は自分で作りたいような場合はおすすめのフレームワークです。

SkyBlue CSS Framework

Skeleton

Skeletonは、必要最低限のスタイルだけが詰め込まれた超軽量CSSフレームワークです。

効率的にWebサイトを作成する場合に、Skeletonでレイアウトなどベースとなる部分を作成し、その上に自分でデザインをCSSで記述していくという使い方が一般的です。

グリッドやボタン、フォームなどちょっとめんどくさい所もしっかり用意されているので、気軽に使えるCSSフレームワークとしておすすめです。

Skeleton: Responsive CSS Boilerplate

コメント

タイトルとURLをコピーしました