色とタイポグラフィ
文字の大きさ、余白、色の役割。情報に優先順位をつけて、読みやすい画面を組み立てます。
WEB & EXPERIENCE DESIGN
Web・UIデザイナー
伝わる。その先の、使いやすいへ。
美しく見せるだけでなく、迷わず使えること。人の気持ちを想像して、心地よい体験をデザインしよう。
学ぶ内容を見てみる学科・カリキュラムは架空の設定です。学習テーマの例としてご覧ください。
WHAT YOU WILL EXPLORE
「できる」がつながる、
4つの学び。
基礎からひとつずつ。
つくりながら、理解を深める。
使う人を理解する
何をしたいのか、どこで迷うのか。観察と対話から、必要な画面と導線を考えます。
UIとプロトタイプ
画面をつないで、実際の操作を試す。動く試作で、わかりやすさを確かめます。
Webの実装
HTMLとCSSを中心に、幅の違いやキーボード操作にも配慮したWebサイトをつくります。
DESIGNED TO FEEL RIGHT.
いい見た目には、
伝わる理由がある。
見つけやすい見出し。迷わないボタン。
読みたくなる余白。ひとつずつの工夫が、
使う人の心地よさをつくる。
FROM FIRST STEP TO YOUR PROJECT
つくるたびに、次の自分へ。
- 01
観察して、組み立てる
文字・色・余白の役割を知り、伝える順序を設計する。
制作テーマ例情報を整理した1枚の画面
- 02
つないで、試す
画面間の導線をつくり、使う人の視点で検証する。
制作テーマ例お店を探すアプリの試作
- 03
実装して、届ける
PCとスマートフォンで表示・操作を確認する。
制作テーマ例自分の企画によるWebサイト
習熟に合わせて段階を進む、学習構成のイメージです。
A LITTLE HANDS-ON
色を変える。気持ちが変わる。
同じ内容でも、配色によって雰囲気は変わります。文字の読みやすさを保ちながら、伝えたい印象を探してみよう。
COLOR SET
伝えたい雰囲気を選ぶ。
情報の順序は同じ。色の印象を比べてみよう。
mellow.日常に、
日常に、
ひと息の余白を。
好きな場所を見つける、週末の小さなガイド。
WEEKEND JOURNAL穏やかなグリーンを表示中
学びの入り口を表したブラウザ内のミニデモです。入力や選択は外部へ送信されません。
BEYOND THE CLASSROOM
学んだ力を、どう使う？
社会での関わり方を想像すると、学びたいことが見えてくる。
Webデザイナー
情報とブランドの個性を整理し、Webサイトに表す。
UI・UXデザイナー
使う人の目的から、画面と操作の流れを考える。
フロントエンド開発者
デザインを実装し、さまざまな環境で使えるようにする。
職種は学びの活かし方の例です。就職や資格取得を保証するものではありません。
制作テーマから考える 仕事と学びのつながりを見る