UIデザインを簡単に改善するための9つのヒント

この記事はMarc Andrew氏が2020年2月4日に公開した記事「9 tips to quickly improve your UI Designs.」を、著者の許可のもと日本語に翻訳しています。

美しく、使いやすく、効率的なUIを作るには時間がかかり、途中で何度もデザインを変更しなくてはなりません。そのように試行錯誤を繰り返した末に、クライアント、ユーザー、そして自分自身が本当に満足できる何かが生まれるものです。そう、よく分かります。私自身も何度もそれを経験して今に至るのですから。

ですが、私が長年かけて発見したのは、シンプルな調整をするだけで、作ろうとしているビジュアルを簡単に改善できるということです。

この記事では、簡単に実践できるちょっとしたヒントをまとめました。少しの努力で、今あるデザインを改善できるだけでなく、ひょっとしたら次のプロジェクトを始めるときにも役立つかもしれません。

01. エレメントの輪郭を際立たせる

複数のドロップシャドウを使用するか、特定のエレメントの周囲にさりげない境界線(実際の影よりも濃い色)を引いて、エレメントを少しシャープに、はっきりと際立たせることで、影がくすんだ感じになるのを避けられます。

02. 1つの書体だけを使えばうまくいく。

アートワークの作成で、書体を一つに絞るのはまったく問題ありません。逆にそうすることで、より力強く、一貫性のある作品を生み出すことができます。

「最低でも常に2つの書体を使用する」という考えは捨てましょう。 太さ、サイズ、カラーを組み合わせていくことで、素晴らしい作品を完成させられるはずです。

03. 長いコンテンツを作成しているなら、20ptにしてみよう。

長い形式のコンテンツ(例えばブログの投稿やプロジェクトの概要、あらゆる種類のジャズなど)には、本文に20pt(またはそれより少し上)を採用してみましょう。

もちろん、どの書体を選択するかによりますが、人気の高いの書体の大半は20ptくらいがちょうどよく見えるものです。また、ユーザーにとっては、そのほうがはるかにテキストが読みやすくなります。

18ptを選ぶなんて、もう大昔の話です。

04. ユーザーのオンボーディング体験を改善する。

ユーザーがモバイルアプリのオンボーディング(使い方に慣れるための作業)のシーケンスをいつでもスキップできるようにしましょう。スキップリンクは親指の届く位置に配置します。

2020年になった今、大事なものは、手ではなく指の届くところに置いておきましょう。

05. 影の光源は一つ。

影の光源が常に1方向にあることを確認してください。 単純なことですが、気付かないうちにミスをしていることがたまにあります。

私たちの住む場所には太陽が千個あるわけではないのですから。

06. さりげなくシンプルなオーバーレイを使用して、テキストと画像のコントラストを改善する。

画像の上にテキストを配置できる場所に応じて、テスト済みの完全な画像オーバーレイ、または、もっとさりげない(下から上、または上から下の)グラデーションオーバーレイを選択すれば、2つのエレメント同士のシンプルなコントラストを実現できます。

07. 中央揃えのテキストを適度に使用し、低い位置に配置する。

中央揃えのテキストは、見出し部分と短いテキストの一節にのみ使用してください。 それ以外のどうでもいいやつ(ではなくて、テキスト部分)は、左揃えのままにしておきます。

08. 空白こそあなたの味方。 たっぷり使おう。

空白、それはご存じの通り、昔からあるあのスペース、ネガティブなイメージの白い部分のこと。これを惜しみなく、または適度に、でも上手に使用しましょう。

ほんのわずかな量でも上手に白を取り込めば、デザインに命が宿り、より洗練されて見えるはず。 デザインを改善するための、手っ取り早くて簡単な方法のひとつです。

09. 明るい背景で暗いテキストにする。

明るい背景の場合は、テキストを明るくしすぎないで。 オシャレなデザイナーほど(まだ)やっていそうですが、賢いあなたなら、もっと見やすいインターフェースにしたいはず。

ここまで読んでくれてありがとうございます。よかったらシェアしてください。- マーク・アンドリュー

この記事が参考になったら、シェアをお願いします