近接・整列・反復・コントラスト。デザインの基本ルールを、さわって動かして覚えよう。「これでいい!」と思ったら採点ボタンを押してね。
カフェのメニューがバラバラで、どの値段がどれのことか分からない…!メニュー名や値段をドラッグして、ひと目で組み合わせが分かるように並べ直そう。
関係のある情報は近くに、関係のないものは離す。線や枠がなくても、余白の広さだけで「これとこれはセット」が伝わります。
チラシの文字がガタガタ。文字を左右にドラッグして、きれいにそろえよう。近づくとピンクのガイド線でピタッと吸いつくよ。どこにそろえるかも考えてみてね。
要素の端や中心を、見えない1本の線にそろえる。それだけで情報が整理されて、きちんとした印象になります。文章が多いなら左揃えが読みやすく、短い言葉のチラシなら中央揃えも使えます。
サービス紹介のカードが、見出しもボタンも、カードの中の並び方もバラバラ…。タップして切りかえ、統一感のあるページにしよう。
見出しと「くわしく」ボタンはタップで見た目が、カードの下の「並び方」でレイアウトが変わるよ。
同じ役割のものは、同じ見た目・同じ並び方でくり返す。見出しやボタンの見た目だけでなく、レイアウトもくり返すと、読む人は1枚目で読み方を覚えて、2枚目からは迷わずに読めます。
ポスターのタイトルが本文にうもれて、どこから読めばいいか分からない…。大きさ・太さ・濃さを調整して、タイトルを主役にしよう。やりすぎにも注意。
秋のイラスト展
10.3 SAT – 10.13 MON
ギャラリー花みずき 入場無料
差をつけるなら、はっきりと。ちょっとだけの差は「ミス」に見えがち。とはいえ、大きさだけで差をつける必要はありません。大きさ・太さ・色の濃さを組み合わせれば、ほどよい大きさでも主役がはっきりします。
マルシェのチラシを、四原則ぜんぶ使って仕上げよう。ドラッグで移動、ラベル(DATE・PLACE・ENTRY)はタップで見た目が変わるよ。
4つの原則は、組み合わせて使うもの。まとめて(近接)、そろえて(整列)、くり返して(反復)、メリハリをつける(対比)。この順番で見直すと、どんなデザインも整えやすくなります。
採点について
点数は、このアプリが決めたルールで計算した「ひとつの目安」です。100点のデザインが唯一の正解というわけではありません。デザインの正解は、目的や見る人によって変わります。点数を手がかりに「なぜこの配置のほうが伝わるのか」を考えてみてください。
5つのステージ、ぜんぶ合格! 次は100点をねらってみよう。