フルスタックエンジニアのノウハウ
2020.01.11    2020.03.20

画面デザインはBootstrapテンプレートを使うのがおすすめ!

画面デザインはBootstrapテンプレートを使うのがおすすめ!

こんにちは、徳田 啓です。
Webプログラマー歴20年、【フルスタックエンジニア マスター講座】を運営しています。(生徒数1,800名突破)

今回は少し経験者向けの内容になります。

Webサービスを作っていると、画面デザイン(UI)に悩むことも多いですよね。

プログラミングスキルとデザインスキルは別物なので、通常制作会社などではプログラマーとデザイナーは分業体制になっており、UIは「デザイナー」、機能は「プログラマー」がそれぞれ担当して作り、後から合体させるといった流れになっています。

しかし、フリーランスで活動していたり、1人でWebサービスを作っているプログラマーの場合はUIデザインが疎かになっていることも多いです。

UIデザインをデザイナーに外注するという手もありますが、今回はもっと「安価」で「手軽」にUIをカッコよくするためのノウハウを紹介します。

  • この記事で分かること
  • ・デザイン知識のないプログラマーでもUIをカッコよくする方法。
  • ・Bootstrapとは何か?
  • ・BootstrapのUIテンプレートを活用する方法。


この記事の動画版はこちら

チャンネル登録お願いします!



結論から言うと


  • BootstrapのUIテンプレートを活用しよう!

BootstrapのUIテンプレートを活用すれば、デザインの知識が無いプログラマーでも、デザイナーレベルのUIを実現出来ます。


Bootstrapとは?


まず、BootstrapとはTwitter社がプログラマー向けに開発した「UIフレームワーク」です。


UIフレームワークとは、UIの細かな処理をあらかじめ提供してくれるキットのようなものです。

例えば「カッコいいボタン」を作りたいといった場合、これをゼロから作るには

  • ・ボタンの背景色を設定して
  • ・ボタン上のテキストの色を設定して
  • ・周りを角丸にして
  • ・マウスが上に乗ったときに色を少し薄くして
  • ・ボタンが押された時に色を赤くして

このような細かな処理を全て書いていかなければなりません。

しかし、UIフレームワークを使うと、簡単な指示だけでカッコいいボタンが実現出来ます。

例えば、このようにclassを指定するだけで


こんなボタンが作れます。


ボタン以外にも、画面全体のレイアウトヘッダーフッターメニュー各種入力パーツといったものが簡単な記述でカッコよくなります。


Bootstrapテンプレートでさらに洗練されたUIを


Bootstrapを使うだけでもそこそこ良いUIデザインになるのですが、実は世界中のWebデザイナーがこのBootstrapを使ってさらにカッコいいテンプレートを提供しているサイトがあります。

サイトはいくつかありますが、僕がいつも愛用しているのはこちらです。





これまでも、ブログやホームページのテンプレートを配布しているサイトは多くありましたが、これはその「Webサービス版」で、開発者向けにWebサービスのテンプレートを配布しています。(サイトやランディングページなどに使えるテンプレートも掲載されています)

このサイトは、管理機能のテンプレートも豊富なのが特徴です。

  • テンプレートは有料ですが、単一のサービスで使うだけであれば数千円~と、デザイナーに外注するよりも激安でUIを手に入れることが出来ます。


テンプレートの導入手順


まずは、自分のWebサービスに合ったテンプレートを探しましょう。

画面左上のプルダウンで、カテゴリーを絞り込むことができます。



各テンプレートの中には複数の画面が同梱されています。

同梱される画面数は多いに越したことはありませんが、「Landing Page」カテゴリーのテンプレートは、1画面のみしか含まれていないことが多いので注意しましょう。

  • 逆に「Admin Template」カテゴリーは、同梱画面がかなり多いのでおすすめです。


良さそうなデザインがあったら「Live Preview」ボタンを押すと、そのテンプレートが用意している様々な画面を実際に見ることが出来ます。


テンプレートが決まったら購入しましょう(決済方法はクレジットカードかPayPalが使用可能)

購入後、テンプレートをZipファイルでダウンロードすることが出来るので、それを自分のWebサービスプロジェクトに設置します。

テンプレートには、各画面のHTMLファイルもサンプルとして同梱されていますので、それらを参考にしながら自分のHTMLに組み込んでいく、といった流れです。


テンプレートでUIはこんなに変わる


同じ機能の画面でも、テンプレートを適用する/しないで見栄えはこんなに変わってきます。


①何も適用していない場合


②Bootstrapのみを適用した場合




③デザイナーテンプレートを適用した場合



  • UIは、ユーザーが直接見て触る部分なので、しっかりこだわることでWebサービスの完成度や使用感は大きく変わってくるんです。


テンプレートを選ぶ際の「コツ」


最後に、テンプレートを選ぶ際の「コツ」を書いておきます。

まず、自分のWebサービスに「どんなUIパーツがあるのか」を洗い出しましょう。(例えば、商品一覧、ショッピングカート、ログイン、ユーザー登録など、必要なUIパーツを全て洗い出す)

次に、テンプレートを選びながら「このパーツにはこれが使えそうだな」といった感じで、画面単位というよりは「パーツ単位」でチェックしていきます。全く同じ構成の画面が無くても、複数の画面から使えそうなパーツを組み合わせて希望の画面が構築出来ればOKです。

  • 現場のコツ
  • パーツ選びに関しては、出来るだけカスタマイズしないで「そのまま自分の画面に使えるもの」を選ぶことがコツです。

HTML/CSSの知識があれば、パーツをカスタマイズすることも出来るのですが、デザイナーテンプレートは複雑な作りになっており、余計な工数が掛かってしまうので、極力カスタマイズなしで使えるかどうかでテンプレートを選んでおくと、後の工程に差が出ます。


まとめ


通常は、デザイナーが「UIデザイン」を作り、それをHTMLコーダーが「HTML化」する。そして、プログラマーが「機能」を付けていくという流れですが、Bootstrapテンプレートを使えば、プログラマー1人でもプロレベルのデザインを組み込むことが出来ます。

※ただし、少なからずカスタマイズは必要になるので「HTML/CSSの知識」は必要になります。

Bootstrapテンプレートを活用し、ユーザーにとって使いやすく、洗練されたUIを作りましょう!


おすすめ記事
無料メルマガ配信中