独立系プログラマーのノウハウ

【プログラミング】画面デザインはテンプレートを活用すればOK!

【プログラミング】画面デザインはテンプレートを活用すればOK!

こんにちは、徳田です。

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

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

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

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

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

この記事で分かること


・デザイン知識のないプログラマーでもUIをカッコよくする方法。

【目次】
  • ・結論から言うと
    ・UIテンプレートとは?
    ・実例
    ・現場の知識


結論から言うと


BootstrapのUIテンプレートを使おう。

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

UIテンプレートとは?


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


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

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

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

などといった細かな処理を全て書いて行かなければなりません。


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


このようにclassを指定するだけで


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


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

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


おすすめのテンプレートサイト「WrapBootstrap」




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

このサイトは、管理機能のUIも豊富なので、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化する。
そして、それにプログラマーが機能を付けていく、という流れですが、UIテンプレートを使えば、プログラマー1人でもプロレベルのデザインを組み込むことが出来ます。(ただし、少なからずカスタマイズは必要になるので、HTML/CSSの知識は必要です)

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

この記事を読んだ人はこんな記事も読んでいます。