文字、色、配置。
伝わる理由を、見てみよう。
見比べる。色を変える。画面を切り替える。
3つの体験から、弊社がデザインで考えていることをご紹介します。
同じ文章や写真でも、文字の強弱、配色、画面への並べ方で伝わり方は変わります。実際に触りながら、その違いを確かめてみてください。
講座の案内と申込表示は学習用の見本です。実際の開催・申込はありません。選択内容の保存・送信も行いません。
どこから読むか、迷わないために。
同じ講座の案内です。文字サイズと余白を変えると、講座名・日時・参加方法の関係はどう見えるでしょう？ 読み取りやすい方を選んでみてください。
弊社が文字と余白で考えること
文字の強弱で順番を。余白でまとまりを。
この案内ではBを選びます。講座名を大きくして入口をつくり、説明は読みやすい大きさに。日時と参加方法は、それぞれの見出しと内容を近づけ、別の話題との間を空けています。
Aは文字の大きさも間隔も揃っているため、重要度やまとまりを文章から読み取る必要があります。Bでは、色や枠を増やさずに情報の関係を示しました。
日常で使うなら
資料の表題を大きくし、説明文と補足に差をつける。関係する文は近づける。全部を太くする、全部の間隔を広げるより、「何から読んでほしいか」を決めることが先です。
参考：デジタル庁の文字設計 ／ Adobeの余白クイズ
同じ写真でも、配色で印象は変わる。
まずは「どんな印象を届けたいか」を決めてみましょう。温かさ、信頼感、活気。下のボタンで、同じ文章・写真・配置でも配色によって雰囲気が変わる様子を比べられます。
伝え方を整える。
仕事が、少し変わる。
伝えたいことを、届くかたちに。
ウェブと日々の資料に使える、デザインの考え方を学びます。
- 学ぶこと
- 文字・色・レイアウト
- 参加方法
- オンライン
- 対象
- 仕事で情報を伝える方
- 背景
- 画面の土台
- 文字
- 内容を読む
- 差し色
- 行動を示す
目指すのは、温かく親しみやすい印象。生成りと茶色を写真の木の色になじませ、自然体で相談しやすい雰囲気をつくります。人柄や素材のぬくもりを伝えたいときの配色例です。 差し色はボタンだけに使っています。
弊社が配色で考えること
届けたい印象を決めてから、色を選ぶ。
「親しみやすく相談できそう」「落ち着いて任せられそう」「熱意が伝わってくる」。まず、見た人にどう感じてほしいかを言葉にします。そのうえで、この見本では温かさを目指す茶系、落ち着きと信頼感を目指す青系、力強さと活気を目指す赤系を組みました。
同じ配色でも、差し色を背景まで広げると、ボタンだけに使う場合とは印象が変わります。色数だけでなく、どこに、どのくらい使うかも設計します。「必ず3色」「必ず決まった比率」という正解があるわけではありません。
雰囲気と、読みやすさを両方見る
好みに合う色でも、文字が背景に埋もれたら調整します。写真や書体との組み合わせで確認し、注意や必須の意味は色だけに任せず、言葉でも示します。ここで挙げた印象は、この見本で目指したものです。同じ色でも、明るさ・鮮やかさ・面積や写真との組み合わせで受け取られ方は変わります。
小さくするだけで、スマホに合う？
同じ内容を、PC・タブレット・スマホで表示します。画像と説明の並び、情報の列数、ボタンの幅が変わるところを見てください。
伝え方を整える。
仕事が、少し変わる。
伝えたいことを、届くかたちに。
ウェブと日々の資料に使える、デザインの考え方を学びます。
- 学ぶこと
- 文字・色・レイアウト
- 参加方法
- オンライン
- 対象
- 仕事で情報を伝える方
画面幅に合わせた見本を表示しています。
弊社がスマホ対応で考えること
縮小するより、読みやすい順番に組み直す。
PCでは説明と画像を横に置き、下の情報も3列で比較できます。タブレットでは説明と画像を縦に、スマホでは下の情報も1列にして、ボタンを広げます。内容を削らず、読み順を保ちながら配置を変えています。
これはこの見本の設計です。実際には端末の名前だけで区切らず、見出しが窮屈になる、ボタンが押しにくいなど、内容に無理が出る幅で調整します。
弊社が公開前に確認すること
小さい画面でも文字が読めるか、横にはみ出さないか、重要な説明がなくなっていないか。画面幅を変え、文字を拡大し、操作の順番も確かめます。
見た目の理由を、
一つずつ説明できるように。
文字と余白で、読む順番を。配色で、伝えたい雰囲気を。画面ごとの配置で、使いやすさを。弊社では、こうした判断を積み重ねてサイトをつくります。
見本と写真について
比較図・文章・見本の画面は独自に制作しています。写真は弊社のオフィスや開催実績を示すものではありません。