ガイドラインを引いてUIを研究しよう

前回の記事でUI/UXの勉強法として、既存サービスの分析を紹介しました。

今日はもう一つの勉強法を紹介します。それがUIにガイドラインを引く方法です。

ガイドラインを引くことで、良いインターフェースデザインのボタンの大きさ、フォントサイズ、余白などを可視化・数値化できます。ノンデザイナーやデザイン経験が浅い方でも、これらの情報を収集・分析することでインターフェースデザインを考える上での基盤となることでしょう。

*使用するもの
・自分が良いと思うアプリやWebページのスクリーンキャプチャ
・Photoshop(もしくはIllustrator)

Photoshopにキャプチャを読み込む

今回は個人的な好みで「株式会社LIG」さんのスマホサイトを分析することにしました。
さっそくガイドラインを引いていきます。

まずは水平方向にガイドラインを引きました。水平方向にガイドラインを引くと垂直方向の余白の大きさに規則性があることがわかります。

さらに、選択ツールを使用してガイドライン間を選択してみましょう。

この状態でウィンドウ→情報パネルを開いて大きさを見てみましょう。

縦方向の大きさは、H(Height)の部分を見ます。342となっています。単位をpxにしているので342pxです。

こうしてガイドライン間を測っていきメモします。

比較がしやすいように、エクセルもしくは、Googleスプレッドシートに記入していくと良いでしょう。
記入する時に、余白はCSSのプロパティでメモしていくと分かりやすいです。

垂直方向はガイドラインを引くとわかりにくくなるので私の場合は、要素ごとに選択ツールで測ってメモをしていきます。

この方法で、ガイドラインを引く→数値をメモするを繰り返していくつかのサイトやアプリのインターフェースデザインのデータを収集すれば比較ができます。

ヘッダーの高さを平均を見てみたり、余白をリズムを見てみたり。h2はh1の何倍の大きさか?などなど。

ブラウザのディベロッパーツールからCSSで余白やフォントサイズの値をメモしていくやり方もいいですが、キャプチャにガイドラインを引くことで全体のバランスが可視化されるので、今まで気付かなかった点に気付くこともあります。

UI/UXを勉強中の方は是非トライしてみてください!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

私のこと好きっちゃなかろうね?
31

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
4つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。