化猫の生態Loading▲ホーム技術備忘録デザインいいUIを作るために実践している3つのことMENU2020/01/10いいUIを作るために実践している3つのことWEBやゲームの画面を作る場合にいつも僕が気を付けているのは、必要な情報がきちんと受け手に伝わるか?という部分です。相手に伝えたいことを正確に伝えるにはそれなりのテクニックが必要になるので、デザインをするうえでいつも実践している3つのルールをご紹介します。1優先順位を考えるデザイン初心者が作る画面構成は、とりあえず必要な材料を画面に並べるだけで、ユーザーに伝えたい要素の絞り込みがうまくできていません。僕がまず最初に考えるのは、情報の優先順位です。制作側がユーザーに一番見てもらいたいポイントはどこなのかを仕様書の中かから読み取って、順位づけしていきます。企画立案者に聞くと言う手もありますが、たいていの場合「全部見せたい」とか言うのであてになりません。企画者本人が情報の優先度に気づいていないことが多いためです。ユーザーが欲しいと思う情報順に並べ替えてみました。商品写真のあたりをみただけで価格や送料などみんながまず気にする項目が視界に入ります。ネット検索で1ページ目に欲しい情報があればそこで完結してしまうようにWEBやゲームの画面構成においても下にいくほど情報が意識される割合いは下がっていきます。ユーザーの求める情報を重要度の高いものの近くに配置したり、視界の流れのルートに組み込むだけで情報が伝わり易い画面に変わります。2情報を分割してメリハリをつけるたくさんの情報をいっぺんに伝えようとした場合、ただ文章をひたすら書き連ねるだけだと読むのに疲れます。文章やデザインにメリハリをつけて視線を誘導するためのテンポを作ると情報が伝わり易くなります。文章を項目ごとに分割してブロック化するだけで一度に処理する情報量が限定されるのでグッと読み易くなります。所々に絵や写真をおいて視覚的に情報を補ったり、BOXに枠線や背景色を入れてみたりと、情報ごとに記事を分割してメリハリを持たせるだけで、テンポが生まれます。目立たせたい部分を徹底的に掘り下げ、目を引きやすい構成に作り替えるとLPのような印象になります。本当に文章をじっくり読ませたいような記事の場合は下手にデザインを入れず、ブログのようにタイトルと重要事項を目立たせるくらいのシンプルな作りの方が読みやすい場合もあります。新聞記事の見出しをそのまま鵜呑みにしてしまうように、デザインで視線の流れを生み出すと人はそこしか見なくなります。「GoogleAdsenceが終了する」と誤解されそうな見出しですが、Googleが提供するWEBサイト作成サービス上での更新が終了するというだけの話。関連項目はまとめる関連性の高い情報は物理的に近づけたり、ひとまとめのブロックにするだけで理解し易くなります。元レイアウトステージ番号→ボス情報→進捗ゲージ→コントロールパネル→インゲーム修正後ステージ番号→ボス情報→インゲーム→進捗ゲージ→コントロールパネル[ステージ情報+ボス情報]ステージに関する情報をひとまとめにすることで情報に関連性が生まれます。[マップ+ゲージ→コントロールパネル]マップと進捗ゲージを近づけて相関関係があるように見せます。コントロールパネルを組み合わせることでマップとの関連性が生まれます。3コンテンツに適したデザインを選択するユーザーに対してどうアプローチするかによっても画面の構成の仕方は大きく変わります。広告の場合は、商品やサービスの魅力を伝えるのが目的なので商品の写真や紹介記事に焦点を当てて画面を構成していきます。<ニュースやブログのように文章がメインの媒体の場合は、画像やデザインを組み込むとそこに意識が向いてしまうため文章の内容が入ってこなくなります。画像等のグラフィックは文章を補足するためのアクセントとして挿入し、見出しや段落でテンポを作って文章を読ませることに特化した画面構成を用いています。商品やサービスの魅力を伝えるのか?文章を読ませるのか?ユーザーに対してアピールしたいポイントが異なると見せ方も変わってきます。サイトやサービスの特性に応じて画面構成を変えるというのはデザインの基本です。ここがヘンだよSG業界6デザイナーから見るデキるプランナーとダメなプランナーのたった一つの違いやっぱりみんな好きだよね。>>Amazon.co.jp123RFお名前.comG@ckUIUXデザイナー、テクニカルアーティスト、イラストレーター、漫画家。アパレルブランド『OKickrrmuy』を運営。