研究室内でポートフォリオ勉強会をした話④
はじめまして！千葉工業大学知能メディア工学科4年のかいえだです。
今回も同様に、PF勉強会を記録として残しておこうと思います。
※このnoteでは主にUI/UX作品を載せる場合のポートフォリオを勉強します
第1回から第3回までのPF勉強会は以下から読むことができますので、是非！
PFの情報設計
PFの情報設計②（複数作品掲載するとき）
PFの色使い
上記を踏まえて今回は「余白」のことについてお話ししました🔳
マージンを取る
マージンとはページ周囲の余白、要素と要素の間の空白のことを指します。
上記はIllustratorで制作したPFの一部になります。（大きさはA3）
緑で引いてある線（下写真のピンク枠内）よりも外にはオブジェクトを置かないようにすると、余白が十分に取れてゆとりのある配置になります。
例外として、背景として配置している写真や装飾などは配置しても問題ありません。
余談ですが、、
コロナ前のデザイナー就活では対面がメインだったようで、PFを郵送したりファイルに入れて直接お見せすることがあったようです。
オンラインでも対面でも対応できるように
A3サイズで制作横に配置
↓
中央縦半分に定規でラインを引く
↓
左右でA4サイズが縦2枚あると想定してマージン取る
をしておくと柔軟さが増して良いと思います。
スペースの種類と関係性
先程マージンについてお話ししましたが、余白と一言に言えど多くの種類が存在します。
マージン：ページ周囲の余白、要素と要素の間の空白
カラムスペース：カラム（要素の列）同士の空白
ラインスペース：行と行の空白
ワードスペース：単語と単語の空白
レタースペース：単語の中の文字同士の空白
これらすべて大事！と一言で言ってしまえばそこまでですが、
個人的重要余白ランキングナンバーワンはレタースペースだと思っています、、
FigmaでPFを作るときはそこまで注意する必要はないのですがIllustratorで作るときに気をつけたほうが良いです。
上写真はIllustratorで文字組みをしたもの。
写真内に書いてあるようにローマ字と数字、日本語が混同すると無駄にスペースが生じて字詰めをする必要があるんです、、字詰めをすることをカーニングと言います。
左下の数値を下げることで字詰めができる
Figmaではカッコ（）を使うときに無駄にスペースが生じる（他にもあるかも）ので、気をつけましょう。
青枠内の数値を下げることで字詰めができる
視線誘導
PFを読ませる際に役立つのが「視線誘導」です。
視線誘導：意図的な配置をすることで読み手に情報を認知させて視線移動をサポートすること
視線誘導の主なパターンとしては、Z型、F型、N型の3つになります。
それぞれの特徴として
Z型：そのページの情報の強度が均一のとき、左から右に流れるように読む、横組みの時に主に使われる
F型：リピーターのユーザーが見たことあるデザインをもう一度見て見落とした内容を再度確認するとき、Webページを見るとき
N型：日本語で書かれた新聞や雑誌
F型はよくAmazonとか記事サイトとか閲覧するときに見かける視線誘導ですね。
個人的に、困ったときは左から右に配置するのがベターかなと思ってます。
根拠づけになってないかもしれない根拠として、YouTubeのスクロールバーも、スーファミのマリオも、この文章も、左→右に移動すると過去→未来に時間軸が動くため、少なくとも日本では左から右にオブジェクトを配置していれば読み手は困りにくいかも？
視覚的な中心を探そう
上の写真は、横と高さが100pxで作られたオブジェクトが3種類並んでいる状態で、マージンは50px取ってあり数字的には均一の広さです。
ですが三角形が右に寄って見えます、、これを三角形分割錯視と言うそうです。
あくまで目測になりますが、数字的な中心を盲信せず視覚的な中心を探してオブジェクトを配置すると良いでしょう。
今回の「余白」のお話しは以上になります！
最後まで読んでいただきありがとうございます🙇♂️
以下に今回使用した資料があるのでご自由に閲覧ください。
次回は「フォント」についてお話しする予定です！！
今回の参考記事はこちら↓
この記事が気に入ったらサポートをしてみませんか？