できるだけ早く、トレンドを意識したポータルサイトを制作するためのフレームワーク6選【フロントページ編】

 



2018/10/03

ポータルサイトは設計やシステム実装など、いくつもの工程があり、製作期間は長期に渡ります。
少しでも早く公開までたどり着くためには、各工程で効率的に作業を行う必要があります。
今回はフロントページに利用できるフレームワークを紹介します。

フレームワークとは

フレームワークとはサイト上で頻繁に利用する機能やデザインをまとめ、制作を効率よくできるようにしたテンプレートのようなものです。
製作時間の短縮には欠かせないものになってきています。

フロントページにはレイアウトを調整しやすいフレームワークを

レスポンシブでサイトを制作するという事は、極端に言うと2つのサイトを作る事と変わりなく、その作業量は倍以上になるケースもあります。
フレームワークにはレスポンシブサイトを作りやすくしてくれる機能や設定があるので利用しない手はありません。

◯Bootstrap
ポータルサイト デザイン トレンド

フロントページのフレームワークの王道といえばばこちら。
レイアウト調整のみならず、カルーセルやボタンのデザインなど、総合的に使える機能が揃った優れものです。
http://getbootstrap.com/

◯Pure
ポータルサイト デザイン トレンド

Bootstrapと比べるとやや機能が少ないものの、軽量でサクサク動く印象です。
シンプルなサイトや膨大な情報を扱うサイトにはもってこいです。
https://purecss.io/

◯Gumby
ポータルサイト デザイン トレンド

BootstrapとPureを合わせたような印象。
デザインはBootstrapよりは精度が低いものの、動作は問題なしです。
もう少し研究して優れた点を発見したくなるフレームワークです。
https://purecss.io/

◯HTML5 BOILERPLATE
ポータルサイト デザイン トレンド

こちらはHTML5のタグが利用できるようにする、かなりシンプルなフレームワークです。
必要最低限で制作をスタートしたい場合に利用できそうです。

https://html5boilerplate.com/

◯Responsive Grid System
ポータルサイト デザイン トレンド

グリッド(レイアウト)だけに焦点を当てたフレームワーク。
詳細の要素は自分で考えたい・設定したい場合にピッタリです。
ワイヤーフレームなどを作る際にも活躍してくれるでしょう。
https://www.bigdropinc.com/blog/responsive-gs/

◯Semantic UI
ポータルサイト デザイン トレンド

最後に紹介するこちらはBootstrapの対抗馬と言ってもよい位充実した機能を揃えています。
バックエンドのエンジニアだけどフロントページをかっこよく見せたいという希望に答えてくれそうなフレームワークです。
https://semantic-ui.com/

まとめ

レスポンシブ対応やトレンドデザインの入れ替わりなどフロントページに取り巻く環境が劇的に変化し続けている昨今、
少しでも作業を効率的に行えるフレームワークは必要不可欠な存在となってきました。
プロジェクトに合ったものを選んだり、使い慣れたものを利用したりして、サイト制作に役立てたいですね。