この記事の目的
この記事では、
BootStrap初心者がナウイUIを作る軌跡をまとめること
を目的としています。
本題
★Bootstrapとは
レスポンシブルなUIを開発する際によく利用されるフロントエンドのライブラリです。Visual Studio2017でWebアプリケーションを作ったとき、デフォルトで入っています。
※１ 今回の環境では、Bootstrap v3.3.7が利用されていました。
※２ 新しいプロジェクトを作成するときに「空」を選択した場合は入ってきません。
公式サイト↓
getbootstrap.com
日本語リファレンス↓
bootstrap3.cyberlab.info
★Bootstrapを使った画面作成Ver.1
最近のいい感じのWebはレスポンシブ対応なものがおおいです。例えば、Azureのサイトでは、フル画面のとき↓のように見えますが・・・
ブラウザの横幅を狭めていくと、画面上部に出ていたメニューが消えて、代わりにハンバーガーボタンと呼ばれるボタンに集約され、このようにUIが変化します↓
なお、中途半端な幅の場合は、こんな感じになりました↓サインインと無料アカウントリンクが悲しいことに・・・
また、Iphoneで見た場合はこんな見た目になります↓
このように、それぞれの画面サイズでも見やすい、操作しやすいようにフレキシブルに画面のUIが変化するというところがナウイと感じます。が、しかし、これを一から自前で用意するのはとても大変そうです。そこで、BootStrapの力を借りて、上記のAzureのサイトのようなナウイ感じのUIに近づけていこうと考えました。
ということで、最初のUIはASP.NETのテンプレートをベースに作ることにしました。できた画面はこんな感じです↓
テンプレートそのままですね。それでも、カッコいい感じのUIです。値を変えていけばそれっぽいUIのアプリが作れそうだと感じます。そんな感じで満足していたら、さらに違う世界を発見しました。
★Bootstrapを使った画面作成Ver.２
「Bootstrap Template」で調べててみると、なんとOSSで公開されているテンプレートがたくさんありました。これがその世界の一例です( ﾟДﾟ)。
これは、NOW UI KITというFreeのUI Kitです。ASP.NETのテンプレートもきれいですが、こっちはよりきれいだと感じました(/・ω・)/ほかにもいろいろなテンプレートがOSSで展開されているようですが、今回は、頭文字が「N」ということで、ニコニコ動画風アプリを開発しようとしているテーマと一致したため、このNOW UI KITを利用させていただくことにしました。画像はありませんが、このNOW UI KITもレスポンシブデザインに対応しています。最高にナウいです。
公式サイト↓
www.creative-tim.com
まとめ
きれいなUIをあきらめてしまう前に。NOW UI KITするのがよい！
※ほかにも素敵なテンプレートがたくさんあります。
