いきなりですが、小さい頃から授業中にUIデザインをするような子供でした。紙とペンさえあれば、UIデザインは出来ました。
当時は、HSPというプログラミング言語でプログラミングをしていたため、ボタンUIはbuttonという関数で、テキストエリアはinputという関数でした。
関数でそのままUIデザインができてしまう世界に初めから突入していたため、これがボタンでこれがテキストエリアでと紙状に配置して、家に帰ってからコードに書き起こします。
しかし結局はただのWindowsの灰色のボタンだったのでまだUIデザインと言えるようなものではなかったです。
もちろん考えたのはオリジナルのボタンを作りたいと思うようになったこと。CSSのような便利なものはなく、ゼロからボタンを作りしか方法がなかったのでマウスのxy座標を取得して当たり判定ロジックを作りなんとかボタンを作り、オリジナルのボタンを作りました。
当時はグラデーションを多用するようなデザインが多かったですね。しかも全部ボタン。ボタンに命をかけていました。
ここまでやっても、ただボタンが大量に並んでいるだけであまりUIデザインとは呼べませんでした。
そこから数年が経ち、あるプロジェクトでフロントエンドのコードを書くようになり、そこからHTMLやCSS、そしてjQueryによる動的なUIの書き換えを行うようになり、よりシステム開発に近いフロントエンドの開発を行うようになり、UIデザインを意識するようになりました！
それでも、まだ個人的に納得のいくUIデザインというものにはたどり着けませんでした。何をどうしたらUIデザインができるのだろうか、フロントエンドエンジニアはただワイヤーやモックアップをコードに起こすだけなのか、機能的なデザインや、UI/UXなど、まだ個人的に納得のいくレベルにたどり着けなかった。
Sketchを初めて触った日
SketchというUIデザイン様のアプリが登場し、PhotoShopより楽だくらいの理由で触り始めました。そこでまず驚いた機能が、今は「components」と呼ばれている「Symbol」という機能でした。よく使うボタンなどのデザインをSymbol化すると、そのSymbolから新しいオブジェクトを生成し使うことができる機能で、コピペとは違いSymbol時代を編集すればそのSymbolが使われているオブジェクトのデザインは全て書き変わるというものでした。
このSymbol機能を使い、アプリの中でよく使うSymbolをたくさん作り、ボタンやテキストエリアなどを自分好みのデザインにして作り込んでいきました。このSymbolのUIのまとまりを「ui component system」と呼ぶようです。
一度作ったこのセットを用いて一つ一つのアプリのページを作成すると、アプリの全体的な雰囲気が揃い、ちょっとUIデザインをしたように感じてきました。 そういえば、Twitter bootstrapも、UI componentだったなと気づいたりしましたね。
UIデザインが出来るようになった瞬間
UIコンポーネントを使いはじめてしばらくすると、Bootstrap使ってるねというのが一発でバレたり そのアプリやサイトの趣旨とは合っていないような雰囲気に気づくことが多くなりました。
しかしこれは、Bootstrapを使っているからという理由から来ているものではなかったのです。Bootstrapを使っていても、UIがスッキリしていてお洒落なサイトはあったので、そもそもここの境目の何かが違うことに少しずつ気づいてきました。
試行錯誤を重ね何度もUIデザインを重ねてここでようやく「余白の扱い方」に気づきました。気づくのが遅かったですね💦
余白にはルールがあり、といってもルールは自由に決めていいです。15pxにするとか、画像の周りは20pxあけるとか、段落の下は30pxあけるとか、各セクションは15pxあけておくなどです。シンプルナイトでも余白の幅は規則性があります。計算してみると面白いです。同様に、フォントなどの大きさにもルールを作ります。ジャンプ率と呼ばれているものですね。色にもルールを、なぜこの色なのか、なぜ、この余白の幅なのか、すべてに理由をつけて縛ります。意味を持たせます。別に訪問者に意味を語る必要はないんですが、そうやって特に余白という無色透明なコンテンツこそ、ルールや意味をつけてあげることが、UIデザインが出来るようになった瞬間でした。
もっとたくさんのルールや色の組み合わせ、トンマナ、ロゴにあう画像を使うなどデザインとしての手法はもっとたくさんありますが、UIデザインにおいては、UIコンポートと余白の扱いの二つを気をつけることで大きく変わるので、ぜひ試してみてください。
