はじめに
「おしゃれなホームページを作りたいけれど、デザインセンスに自信がない」
「CSSのコードが長くなって、何がどこにあるか分からなくなる」
そんな方におすすめなのが、Webのパーツがセットになった「UIコンポーネントライブラリ」です。
あらかじめプロが作った綺麗なパーツを、パズルのように組み合わせるだけで、誰でも一瞬でプロ級の画面が作れます。
本記事では、「環境構築は一切なし」「完全無料」「HTMLにペタッと貼るだけ」で今すぐ使える、初心者向けの神ライブラリを3つ集めましたので紹介します。
Bootstrap
Webサイト制作の現場でも長年使われ続けています。
ボタン、ナビゲーションバー、カード、モーダルなど、Webサイトに必要なパーツはほぼすべて網羅されています。
利用するための最小限の骨組み
アコーディオンメニューを作成してみる
スマートフォンサイトのメニューやQ&Aでよく利用するアコーディオンメニューを作成してみます。
公式ドキュメントを参照しながら作成します。
Web Awesome
「Web Awesome（旧 Shoelace）」は、Web標準技術を採用した、最新の万能型UIライブラリです。
ReactやVueなど、フレームワークの流行に左右されず長年使い続けられるのが特徴です。
ボタン、ダイアログ、タブ、ドロワーなど、必要なパーツはほぼすべて網羅されています。
基本機能は完全無料で商用利用でき、より高度な開発向けに有料のProプランも用意されています。
利用するための最小限の骨組み
タイムピッカーを作成してみる
予約フォームやスケジュールなどでよく利用する。タイムピッカーを作成してみます。
公式ドキュメントを参照しながら作成します。
daisyUI
「daisyUI」は、モダンなデザインと圧倒的な開発スピードを両立した、今もっとも注目されている新世代のUIライブラリです。btn や card といったシンプルなクラス名を書くだけで、プロのデザイナーが作ったような洗練されたパーツが一瞬で完成します。
最大の特徴は、30種類以上もある豊富なカラーテーマ機能です。「ダークモード」や「レトロ」「サイバーパンク」など、HTMLを1行書き換えるだけでサイト全体の雰囲気をガラリと変えることができます。
利用するための最小限の骨組み
ドロワーを作成してみる
スマホサイズのメインナビゲーションやサブメニューを表示する時によく利用するドロワーを作成してみます。
公式ドキュメントを参照しながら作成します。
まとめ
今回は「環境構築なし・完全無料・HTMLに貼るだけ」で使える初心者向けUIコンポーネントライブラリとして、Bootstrap・Web Awesome・daisyUIの3つをご紹介しました。
プロがデザインしたパーツをパズルのように組み合わせるだけで、ボタンやフォーム、カード、モーダルなど、さまざまなコンポーネントを一瞬で作れるのが最大の魅力です。「デザインセンスに自信がない」「CSSが長くなって管理が大変」といった悩みも、これらのライブラリを使えば解決できます。
気になったライブラリを1つ選んで、実際に使ってみると想像以上に簡単に、おしゃれな画面が完成するはずです。
baserCMSやWebサイト構築のご相談など
お気軽にお問い合わせください
