パソコンのきほん
スマホは得意、でもパソコンは初めて。そんな人がゼロから順番に慣れていくシリーズ。
ツールのきほん
IllustratorやPhotoshopの「授業で習うけど忘れがち」な概念を、さわって体に入れるシリーズ。
パスのきほん
ベジェ曲線とハンドルの仕組み、ペンツールシミュレーター、トレース課題で採点。
もじくみのきほん
字間・行間のプレイグラウンドと、文字をドラッグして採点するツメ組みゲーム。
レイヤーのきほん
重ね順パズル、表示/不透明度/ロックのミッション、クリッピングマスク体験。
色のきほん
光とインクの混色、RGB/CMYK/HEX、「印刷でくすむ」シミュレーター、用途クイズ。
解像度のきほん
ピクセル拡大ビューア、dpiと印刷サイズ、拡大劣化の体験、必要解像度クイズ。
入稿のきほん
トンボ・塗り足しの図解、断裁ズレ体験、アウトライン化、入稿前チェックゲーム。
デザイン知識のきほん
ツールの先にある「考え方」のきほん。座学で忘れがちな知識を体験で定着させるシリーズ。
アナログのきほん
絵画・デッサンなど「手で描く」ための土台。画面の中で原理を体感してから、紙に向かうためのシリーズ。
ポートフォリオのきほん
作品を「伝わる」形にまとめ、就職活動へ踏み出すためのシリーズ。考え方を学び、最後は自分のポートフォリオを作ります。
フォント・書体のきほん
書体を見分け、選べる目を育てるシリーズ。タイポグラフィの実務に直結する「目利き力」を、本物のフォントで鍛えます。
書体の見分けのきほん
明朝・ゴシック・丸ゴ・筆・デザインの5分類、仕分けゲーム、分類・見分け・用途の目利きクイズ。
フォントの組み合わせ
見出し×本文のペアリングをライブプレビュー＋相性メーターで。良い組み合わせを選ぶクイズ。
ウェイトとジャンプ率
太さと大小の差をスライダーで動かし、情報の優先順位と印象の変化を体感。メリハリクイズ。
文字のアナトミー
ベースライン・ステム・カウンター・セリフ(ウロコ)など部位の名前を、図を光らせて覚える。部位クイズ。
欧文書体のきほん
セリフ/サンセリフ/スラブ/スクリプト/ディスプレイの5分類、仕分けゲーム、分類・見分け・用途クイズ。
可読性のきほん
文字サイズ・行長・行間・コントラストをスライダーで調整し、読みやすさメーターで本文組みを体感。
和欧混植のきほん
日本語に混ざる英数字を、書体の骨格合わせ・サイズ・ベースラインでなじませる。なじみ度メーターと2択クイズ。
文字サイズと単位のきほん
級(Q)・pt・px・歯(H)の違いを換算スライダーと「同じ13でも大きさが違う」実寸見比べで体感。単位クイズ。
名作書体ずかん
ギャラモン・ボドニ・フーツラ・ヘルベチカなど名作10書体を誕生ストーリーと実物表示で。見分け・ものしりクイズ。
Webのきほん
Webサイトはどんな仕組みでできているのか。HTML・CSSを実際に書いて動かし、画面ならではのデザインルールまで身につけるシリーズ。
Webページの構造(HTML)
見出し・段落・リスト・画像などのタグを、その場で打ち込んでライブ表示。入れ子構造の可視化とタグクイズ。
見た目を変える(CSS)
同じHTMLにCSSを書き替えて、色・文字・余白・背景が変わる様子をライブ体感。セレクタとプロパティ、CSSクイズ。
ボックスモデルと余白
content・padding・border・margin の4つの箱をスライダーで動かして可視化。内と外の余白の違いを体感。
Webデザインの約束ごと
ピクセルは整数・8pxグリッド・タップ44px・コントラスト。画面のルールをNG/OK見比べとチェックゲームで。
レスポンシブ
画面幅スライダーでレイアウトが2カラム→1カラム、メニュー→ハンバーガーに切り替わる様子を体感。クイズ付き。
ロゴとかたちのきほん
ロゴは、かたちを選ぶところから始まる。円・三角・四角の性格を知り、方眼で比率を整え、ロゴマークとロゴタイプを自分の手で組み立てるシリーズ。
かたちのきほん
円・三角・四角という基本図形の性格と印象を、印象メーターと見比べで体感。ロゴの土台となる「かたち選び」を学ぶ。
グリッドと比率で整える
図形を方眼にドラッグ＆スナップして整列。正円・正方形・黄金比で整え、整える前後を見比べる。
ロゴの3要素を知る
ロゴタイプ・シンボル・コンビネーションの違いを、同じブランドの作り分けと分類クイズで身につける。
ロゴマークをつくる
幾何図形を選び・重ね・回転・配色して、自分だけのシンボルマークを組み立てるSVGミニビルダー。
ロゴタイプを組む
書体・字間・ウェイト・大文字化でワードマークを作り、実書体のチューナーで良し悪しを見比べる。
コンセプトとステートメント
「なぜそのかたち?」を言語化。質問に答えると、ロゴの説明文(ステートメント)が組み上がる。
写真のきほん
作品撮影やSNSで役立つ、写真の基礎。構図で切り取り、F値でぼかし、シャッターで動きを操る——「露出の三角形」を、さわって体感するシリーズ。
写真の構図
三分割法・日の丸・対角線など、写真ならではの構図を、シーンをトリミングして被写体を配置する演習で身につける。
F値と絞り(ボケ)
F値を変えると、背景のボケ量(被写界深度)と明るさ・絞り羽根がどう変わるかをスライダーで体感。
シャッタースピード(動き)
動く被写体を「止める」か「流す」か。シャッタースピードで動きの表現と明るさが変わる様子を体感。
ISO感度(明るさとノイズ)
ISOを上げると暗所でも明るくなる代わりにノイズが増える。夜景シーンでそのトレードオフを確かめる。
露出の三角形・総まとめ
F値・シャッター・ISOを全部いじれるミニカメラ。ボケ・ノイズの代償を見ながら適正露出を目指すチャレンジで総復習。
印刷のきほん
画面の中のデザインが、インクと紙で「モノ」になるまで。網点・CMYK4色刷り・折りと面付けなど、印刷機の中で起きていることを体感するシリーズ。
このサイトについて
きほんラボは、デザインを学ぶ学生のための体験型学習サイトシリーズです。 どのサイトも STEP 1 仕組みを知る → STEP 2 さわってみる → STEP 3 課題に挑戦 → PLUS コツを覚える の 4段階構成。15〜20分で1テーマを体験できます。スマホでも動きますが、ドラッグ操作の多いものはパソコンが快適です。