HTML
CSS
bootstrap
Handlebars
FontAwesome

デザイナーに頼らないエンジニア流UI開発術(スタートアップ編)

最新WEBサービスのUI開発の裏側をご紹介したいと思います(最新スタートアップではありますが最先端ではありません)。

サービス

スカウトミー
https://scoutme.biz

top.jpg

ITエンジニア専門スカウト転職サービスです。
求人票の掲載も人材紹介も一切なく、登録エンジニアは採用企業自らが直接送るスカウトメールをひたすら待ちます。
今は転職を考えていないという人も登録可能ですので、自分の価値を確かめる為にも是非!

開発チーム構成

  • エンジニア:1名
  • デザイナー:1名
  • ディレクター兼デザインアドバイザー:1名

3名となっていますが、ロゴとランディングページx2(ユーザー&採用企業TOP)のデザインカンプ制作以外のUI実作業は全てエンジニアが行いました。品質は必要最低限とし、最も速くリリースすることが出来る最小なチーム構成にしました。

画像職人 + HTMLコーダーの時代

最近、WEB開発を始めた人には信じられないかもしれませんが、10年ぐらい前までは例えばsubmitボタンをデザイナーが画像制作し、エンジニアがボタンをコーディングして埋め込むといった開発手法がとられていました。

この分業がどれだけのオーバーヘッドを抱えていたかと言うと

button.jpg

(1) デザイナーがボタンを制作。エンジニアが埋め込みコーディング。
(2) デザイナーがボタンに影を追加。エンジニアがCSSスプライト座標を更新。
(3) デザイナーがボタンを拡大。エンジニアがCSSスプライト座標を更新(苦笑いしながら)。
(4) 社内レビューで【送信する】を【登録する】に変更する事に。デザイナーがボタンを修正。エンジニアがalt属性を変更(顔を引きつらせながら)。

CSSスプライトは必須ではないですし極端な例かもしれませんが、何はともあれ無駄な報連相が増えますし、作業漏れのリスクも増えますので、開発効率は必然的に落ちてしまいます。

HTML5 + CSS3 + Bootstrap

そこで登場するのがHTML5 + CSS3 + Bootstrapです。ボタンも角丸もメニュータブもCSSで完結。
UIを「デザイナー + エンジニア」の複数人で開発する必然性から開放されました。
レガシーブラウザを切り捨てるという意味で、スマートフォンの普及が後押しした側面もあったかと思います。

WEBフォント

更にボタンにアイコンを加えたくなってもデザイナーに頼る必要はありません。
WEBフォントを使えば以下のように書くだけで実現できます。

sample.html
<span class="fa fa-envelope"></span>

button2.jpg

例えば『スカウトミー』TOPページの以下画面は画像を一つも使っていません。エンジニアが単独でFont Awesomeを眺めながらさらっとコーディングして終わらすことが出来ます。WEBフォントは、非効率極まりなかったWEB開発の現場に、革命を起こしたと言っても過言ではないと思っています。

font.jpg

使用画像は3つのみ

結局、『スカウトミー』では

  • ロゴ
  • イメージ写真
  • 参画企業ロゴ

の3つしか画像を使っていません。アイコン職人がいた一昔前からは考えられない状況です。

3.jpg

ローディング

読み込み中に表示するローディング画像も作る必要はありません。Font Awesomeを使えばHTMLだけで完結します。

loading.jpg

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Sass

もはやスタンダードになった感がありますが、特別な使い方はしていません。
以下、生CSSとは大きく異なる点です。

  • 色などの定義を設定ファイルで変数管理
  • 共通CSSのimport

レイアウト

一からデザインすることなど考えずにヘッダ/フッダ/背景ライトグレーに白パネルの鉄板レイアウトにしました。間違ってもエンジニアが凝ったデザインをしようなどと思ってはいけません。

form.jpg

レスポンシブ

開発効率が最も良い1カラムレイアウトを採用しています。PC/スマホ/タブレットで同一レイアウトとなります。

静的ファイルのキャッシュ対策

純粋なデザインの話ではありませんが。こちらは既にQiitaに投稿してありますのでそちらをご参照下さい。

PHPでCSSや画像の静的ファイルをキャッシュさせない正しい方法(Rails風味)

最後に

開発効率を最優先した為にあくまで“実作業”はエンジニア一人で行いましたが、リリースするまでには何度もデザイナーにレビュー/アドバイスして貰いながら修正していきました。また、10名の社外ボランティアの方にテスターとして参加していただき、数々の有用なアドバイスを頂きました。

UI/UX開発は非常に奥が深いものです。例えエンジニア単独開発であったとしてもアドバイザーは必ず付けるべきだと思います。

それでは、良いプログラミング・ライフを!