HTMLやCSSを理解し、いざサイト制作を始めようと思っても初めてだと難しいものです。しかしUIフレームワークを使うと、ボタン１つのデザインから簡単に見た目を整えることができます。今回はUIフレームワークについて記事を書いていきます。
目次
UIフレームワークとは
UIフレームワークと聞いても想像が難しいと思います。UIフレームワークを使用することによって、Webアプリ開発はもちろん、Webサイトにも導入することができます。UIフレームワークについて１つずつ繙いていきます。
UIとは
UIはユーザーインターフェースの略称です。ユーザーインターフェースはユーザーとコンピュータをつなぐ役割を持っています。例えば、Web上に表示されているボタンが挙げられます。ボタン化され、CSSで装飾をつけている為、ユーザーはクリックをすると対象のページへ飛ぶことができると視覚的に理解することができます。UIと似た言葉でUXがあります。UXはユーザーエクスペリエンスの略称で、ユーザーがサービスで得た体験のことを指します。似ている言葉ですので、UIとUXが混ざらない様に気をつけましょう。
フレームワークとは
フレームワークは枠組みや骨組みのことです。今回の記事に対してのフレームワークは、開発時の構築の元になるものを指します。元があるので知識が少なくてもある程度の機能を実装することが可能で、一から作成するより作業を効率よく進めることができます。しかしデメリットも存在する為、使い分けが必要となります。
つまりUIフレームワークとは、枠組みが用意されているためユーザーインターフェース部分の知識が少なくても構築することができます。プログラムのことが分かっても、デザインの苦手なエンジニアの方もいらっしゃるかと思います。UIフレームワークで用意されたコンポーネントを使用し、コードを追加するだけでCSSを使わなくても簡単に整ったデザインを実装することができます。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
UIフレームワークの紹介
UIフレームワークの自作はもちろん可能ですが、初めての場合は難しいと思います。デザインが苦手な方でもCSSを使わずVue.jsなどを使ったUIフレームワークをご紹介いたします。
Vuetify
https://vuetifyjs.com/ja/
Vue.jsを元に導入できるUIフレームワークです。サイトから「UIComponents」をクリックすると、コンポーネントの確認をすることができます。コンポーネントの数の多さはもちろん、Googleが提唱するマテリアルデザインに対応しています。
Bootstrap
https://getbootstrap.com
Twitter社が開発したフレームワークです。Vue.js向けのBootstrapVueもあります。シンプルなデザインで、レスポンシブに対応しています。Bootstrapは知名度も高く、参考になるサイトも沢山あるので検索してみてください。
Semantic UI
https://semantic-ui.com
jQueryを使用した、フレームワークです。コンポーネント数が多く、シンプルでオシャレなデザインです。
フレームワークを導入してみよう
先ほどご紹介したフレームワークのSemantic UIを使って導入してみましょう。
Semantic UIをダウンロードする
Semantic UI からGetStartedを押し、ダウンロードします。簡単に実装したい場合はCDNに対応しているのでコードを追加します。今回はCDNから追加しました。
クラス名を追加する
Semantic UIはクラス名が決まっているので、class=”ui 実装したいコンポーネント”で表示させることができます。
実装できるコンポーネントは公式サイトに書かれています。
例えばボタンだと下記のように記入するだけで、CSSを使用しなくてもボタンを作成することができます。
<button class=”ui red basic button”>赤のボタンです</button>
<button class=”ui orange inverted button”>背景がオレンジになるボタンです</button>
<button class=”ui yellow inverted basic button”>黄色の文字と枠が出るボタンです</button>
ボタンについてはこちらのページに書かれています。
Semantic UI Button
チェックボックスだと下記を入れるだけで実装が可能です。
<div class=”ui checkbox”>
<input type=”checkbox” name=”check”>
<label>チェックボックスです</label>
</div>
チェックボックスについてはこちらのページに書かれています。
Semantic UI Checkbox
アイコンも実装できます。
<i class=”angle double left icon”></i>
<i class=”angle double right icon”></i>
アイコンについてはこちらのページに書かれています。
Semantic UI Icon
その他にも様々なコンポーネントがあるので、公式サイトを確認してみてください。
UIフレームワークを使って効率よく作業を進めよう
ボタンのデザインから、サイトのレイアウトまでUIフレームを使うことによって簡単に実装することができます。webのフレームワークについてはこちらの記事を参考にしてください。
WEBフレームワークの種類や選び方
フレームワークを上手く利用し、作業を効率よく進めていきましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
