「見栄え」に対する期待ハードルは上昇傾向

見栄えを整るフレームワーク BootStrap のおかげで，フロントエンドの専門エンジニアがいないチームでも，かなり「それっぽい」見栄えのページを作れるようになりましたね。

見栄えがよければ，システム引き渡しのタイミングでも，発注サイドの心証がグーンとよくなり，スムーズにプロジェクトを完了させられる効果もあって，軽視できないものです。

一方，なんでもかんでも BootStrap が使われるようになってきているのも事実で，エンドユーザは，見栄えの良いページを当たり前のものとして考える潮流にあるのも事実。

そう遠くない将来，たんに見栄えが良いことでは，大きな「アピールポイント」にならないことを視野に入れて，より優れた UI を日々考案するのも，エンジニアに向けられた課題と言えます。

ワンポイントの工夫で印象が大きく変わる事例

BootStrap には，九つの見栄えが用意されています（そのうち一つは，<a href=""></a>のリンクみたいな外見をした，特殊な存在感のボタンであることは，意外と知られていないので，覚えておきましょう）。

そして，あまりにも多くの色を使いすぎると，エンドユーザにとって混乱の原因となるため，実際のシステム開発現場では，せいぜい二色，三色くらいの利用にとどめるのが，現実的なところではないでしょうか？

そんな中でも，ちょっとした工夫で，BootStrap に「＋α」を加えるアイデアをご紹介します。

美しいフォントがそろった Font Awesome との合わせ技です。

単調になりがちな BootStrap のボタンでも，中に Font Awesome を一つ設置することで，いっきにイキイキとしませんか？

<buttonclass="btn btn-secondary"><span>登録</span><iclass="fas fa-external-link-alt ml-1"></i></button>

たとえば「新しいタブ」として開く画面のボタンがあれば，以下の２つあるボタンのうち，直感的にふさわしい UI はどちらだと思われますか？

ボタンを押す前から，エンドユーザに，押下結果を「予告」するデザインは，たった一行の Font Awesome タグの挿入で，実現できます。

手間のかからない作業で，印象は，大きく変わりました。

先述した９種類のデザイン以外でも，input-groupクラスでは，カーソールをマウスオーバーすると，ボタンの色が白・黒にトグルできるタイプのボタンを利用可能です。

二つのボタンが隣接しているケースなど，押し間違えの発生しやすいケースでは，押下前に，マウスの重なっているボタンが明確な（白・黒という，強烈なコントラストによって）ビジュアル効果として確認できる UI は，利用者に安心感を与えられると思います。

パーツが共通化され，コード製作者の「こだわり」が表にあらわれづらい BootStrap　だからこそ，ワンポイント，アクセントを加えるだけで，デザインが引き締まったものになったり，エンドユーザにとって，理解しやすいものへと，昇華させることができる事例をご紹介しました。

ブラウザの向こうで，システムを操作しているユーザの顔を思い浮かべながら，分かりやすいデザインを考える時間って，エンジニアとしても，すごく楽しいひとときですよね。

今後も，いろんなアイデアがシェアできればと思います。