ダウンロード前にファイルの情報を伝える：資料名と形式を添えよう
「資料はこちら」だけでは、開く内容やファイル形式を判断しづらくなります。架空の見学会の配布資料を使い、リンクに含める情報と差し替え時の確認手順を整理します。
#デザイン #DESIGN
CATEGORY / デザイン
デザインの記事一覧
デザインについて学べるWeb制作スクール「0→1」の記事一覧。実践的な制作方法やポイントを分かりやすく解説します。
一覧が空のときの案内を書く：未登録と検索0件を分けて伝える
一覧が空でも、初めて利用する人と検索条件を絞りすぎた人では必要な案内が違います。架空の読書記録を題材に、空になった理由と次の操作を一組にし、文言と行き先を確認する練習を紹介します。
#文言設計 #一覧表示
文字色と背景色を確認する：淡い案内文を数値で見直す
薄いグレーの説明文が読みにくいとき、文字を大きくする前に配色を確かめます。架空の読書室の案内を題材に、実際の文字色と背景色を一組として調べ、修正後も表示を点検する練習です。
#コントラスト #配色
写真の主役が切れたら、表示枠と切り抜き位置を見直そう
横長では見える作品が、縦長のカードで切れてしまう。架空の器の展示案内を題材に、写真全体を見せる場合と枠を埋める場合を分け、object-positionで残す側を調整する手順を紹介します。
#写真 #CSS
文字サイズがばらばらな案内を、三つの役割で整理しよう
大きな文字を増やしたのに、何から読めばよいか分からない。架空の朗読会の案内を使い、ページ名・節の見出し・本文を三段階で組み、長い文でも読めるか比べる練習です。
#文字サイズ #タイポグラフィ
「詳しくはこちら」を、行き先が分かるリンク文言に直そう
同じ「こちら」が並び、どれを押せばよいか分からない案内を見直します。架空の自転車修理店を例に、移動先の内容と次の行動を照らし合わせ、短く具体的なリンク文言を作ります。
#リンク文言 #UIデザイン
ページごとに違うボタンを、役割からそろえる方法
同じ予約への入口なのに、ページごとに色や形が違う。架空の貸しスタジオサイトを例に、操作の役割を棚卸しし、共通の見た目と例外を短いルールにまとめます。
#UIデザイン #ボタン #一貫性
ワイヤーフレームで迷ったら、情報の順番を2案で比べよう
色を付ける前に、読者の疑問に沿って情報の順番を決めます。架空の陶芸体験ページを題材に、配置案を2つ作り、選んだ理由を説明する練習です。
#ワイヤーフレーム #情報の優先順位
デザインに迷ったら、まず余白をそろえてみる
文字の大きさや装飾を増やす前に、情報のまとまりを余白で伝える。見出し・本文・カードの間隔を考える練習です。
#余白 #情報設計
TRY A LESSON
読んだら、
少し作ってみよう。
課題とレビューで学ぶ、
15本の無料レッスン。