Instagramホワイトスペース【余白は怖くない!】TweetPocketこんにちは!今回のテーマは「ホワイトスペース【余白は怖くない!】」です。ホワイトスペースとは何なのか、どのような時に使うのかなど、アプリ開発の観点から説明していきたいと思います。ディレクターや企画職などノンデザイナーの方、これからデザインを勉強する方向けの内容になっています。ホワイトスペースとはホワイトスペースとは、簡単に言うと「余白」です。アプリで言うと、画面の両端や上下に設けられている空間、要素と要素の間など、何もない空間を指します。画像と画像の間だけでなく、字間と行間などの余白もホワイトスペースとなります。「余白」があればそこはホワイトスペースとなります。ホワイトスペースが必要なのかホワイトスペースは視覚的な表現をする上で必ず必要な物です。必要なのかと言うと、ホワイトスペースがあることで「見やすく」「わかりやすく」「使いやすく」なるからです。1番大事なことは、ホワイトスペースを“余った場所”ではなく、重要なレイアウトの一部として捉えることです。余白があると柄や要素を入れて隙間を埋めたくなったり、余白がありすぎると手抜きに見えるのでは...と不安に思う余白恐怖症の人もいるかもしれません。余白がないと視認性が悪くなったり、そのページに設定した意味が薄れてしまったり、目的を果たせなくなってしまうなどデメリットが出てきてしまいます。見やすさデザイン制作はもちろん、パワポでの資料作成やテキストだけの表現でも、ホワイトスペースのレイアウトは大切です。画像や文字が詰まっているより、見やすく読みやすくなりますよね。みなさんも日常、自然と行っているのではないでしょうか。アプリ画面で言うと、読んだり押したりする要素がある画面の両端には、必ずホワイトスペースを設けましょう。5%ほどホワイトスペースがあれば十分視認性と押しやすさが保てます。上下のホワイトスペースについては状況にもよる為一概に言えませんが、「目立たせたいものは多めにホワイトスペースを設ける」「優先度や項目ごとにホワイトスペースのルールを統一する」ことに注意するだけで見やすさが変わってくるかと思います。わかりやすさ十分なホワイトペースを設けることで、その中にある要素が強調され、ユーザーが目的を達成しやすくなります。注目して欲しい要素や、優先度の高い要素を強調したい時に効果的です。使いやすさユーザーにとって使いやすいサイトにする為に、ホワイトスペースは必須です。押せる要素があったとして、それが複数並んでいた場合、ホワイトスペースを設けることで押しやすくなります。ユーザーが何か探し物をしていた時に見つけやすくなります。おわりにいかがでしたでしょうか?ホワイトスペースはただの余白ではなく、立派なレイアウトの1つです。今までは何気なくテキストを改行していた、画像を配置していた、という方は、ぜひこれを期にホワイトスペースを意識してみて下さい。今まで以上に良いデザイン、資料作成が出来るかと思います!それではまた!デジマースのコンでした。