WEB制作初心者におすすめしたいCSSフレームワーク・テンプレート

私が初めて業務としてプログラミングに触れたのは、社内用システムの作成を上司に頼まれた時でした。

未経験ながら調べた結果バックエンド部分はJAVAのフレームワーク、Spring Bootで作成することにし、マークアップ言語も趣味程度でそれまでほとんど触ったことがなかったためシステム全体のデザインで悩みました。

ちーも

自分のデザインセンスにも自信がなかったです・・・。

私の体験はWEBアプリの作成なのでWEB制作とは少し話が違ってくるのですが、もちろんWEB制作にも応用できますし特に初心者の方にお勧めしたい内容です。

当時作らなくてはいけないシステムは設備の使用状況を記録したり、設備の管理をするためのものです。

社内システムなので機能がメイン、正直デザインはなんでもOKというような感じでしたが、「せっかく作るならそこそこおしゃれな見た目にしたい！」と思いました。

ただ、一からHTMLやCSSを書いていくのはリリース予定的にも初心者には時間が足りなかったのでCSSフレームワークとテンプレートを活用することにしました。

CSSフレームワークについて

例えば私がこの案件で使用したBootstrapでは、
以下のように記述することで基本のテーブルを作成することができます。（公式サイトより）

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

クラスを追加することでテーブルをストライプにしたり、ホバー時に行がハイライトされるようにもできます。
その他にも一から作ると面倒なヘッダなんかも簡単に作成できます。

<table class="table table-dark table-striped">
  ...
</table>

CSSフレームワークには多くの利点がありますが、反対にデメリットとしてデザインが被りやすいというものがあります。

先ほど挙げたBootstrapはCSSフレームワークでは恐らく一番メジャーではないかと思いますが、それゆえ既視感があるのでわかる人には一目でBootstrapだとわかってしまうのではないでしょうか。

なのでオリジナリティを出すためにはフレームワークをベースとして細かな修正を行い、自分好みに仕上げていくのがいいと思います。

おすすめCSSフレームワーク

デザインが被りやすいとは言いましたが、Bootstrapももちろんおすすめのフレームワークです。シェアが高いので、ほとんどのことは検索すればヒットします。この後紹介するテンプレートもBootstrapで作られているものは他のフレームワークよりも多いと思います。

Bootstrap

Bootstrap パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、…

Bootstrapは割とはっきりめの配色が採用されていますが、「自分でCSSをいじりたくないけどもう少し落ち着いた感じの画面を作りたい。」という方にはSemantic UIがおすすめです。

機能としても十分ですし、デザイン性が高く、配色もグレーを基調として原色ではなくニュアンス寄りになっています。使用する際もBootstrapより簡単で扱いやすいことが特徴です。

Bootstrapを使用したテンプレート

次にテンプレートですが、これはCSSフレームワークを使用してある程度ページとして形になっているもののことです。
いくつかのページ（ダッシュボード、プロフィール、サインイン画面など）がセットで配布されているものが多く、レスポンシブデザインに対応しているものもあります。

ちーも

私が今まで実際に使ったのは全てBootstrapのものなので、今回はBootstrapに限定して紹介します。

おすすめテンプレートサイト

開発をすることになった当時はそんな便利なものがあるとは知らなかったので、確か「ダッシュボード　テンプレート」なんかで検索して見つけたんだと思います。むしろ途中までCSSフレームワークがなんなのかわからずに使っていました。

検索をしてみるとおしゃれでかつレスポンシブにも対応したデザインがたくさん見つかったので、その中からCreative TimのPaper Dashboard 2を使うことに。

Creative Tim

Creative Tim UI Kits, Templates and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js and Laravel. Join 2,483,193+ users and to access all our free items…

Creative Timは有料のテンプレートを販売しているサイトですが、一部無料で使えるFree Themesがあります。
Paper Dashboard 2もその一つで、サイトを見るとFree版は有料版のDemo版という位置づけのようですが、自分でカスタマイズすれば十分使えると思います。

Pro版に比べると機能や動きが少ないので、必要な場合は自分で調べて追加します。
私もこの開発ではサイドバーがアコーディオンメニューに対応していなかったので自力で追加しました。

Creative TimのテンプレートはMITライセンスのもと配布されており、改変や商用利用も問題ありません。

オープンソースソフトウェアライセンスのひとつ。ほぼ制限なしに、無料で自由に使用することができるのが特徴。
守るべき条件として、著作権表示やライセンス表記をソースコードなどに含める必要がある。

影響があるのはソースコードのみで、見える部分にはリンクを貼ったりしなくていいのはとてもありがたいですね。

Paper Dashboard 2はグラフのデザインもお洒落で、設備の月間使用状況などの表示に使用しました。
Spring Bootで取得したデータを表示する際に、もともとのテンプレートの要素を置き換えていけばいいだけなので簡単です！

Paper Dashboard 2は見やすく自分の好みにもピッタリだったので、この案件だけではなく別の社内用システム開発時にも使用しました。
もう少しスタイリッシュなデザインがいいという場合はこちらもおすすめです。

Material Dashboard 2

Material Dashboard 2 by Creative Tim Download Material Dashboard a free Bootstrap 5 Material Design Admin developed by Creative Tim. See the live demo on our site and join over 1M creatives!

こちらはサイト全体ではなく部分的の使用でしたが、Paper Dashboard 2とはまた違った雰囲気になっていい感じでした。
Creative Timでは機能が豊富な有料版もそこまで高額ではないので、余裕があれば使ってみるのもいいかもしれません。

Creative Tim以外では「Start Bootstrap」というサイトもおススメです。
お洒落なテンプレートが豊富にあり、ダッシュボードだけでなくコーポレートサイトやポートフォリオに使えそうなものもあります。

さいごに

CSSフレームワークやテンプレートを使うことで、デザインを考える手間が省けたり、コーディングの時短になったりするだけでなく、初心者の方にはデザインの勉強にもなると思います。

HTML/CSS初心者の方、それ以外の方も是非使ってみてください！！