LEARNING PATH / 6 STEPS
伝わるデザインの基礎
余白・配色・画像の選び方を、見た目の好みだけで決めないために。画面と印刷の違いも整理しよう。
- ゴール
- 読みやすさと用途を基準に、余白・色・画像形式を選べる。
- 読む前に
- デザインソフトの操作経験は不要です。
- STEP 1
まとまりを余白と揃えで作る
余白って何？情報をまとめる間隔と揃え方の基本
余白は情報のまとまりを伝える手がかり。内側の余白と項目の間隔を動かせる作例で、揃え方の基本から確かめよう。
- STEP 2
文字と背景の読みやすさ
文字が読みにくいときは？配色のコントラストを確認する手順
おしゃれな色でも、文字が読めないと困るよね。WCAGの基準と、実際の画面で確認する順番をまとめたよ。
- STEP 3
画像形式を目的から選ぶ
PNGとJPEGは何が違う？背景を透かしたい画像の保存形式を選ぼう
写真やロゴを保存するときの形式を、背景の透過と画質で整理。背景色を切り替えられる比較作例で違いを確かめよう。
- STEP 4
大きさと切り取りを区別
リサイズとトリミングは何が違う？画像の全体と切り取り範囲を比べよう
画像全体を小さくする操作と、一部を切り取る操作を、同じ風景で比べよう。ページ内の作例で、残るもの・寸法・縦横比の違いを前提から確かめられるよ。
- STEP 5
ロゴと写真の保存形式を選ぶ
ラスターとベクターの違い：ロゴと写真で保存形式を選ぶ
画像は全部同じ扱いでいいのかな？拡大するときと編集するときの違いから、形式を選んでみよう。
- STEP 6
画面と印刷の色を分ける
RGBとCMYKはいつ変換する？Webと印刷の色を分けて考えよう
画面の色と印刷の色、同じ数字なら同じになる？制作の最初に決めたい色の扱いを整理するよ。