知識を見る
qzgenへ移行中の既存概念を確認する。Design Labの主な学習導線ではありません。
318件
- AE/AFロックAE/AF Lock AE/AFロック(AE/AF Lock)とは、iPhone Cameraなどでautomatic exposure(AE)とautofocus(AF)の判断を一時的に固定し、構図を動かしても同じfocus / exposure条件を保つ操作です。構図や画角そのものを決める機能ではなく、automatic controlの再計算を止めるための撮影操作です。 →
- C字・S字構図C- and S-Curve Composition C字・S字構図とは、道路、川、身体、物体の輪郭などの曲線がC字やS字に近い経路を作ることで、frame内に連続した方向とdepthを構成する手法です。曲線そのものを装飾として置くのではなく、どの要素を通り、どこへ注意を運ぶかを見る点でvisual movementやgood continuationと関係します。 →
- DPIDots Per Inch DPI(dots per inch)とは、printer等の出力装置が1inchあたりに配置できるdotの密度を表す値です。画像fileのpixel密度を表すPPIとは別の概念で、1 image pixelを複数のprinter dotで再現する場合もあります。 →
- ICCプロファイルICC Profile ICCプロファイル(ICC profile)とは、International Color Consortiumの仕様に基づき、deviceや色dataのRGB / CMYK等の数値と、device-independentなProfile Connection Spaceとの対応関係を記述するcolor profileです。camera、display、printer、working space等のcolor managementで使われます。 →
- ISO感度ISO Sensitivity ISO感度(ISO sensitivity)とは、digital cameraで撮影時の感度・露出判断に使うISO speed ratingやexposure indexに関わる設定です。ISO 12232はdigital still cameraのISO speed rating、standard output sensitivity、recommended exposure indexなどの割当・報告方法を定めています。実務ではapertureやshutter speedと合わせて画像の明るさやnoiseとのtrade-offを判断しますが、ISO値をsensorへ届く光量そのものや、sensorの物理的性質が単純に変わる値と同一視しません。 →
- PPIPixels Per Inch PPI(pixels per inch)とは、画像をphysical sizeへ対応づける時の1inchあたりのpixel数です。画像のpixel dimensionsと印刷・表示上のphysical sizeの関係を表す値で、printerがinkやtonerのdotを出力する密度であるDPIとは別です。 →
- UIコンポーネントUI Component UIコンポーネント(UI component)とは、button、checkbox、text input、modal等のように、interface上の特定の役割や操作上の問題を担い、複数の場所で再利用できるよう設計・実装されたUIの構成単位です。見た目だけでなく、入れられるcontent、状態、振る舞い、keyboard操作やfocus等のaccessibility条件まで含めて考えます。componentはそれ自体でtask全体の最適解になるものではなく、複数のcomponentをcontextに応じて組み合わせたpatternやflowとは粒度が異なります。 →
- アーツ・アンド・クラフツ運動Arts and Crafts Movement アーツ・アンド・クラフツ運動(Arts and Crafts Movement)とは、19世紀後半のEnglandでmass industrializationへの応答として成立し、ものづくり、労働、material、生活環境の関係を問い直したdesign / architecture movementです。handmade labor、機能的な形、明快なconstruction、local / natural materialなどが重視されましたが、単なる手作り風styleの名称ではありません。 →
- アートディレクションArt Direction アートディレクション(art direction)とは、conceptやcommunication goalに対して、写真・illustration・styling・lighting・props・typography・layoutなど複数の視覚的判断を一つの方向へ組織し、制作物やseries全体の表現を導く実務上の役割・活動です。visual languageが反復して現れる表現上の語彙や規則、styleが観察される表現上の特徴を指すのに対し、art directionは何を選び、どう組み合わせ、制作条件へ展開するかという判断行為を含みます。mediaやviewportが変わっても同じ見た目を複製することではなく、何を維持し何を変えるかを決めます。 →
- アール・デコArt Deco アール・デコ(Art Deco)とは、主に1920〜30年代のdesignを後世にまとめて呼ぶ名称で、V&Aが説明するように単一styleというより複数のsourceとinfluenceが混ざったdesign languageです。Art Nouveau、avant-garde、machine-age imagery、historical / non-European source等が取り込まれ、Art Decoという呼称自体も1960年代に定着しました。 →
- アール・ヌーヴォーArt Nouveau アール・ヌーヴォー(Art Nouveau)とは、19世紀末から20世紀初頭に展開したinternational artistic movementで、art・design・architecture等を横断する統合を志向しました。France / Belgiumでよく知られるcurving organic lineは一つの地域的表現であり、Glasgow Style、Stile Libertyなど地域によって異なるvariantがあります。 →
- アスペクト比Aspect Ratio アスペクト比(aspect ratio)とは、frameや画像の幅と高さの比例関係です。1:1、4:5、16:9などはshapeを表しますが、pixel数やresolutionそのものではありません。同じcontentでもaspect ratioが変わると利用できる余白、主題の位置、crop、視線の流れが変わるため、出力形式だけでなく構図条件として扱います。 →
- アセンダーAscender アセンダー(ascender)とは、Latin小文字のb・d・h・k・lなどで、x-heightより上へ伸びる部分です。文字そのものの総高さやcap heightとは別で、同じpoint sizeでも書体ごとに長さや比率が異なります。 →
- アップサンプリングUpsampling アップサンプリング(upsampling)とは、resamplingによってraster imageのpixel dimensionsを増やし、新しいpixel値を推定して作る処理です。表示寸法をCSSで大きくするだけのscaleとは異なり、image dataそのもののpixel countを増やします。 →
- アフォーダンスAffordance アフォーダンス(affordance)とは、あるactorとobject・environmentの関係において、どのような行為が可能かという関係です。見た目の「押せそう」「ドラッグできそう」という手がかりそのものではありません。特にscreen UIではphysical affordanceよりconventionやsignifierの役割が大きいため、操作可能性と、それを人に伝える表現を分けて考えます。 →
- アプロプリエーションAppropriation アプロプリエーション(appropriation)とは、既存の画像、物、記号、ideaなどを意図的に借用、複製、改変、再配置し、別の文脈で意味を組み替える芸術的・デザイン的な戦略です。単にreferenceを見て影響を受けることとは異なり、既存materialそのものを作品や表現の一部として扱います。 →
- アルファチャンネルAlpha Channel アルファチャンネル(alpha channel)とは、画像の一部を選択・maskするための値を独立して保持するchannelです。実務ではtransparent imageのopacity情報をalphaとして扱う場面もありますが、Photoshopのalpha channelはselection / mask dataを保存する概念としてcolor channelと区別されます。 →
- アンチエイリアシングAnti-aliasing アンチエイリアシング(anti-aliasing)とは、rasterization時のedge周辺pixelを中間値で表すなどして、aliasingによるjagged appearanceを目立ちにくくする処理です。edgeを単にblurすることとは異なり、有限pixel grid上で連続shapeをより滑らかに知覚させるためのsampling処理です。 →
- イージングEasing イージング(easing)とは、animationやtransitionの進行率を時間に対してどのように変化させるかを決める関数です。一定速度のlinear、加減速を作るcubic-bezier、段階的に切り替えるstepsなどがあり、同じdurationと移動量でも進み方の違いによってmotionの見え方は変わります。特定のeasingを「自然」「高級」などの固定印象へ直接対応づけません。 →
- イコノグラフィーIconography イコノグラフィー(iconography / 図像学)とは、作品に現れる人物、物、動植物、物語、event、themeなどのsubject matterを同定し、それらが文化・物語・歴史の中で持つsymbolic / allegorical significanceを読むための概念・方法です。単に「何が写っているか」を列挙することや、図像単体に固定された意味を割り当てることとは異なります。 →
- インクルーシブデザインInclusive Design インクルーシブデザイン(inclusive design)とは、年齢、能力、言語、利用環境、経験、文化的背景などの違いによって生じる排除や参加上の障壁をdesign processの中で見つけ、当事者や異なる状況から学びながら、より多くの人が参加・利用できる方法を検討する考え方・方法論です。Web accessibilityとは強く重なりますが同義ではありません。Accessibilityは、障害のある人がWebを知覚・理解・操作し、利用できるよう具体的な障壁を取り除くことに焦点を持ち、WCAGなどのstandardもあります。Inclusive Designは、それより広い人間の多様性や参加の仕方をdesign processへ取り込みます。Inclusive Designを実践しただけでWCAG conformanceが保証されるわけでも、すべての人に一つのsolutionを作ることを意味するわけでもありません。 →
- インフォグラフィックInfographic インフォグラフィック(Infographic)とは、情報、data、知識を、text、chart、diagram、map、pictogram、illustrationなど複数の視覚要素を組み合わせて説明するgraphic formatです。Data Visualizationを含むことがありますが、必ずしも定量dataの可視化を中心にするとは限りません。 →
- ウィドウとオーファンWidows and Orphans ウィドウとオーファン(widows and orphans)とは、paragraphがpageやcolumnをまたぐ時に、先頭・末尾付近のごく短い行や単独行が別のpage / columnへ孤立して残る状態を指す組版用語です。どちらをwidow / orphanと呼ぶかは出版文化や資料で揺れがあるため、名前の割り当てより「どの行がどこへ孤立したか」を確認します。 →
- ウェイファインディングWayfinding ウェイファインディング(Wayfinding)とは、人がbuilt environmentの中で現在地を把握し、目的地や経路を判断して移動する過程と、それを支える情報設計です。sign、map、directory、pictogram、color coding、landmarkなどを組み合わせますが、WayfindingそのものをSignageだけに限定しません。 →
- エイリアシングAliasing エイリアシング(aliasing)とは、連続的なline、curve、detail等を有限のsample gridで表す時に、本来とは異なる階段状edgeやpatternなどが現れるsampling artifactです。画像では斜線や曲線のjagged edgeとして見えることがあります。 →
- エックスハイトX-height エックスハイト(x-height)とは、Latin typefaceで小文字xを基準にしたlowercase bodyの高さです。同じfont-sizeでもx-heightが異なると、Latin小文字や英数字を含む文字列の見かけの大きさ、文字面の密度、行内での空間の見え方が変わります。日本語・CJK文字の見かけの大きさを直接表す指標ではなく、scriptごとの字面やfont metricsは別に確認します。x-heightが大きいほど常に読みやすいわけでもありません。 →
- エディトリアルデザインEditorial Design エディトリアルデザイン(Editorial Design)とは、記事、雑誌、新聞、reportなど編集されたcontentを、読者が全体構造と個々の記事を辿れるように、typography、grid、image、caption、heading、navigation、pageやscreenの連続性を設計する領域です。printだけに限定されずdigital publicationも含み、単一ページの装飾layoutだけを指しません。 →
- エラーからの回復Error Recovery エラーからの回復(error recovery)とは、問題が起きた後に、何が起きたかを理解し、修正方法を見つけ、正常なtaskへ戻れるようにするinteraction principleです。feedbackは状態や結果を伝える情報、reversibilityは以前の状態へ戻せる性質であり、error recoveryはmessage、修正手段、retry、undo、data保持などを含む回復経路全体を扱います。 →
- エラー予防Error Prevention エラー予防(error prevention)とは、errorが起きた後に説明するだけでなく、error-proneな条件を取り除く、選択肢を制約する、重大な結果の前に確認するなどして、問題の発生自体を減らすinteraction principleです。すべてのactionにconfirmationを挟むことではなく、発生可能性と結果の重大度に応じて予防方法を選びます。 →
- オーバーシュートOvershoot オーバーシュート(overshoot)とは、O・oのようなround shapeやA・Vのようなpointed shapeをflatな文字と同じ高さに見せるため、baseline、x-height、cap height等の基準線をわずかに越えて設計するoptical correctionです。実測寸法を揃えることと、知覚上同じ大きさに見せることが一致しない例です。 →
- オーバープリントOverprint オーバープリント(overprint)とは、上側のオブジェクトを印刷する時に下地のinkを抜かず、そのまま残して上のinkを重ねる印刷処理です。通常のknockoutでは上側の形に合わせて下地inkを除きます。overprintでは重なったinkの組成が変わるため、digital compositingのopacityとは別概念として扱います。 →
- オールドスタイル数字Oldstyle Figures オールドスタイル数字(oldstyle figures / text figures)とは、数字ごとに高さや上下方向の位置が異なり、小文字のascender / descenderを含む本文のリズムへ近づくよう設計されたfigure styleです。OpenTypeでは `onum` featureで提供される場合があります。これは横幅のproportional / tabularとは別軸で、oldstyle figuresにも等幅版と可変幅版がありえます。 →
- オプティカルサイズOptical Sizing オプティカルサイズ(optical sizing)とは、文字を使う表示サイズに応じて、字形のdetail・stroke・spacingなどを調整するtypographic設計です。対応fontではoptical-size axisや自動optical sizingを利用できます。これはfont-sizeそのものを変えることではなく、同じfamilyでも小サイズ向け・大サイズ向けに字形を適応させる仕組みです。 →
- オプティカルマージン揃えOptical Margin Alignment オプティカルマージン揃え(optical margin alignment)とは、句読点や一部のglyphをtext frameの幾何学的な端からわずかに張り出させ、文字面としての端が視覚的に揃って見えるよう調整する組版手法です。文字間を調整するkerningやtracking、要素boxを揃えるalignmentとは別の概念です。 →
- カーニングKerning カーニング(kerning)とは、特定の文字ペア間の間隔を個別に調整し、字形同士の見かけの間隔を整えるtypographic操作です。LA、To、Waのように形状の組み合わせによって生じる局所的な空きや詰まりを扱います。文字列全体へ均一に間隔を加減するtracking / letter spacingとは別の調整です。 →
- カウンターCounter カウンター(counter)とは、letterformやsymbolの内部でstrokeに完全または部分的に囲まれる空間です。o・pのようなclosed counterだけでなく、cのように開口を持つopen counterも含みます。文字の外側にある一般的なnegative spaceより、glyph内部の形態として扱う語です。 →
- ガターGutter ガター(gutter)とは、grid内で隣接するcolumnやrow、moduleの間に設ける反復した間隔です。外周のmarginや、content内部の一般的なpaddingとは位置と役割が異なります。print、graphic、Webで実装方法は違っても、grid anatomy上の「内部の間隔」という名前として使われます。responsive layoutではcolumn数やcard幅が変わるため、gutterも固定値そのものではなく、隣接contentを区別しつつ利用可能幅を圧迫しない関係として見ます。 →
- カラーチャンネルColor Channel カラーチャンネル(color channel)とは、画像のcolor modeを構成する各成分の値を個別に保持するchannelです。RGB imageならRed、Green、Blueの3 channelがあり、それぞれのgrayscale valueの組み合わせからpixel colorが構成されます。透明度を保持するalpha channelとは役割が異なります。 →
- カラーパレットColor Palette カラーパレット(color palette)とは、一つの制作物やdesign systemで実際に使う色を、役割や組み合わせを考えて選んだ集合です。単なるswatch一覧ではなく、background、text、accent、stateなどの用途と、lightness・chroma・contrast・gamutを含めて運用します。paletteの色数が少ないほど良い、あるいは多いほど表現豊かという単純な尺度ではありません。 →
- カラープロファイルColor Profile カラープロファイル(color profile)とは、ある画像dataやdeviceの数値がどの色を意味するかをcolor management systemへ伝えるための記述です。color spaceという抽象的な色表現の枠組みと関係しますが、特定deviceやencodingの色特性を記述するprofileとは役割が異なります。 →
- カラフルさPerceived Colorfulness カラフルさ(perceived colorfulness)とは、画面や構成全体を見た時に、どの程度「色が豊富で、色みが強く、多彩に見えるか」という知覚的な特性です。単一領域に対するCIEのformalなcolourfulness属性、単一色のchroma / saturation、色相の種類数のどれか一つとは同義ではありません。使われる色の面積、分布、明るさ、色同士の差、周囲の無彩色、写真やillustrationなどが組み合わさって決まります。 →
- カラムグリッドColumn Grid カラムグリッド(column grid)とは、formatを複数の縦方向columnへ分け、textやimageなどを一つまたは複数columnの幅へ対応させて配置するgrid typeです。column間のgutterと外周marginを含む関係として扱い、CSS Gridのcolumn syntaxそのものとは区別します。 →
- ガラルドGaralde ガラルド(Garalde)とは、GaramondとAldus Manutiusに由来する名称で、Humanist Serifに続くold-style系のserif分類です。calligraphicな影響を残しつつ、より洗練されたproportion、moderateなaxis、整えられたserifなどで説明されます。 →
- カリグラフィーCalligraphy カリグラフィー(calligraphy)とは、penやbrushなどのwriting toolを用い、主に一筆ごとのgestureで文字を書く実践です。letteringが複数のmarkを重ねてletterformを構築・描画できるのに対し、calligraphyではtool、筆圧、角度、速度などがstrokeの形へ直接現れます。 →
- キーボード操作可能性Keyboard Operability キーボード操作可能性(keyboard operability)とは、contentの機能を、特定のtimingを要求する個別keystrokeのpathへ依存せずkeyboard interfaceから利用できるようにすることです。WCAG 2.2 Success Criterion 2.1.1(Level A)は原則としてすべての機能をkeyboard interfaceで操作可能にすることを求め、移動軌跡そのものが入力に本質的な機能などには例外があります。focusが見えることやfocus順序が論理的であることとは別の条件です。 →
- キーライトKey Light キーライト(key light)とは、lighting setupの中で対象の主要なilluminationと明暗構造を決める役割を持つ光です。三点照明では中心となるroleですが、「画面内で最も明るいpixel」や「最も強い物理light」という定義ではありません。 →
- キャップハイトCap Height キャップハイト(cap height)とは、Latin typefaceでbaselineから大文字の上端までの高さを表すmetricです。同じfont-sizeでもcap heightが異なると、大文字や英字labelの見かけの大きさが変わります。x-heightが主にlowercaseの高さを捉えるのに対し、cap heightはuppercaseを基準にします。日本語/CJK glyphの高さを直接表すmetricではありません。 →
- グラスモーフィズムGlassmorphism グラスモーフィズム(glassmorphism)とは、半透明、背景のblur、薄いborderやhighlightなどを使い、すりガラスのようなsurfaceと重なりによる奥行きを表現するdigital visual-design style / trendの名称です。単にopacityを下げるだけでなく、背後のcontentが透けながらblurして見えるlayer関係が典型的な特徴です。 →
- グリッドGrid グリッド(grid)とは、要素を配置・整列するために、column、row、margin、gutter、moduleなどの反復する空間関係を組み立てたlayout frameworkです。見える罫線そのものではなく、複数要素の位置と幅に共通する基準を与える仕組みです。整列や反復を助けますが、すべての要素を同じcellへ閉じ込めるための規則ではありません。 →
- グリッドモジュールGrid Module グリッドモジュール(grid module)とは、modular gridでrowとcolumnの区切りによって生じる反復可能な最小の空間単位です。実際の要素は一つのmoduleだけでなく複数moduleをspanできます。UI componentの「module」やsoftware上のgrid cellと必ずしも同義ではありません。 →
- グリフGlyph グリフ(glyph)とは、character dataを表示・印刷する時に選ばれる字形の単位です。抽象的な文字情報であるcharacterとは区別し、同じcharacterでもfontやOpenType feature、文脈によって異なるglyphが選ばれることがあります。逆に複数characterのsequenceが一つのligature glyphで表される場合もあります。実際にdisplay surfaceへ描画された具体的な像は、Unicode terminologyではglyph imageとしてさらに区別されます。 →
- クロスバーCrossbar クロスバー(crossbar)とは、A・H・eなどで他のstroke間を横方向につなぐ、通常horizontalなstrokeです。lowercase t・fを横切るcross strokeとはglossary上区別される場合があります。 →
- クロッピングCropping クロッピング(cropping)とは、画像やvisualの外縁を切り直し、表示する範囲と除外する範囲を再設定する操作です。単なるresizeではなく、主題の位置、negative space、周辺context、aspect ratioを変えることで構図自体を再framingします。元画像を破壊的に切り捨てることだけを意味しません。 →
- グロテスク・サンセリフGrotesque Sans グロテスク・サンセリフ(Grotesque Sans)とは、19世紀に成立した初期sans serif群を指す歴史的・形態的分類です。太細差やproportion、曲線、terminalなどに後のNeo-grotesqueより不均質な特徴を残すものがあり、単に「sans serif全般」の同義語ではありません。 →
- クロマChroma クロマ(chroma)とは、ある色の色みの強さを、同じように照明された白・灰色などの無彩色領域がどの程度明るく見えるかとの比として判断する色外観属性です。CIEではsaturationとは別概念です。LCHやOKLCHではCとして扱われますが、color spaceごとに数値範囲や知覚的一様性は異なるため、異なるspaceのC値を直接比較しません。 →
- ゴシック体Japanese Gothic Typeface ゴシック体(Japanese Gothic typeface)とは、日本語書体の主要な系統の一つで、一般に各strokeの太さが比較的均一で、明朝体に見られるうろこ等の装飾的な線端を持たない書体です。欧文sans serifと近い見え方を持つ場合がありますが、同じ分類ではありません。 →
- コピースペースCopy Space コピースペース(copy space)とは、写真・illustration・compositeなどのvisual内で、見出しや説明文、logoなどのcopyを配置できるよう意図的に確保する領域です。単なる空白ではなく、主題との位置関係、contrast、texture、crop耐性を含めて「文字を載せても構図と可読性が崩れない場所」として設計します。 →
- コラージュCollage コラージュ(collage)とは、紙、印刷物、画像、文字、素材片など異なる断片を並置し、一つの支持面や画面へ組み合わせる制作方法と、その結果できる表現です。素材の出自や切断面が残ることもありますが、雑多に重ねること自体が定義ではありません。 →
- コンテナクエリーContainer Query コンテナクエリー(Container Query)とは、viewport全体ではなく、componentを包むquery containerのsizeやfeaturesを条件に、そのdescendantのpresentationを切り替えるCSSの仕組みです。responsive designでは、同じcomponentがmain column、sidebar、card gridなど異なる幅へ置かれても、そのcomponent自身が実際に使える領域に応じてlayoutを変えられます。page全体の構造をviewport条件で切り替えるMedia Queryとは役割が重なる部分もありますが、判断基準にする領域が異なります。 →
- コントラストContrast デザインにおけるコントラストとは、色、明度、大きさ、形、太さ、書体などの差によって、要素同士を区別したり一方を際立たせたりする関係です。視覚的階層や強調を作る手段になりますが、アクセシビリティで測定する文字と背景のコントラスト比だけを意味する言葉ではありません。 →
- サインSignage Signageとは、場所、名称、方向、規則、注意、案内などを空間内で伝えるsignの集合やsystemです。文字、矢印、pictogram、色、material、設置位置などを扱います。Wayfindingを支える重要な要素ですが、空間把握や経路判断全体を含むWayfindingそのものとは同義ではありません。日本語の「サイネージ」はdigital signageを特に指す場合があるため、ここではより広いsign systemの意味で「サイン」と表示します。 →
- サンセリフ体Sans Serif サンセリフ体(sans serif typeface)とは、主にLatin letterformでserifを持たない書体群です。grotesque、neo-grotesque、humanist、geometricなど複数の系統があり、stroke contrast、proportion、terminal、apertureなどの設計は大きく異なります。「modern」「clean」といった連想は歴史・brand・利用文脈に依存するため、serifがないこと自体を一つの印象へ固定しません。 →
- ジオメトリック・サンセリフGeometric Sans ジオメトリック・サンセリフ(Geometric Sans)とは、circle・square・triangleなど単純な幾何形態を構成原理として強く参照するsans serif分類です。Futuraなどが代表例ですが、実際のletterformには視覚補正が入り、純粋な幾何図形をそのまま並べたものではありません。 →
- シグニファイアSignifier シグニファイア(signifier)とは、人が「どこで・どのような行為ができるか」を発見する助けになる知覚可能な手がかりです。label、形状、icon、drag handle、cursor、配置、他者の行動痕跡などがsignifierになりえます。affordanceが可能な行為の関係を指すのに対し、signifierはその可能性を人へ伝えるcueを指します。 →
- システム状態の可視性Visibility of System Status システム状態の可視性(visibility of system status)とは、systemやtaskが現在どの状態にあるかを、適切なfeedbackによって必要な時に理解できるようにするinteraction principleです。直前のactionへの応答だけでなく、同期中、offline、処理待ち、選択中、現在位置など継続するstateの把握も含みます。すべての内部状態を常時表示することではなく、userの判断に関係する状態をtimelyに伝えることが中心です。 →
- シニフィアンSignifier (Semiotics) シニフィアン(signifier)とは、Saussure系のsemioticsで、読まれるword、image、sound、markなど記号の知覚可能な側・表現側を指します。意味・概念側のsignifiedと対になります。Interaction designでNormanが使うsignifierとは関連する語源を持ちますが、対象scopeは同一ではありません。 →
- シニフィエSignified シニフィエ(signified)とは、semioticsでsignifierが指し示すconcept・idea・meaning側を指します。signifierとsignifiedの関係は自然に一意であるとは限らず、言語・文化・時代・使用contextによって変化しえます。 →
- シャッタースピードShutter Speed シャッタースピード(shutter speed)とは、cameraのsensor / filmへ光を記録する露光時間に関わる設定です。時間が長いほど、その間の被写体やcameraの動きが一枚のimageへ積算されやすく、motion blurに関係します。apertureやISOなど他の露出条件とは別の調整軸です。 →
- ショルダーShoulder ショルダー(shoulder)とは、lowercase h・m・nなどでstemから外側へ張り出し、次のstrokeへつながるcurved部分です。bowlのようにclosed counterを囲む完全な丸い部分とは異なるletterform anatomyです。 →
- スキューモーフィズムSkeuomorphism スキューモーフィズム(skeuomorphism)とは、digital interfaceへ現実世界の物体・操作方法・外観を取り入れるdesign practice / visual-design trendを指す語です。機能面では、本棚、folder、page turnなど既知の物体や操作をmetaphorとして使い、interfaceの役割や操作の理解を支える場合があります。visual trendとしては、木目、革、立体的なcontrolなど現実物らしい外観を強く再現する表現もskeuomorphicと呼ばれてきました。ただし、現実らしいtextureを純粋な装飾として使うだけのrealismとは概念上区別できます。 →
- スケールScale スケール(scale)とは、構成内の要素が他の要素や全体に対してどの程度大きく・小さく見えるかという相対的な大きさの関係です。大きさの差は視覚的な重みや階層に影響しますが、「大きいほど重要」という単純な規則ではなく、位置、色、余白、内容との組み合わせで解釈されます。 →
- スタイルStyle スタイル(style)とは、作品やデザインに現れる特徴的な表現の仕方・形式上のまとまりを記述する語です。個人、時代、movement、brandなど複数のscopeで使われ、mediumやtechniqueを含む選択の反復から認識されます。ただし、styleが認識できること自体は、共有されたvisual languageとして運用規則が明文化・反復されていることや、art directionという制作判断の活動が存在することを意味しません。 →
- ステムStem ステム(stem)とは、letterformを構成する主要なvertical strokeです。H・I・l・bなどで明確に見られ、serif、bowl、shoulder等の部位がstemへ接続する場合があります。stroke一般より狭く、主となる縦画を指すtype anatomy用語です。 →
- ステレオタイプStereotype ステレオタイプ(stereotype)とは、あるgroupやsocial categoryに属する人について、性質・役割・能力・行動などを比較的固定した一般化として結びつける認知的な枠組みです。visual / communication designでは、人物や集団のrepresentationが、特定のoccupation、family role、身体特徴、性格、能力、生活様式などを反復的に結びつけていないかを観察するための語彙になります。特定属性の人を一度描いたこと、人数比が偏っていること、文化的symbolを使ったことだけから自動的にstereotypeだとは判定しません。どのgeneralizationが、どのcontextで、誰について、どのように反復・強化されているかを確認します。 →
- ストロークコントラストStroke Contrast ストロークコントラスト(stroke contrast)とは、一つのletterform内で太いstrokeと細いstrokeの差がどの程度あるかという形態的な特徴です。font weightは文字全体の相対的な黒さ・太さのvariationであり、stroke contrastとは別軸です。 →
- スパインSpine スパイン(spine)とは、uppercase / lowercase Sの中心を通る主要なcurved strokeです。Sのletterformを上下へつなぐ骨格として扱われ、単なる文字全体のoutlineや一般的なcurveの名称ではありません。 →
- スポットカラーSpot Color スポットカラー(spot color / 特色)とは、CMYK process inkの組合せだけで再現するのではなく、あらかじめ調合した専用inkを別plateとして印刷する色指定です。ブランド色の再現やmetallic・fluorescentなどの特殊inkにも使われますが、spot colorという名称自体は色の良し悪しや鮮やかさを示しません。 →
- スモールキャップSmall Caps スモールキャップ(small caps)とは、大文字に似た形を持ちながら、本文中の小文字や周囲の文字と組み合わせるために別途設計された小型の大文字字形です。OpenTypeでは `smcp` などのfeatureとして提供される場合があります。通常の大文字を単純に縮小して作る擬似small capsとは、stroke weightやproportionなどの設計が異なりえます。 →
- スラブセリフSlab Serif スラブセリフ(Slab Serif)とは、太くblock状のserifを主要な形態特徴として持つserif分類です。stroke contrastが低いものも多いですが、Slab Serif内部にも構造の違いがあり、単にserifが太いという一条件だけで全体を説明できません。 →
- スワッシュSwash スワッシュ(swash)とは、文字の入口・出口やterminalなどを通常字形より大きく伸ばしたり装飾したりするalternate glyphです。OpenTypeでは `swsh` などのfeatureで提供される場合があります。script typefaceだけの概念ではなく、書体内に用意された代替字形の一種として扱います。 →
- セリフ体Serif セリフ体(serif typeface)とは、主にLatin letterformのstroke端にserifと呼ばれる小さな線・足・terminal treatmentを持つ書体群です。serifの形、stroke contrast、proportionなどによってold style、transitional、Didone、slab serifなどさらに異なる分類があります。「伝統的」「上品」「紙で読みやすい」といった印象や用途は文脈依存であり、serifがあること自体から一つの性格や可読性を決めません。 →
- ソフトライトSoft Light ソフトライト(soft light)とは、対象から見た光源の見かけの大きさが比較的大きい、または光がdiffuseされている時などに生じる、shadow edgeと明暗transitionが滑らかな光の状態です。単に暗い光や弱い光を意味しません。 →
- ダークパターンDeceptive Pattern ダークパターン(dark pattern / deceptive design pattern)とは、interfaceや一連の利用導線の構成によって、重要な情報や選択肢を隠す・分かりにくくする・非対称に強調する、拒否や解約を不必要に困難にするなどして、人を意図しない、望まない、または自分に不利な選択へ誘導しやすくするdesign patternの総称です。単に説得的である、特定の選択肢が目立つ、conversionを促すというだけでは直ちにダークパターンとは限りません。各選択肢がどう提示され、情報量、操作負荷、初期設定、取消可能性などが意思決定へどう影響しているかを具体的に確認します。法的な該当性は、法域、対象となる取引、personal dataの扱いなどのcontextに応じて別に確認します。 →
- ターミナルTerminal ターミナル(terminal)とは、letterformのstrokeが終わる端部の形です。Monotypeのglossaryではserifを持たずに終わるstroke endとして説明され、ball terminalなど個別の形態名もあります。単なる線の終点ではなく、type design上の形状として観察されます。 →
- ダイアグラムDiagram ダイアグラム(Diagram)とは、対象の外観を写実的に再現することより、要素どうしの関係、構造、順序、流れ、配置などを図式化して示すvisual representationです。flow、network、structure、processなど様々な種類があり、定量dataをencodeするData Visualizationや説明graphic全体であるInfographicとは同義ではありません。 →
- タイポグラフィックスケールTypographic Scale タイポグラフィックスケール(typographic scale)とは、本文・見出し・displayなど複数の文字サイズを、その場ごとに個別決定するのではなく、段階的なsize体系として設計する考え方です。一定のratioを使う方法もありますが、scaleはratioそのものではなく、役割とhierarchyを支えるsize setです。weightやline heightなどを組み合わせたtype style / tokenとは区別します。 →
- ダウンサンプリングDownsampling ダウンサンプリング(downsampling)とは、resamplingによってraster imageのpixel dimensionsを減らし、複数のsource sampleからより少ないpixel gridへ情報をまとめ直す処理です。適切なfilteringをしないとaliasingやdetail lossが目立つことがあります。 →
- ダダDada ダダ(Dada)とは、第一次世界大戦の惨禍とmodern media / machine cultureへの応答として形成されたartistic / literary movementです。accepted orderやlogicを揺さぶり、chance、spontaneity、irreverenceを用い、collage、photomontage、readymade、performanceなど既存の作品概念を越える方法を試しました。 →
- デ・ステイルDe Stijl デ・ステイル(De Stijl)とは、Theo van Doesburgらが1917年に創刊したDutch journal『De Stijl』を核に展開したinternational group / abstractionの名称です。naturalistic representationを離れ、straight line、rectangular plane、primary color等を用いてvisual harmonyとorderを追求しましたが、Mondrian風の配色templateだけを指す名称ではありません。 →
- ディセンダーDescender ディセンダー(descender)とは、Latin小文字のg・j・p・q・yなどでbaselineより下へ伸びる部分です。書体によっては大文字JやQの一部もbaseline下へ伸びます。行間そのものではなく、字形がbaseline下へ占める形態的な領域です。 →
- ディドネDidone ディドネ(Didone)とは、DidotとBodoniの名称に由来するserif分類で、非常に高いstroke contrast、ほぼ垂直なaxis、細いhairlineや水平的なserifなどが代表的な形態です。Modern Serifとも呼ばれますが、ここでのModernは現代的という日常語とは別の歴史分類です。 →
- データビジュアライゼーションData Visualization データビジュアライゼーション(Data Visualization)とは、数値、category、時間、位置などdataの属性や関係を、位置・長さ・形・色・線などの視覚要素へ対応づけて表現することです。chartやmapが代表例で、説明文やillustrationを含むInfographic全体とはscopeが異なります。 →
- デザインシステムDesign System デザインシステム(design system)とは、複数のproductやscreenを一貫して設計・実装・更新できるように、基礎ルール、再利用可能なUIコンポーネント、パターン、デザイン上の判断、実装code、利用方法やaccessibilityのguidance等を共有し運用する仕組みです。何を含むかはsystemの目的や組織によって異なり、component libraryやFigma libraryだけを持つこととは同義ではありません。visual languageが表現上の語彙や使い方の規則を扱うのに対し、design systemはそれらを含むdesign decisionを再利用可能なasset・guidance・implementationへ接続して継続運用する側面を持ちます。 →
- デザイントークンDesign Token デザイントークン(design token)とは、色、寸法、typography、duration等のデザイン上の判断を、名前・種類・値を持つ再利用可能なdataとして表し、design tool、実装code、複数のplatform間で共有・変換しやすくするための単位です。単なる色見本や任意のCSS custom propertyと同義ではなく、「何の判断を表す値か」を識別でき、system内で参照・変更・変換できることが重要です。Design Tokens Community Groupはvendor-neutralな交換formatを2025.10でfirst stable versionとして公開していますが、これはW3C Recommendationではありません。 →
- デザインの根拠Design Rationale デザインの根拠(design rationale)とは、あるdesign decisionについて、何を目的・criteriaとし、どの代替案やtrade-offを検討し、どの観察・制約・evidenceを理由にその選択をしたかを説明できる形にした判断の背景です。完成後にもっともらしいstoryを付けることではなく、選択肢と判断条件の関係を追えることが重要です。rationaleがあっても美的判断が一意に決まるわけではなく、制作意図やcontextが異なれば別の選択も成立します。 →
- デザインブリーフDesign Brief デザインブリーフ(design brief)とは、projectで何を解く・伝えるのか、誰やどの状況を対象にするのか、どの制約や要件を考慮するのか、何を判断基準にするのかを共有するための簡潔な基準文書・合意です。依頼時に渡された要望をそのまま固定するものではなく、調査や対話を通じてchallengeの捉え方が変われば更新されえます。完成形の見た目を先に指定するmoodboardやstyle prescriptionとは役割が異なります。 →
- デザインプロセスDesign Process デザインプロセス(design process)とは、与えられた依頼や最初の案をそのまま仕上げるのではなく、対象や状況を調べ、何を解く・伝えるのかを捉え直し、複数の方向を外化して比較し、試作・critique・testing等から得た情報を使って判断を更新しながら制作物を具体化していく一連の活動とその関係です。Discover / Define / Develop / Deliver等のprocess modelはこの活動を説明する一つの表現であり、すべてのprojectが同じ段階を同じ順序で進む必要はありません。 →
- デザインリサーチDesign Research デザインリサーチ(design research)とは、制作判断を仮定だけで進めないために、対象、利用状況、content、precedent、文化・技術的なcontext、制約などについて情報を集め、観察し、比較・分析して、problem framingや案の生成・評価へ使える理解を作る調査活動です。既存資料を調べるdesk / secondary research、precedentの分析、現場観察、interviewなどは目的に応じて使う方法であり、design researchをuser interviewだけと同義にはしません。学術研究と重なる方法を使う場合はありますが、Design Labでは実制作の問いと判断へ戻る範囲を扱います。 →
- デバイスピクセル比Device Pixel Ratio デバイスピクセル比(device pixel ratio / DPR)とは、display上でCSS pixelとphysical device pixelがどの比率で対応するかを表す値です。high-DPI displayでは1 CSS pixelを複数のdevice pixelで描画するため、同じCSS sizeでも必要なraster assetのpixel dimensionsが変わることがあります。 →
- ドラッグ操作の代替Dragging Alternative ドラッグ操作の代替(dragging alternative)とは、dragging movementを使う機能を、dragなしのsingle-pointer操作でも実行できるようにすることです。WCAG 2.2 Success Criterion 2.5.7(Level AA)は、draggingがessentialな場合やuser agentが決める場合などを除き、dragを使うすべての機能へsingle pointerでdragging不要の操作方法を求めます。drag UI自体を禁止する要件ではありません。 →
- トランジショナル・セリフTransitional Serif トランジショナル・セリフ(Transitional Serif)とは、old-style / GaraldeとDidoneの間に位置づけられるserif分類です。より高いstroke contrast、垂直に近づくaxis、平たく整えられたserifなど、書字由来からより構築的な形態へ移る特徴で説明されます。 →
- トリムマークCrop Marks トリムマーク(crop marks / trim marks)とは、印刷物をどこで断裁して仕上がりサイズにするかを示すprinter's markです。日本語の「トンボ」はregistration marksなど印刷用mark全般を広く指す場合もあるため、このKnowledgeでは特に断裁位置を示すcrop marksとして扱います。 →
- ニュー・タイポグラフィNew Typography ニュー・タイポグラフィ(New Typography / Die Neue Typographie)とは、1920–1930年代のCentral Europeで展開したmodernist typography movementの呼称です。Jan Tschicholdが1928年の同名書で体系化し、従来のsymmetrical typesettingから離れたasymmetrical composition、type・photography・illustrationをpage上のactiveな要素として扱う構成などを広めました。posterだけの造形styleではなく、graphics / information designをmodernist avant-gardeの主要なcommunication practiceへ押し出し、business card、brochure、magazine、book、advertisementなど幅広いprinted matterへ展開したhistorical movementとして扱います。 →
- ニューモーフィズムNeumorphism ニューモーフィズム(neumorphism)とは、flat designの単純化されたsurfaceへ、同系色のhighlightとshadowを使った浅い凹凸表現を加えるdigital visual-design trendの名称です。skeuomorphismで使われる現実物らしい奥行き表現を、より抽象化して取り入れた流れとして語られますが、特定componentの実装規格ではありません。 →
- ネオグロテスク・サンセリフNeo-grotesque Sans ネオグロテスク・サンセリフ(Neo-grotesque Sans)とは、後期Grotesqueを整理・発展させたsans serif分類で、HelveticaやUniversなどが代表例です。比較的低いstroke contrast、規則的なproportionと形態、family内のweight / width展開などで説明されます。 →
- ネオブルータリズムNeobrutalism ネオブルータリズム(neobrutalism / neubrutalism)とは、digital visual designで強いcontrast、箱型のlayout、鮮やかな色、太いborder、硬いoffset shadow、大きなtypography、retro UIの引用などを組み合わせる近年のstyle / trend名です。建築のBrutalismから名称を借りていますが、建築運動そのものと同一ではありません。 →
- ネガティブスペースNegative Space ネガティブスペース(negative space)とは、subjectやpositive shapeの周囲・間・内部に形成される空間で、それ自体もshapeとして輪郭や構成を規定します。Web layoutのwhitespaceと重なる場面はありますが、negative spaceはfigureとの相互関係を強く表す造形語です。 →
- ハードライトHard Light ハードライト(hard light)とは、対象から見た光源の見かけの大きさが比較的小さい時などに生じる、shadow edgeが鋭く、明部と暗部のtransitionが短い光の状態です。direct lightと関連しますが、単に「強い光」や「明るい光」を意味しません。 →
- ハイフネーションHyphenation ハイフネーション(hyphenation)とは、主にalphabetic textで行末に収まらないwordを規則に従って分割し、hyphenを伴って次行へ送る組版処理です。自動hyphenationはlanguage dictionaryやcomposerの規則に依存し、手動ではdiscretionary hyphenなどで分割候補を指定できます。通常の単語中に恒久的なhyphenを入力することとは分けて扱います。 →
- バウハウスBauhaus バウハウス(Bauhaus)とは、1919年にGermanyで設立され1933年まで続いたart / architecture / craft / designのschoolと、その教育・制作実践を中心に形成されたmodernist movementを指す名前です。Weimar、Dessau、Berlinの各時期で教育方針や組織は変化し、予備課程、形態・色彩教育、workshop、artとtechnology / industrial productionの接続などを通してdesign educationへ大きな影響を与えました。graphic designではHerbert Bayerらのtypography、photography、grid、geometric constructionなどが後世へ広く参照されていますが、原色・circle・square・triangleだけを並べるvisual styleの名称ではありません。 →
- バックライト(背面光)Backlight バックライト(backlight / back light)とは、対象の背面側からcameraやviewer方向へ向かう光、またはlighting setupで対象を後方から照らす役割を指します。輪郭に沿うrimが生じる場合がありますが、rim lightという見え方とbacklightという方向・役割を完全な同義語としては扱いません。 →
- ピクセルPixel ピクセル(pixel)とは、raster imageを構成する離散的なsample単位です。画像file上のpixelとdisplayの物理的なdevice pixel、CSS layout上のCSS pixelは同じ「px」という語で接する場面がありますが、役割が異なるため区別して考えます。 →
- ピクセル寸法Pixel Dimensions ピクセル寸法(pixel dimensions)とは、raster imageが横方向と縦方向に何pixelを持つかを示す寸法です。例えば2400×1600pxのように表します。画像のdata量・細部の上限に関わりますが、PPIや印刷時のphysical sizeとは別の値です。 →
- ピクトグラムPictogram ピクトグラム(pictogram / pictograph)とは、object、action、facilityなどを簡略化した絵的な形で表すgraphical symbolです。対象との視覚的な類似を使うことが多い一方、意味の理解にはconventionやcontextも関わるため、Peirceのpureなiconic signと完全な同義ではありません。 →
- ビット深度Bit Depth ビット深度(bit depth)とは、raster imageの各pixel / channelで利用できる数値段階を何bitで表現するかを示す概念です。例えば8 bit/channelなら1 channelあたり256段階を表せます。bit depthが高いほど編集時に保持できるtone / color情報は増えますが、display可能色数や最終品質と単純な一対一関係ではありません。 →
- ビューポートViewport ビューポート(viewport)とは、Web browserがdocumentのlayoutや表示を考える基準となる表示領域です。Webではlayout viewportと、pinch zoomやonscreen keyboardなどで実際に見えている範囲が変わるvisual viewportを区別する場合があります。responsive designでは物理screen寸法そのものではなく、CSS pixelで利用できるviewportの幅や高さを基準にlayout条件を考えます。mobile browserではviewport meta設定も初期layoutの重要な前提になります。 →
- ビューポート単位Viewport Units ビューポート単位(viewport units)とは、viewportの寸法を基準に長さを表すCSSのrelative unit群です。`vw` / `vh`などのdefault viewport unitsに加え、mobile browserの動的なbrowser UIによって利用可能な領域が変わる状況を扱うため、small viewport (`sv*`)、large viewport (`lv*`)、dynamic viewport (`dv*`) に対応するunitがあります。viewportへ比例させること自体が目的ではなく、何の領域変化へ追従させたいかに応じて使い分けます。 →
- ヒューマニスト・サンセリフHumanist Sans ヒューマニスト・サンセリフ(Humanist Sans)とは、serifを持たない一方で、Roman capitalsやbroad-nib calligraphyのproportion・stroke modulation・open counterなどの影響を残すsans serif分類です。Gill SansやFrutigerなどが代表例に挙げられます。 →
- ヒューマニスト・セリフHumanist Serif ヒューマニスト・セリフ(Humanist Serif)とは、初期Roman typeのうち、broad-nib calligraphyや手書きの運筆を強く残すserif分類です。斜めのaxis、比較的低いstroke contrast、書字由来のproportionなどが典型ですが、単一featureだけで決まるpresetではありません。 →
- フィードバックFeedback フィードバック(feedback)とは、user actionやsystem changeに対して、何が起きたか・結果がどうなったかを人が知覚できる形で返す情報です。visual change、text、sound、hapticsなど複数のmodalityを使えます。単なるanimationやnotificationではなく、actionの受理、成功・失敗、進行、修正可能性などを理解できることが目的です。 →
- フィルライトFill Light フィルライト(fill light)とは、key lightなどが作るshadow側へ光を補い、明暗差やshadow detailの残り方を調整する役割の光です。独立したlampだけを意味せず、reflectorやenvironmentからの光が同じ役割を担う場合もあります。 →
- フォーカスを隠さないFocus Not Obscured フォーカスを隠さない(focus not obscured)とは、keyboard focusを受けたcomponentが、author-created contentによって完全に覆い隠されないようにすることです。WCAG 2.2 Success Criterion 2.4.11(Level AA)は、focused componentが完全に隠れないことを求めます。focus indicator自体の見た目やfocus順序とは別に、sticky header、cookie banner、drawerなどのoverlayとの空間関係を確認します。 →
- フォーカス順序Focus Order フォーカス順序(focus order)とは、keyboardなどでfocusable componentを順次移動する時の順序です。WCAG 2.2 Success Criterion 2.4.3(Level A)は、そのnavigation sequenceが意味や操作へ影響する場合、meaningとoperabilityを保つ順序でfocusを受けることを求めます。必ずvisual layoutと一字一句同じ順序にすることではなく、論理的な関係を壊さないことが中心です。responsive layoutで見た目の位置関係が変わっても、この論理的な順序を再確認します。Dialogのinitial focusやfocus containment、close後のfocus returnのようなpattern固有のfocus managementは、この一般的な順序要件と区別して確認します。 →
- フォーカス表示Focus Indicator フォーカス表示(focus indicator)とは、キーボード操作などで現在どのUI要素がフォーカスを持っているかを視覚的に示す手がかりです。WCAG 2.2のSuccess Criterion 2.4.7「Focus Visible」(Level AA)は、キーボード操作可能なUIにフォーカス表示が見える動作モードを求めますが、Success Criterion名そのものとfocus indicatorという視覚表現を同義語にはしません。ブラウザ既定の表示を利用することもでき、独自装飾に置き換えること自体が目的ではありません。 →
- フォトモンタージュPhotomontage フォトモンタージュ(photomontage)とは、写真または写真複製を切り取り、組み合わせ、再配置して一つの画像や構成を作る方法です。collageの一形態として扱われることがありますが、主要な素材がphotographic imageである点が境界になります。 →
- フラットデザインFlat Design フラットデザイン(flat design)とは、digital interfaceでgloss、bevel、写実的なtexture、強い立体表現などを抑え、比較的平面的なgraphic treatmentを使うvisual-design styleの名称です。minimalismと頻繁に併用されますが、flat designは主に表面の見せ方を指し、minimalismはcontent・機能・layoutを何に絞るかという選択まで含むため同義ではありません。 →
- ブランドアイデンティティシステムBrand Identity System ブランドアイデンティティシステム(brand identity system)とは、logoだけでなく、typography、color、graphic element、image treatmentなど複数の視覚要素を、同じ組織・serviceとして認識できるよう一貫して運用するためのsystemです。単一のmarkや一枚のmoodboardより広く、媒体や表示条件が変わった時に何を維持し、何をvariantとして変えるかという関係まで扱います。Design Labでは主にvisual identityをsystemとして運用する側面を扱い、mission、value、voice、behavior等まで含みうる広義のbrand identity全体とは分けます。 →
- フルードレイアウトFluid Layout フルードレイアウト(fluid layout)とは、layoutの寸法や配分を固定pixel幅だけで決めず、利用可能な領域に応じて連続的に伸縮させる考え方です。percentage、flexible track、relative unit、min/max constraintなどを使い、breakpointごとの段階的な切替だけに頼らず中間幅にも適応させます。すべてを無制限に広げることとは異なります。 →
- プレインランゲージPlain Language プレインランゲージ(plain language)とは、対象読者が必要な情報を見つけ、理解し、利用できるように、言葉遣い、文章構造、情報の並べ方などを明快にするcommunicationの考え方です。単に短い文や易しい単語へ置き換えることではなく、誰が何を知り・判断・行動するための文章かに応じて、用語、文の複雑さ、見出し、まとまり、説明の順序などを調整します。Design Labでは主にWeb / UIや案内文のtextを対象にし、copywriting上のtoneやpersuasion technique全体を含む語としては扱いません。可読性(readability)が文章を読み進めやすい程度を扱うのに対し、Plain Languageは内容を理解して使えるcommunicationへ焦点を持ちます。 →
- ブレークポイントBreakpoint ブレークポイント(breakpoint)とは、available spaceの変化によってcontentやlayoutの関係を組み替えた方がよくなる境界です。responsive designではMedia Query等の条件として表現されますが、本質は「特定deviceの代表幅」ではなく、navigation、column、line length、control配置などがそのままでは成立しにくくなる地点を見つけることです。page全体ではviewport幅、component内部ではcontainer幅など、何のavailable spaceを基準にするかも設計判断に含まれます。 →
- フレーミングFraming フレーミング(framing)とは、有限のframeの中へ何を含め、何を外し、主題と周辺要素をどの位置関係で見せるかを決める構図上の判断です。cameraで撮る時だけでなく、画像をlayoutへ配置する時やcompositeを作る時にも起こります。croppingは既存画像の境界を切り直す操作であり、framingはより広い構図判断として区別します。 →
- フレームを埋める構図Fill the Frame フレームを埋める構図(fill the frame)とは、subjectがframe内で占める割合を大きくし、背景や周囲のnegative spaceを相対的に減らすcomposition techniqueの名前です。cropやcamera distanceと関係しますが、croppingという編集操作そのものとは区別します。 →
- プロセスカラーProcess Color プロセスカラー(process color)とは、商業印刷でcyan・magenta・yellow・blackなどのprocess inkを網点と分版で組み合わせ、目的の色を再現する方式・その色指定です。一般的なCMYK印刷では4色のprocess plateを使います。spot colorのように色ごとに専用のpremixed inkを用意する方式とは区別します。 →
- プロトタイプPrototype プロトタイプ(prototype)とは、完成品を作り切る前に、構造・表現・interaction・媒体適応など特定の判断を確かめるため、必要な部分を仮の形で外化した試作物です。paper sketch、static comp、clickable screen、実寸print等のどれも、確かめたい問いに十分ならprototypeになりえます。高精細なmockupや実装済み画面だけを指す語ではなく、fidelityは確認したい内容に合わせます。 →
- プロポーショナル数字Proportional Figures プロポーショナル数字(proportional figures)とは、1や8など各数字の字形に応じて横幅が異なるfigure spacingです。OpenTypeでは `pnum` featureで提供される場合があります。これは数字の横幅に関する分類であり、lining / oldstyleのような高さ・字形styleとは別軸です。 →
- ベースラインBaseline ベースライン(baseline)とは、typeface内で多くの文字がその上に置かれる想定上の基準線です。文字サイズの外枠や行の中央線ではなく、異なるfontやsizeを同じ行へ並べた時の垂直位置を理解する基準になります。descenderを持つ文字はbaselineより下へ伸びます。 →
- ベースライングリッドBaseline Grid ベースライングリッド(baseline grid)とは、複数の行やcolumnにまたがる文字のbaselineを、一定間隔で反復する水平線へ揃えるための組版上のgridです。個々の文字が乗るbaselineそのものとは別で、documentやtext frame全体のvertical rhythmを管理するための参照構造を指します。 →
- ベクター画像Vector Graphics ベクター画像(vector graphics)とは、point、line、curve、shape等を幾何学的な情報として記述する画像表現です。sourceのshape自体は固定pixel gridへ依存しないため拡大縮小に強い一方、screenに表示される時は最終的にdeviceのpixelへrasterizeされます。 →
- ベタ組Solid Setting ベタ組(solid setting)とは、日本語組版で漢字・ひらがな・カタカナ等の文字の外枠を、原則として追加の字間を入れずに接して配置する組み方です。letter-spacingを常に0にするというCSS上の単純な指定名ではなく、日本語組版における標準的な文字配置の考え方です。 →
- ボウルBowl ボウル(bowl)とは、b・d・o・p・Bなどでcounterを囲む、丸みを持ったclosed stroke部分です。内部の空間がcounterであり、その周囲を形成するstroke側がbowlです。 →
- ボケBokeh ボケ(bokeh)とは、lensがfocus外の点や領域をどのような形・輪郭・明暗のblurとして描写するかに関わる写真用語です。被写界深度が「どの範囲までfocusが合って見えるか」を扱うのに対し、bokehはその外側に生じるblurの描写特性を指します。日本語の一般語「ぼける」より狭いphotographyの用法です。 →
- ポジティブスペースPositive Space ポジティブスペース(positive space)とは、構成の中で主にsubject、shape、formなど実体として認識される内容が占める領域です。negative spaceとの関係で境界が成立し、単に「情報が置かれている場所」という意味だけではありません。 →
- ポストモダニズムPostmodernism ポストモダニズム(Postmodernism)とは、主に1970年代から1990年頃のart・design・cultureで顕在化した、Modernismが確立してきた規範や単一のstyleの権威を問い直す複数のapproachを指す名称です。一つのまとまったmovementや固定されたlookというより、high cultureとpopular culture、過去と現在、異なるstyleやmediumの境界を横断し、既存のstyleを意識的に引用・再構成する態度として説明されます。designではarchitectureやproductだけでなくgraphics、magazine、music videoなどを通じて広がり、1980年代のconsumer cultureやcorporate cultureとも結びつきました。ただし、派手・eclectic・装飾的という見た目の特徴だけへ還元できません。 →
- マッピングMapping マッピング(mapping)とは、controlとその結果、操作方向と変化方向、表示と対象などの対応関係です。良いmappingでは、どのcontrolが何へ作用し、操作するとどちらへ変わるかを推測しやすくなります。空間的な対応を使うnatural mappingは一つの方法ですが、文化的conventionや既習のpatternも関係するため「自然」という語を普遍的な唯一解として扱いません。 →
- マニュスクリプトグリッドManuscript Grid マニュスクリプトグリッド(manuscript grid)とは、pageやscreenの中に一つの主要なtext blockを置く、single-columnを基本としたgrid typeです。bookや長文documentで歴史的に使われてきた分類名で、主にformat edgeとtext blockのmargin関係によって構造が決まります。 →
- ミニマリストデザインMinimalist Design ミニマリストデザイン(minimalist design)とは、content、機能、視覚要素、色、typography、layoutなどで採用する要素を絞り、少ない構成要素で全体を組み立てるdesign approach / styleの名称です。flat designと頻繁に併用されますが、flat designが主に表面の見せ方を指すのに対し、minimalismは情報・機能・構成を何に絞るかという選択まで含みます。 →
- ムードボードMoodboard ムードボード(moodboard)とは、画像、色、texture、typography、material、motifなどのreferenceを集めて配置し、制作前または制作途中のvisual directionや世界観を探索・共有するためのreference artifactです。完成designそのものでも、固定されたstyle taxonomyでもありません。reference全体の雰囲気を模倣するのではなく、何を参考にしているのかを視覚要素や関係へ分解して扱います。 →
- メディアクエリーMedia Query メディアクエリー(Media Query)とは、viewport size、resolution、input capability、user preferenceなどのmedia featureが条件に合う時だけCSS等を適用する仕組みです。responsive layoutでは幅に応じたlayout変更へよく使いますが、Media Queryそのものは「mobile用CSS」という意味ではなく、環境条件に応じてpresentationを切り替えるための条件分岐です。 →
- メディウムMedium メディウム(medium)とは、作品や視覚表現がどの材料・形式・技術的な媒体によって成立しているかを示す分類です。photography、video、watercolor、print、digital imageなどのように使われます。何で作られているかを指す語で、具体的にどう操作したかを指すtechniqueとは分けて考えます。美術文脈では材料・媒材を強く指す場合もあるため、個別資料ではそのscopeを確認します。 →
- メンタルモデルMental Model メンタルモデル(mental model)とは、人がsystemやtaskについて「こう動くはずだ」と頭の中に形成している理解・予測のモデルです。経験、既知のconvention、説明、interfaceから得た手がかりによって形成され、実際のsystem構造と完全に一致するとは限りません。designerが直接作るobjectではなく、観察・調査し、conceptual modelやsystem imageを通じて適切な理解を支える対象です。 →
- メンフィス・グループMemphis Group メンフィス・グループ(Memphis Group)とは、Ettore Sottsassを中心にMilanで結成され、1981年にdebutしたdesign collectiveです。Modernistなgood tasteや抑制への反発を含むPostmodern design contextで、unconventional material、historical form、consumer culture、強いcolor / pattern等を自由に引用しました。squiggleやpastelのdecorative presetだけを指す名称ではありません。 →
- モーションブラーMotion Blur モーションブラー(motion blur)とは、露光している時間中に被写体またはcameraがimage plane上で相対的に移動し、その軌跡がblurとして記録される現象・表現です。focus外によるbokehとは原因が異なり、shutter speed、動きの速度・方向、camera movementなどに関係します。 →
- モーション軽減設定Reduced Motion Preference モーション軽減設定(reduced motion preference)とは、userがnon-essential motionを最小化したいというsystem-level preferenceを、UI側が検出してpresentationを調整できる仕組みです。Webでは`prefers-reduced-motion` media featureで扱います。これは「すべてのanimationを削除する」命令ではなく、必要な状態変化や情報を保ちながら、不要または強いmotionを減らすための入力条件です。 →
- モーション時間Motion Duration モーション時間(motion duration)とは、animationやtransitionが開始から終了まで進む時間です。durationはeasing、移動距離、変化するproperty、interactionの目的と組み合わせて知覚されるため、単一のms値だけで「速い・自然・使いやすい」を決めません。操作結果として必要なfeedbackと、補助的・装飾的なmotionの完了を同一視しないことも重要です。 →
- モジュラーグリッドModular Grid モジュラーグリッド(modular grid)とは、columnにhorizontal divisionsを加え、rowとcolumnの交差から反復するmoduleを作るgrid typeです。要素は一つのmoduleだけでなく複数moduleをspanできます。単なる正方形tileの集合ではなく、二方向の反復単位を持つlayout structureを指します。 →
- モダニズムModernism モダニズム(Modernism)とは、特に第一次世界大戦前後から戦間期にかけて、art、architecture、design、literatureなどで展開した複数のmovementや思想を覆う広い名称です。V&Aは、過去の様式から離れようとする姿勢、technologyやindustryへの関心、社会を新しいdesignで組み直そうとする志向などを共有する「緩やかなideaの集合」として説明しています。したがって、Modernismを一つの固定された見た目のstyleとして扱いません。 →
- モバイルファースト・レスポンシブデザインMobile-first Responsive Design モバイルファースト・レスポンシブデザイン(Mobile-first Responsive Design)とは、狭いviewportで成立する基本のcontentの順序とlayoutを先に定め、利用可能な幅が増えるにつれてcolumn、navigation、余白、並置などを段階的または連続的に加えていくresponsive designの考え方です。「mobile利用者の方が重要」という事業上の優先順位や、「desktopはmobile版を横へ広げればよい」という意味ではありません。狭幅でも広幅でも、それぞれの利用可能な空間に合わせて完成度を上げます。 →
- ユーザビリティテストUsability Testing ユーザビリティテスト(usability testing)とは、対象となる利用者またはそれに近い参加者に、prototypeや既存serviceで具体的なtaskを行ってもらい、その行動、つまずき、理解、taskを完了できるかなどを観察して、利用上の問題や改善仮説を見つける評価方法です。好みを尋ねるsurveyや「使いやすいと思うか」という感想収集だけとは異なります。また、少人数の参加者から得た観察を対象者全体へ統計的に一般化する方法でもありません。Accessibility testingとも重なりますが、WCAG conformanceを代替しません。 →
- ライニング数字Lining Figures ライニング数字(lining figures)とは、数字をおおむね大文字と同程度の高さに揃えて組むfigure styleです。OpenTypeでは `lnum` featureで提供される場合があります。これは数字の「高さ・字形style」の分類であり、各数字の横幅が同じか異なるかを示すproportional / tabularの分類とは別軸です。 →
- ラグ(行端)Rag ラグ(rag)とは、左揃え・右揃えなど非justifiedのparagraphで、各行の長さの違いによってできる不規則な行端の輪郭です。これはtext alignmentの結果として現れる形状であり、単に「揃っていない悪い端」を意味しません。column幅、語長、改行位置、hyphenation、trackingなどによって形が変わります。 →
- ラスター画像Raster Image ラスター画像(raster image)とは、規則的なgrid上に並ぶpixelの集合として表現される画像です。写真やpainted imageなど連続的なtoneを持つ画像に広く使われ、固定されたpixel dimensionsを持つため、表示・出力時の拡大率によってpixelが目立つことがあります。 →
- ラスタライズRasterization ラスタライズ(rasterization)とは、vector geometry、文字、3D scene等の記述を、指定されたpixel grid上のraster imageへ変換する処理です。どのresolution・scale・anti-aliasing条件でpixel化するかによってedgeやdetailの結果が変わります。 →
- リーディングラインLeading Lines リーディングライン(leading lines)とは、画面内の実線・輪郭・並び・方向性を利用して、注意を主題や特定領域へ導く構図上の手法です。直線だけでなく曲線や収束線も使えます。lineが存在するだけで視線誘導が成立するのではなく、どこへ向かい、他のhierarchy cueとどう関係するかを見ます。 →
- リサンプリングResampling リサンプリング(resampling)とは、raster imageのpixel dimensionsを変更するためにpixel dataを追加・削除し、新しいpixel gridへ値を計算し直す処理です。physical sizeやPPI metadataだけを変更してpixel countを保つ操作とは区別します。 →
- リズムRhythm デザインにおけるリズム(rhythm)とは、要素の反復や間隔の変化によって、視線の移動や構成の流れに一定のパターンを作ることです。規則的な反復だけでなく、間隔や大きさの変化を含むことがあり、内容の区切りや強弱と対応している時に意味を持ちます。 →
- リフローReflow リフロー(reflow)とは、viewportやzoom条件が変わった時に、contentが読み取り・操作できる形へ再配置され、不要な二方向scrollへ依存しないように適応することです。WCAG 2.2 Success Criterion 1.4.10(Level AA)は、縦方向にscrollして読むcontentでは320 CSS px相当の幅、横方向にscrollして読むcontentでは256 CSS px相当の高さで、情報や機能を失わず二方向scrollを避けて提示できることを求めます。二次元layoutを本質的に必要とするcontentには例外があります。単にdesktop layoutを縮小することとは異なります。 →
- ルビRuby Annotation ルビ(ruby annotation)とは、漢字などの親文字に対して読み、説明、発音等の短い注記を隣接配置する日本語組版の仕組みです。親文字との対応単位によってモノルビ、熟語ルビ、グループルビ等の考え方があり、縦組と横組で配置方向も変わります。 →
- レイアウトマージンLayout Margin レイアウトマージン(layout margin)とは、page、artboard、viewportなどformatの外周edgeと、主要なcontent areaまたはgridとの間に取る外側の空間です。grid内部のgutterやcomponent内部のpaddingとは位置が異なり、CSSのmargin propertyだけを指す用語でもありません。responsive Webではviewportの広さが変わるため、同じ比率や固定値をすべての幅へ機械的に維持するのではなく、content幅・行長・gridとの関係で調整します。 →
- レスポンシブWebデザインResponsive Web Design レスポンシブWebデザイン(Responsive Web Design)とは、同じWeb contentを単に拡大縮小するのではなく、利用可能なviewport、resolution、inputやmediaの条件に応じてlayout・typography・image・navigationなどの表現を適応させ、狭い画面でも広い画面でも読み取りと操作が成立するように設計する考え方です。mobile版とdesktop版を別々の完成形として考える場合でも、その間の幅を含めてcontentの意味・順序・機能が連続して保たれることが重要です。 →
- レスポンシブ画像Responsive Image レスポンシブ画像(responsive image)とは、viewportや表示サイズ、device pixel ratioなどの条件に応じて、適切な画像resourceや解像度を選んで表示する考え方です。同じ画像をCSSで縮小することだけではなく、必要以上に大きいresourceを送らないことや、表示条件に合うpixel densityを選ぶことも含みます。 →
- レスポンシブ画像のアートディレクションResponsive Image Art Direction レスポンシブ画像のアートディレクション(responsive image art direction)とは、画面条件に応じて同じ画像を単に縮小するのではなく、crop、aspect ratio、場合によっては画像source自体を変え、伝える情報や主題の見え方を保つことです。解像度だけを切り替えるresponsive imageとは別の判断です。 →
- レターマークLettermark レターマーク(lettermark)とは、ブランド名全体ではなく、頭文字やinitialsを文字要素として構成するlogo形式です。wordmarkが名称全体を文字で示すのに対し、lettermarkは略称・initialsを識別記号として使います。 →
- レタリングLettering レタリング(lettering)とは、特定の用途や構成のために文字の形を描く・構築する行為です。既成typefaceから文字を選んで組むtypographyや、反復可能な文字systemを設計するtype designとは異なり、個々のletterform自体をその制作物に合わせて作ることが中心です。 →
- ロゴマークLogomark ロゴマーク(logomark)とは、ブランドを表すgraphic symbolを、名称の文字列とは独立したmarkとして使う形式です。wordmarkやlettermarkのように文字そのものを識別要素にする形式とは区別します。 →
- ロゴロックアップLogo Lockup ロゴロックアップ(logo lockup)とは、wordmark、logomark、taglineなど複数のidentity要素を、決めた位置関係と比率で組み合わせた構成です。各要素そのものではなく、組合せ方を一つの再利用可能なvariantとして扱います。 →
- ワードマークWordmark ワードマーク(wordmark / logotype)とは、ブランド名や名称そのものを文字で構成したbrand identifierです。symbolだけのlogomarkとは異なり、名称のletterform・typeface・spacingなどが識別要素になります。既成typefaceを使う場合もcustom letteringで作る場合もあります。 →
- 影Shadow 影(shadow)とは、要素の周囲に明暗のずれやぼかしを加え、重なり・距離・境界などの空間的な手がかりを作る表現です。UIではfloating surfaceやoverlayのdepth cueとして使えますが、影そのものがelevationや重要度と一対一対応するわけではありません。offset、blur、spread、opacity、背景とのcontrast、他のdepth cueを合わせて判断します。 →
- 横組Horizontal Writing Mode 横組(horizontal writing mode)とは、日本語を横方向に読ませる組方向です。現代のWeb UIで一般的ですが、日本語組版上は縦組と並ぶ一つの組方向であり、約物、ルビ、欧字・数字、行や段の進行方向などに固有の配置条件があります。 →
- 黄金比Golden Ratio 黄金比(golden ratio / golden section)とは、二つの長さa > bについて、全体a+bと長い部分aの比が、aと短い部分bの比に等しくなる比率です。値は約1.618で、数学・美術・建築・design史の中で「golden section」「divine proportion」など複数の名前で語られてきました。designでは比率候補の一つとして参照されますが、それ自体を普遍的な美の公式とは扱いません。 →
- 可逆圧縮Lossless Compression 可逆圧縮(lossless compression)とは、圧縮したdataから元dataを完全に再構築できる圧縮方法です。PNGやlossless WebP等で使われます。情報を失わないこととfile sizeが小さいこと、visual用途に最適であることは別の判断です。 →
- 可逆性Reversibility 可逆性(reversibility)とは、userが実行したactionの結果を、必要に応じて以前の状態へ戻せる程度です。Undo / Redo、restore、取消可能な一時状態などが実装手段になります。error preventionが問題の発生前にerror-prone conditionを減らすのに対し、reversibilityはaction後の探索・修正・撤回を可能にする性質です。 →
- 可読性Readability 可読性(readability)とは、連続した文章を無理なく読み進めやすい程度を指します。個々の文字を識別できるかだけではなく、行長、行間、組版、文章そのもの、読者や利用状況など複数の条件に左右されます。内容の理解とも関係しますが同義ではなく、個々の字形や文字を見分けやすいかという判読性(legibility)とも同じ問題ではありません。 →
- 画角Angle of View 画角(angle of view)とは、cameraが一枚のimageとして取り込むsceneの角度範囲です。lensのfocal lengthだけでなくsensor / film sizeとの組合せで決まり、同じfocal lengthでもformatが変われば画角は変わります。被写体までの実距離における「どれだけの幅が写るか」というfield of viewとは厳密には別の表し方です。 →
- 画像解像度Image Resolution 画像解像度(image resolution)は文脈によって使い方が揺れる語ですが、画像編集・印刷では一般に一定のphysical lengthあたりへ割り当てるpixel数、つまりPPIとして扱われます。Webではpixel dimensionsやdisplayのdevice pixel densityまでまとめて「解像度」と呼びがちなため、何の密度・寸法を指しているか明示して使います。 →
- 階層型グリッドHierarchical Grid 階層型グリッド(hierarchical grid)とは、等間隔のcolumnやmoduleを反復することよりも、contentの優先関係や異なる領域サイズに応じてalignment zoneを組み立てるgrid classificationです。規則が見えにくい場合でも、要素間の位置・幅・間隔に再利用される基準がある点で、無秩序な自由配置とは区別します。 →
- 概念モデルConceptual Model 概念モデル(conceptual model)とは、systemの主要なobject、関係、action、stateがどのように働くかを、人が理解・予測できるようにする一貫した説明構造です。UI上ではlabel、mapping、feedback、navigation、状態変化などを通じて伝わります。userが実際に頭の中へ形成するmental modelそのものではなく、その理解を支えるsystem側の構造として区別します。 →
- 丸みRoundedness 丸み(roundedness)とは、形状の輪郭や角がどの程度曲線的に処理されているかという視覚特性です。UIではcorner radius、円形・pill形状、曲線的なstrokeなどとして現れます。丸みはcomponent同士の形の語彙や視覚的なまとまりに関わりますが、単一のradius値だけで印象や使いやすさが決まるわけではありません。大きさ、余白、線幅、周囲の形状、platformの慣習と合わせて判断します。 →
- 記号Sign (Semiotics) 記号(sign)とは、semioticsで、あるものが別の対象・概念・意味を指し示す働きを持つものです。word、drawing、photo、gesture、soundなど多様なものがsignになりえます。signの意味は形だけで自動的に決まらず、relationやcontext、conventionを通して解釈されます。 →
- 記号論Semiotics 記号論(semiotics)とは、言葉、画像、gesture、物体、interface表現などがどのように何かを指し示し、意味を作るかを扱う研究領域です。designでは「何が描かれているか」だけでなく、signとcontext、convention、interpretationの関係を分析するための基礎語彙になります。 →
- 輝度Luminance 輝度(luminance)とは、指定された点・方向における、投影面積あたりのluminous intensityを表す測光量です。単位はcd/m²で、displayの発光やsurfaceから特定方向へ届く光を物理的に扱います。人がどの程度明るく感じるかというbrightness、白との比較で表すlightness、WCAGのrelative luminanceとは別概念です。 →
- 技法Technique 技法(technique)とは、作品やvisualを作るために用いる具体的な方法・操作です。collage、photomontage、calligraphyなどはtechniqueとして語れます。何を材料・媒体として使うかを示すmediumや、表現全体の特徴を指すstyleとは別の軸です。 →
- 共通運命Common Fate 共通運命(common fate)とは、複数の要素が同じ方向・速度・変化パターンで動く時、それらを同じgroupとして知覚しやすくなるgrouping原理です。静的なsimilarityやproximityではなく、時間的な変化の共通性を手がかりにします。motionがあるだけでgroupingされるのではなく、他の要素との差と変化の対応関係が重要です。 →
- 共通領域Common Region 共通領域(common region)とは、同じ境界や面の内側に置かれた要素が、一つのgroupに属するものとして知覚されやすくなるperceptual groupingの原理です。proximityやsimilarityとは別の要因で、近接していても別の領域に分ければgroupingが変わりえます。UIではcard、panel、fieldset、section backgroundなどの「囲い」が情報構造を作る理由を説明できます。 →
- 強調Emphasis 強調(emphasis)とは、構成の中で特定の要素へ相対的に強い視覚的注意を向けることです。色、コントラスト、大きさ、位置、書体などによって視覚的な重みを増やし、焦点を作ります。強調は視覚的階層を作る手段の一つであり、すべてを目立たせることではありません。 →
- 禁則処理Japanese Line Breaking Rules 禁則処理(kinsoku shori)とは、日本語組版で特定の約物や文字が行頭・行末など不適切な位置に現れないよう、改行位置や字間を調整する処理です。代表例として句読点や閉じ括弧を行頭に置かない行頭禁則、開き括弧を行末に置かない行末禁則があります。 →
- 近接Proximity 近接(proximity)とは、要素同士の距離が、まとまりや関係性を知覚する手がかりになるperceptual groupingの原理です。一般に近い要素は同じgroupとして捉えられやすいため、余白の差を使って情報のまとまりを示せます。ただし距離だけで意味が決まるわけではなく、similarity、common region、alignment、contentなど他の手がかりと競合・協調しながら知覚されます。 →
- 具象表現Figurative Art 具象表現(figurative art / figuration)とは、人、物、風景など現実世界との認識可能なつながりを残す表現です。写実的であることと同義ではなく、変形や誇張があっても対象を読み取れる場合があります。抽象との境界は二択ではなく、作品や画像ごとに程度があります。 →
- 形Shape 形(shape)とは、二次元上で境界によって区別される平面的な領域です。線、色、明暗、materialの差などによって成立し、geometricかorganicかといった分類もできます。三次元的なvolumeを持つformとは区別して扱います。planeと意味が重なる場面もありますが、shapeでは「どんな輪郭・形として区別されるか」を主に見て、planeでは「どの面が画面を占め、分割・重なりを作るか」を見ると整理しやすくなります。 →
- 光の質Light Quality 光の質(light quality)とは、照明が対象へ作るshadow edge、highlight、明暗transitionなどの見え方を記述するための属性です。代表的にはhard lightからsoft lightまでの連続として語られ、光源の見かけの大きさ、距離、diffusion、反射環境などで変わります。ここでの「質」は良し悪しの評価ではなく光の性質の分類です。 →
- 構成主義Constructivism 構成主義(Constructivism)とは、1917年前後のRussian avant-gardeと革命後社会の文脈で展開し、artistを新しい社会のengineerとして捉え、artをsocial / utilitarian purposeへ接続しようとしたmovementです。red / black、diagonal、bold typeなど後世に引用されるgraphic featureだけで定義されるものではありません。 →
- 絞りAperture 絞り(aperture)とは、lens内で光を通す開口部と、その開き具合です。開口はsensorへ届く光量に関わり、depth of fieldにも関係します。写真ではf-number / f-stopで相対的な開口を表しますが、apertureという物理的な開口そのものとf-numberという数値表現は同一概念ではありません。 →
- 行間Line Height 行間(line height)とは、連続する行どうしの垂直方向の間隔に関わる組版条件です。伝統的な組版のleadingと密接に関係しますが、デジタル組版のline heightと同一の実装概念として扱いません。文字サイズ、書体、行長、言語、段落の密度などと組み合わさって読み進めやすさや行のまとまり方に影響します。広ければ常に読みやすいわけではなく、狭すぎても広すぎても行を追いにくくなりえます。 →
- 行長Line Length 行長(line length / measure)とは、段落内の1行が横方向にどれだけ続くかを表す読書条件です。文字数・glyph数や実際の表示幅として捉えられ、書体、文字サイズ、言語などと組み合わさって1行の見え方が決まります。長い行は次の行へ移る時に位置を保つことを難しくしうる一方、短くすると改行回数が増えるため、単一の値をあらゆる文章の普遍的な最適値として扱いません。responsive designではviewportが広がっても本文を無制限に伸ばさず、狭幅では文字サイズや内側余白との組み合わせも確認します。 →
- 講評Design Critique 講評(design critique)とは、制作物や途中案を、brief、制作意図、context、観察できる結果、既知の原理や制約に照らして記述・比較し、次の判断へ使える指摘や観察を作る評価活動です。単に「好き / 嫌い」「良い / 悪い」を表明することや、権威者が正解を決めることではありません。制作途中のpeer critique、self-critique、reviewなども、何を観察し、どの判断基準で相対評価するかが明確なら同じ役割を持ちます。 →
- 合字Ligature 合字(ligature)とは、2文字以上のcharacter sequenceを一つのglyphとして置き換えて表示するtypographic formです。Latin scriptではfiやflなどのstandard ligatureが代表的で、OpenType fontには装飾性の高いdiscretionary ligatureが含まれる場合もあります。文字コード上の内容を単純に一文字へ書き換えることとは別で、font featureによるglyph substitutionとして扱われることがあります。 →
- 国際タイポグラフィ様式International Typographic Style 国際タイポグラフィ様式(International Typographic Style)は、Swiss Styleとも呼ばれる、第二次世界大戦後のSwiss graphic designでZurichとBaselの教育・実践を背景に発展し、1950〜1970年代を中心に国際的に広がったmodernistなvisual-design styleの名称です。typographic grid、sans-serif typography、photography、asymmetrical composition、精密で秩序立った構成などが歴史的特徴として挙げられますが、それらを個別に使うだけで自動的にSwiss Styleになるわけではありません。秩序や可読性を重視した歴史的なdesign approachであることと、現在のdesignが文化的・内容的に中立であることも同義ではありません。 →
- 再認を想起より優先するRecognition Rather Than Recall 再認を想起より優先する(recognition rather than recall)とは、必要な情報・action・optionをinterface内で見える、または必要時に容易に参照できる形にし、userが記憶から正確に思い出す負担を減らすinteraction principleです。すべてを常時表示することではなく、taskに必要なcontextを適切な時点で外部化することが中心です。 →
- 彩度Saturation 彩度(saturation)とは、ある色がその色自身のbrightnessに対して、どの程度強い色みを持って見えるかという色外観属性です。CIEではchromaとは別概念で、CSSのHSLにあるsaturation componentもCIEの知覚属性そのものではありません。実制作では「彩度を上げる」という言い方が広く使われますが、どのcolor modelの何を動かしているかを確認して扱います。 →
- 三角構図Triangular Composition 三角構図(triangular composition)とは、複数のsubjectや主要なline・edgeを三角形に近い配置関係として組み、frame内にまとまりと方向性を作る構図です。実際の三角形を描く必要はなく、三つの主要pointや底辺と頂点の関係として知覚できる配置を扱います。安定感などの印象は構成全体に依存し、三角形であることだけから固定しません。 →
- 三点照明Three-Point Lighting 三点照明(three-point lighting)とは、key light、fill light、back lightという3つの役割を組み合わせて対象の明暗・立体感・背景との分離を組み立てるlighting setupの名前です。3灯の物理的なlightを必ず使うという意味ではなく、役割の組み合わせとして理解できます。 →
- 三分割法Rule of Thirds 三分割法(rule of thirds)とは、frameを縦横それぞれ三等分する3×3のgridとして捉え、主要要素を分割線や交点付近へ配置して構図を検討するguidelineです。中央配置を避けるための絶対ルールではなく、主役とnegative space、周辺要素の関係を比較するための出発点として使います。 →
- 仕上がりサイズTrim Size 仕上がりサイズ(trim size)とは、印刷物を最終的に断裁した後に残るページ・製品の寸法です。bleedはこの境界より外側へ延びる領域で、crop marksはこの断裁境界を示すために使われます。documentの外形寸法、bleed込みの出力範囲、画像のcropとは別の概念です。 →
- 指標記号Index (Semiotics) 指標記号(index / indexical sign)とは、Peirce系のsemioticsで、対象との実在的・物理的・因果的な関係を通して意味するsignです。煙が火を示す、足跡が誰かの通過を示す、といった関係が典型です。 →
- 視覚空間Space 視覚空間(space)とは、shapeやformの内部・周囲・相互の間にある視覚的または実在的な領域です。二次元構成ではpositive / negative spaceとして扱われ、perspectiveやocclusionによる奥行きのillusionもspaceの扱いに含まれます。 →
- 視覚言語Visual Language 視覚言語(visual language)とは、色、typography、shape、spacing、image treatment、layout patternなどが反復して使われることで成立する、一貫した視覚的な語彙と使い方の規則です。motifが特定の反復可能なvisual ideaを指すのに対し、visual languageは複数の表現要素をどう組み合わせ、役割づけるかまで含む広い体系を扱います。観察された特徴を記述するstyleや、conceptに対して具体的な制作判断を組織するart directionとは同一ではありません。 →
- 視覚的テクスチャVisual Texture 視覚的テクスチャ(visual texture)とは、平面上の画像・pattern・grain・strokeなどによって、rough / smooth、paper / fabricのような表面の質感を視覚的に感じさせる表現です。実際に触れられるphysical textureとは区別します。textureはvisual complexity、contrast、depth、motifへ影響しますが、特定の質感を特定の感情やbrand personalityへ固定対応させません。 →
- 視覚的パターンVisual Pattern 視覚的パターン(visual pattern)とは、形、色、間隔、方向、配置などの特徴が繰り返され、一定の規則性を持つまとまりとして知覚できる構成です。repetitionが「特徴を繰り返す操作」を指すのに対し、patternはその反復が作る認識可能な構造を指します。motifは繰り返し使える識別可能なvisual ideaで、必ずしも規則的なpatternになる必要はありません。rhythmはpatternや間隔の変化から生じるflowを扱うため、同じ概念ではありません。 →
- 視覚的メタファーVisual Metaphor 視覚的メタファー(Visual Metaphor)とは、ある対象・概念であるtargetを、別のsource domainの形・属性・関係を通して理解させる視覚表現です。単に二つの物を似せたり並べたりすることではなく、「何を何として見るのか」と、sourceからtargetへどの特徴を写しているかが意味の中心になります。 →
- 視覚的モチーフVisual Motif 視覚的モチーフ(visual motif)とは、一つの作品や複数の制作物をまたいで繰り返され、全体を関連づける識別可能な形・色・図像・処理などの視覚要素です。厳密なpatternとして一定間隔で並ぶ必要はなく、themeやbrand identityを支える反復可能なvisual ideaとして働きます。themeそのものの意味内容と、themeを可視化するmotifは分けて考えます。 →
- 視覚的レトリックVisual Rhetoric 視覚的レトリック(Visual Rhetoric)とは、画像、文字、図形、配置、空間などの視覚的な記号が、受け手に対してどのように意味・主張・立場を構成しているかを見る考え方です。視覚表現そのものをvisual rhetoricと呼ぶ用法と、その表現がどのように意味を伝えるかを分析する視点を指す用法があります。 →
- 視覚的奥行きVisual Depth 視覚的奥行き(visual depth)とは、平面的な表示の中でも、要素同士が手前・奥・重なりのどこにあるかを知覚できるようにする空間的な関係です。重なり、相対的な大きさ、位置、perspective、shadowなどがdepth cueとして働きます。UIではmodalやfloating surface、overlayなどの層関係を示すために使えますが、shadowの強さだけで奥行きが決まるわけではありません。 →
- 視覚的階層Visual Hierarchy 視覚的階層(visual hierarchy)とは、情報や要素の重要度・役割の違いが、知覚上の優先順位や強弱として分かるように構成された関係です。大きさ、コントラスト、位置、余白、書体など複数の手がかりを組み合わせて作られ、単に文字サイズを段階的に変えることだけを指しません。同じ情報でもviewportや配置条件が変われば、階層を保つための具体的な表現は変わりえます。 →
- 視覚的均衡Visual Balance 視覚的均衡(visual balance)とは、構成内の要素が持つ視覚的な重みが、全体として釣り合って感じられる関係です。大きさ、色、contrast、位置、余白などによって重みの感じ方は変わり、対称配置でも非対称配置でも均衡は成立しえます。したがって、視覚的均衡は「左右を同じにすること」と同義ではありません。また、すべての構成が強い均衡や安定感を目標にする必要はなく、意図的な緊張や偏りを選ぶ場合は、その選択とbalanceの成立を分けて考えます。 →
- 視覚的構成Visual Composition 視覚的構成(visual composition)とは、色、文字、画像、形、余白など複数の要素をframeやlayoutの中で配置し、全体として関係・優先順位・流れ・messageが成立するよう組み立てることです。個別のalignment、contrast、repetition、rhythm、emphasis、balance、unityなど一つの原理ではなく、それらを必要に応じて組み合わせた全体の構成を扱います。写真だけでなくWeb、poster、editorial、UIにも適用できます。 →
- 視覚的混雑Visual Clutter 視覚的混雑(visual clutter)とは、表示内の要素が過剰または整理不足になり、対象を探す、区切りを見分ける、必要な情報を識別するといった視覚的な処理を妨げる状態です。要素数が多いことだけでは決まらず、色・形・向きなどの特徴の競合、重なり、groupingの弱さ、配置の不規則さなども関わります。したがって、高い情報密度と視覚的混雑は区別して扱います。 →
- 視覚的重さVisual Weight 視覚的重さ(visual weight)とは、構成内の要素が相対的にどの程度「重く」感じられ、全体の均衡へどの程度の力を持つように見えるかという知覚的な関係です。物理的な重量や単純な面積ではなく、大きさ、明度差、色の強さ、contrast、密度・複雑さ、位置など複数の条件で変わります。視覚的均衡は、異なるvisual weightを持つ要素同士の釣り合いとして考えられます。 →
- 視覚的多様性Visual Variety 視覚的多様性(visual variety)とは、構成内の色、形、scale、texture、layoutなどに、どの程度知覚できる違いや変化があるかという性質です。要素数の多さやvisual complexityとは同義ではなく、少数要素でも差が大きければ多様に見えます。多様性は関心や区別を作れますが、統一感と無関係に増やすとばらつきや混雑として知覚されうるため、両者を分けて調整します。 →
- 視覚的統一感Visual Unity 視覚的統一感(visual unity)とは、構成を成す複数の要素が、ばらばらな部品ではなく一つのまとまりとして秩序立って見える程度です。共通する形状、色、spacing、alignment、repetition、symmetryなど複数の手がかりから生じます。すべてを同じ見た目にすることではなく、違いがあっても全体として関係性を読み取れる状態を指します。 →
- 視覚的複雑さVisual Complexity 視覚的複雑さ(visual complexity)とは、画面や構成を見た時に、どの程度多く・多様で・入り組んだ視覚情報があるように感じられるかという知覚的な特性です。要素数だけでなく、色や形の種類、配置の規則性、階層、画像量、文字量など複数の側面から生じます。情報密度や視覚的混雑と関係しますが、それらだけで決まる単一の尺度ではありません。 →
- 視線の流れVisual Movement 視線の流れ(visual movement)とは、要素の配置、方向、反復、間隔、強弱などによって、構成の中で注意がどの方向へ移りやすいように組まれているかを見る概念です。実際の眼球運動を測定した結果そのものではなく、構成上のdirectionやflowを設計・診断するための語彙です。animationとして物体が動くmotionとも区別します。 →
- 視点Point of View 視点(point of view)とは、sceneやobjectをどの位置・高さ・方向から見るかという観察位置の設定です。視点を変えると、見える面、relative size、重なり、perspective、foreground / backgroundの関係が変わるため、同じsubjectでも構図と意味の読み取りが大きく変わります。単なるcamera angleの装飾効果ではなく、空間関係を決める制作変数として扱います。 →
- 字間Letter Spacing 字間(letter spacing / tracking)とは、文字列全体または一定の範囲に対して、文字間を全体的に広げたり狭めたりする組版調整です。特定の文字ペアの間隔を個別に調整するカーニングとは目的と単位が異なります。字形、文字サイズ、ウェイト、言語、用途によって見え方が変わるため、固定値を普遍的な正解として扱いません。 →
- 字形のアパーチャAperture (Letterform) 字形のアパーチャ(aperture)とは、c・e・sなど部分的に囲まれたcounterが外側へ開いている開口部です。Photographyのapertureがlensの開口を指すのとは別概念で、type anatomyではopen counterの入口の広さや形を記述します。 →
- 字面Letter Face 字面(letter face)とは、文字を配置する外枠の中で、実際に黒みや線として見える文字図形が占める領域です。同じ文字サイズでも字面の大きさや位置は書体によって異なるため、数値上のfont sizeと見た目の大きさを分けて考える手掛かりになります。 →
- 遮蔽Occlusion 遮蔽(occlusion)とは、ある要素が別の要素の一部を隠すことで、隠している側を手前、隠されている側を奥として知覚しやすくするdepth cueです。単なるlayer順ではなく、輪郭がどこで途切れ、どの形が連続して見えるかという重なり関係が重要です。UIでも重なりはlayer関係を示せますが、操作可能性や重要度まで自動的に意味しません。 →
- 縦組Vertical Writing Mode 縦組(vertical writing mode)とは、日本語を縦方向に読ませる組方向です。文字だけを90度回転する方法ではなく、行・段・ページの進行方向、約物の位置、欧字や数字の扱いなどが横組とは異なります。WebではCSS writing mode等で実装されます。 →
- 縦中横Tate-chu-yoko 縦中横(tate-chu-yoko)とは、縦組の中で短い文字列だけを横組の向きのまま一つのまとまりとして配置する日本語組版の方法です。2桁程度の数字などでよく使われ、Latin文字や数字を1文字ずつ縦向きに並べる方法とは異なります。 →
- 書体Typeface 書体(typeface)とは、文字・数字・記号などのglyphを一貫した造形原理で設計した文字デザインです。weight、width、italicなど複数のstyleを含むfamilyとして展開されることがあります。歴史的・技術的にはtypefaceとfontを区別できますが、現代のデジタル制作では日常語として重なって使われるため、用語警察的に区別するより「字形設計そのもの」と「利用するfont resource / style」のどちらを話しているかを確認します。 →
- 書体の軸Typographic Axis 書体の軸(typographic axis / stress)とは、主に丸い字形で太細の変化がどの方向へ傾いているかを見るための形態的な軸です。calligraphicな書字由来の傾きが残る書体もあれば、Didoneのようにほぼ垂直な軸を持つclassもあります。文字列全体の傾きやitalic angleとは別概念です。 →
- 書体設計Type Design 書体設計(type design)とは、文字を一度描いて終わるのではなく、文章入力に反復して使えるtypefaceとして、文字集合・spacing・weightやstyleの体系などを設計する実践です。letteringが特定用途のletterform制作を中心とするのに対し、type designは再利用可能な文字systemを作ることが中心です。 →
- 焦点Focal Point 焦点(focal point)とは、構成の中で特に注意を集める中心的なareaやelementです。emphasisは焦点を作るための操作・関係、visual hierarchyは複数要素の優先順位全体を扱うのに対し、focal pointは「まず強く注目される場所がどこか」を見る概念です。一つに限定される必要はありませんが、複数の焦点が同じ強さで競合すると流れが曖昧になりえます。 →
- 焦点距離Focal Length 焦点距離(focal length)とは、lensの光学的な特性を表す距離で、通常mmで表記されます。写真では同じsensor / film sizeを前提にすると、短い焦点距離ほど広い画角、長い焦点距離ほど狭い画角になります。digital cropや撮影後の拡大はfocal lengthそのものを変更しません。 →
- 象徴記号Symbol (Semiotics) 象徴記号(symbol / symbolic sign)とは、Peirce系のsemioticsで、対象との関係が主にconvention、habit、social ruleなど学習された規則によって成立するsignです。word、数字、各種の慣習的symbolなどが典型です。 →
- 情報デザインInformation Design 情報デザイン(Information Design)とは、受け手が必要な情報を見つけ、関係を理解し、判断や行動へ使えるように、情報の選択・構造・順序・表現方法を設計する領域です。文章、表、diagram、data visualization、map、form、signなど複数の表現を含み、単に見た目を整えることや情報量を減らすことだけを指しません。 →
- 情報密度Information Density 情報密度(information density)とは、限られた表示領域に、どの程度の情報や操作対象が同時に見えているかという関係です。情報の総量そのものではなく「どの広さに、何を、どれだけ見せるか」を見る概念で、同じ内容でも画面サイズ、文字サイズ、余白、集約方法によって密度は変わります。高密度であることと視覚的に散らかっていることは同義ではありません。 →
- 色だけに依存しない情報伝達Use of Color 色だけに依存しない情報伝達とは、情報、action、responseの要求、要素の識別などを、色の違いだけで伝えないdesign principleです。WCAG 2.2 Success Criterion 1.4.1(Level A)は、colorを唯一のvisual meansとして使わないことを求めます。色を使ってはいけないという意味ではなく、text、shape、pattern、icon、positionなど別の手がかりも併用します。 →
- 色と感情の連想Color–Emotion Association 色と感情の連想(color–emotion association)とは、色や色名と、喜び・悲しみ・興奮・落ち着きなどの感情概念が、どのように対応づけられるかを扱う関係です。研究では一定の共有パターンが確認されていますが、多くは一色と一感情の固定対応ではなくmany-to-manyで、色相だけでなく明度・クロマ、言語・地理・文化、利用文脈によっても変わります。また「ある色が感情概念と連想される」ことと、「その色を見ることで実際に同じ感情が生じる」ことは別の主張です。 →
- 色の暖冷感Perceived Color Warmth 色の暖冷感(perceived color warmth)とは、色を「暖かい側」から「冷たい側」へ感じ分ける知覚的な次元です。近年の実験では、多くのobserverがorangish-red側をwarm、greenish-blue側をcoolとする連続的な軸を比較的一貫して示しています。色相と強く関係しますが、単なる色名分類ではなく、知覚されるsaturationなど他の色属性とも関係します。また、照明で使う物理的な色温度やcorrelated color temperatureとは別概念です。 →
- 色の同時対比Chromatic Induction 色の同時対比(chromatic induction)とは、隣接して同時に見える色刺激が互いの色の見えへ影響する現象です。同じ色値でも周囲の背景や隣接色によってhue、lightness、chromaなどが異なって知覚されえます。CIEではchromatic adaptationより即時的な現象として区別されます。 →
- 色域Color Gamut 色域(color gamut)とは、あるcolor spaceやdisplay、printerなどが表現・再現できる色の範囲です。たとえばDisplay P3はsRGBより広い範囲の色を表現できますが、指定した色が出力先のgamut外にある場合は、そのまま再現できずgamut mappingやclippingなどの変換が必要になります。広いgamutを使うこと自体が、常により良いデザインを意味するわけではありません。 →
- 色空間Color Space 色空間(color space)とは、色を数値の座標として表し、変換・比較・再現するための定義された座標系です。sRGB、Display P3、Lab、Oklab、OKLCHなどは、componentの意味、white point、transfer function、gamut、知覚的一様性などが異なります。同じ数値や同じcomponent名でも、別のcolor spaceでは同じ色・同じ見えを意味しません。特定の画像dataやdeviceの数値をcolor management systemがどう解釈するか記述するcolor profileとは役割を分けます。 →
- 色差Color Difference 色差(color difference)とは、2つの色が知覚上どの程度異なって見えるかを数値的に推定するための比較概念です。歴史的にΔEと呼ばれるformula群が使われ、Lab系のΔE2000やOklab上の距離など、採用するcolor space・formulaによって値の意味は変わります。色差は色の近さを評価する道具であり、意味・ブランド適合・contrast・アクセシビリティを一つの数値で判定する尺度ではありません。 →
- 色順応Chromatic Adaptation 色順応(chromatic adaptation)とは、照明やwhite pointなどが変わった時に、視覚系が色刺激の変化をある程度補償する過程です。そのため物理的・colorimetricに入射光が変わっても、物体の色をある程度安定して捉えられます。隣接色が即時に互いの見えへ影響するchromatic inductionとは時間特性と原因を分けて扱います。 →
- 色相Hue 色相(hue)とは、ある色が赤・黄・緑・青など、どの色みの系統として知覚されるかを表す色の属性です。lightness、chroma、saturationなどとは区別して扱います。Webのcolor spaceではhueを角度で表す場合がありますが、HSL・LCH・OKLCHなどcolor spaceが違えば同じ角度が同じ知覚色相を表すとは限りません。また同じlightness / chromaを指定しても、色相によって出力gamut内に収まる範囲は異なります。 →
- 色補間Color Interpolation 色補間(color interpolation)とは、2つ以上の色の間にある中間色を、選んだcolor spaceと補間方法に基づいて計算することです。同じendpointでも、sRGB、linear-light RGB、Oklab、OKLCHなど補間spaceが違えば途中の明るさ・chroma・hueの経路が変わります。gradient、animation、transition、color-mixなどで結果へ直接影響します。 →
- 新奇性Novelty 新奇性(novelty)とは、あるデザインが既知の例や期待と比べて、どの程度新しく・見慣れないものとして知覚されるかという性質です。奇抜さや使いにくさと同義ではなく、カテゴリらしさを保ちながら新しさを感じさせる場合もあります。典型性とは緊張関係を持ちますが、単純な一軸の反対語として扱いません。 →
- 図と地Figure–Ground 図と地(figure–ground)とは、視野の中である領域を「注目する対象(figure)」として、その周囲を背景(ground)として分けて知覚する関係です。contrast、輪郭、重なり、奥行き、過去経験など複数の手がかりが関与し、単に明暗差が大きいことと同義ではありません。UIではmodal、floating surface、textとbackgroundなど、どの層・対象を主として読ませるかを考える基礎になります。 →
- 制約Constraint 制約(constraint)とは、可能なactionや選択肢を限定し、何ができるか・できないかを絞り込むinteraction designの仕組みです。physical、logical、semantic、culturalなど異なる種類があり、UIではavailable option、入力範囲、step順序、既知のconventionなどとして現れます。制約はuserを不必要に拘束することではなく、誤りや迷いを減らすために可能性の空間を適切に狭める考え方です。 →
- 整列Alignment 整列(alignment)とは、複数の要素を共通の辺・軸・基準線などに沿わせ、位置関係に秩序や視覚的なつながりを作ることです。整列は要素の関係を読み取りやすくする手がかりになりますが、すべての要素を同じ中心線へ置くことや、対称にすることと同義ではありません。 →
- 線Line 線(line)とは、空間を通るpointの軌跡として捉えられる一次元的な視覚要素です。太さ、方向、長さ、曲率などを持ち、輪郭を作る場合も、分割・接続・方向感を作るために独立して使われる場合もあります。 →
- 線の太さStroke Weight 線の太さ(stroke weight)とは、輪郭線・icon stroke・dividerなどの線がどの程度太く描かれるかという視覚属性です。太さは境界の強さ、視覚的重さ、小サイズでの識別性へ影響しますが、太いほど明確・重要という単純な規則ではありません。線の長さ、色、contrast、corner処理、表示サイズと合わせて判断します。 →
- 線遠近法Linear Perspective 線遠近法(linear perspective)とは、平行な線が奥へ向かうほど近づき、vanishing point付近へ収束するように見える関係を利用して、2D上に距離や奥行きを表すdepth cueです。写真・illustration・3D表現では強い空間手がかりになりますが、すべての構図で消失点を目立たせる必要はありません。 →
- 前景・中景・背景Foreground, Middle Ground, and Background 前景・中景・背景とは、frame内の要素を観察者からの相対的な距離によって手前・中間・奥のlayerとして捉える構図の考え方です。複数の距離層を意識すると平面上でもdepthを構成しやすくなりますが、すべてのvisualに三層が必要なわけではありません。UIのz-index階層そのものではなく、主に画像・illustration・composite内の空間構成を扱います。 →
- 全角・半角Full-width and Half-width Characters 全角・半角とは、日本語組版で文字が占める幅を文字サイズとの比で捉える伝統的な幅の区分です。全角は概ね1em、半角はその半分の幅を基準とする語ですが、現代のUnicode文字やproportional fontでは「見た目が必ず正確に2倍」という意味ではありません。 →
- 操作ターゲットの大きさTarget Size 操作ターゲットの大きさ(target size)とは、ポインター入力で操作できる領域の寸法です。WCAG 2.2のSuccess Criterion 2.5.8(Level AA)では原則24×24 CSS px以上を求めつつ、十分な間隔、同等の別操作、文中リンクなど複数の例外を定めています。Level AAAの2.5.5では44×44 CSS px以上というより強い基準があります。見えているアイコンの大きさと実際の操作領域は同じとは限らず、viewport幅だけからmouseかtouchかを決めつけません。 →
- 操作の一貫性Interaction Consistency 操作の一貫性(interaction consistency)とは、同じ意味・role・stateを持つ要素が、product内や関連product間で同じ言葉・pattern・behaviorを保ち、さらに必要に応じてplatformやdomainの既知conventionとも整合することです。視覚的統一感が「まとまって見えるか」を扱うのに対し、interaction consistencyは「同じものが同じように振る舞い、予測できるか」を扱います。 →
- 相対輝度Relative Luminance 相対輝度(relative luminance)とは、WCAGでcontrast計算などに使われる、color space内の点の相対的な明るさを最暗の黒0・最明の白1へ正規化した量です。sRGBではlinearized RGB成分から計算されます。知覚上のlightnessやbrightnessを直接表す尺度ではなく、HSL lightnessやHSV valueとも別です。 →
- 対角線構図Diagonal Composition 対角線構図(diagonal composition)とは、主要なedge、line、subjectの並びなどをframeに対して斜め方向へ強く通し、水平・垂直中心の構成とは異なる方向性を作る手法です。diagonalはvisual movementやdepthを作るcueになりえますが、「斜め=dynamic」という固定印象ではなく、他の要素との関係で評価します。 →
- 対称Symmetry デザインにおける対称とは、ある軸や中心を基準に、要素や視覚的な重みが対応するよう配置された構成関係です。左右を同じように配置する鏡映的な構成が代表例です。対称は視覚的均衡を作る方法の一つですが、均衡そのものの定義ではなく、対称であれば自動的に良い構成になるわけでもありません。 →
- 題材Subject Matter 題材(subject matter)とは、作品やvisualが何を描き、扱い、物語上の焦点としているかを指します。人物、商品、都市、自然、出来事など「何が対象になっているか」の層であり、どんなstyleで描いたか、どんなsymbolic meaningを持つかとは分けて考えます。非具象的な作品では、明確なsubject matterを持たず、色・shape・material等のformal elementそのものが中心になる場合もあります。 →
- 段階的開示Progressive Disclosure 段階的開示(progressive disclosure)とは、頻繁に必要なprimary informationやactionを先に見せ、advanced・rare・context-dependentな内容を必要になった時にsecondary levelへ開示することで、初期状態の複雑さを抑えるinteraction patternです。単に情報を隠すことではなく、何を最初に見せるかと、隠れた内容の存在・開き方を発見できることの両方が重要です。 →
- 中央構図Centered Composition 中央構図(centered composition)とは、主要なsubjectやfocal pointをframeの中心付近へ置く構図です。symmetry、正面性、単一subject、強い幾何学形状などと組み合わせると構造を明確にしやすい一方、中央配置そのものが単調・初心者的という意味ではありません。三分割法と競合する「誤り」ではなく別の構成選択です。 →
- 抽象Abstraction 抽象(abstraction)とは、現実の物や場面をそのまま再現することから距離を取り、線、形、色、明暗、構造などの視覚要素そのものを前面に出す表現です。単に情報量を減らすことやminimalにすることとは別で、何をどの程度現実の対象から離して扱うかを見る概念です。 →
- 典型性Prototypicality 典型性(prototypicality)とは、あるデザインが特定のカテゴリの「代表的な例らしく見える」程度です。銀行サイト、EC、大学サイト、設定画面など、人がそのカテゴリについて持つ期待や既知の例との近さによって変わります。単なる見慣れや模倣ではなく、どのカテゴリを基準にするかで判断が変わるcontext-dependentな性質です。 →
- 点Point 点(point)とは、二次元のvisual field上で位置を示す最小単位として扱える視覚要素です。幾何学上のpointは大きさを持ちませんが、実際のdesignではdot、marker、小さなshapeなど知覚できるmarkとして現れます。単独では位置や焦点を示し、複数では間隔・反復・密度・方向・groupingの関係を作れます。 →
- 塗り足しBleed 塗り足し(bleed)とは、仕上がりの断裁線より外側まで背景色・画像・図形などを延ばしておく印刷用領域です。断裁位置のわずかなずれで紙地が見えることを避けるために設けます。必要量は印刷会社・製品・加工条件によって異なり、特定のmm値そのものがbleedの定義ではありません。 →
- 等幅数字Tabular Figures 等幅数字(tabular figures)とは、0〜9などの数字を共通の横幅で組めるよう設計したfigure spacingです。OpenTypeでは `tnum` featureで提供される場合があります。これは横幅の分類であり、lining / oldstyleのような高さ・字形styleとは別軸です。等幅lining、等幅oldstyleの両方がありえます。 →
- 配色スキームColor Scheme 配色スキーム(color scheme)とは、color wheel上のhue関係などを使って色の組み合わせ方を構造化する考え方です。monochromatic、analogous、complementary、split-complementary、triadicなどの名称があります。これはhue relationshipの分類であり、同じschemeでもlightness・chroma・面積・contrast・contextによって見えは大きく変わります。 →
- 白色点White Point 白色点(white point)とは、color spaceや観察・変換条件で基準となる「白」のchromaticityです。sRGBやDisplay P3、OklabはD65を基準とし、CIE Lab / LCHはCSSではD50を使います。異なるwhite pointを持つspace間で色を変換する時は、chromatic adaptation transformが関わります。白色点は単なる「画面の背景を白にする色」ではありません。 →
- 発見可能性Discoverability 発見可能性(discoverability)とは、userが「何ができるか」「どこから操作できるか」「必要な機能がどこにあるか」を、過度な探索や事前知識なしに見つけられる程度です。signifierは発見を助ける個別のcue、affordanceは可能な行為の関係であり、discoverabilityはinterface全体でそれらがどれだけ見つけやすく構成されているかを見る性質です。 →
- 発想展開Ideation 発想展開(ideation)とは、定義した課題に対して一つの解決案へ早く固定せず、異なる構造・表現・進め方の可能性を複数外化して探索する活動です。案の数を増やすこと自体が目的ではなく、比較できるほど異なる方向を作り、後のcritiqueやtestingで選択・統合できる材料を増やすことが目的です。完成度の高い一案を磨き続けることや、moodboardを集めることだけとは異なります。 →
- 判読性Legibility 判読性(legibility)とは、個々の字形・文字・単語などを視覚的に区別し、何であるか認識しやすい程度を指します。文章全体を読み進めて理解しやすいかという可読性(readability)とは関係しますが、判読しやすい文字で組まれているだけで文章全体の可読性まで保証されるわけではありません。 →
- 反復Iteration 反復(iteration)とは、案を作る・観察する・critiqueやtestingから学ぶ・判断を更新する、というcycleを繰り返してdesignを具体化することです。同じ作業を何度もやり直すことではなく、各cycleで何を確かめ、何が分かり、次に何を変えるかが対応していることが重要です。前の案をすべて捨てる場合だけでなく、部分的な修正、problem framingの見直し、別案への切替もiterationに含まれます。 →
- 反復Repetition 反復(repetition)とは、色、形、書体、間隔、部品などの視覚的特徴を繰り返し使うことです。繰り返しは要素間の共通性や一貫性を示し、パターンやリズムを作る手段になります。単に同じものを増やすのではなく、「同じ役割には同じ手がかりを使う」ことが重要です。 →
- 比率Proportion 比率(proportion)とは、構成内の部分どうし、または部分と全体の大きさ・長さ・面積などの相対的な関係です。スケールが要素の大きさの差を見るのに対し、比率は「幅と高さ」「本文とside column」「markとwordmark」など、複数のdimensionやpartの関係を見る概念です。同じ比率を保ったまま全体を拡大・縮小することもできます。 →
- 被写界深度Depth of Field 被写界深度(depth of field)とは、画像内で許容できるsharpnessとして見える手前から奥までの範囲です。aperture、focal length、focus distance、camera formatなど複数条件に関係し、浅い被写界深度では主題付近だけをsharpにして前後をblurさせやすく、深い被写界深度では広い距離範囲をsharpに保ちやすくなります。写真表現では注意とdepthを調整する手段になりますが、blur自体が必ず主役を明確にするわけではありません。 →
- 非テキストコントラストNon-text Contrast 非テキストコントラスト(non-text contrast)とは、UI componentやstateを識別するために必要なvisual information、またはcontent理解に必要なgraphical objectを、周囲から十分に見分けられるようにするアクセシビリティ上の考え方です。WCAG 2.2 Success Criterion 1.4.11(Level AA)では対象となるvisual informationに隣接色との3:1以上のcontrast ratioを求めます。文字のcontrast基準とは対象・例外が異なります。 →
- 非可逆圧縮Lossy Compression 非可逆圧縮(lossy compression)とは、元dataの一部を捨てたり近似したりしてfile sizeを減らす圧縮方法です。復号後に元dataを完全には再構築できません。JPEGやlossy WebPなどで使われますが、format名とcompression方式は必ずしも一対一ではありません。 →
- 非対称Asymmetry 非対称とは、軸を挟んで同じ配置を繰り返さず、異なる大きさ・形・位置などの要素を組み合わせる構成関係です。非対称でも、要素が持つ視覚的な重みを位置や大きさなどで釣り合わせれば視覚的均衡を作れます。単に要素が揃っていないことや、ランダムに置かれていることは、非対称の均衡を意味しません。 →
- 表意記号Ideogram 表意記号(ideogram / ideograph)とは、特定のsoundを直接表すことより、ideaやconceptを表すことを中心に説明される記号です。pictogramがobjectの視覚的描写を強く使う場合と対比されますが、実際のwriting systemやsymbolは複数の原理を含み、単純な二分法だけでは説明できません。 →
- 表象Representation 表象(representation)とは、人、物、場所、出来事、ideaなどを何らかの視覚形式で表すこと、またはその表された像を指します。現実に似せる写実だけを意味せず、figurative、stylized、symbolic、abstract寄りの表し方まで含めて「何をどのように視覚化しているか」を考える入口になります。文脈によって「再現」「描写」などと訳されるため、ここではそれらを含む広い観察概念として扱います。 →
- 不透明度Opacity 不透明度(opacity)とは、要素や色が背後の内容をどの程度透過させずに見せるかという合成上の属性です。日本語の制作会話では「透明度」が逆方向の値を指したり、opacityの意味で曖昧に使われたりするため、値を共有する時はopacity / alphaのどちらを指すか明示します。Webではopacity propertyとcolorのalpha componentの両方で透明性を扱えますが、element全体へopacityを適用する場合と、特定色だけへalphaを持たせる場合では合成結果や子要素への影響が異なります。 →
- 複合グリッドCompound Grid 複合グリッド(compound grid)とは、一つのformat内で複数のgrid systemを重ねる、切り替える、または異なるcontent領域へ割り当てる構成方法です。単一のcolumn / modular gridだけでは表現しにくい異なる情報構造を、複数のordering systemとして共存させる分類名です。 →
- 文字Character 文字(character)とは、digital textでletter、digit、punctuationなどを扱う抽象的な情報単位です。実際に表示・印刷する時に選ばれる字形の単位であるglyphとは区別します。一つのcharacterに複数のglyphが対応することも、複数characterのsequenceが一つのligature glyphとして描画されることもあります。 →
- 文字ウェイトFont Weight 文字ウェイト(font weight)とは、書体内で文字のstrokeがどの程度細く・太く設計されているかを表すtypographic propertyです。Webではfont-weightで指定できますが、同じ400や700でも書体ごとに実際の太さ・黒み・字形差は一致しません。variable fontではweight axisとして連続的に持つ場合もあります。ウェイトは強調や視覚的階層を作る一方、小さい文字・低contrast・細い書体では判読性にも影響します。 →
- 文字コントラストText Contrast 文字コントラスト(text contrast)は、文字または文字画像と背景の相対輝度から計算するコントラスト比によって、視覚的な差を評価します。WCAG 2.2のSuccess Criterion 1.4.3(Level AA)では、通常の文字は少なくとも4.5:1、大きな文字は少なくとも3:1を求め、ロゴや付随的な文字などには例外があります。これは構成全般の「コントラスト」とは対象と判定方法が異なります。 →
- 文字サイズFont Size 文字サイズ(font size)とは、文字を組む時に指定するtypographic sizeです。WebではCSSのfont-sizeなどで指定しますが、同じ数値でも書体のx-height、字面、weight、言語によって実際に見える大きさは変わります。文字サイズは判読性だけでなく、視覚的階層、行長、行間、情報密度とも連動するため、単独の正解値として決めません。viewportが変わる場合も、端末カテゴリごとに固定値を当てるだけでなく、実際の行長や階層との関係を見ます。 →
- 文字サイズ変更への耐性Text Resizing 文字サイズ変更への耐性(text resizing)とは、assistive technologyなしで文字を拡大しても、contentや機能を失わず読み取り・操作できるようにすることです。WCAG 2.2 Success Criterion 1.4.4(Level AA)は、captionsと文字画像を除き、原則として文字を200%までresizeできることを求めます。これはdefault font-sizeを特定px以上に固定する要件ではなく、拡大後のlayout・clipping・overlapも含めて確認する条件です。 →
- 文字の外枠Character Frame 文字の外枠(character frame)とは、日本語組版で文字を配置する基準となる外側の枠です。JLREQでは漢字・ひらがな・カタカナは原則として同寸法の正方形の外枠を持ち、その内側に実際の字面が配置されます。文字サイズと字面の見た目を分ける基準になります。 →
- 文字幅Font Width 文字幅(font width)とは、typefaceやfont faceが標準的な幅に対してどの程度condensed / expandedに設計されているかというtypographic propertyです。同じfont-size・weightでもwidthが変わると1行へ入る文字量、字形のproportion、見かけの密度が変わります。文字列をCSS transformで横方向へ潰すことと、幅用に設計されたfont face / variation axisを使うことは同じではありません。 →
- 並置Juxtaposition 並置(juxtaposition)とは、性質・意味・scale・時代・形・色などが異なる要素を近くに置き、その差や関係を同時に知覚させる構成手法です。contrastが要素間の視覚的な差そのものを扱うのに対し、juxtapositionは異なる要素を意図的に隣接・同一frameへ置いて比較や意味関係を生む配置を扱います。 →
- 閉合Closure 閉合(closure)とは、輪郭や形が一部欠けていても、要素が閉じたまとまりや完全な形を形成する方向へ知覚的にgroupingされる傾向です。すべての欠けた輪郭が自動的に補完されるわけではなく、配置、continuation、contrast、既知形状など他のcueとの組み合わせで成立します。 →
- 明るさBrightness 明るさ(brightness)とは、ある領域がどの程度多くの光を出す・通す・反射するように見えるかという知覚属性です。白との相対比較で表すlightnessとは別で、同じ物体色でも照明やdisplay luminance、surround、adaptationによってbrightnessの知覚は変わりえます。HSV / HSBのBrightnessやValueというcomponent名を、CIEのbrightnessとそのまま同一視しません。 →
- 明暗値Tonal Value 明暗値(tonal value / value)とは、visual artの基礎語彙で、色やtoneが相対的にどの程度明るいか暗いかを記述する軸です。CIE Lightnessやluminanceのような特定の測色量ではなく、作品内の明暗関係を分析するための一般的な造形語彙です。 →
- 明朝体Mincho Typeface 明朝体(Mincho typeface)とは、日本語書体の主要な系統の一つで、一般に漢字の横線が細く縦線が太いcontrastを持ち、線端にうろこ等の特徴を持つ書体です。欧文serifと構造上似た役割で説明されることがありますが、日本語の文字体系・書体史を持つ別の分類です。 →
- 明度Lightness 明度(lightness)とは、ある色が、同じように照明された白い領域と比べてどの程度明るく見えるかという知覚属性です。CIEではrelated colourに対して定義され、brightnessとは基準が異なります。LabやOKLCHのLはこの種の知覚的な明るさを扱うために設計されていますが、HSLのlightnessはRGB成分から作られた別のcomponentで、同じ値が異なる色相で同じ知覚明度になるとは限りません。 →
- 面Plane 面(plane)とは、二次元のvisual field内で高さと幅を持つ連続した平面的な領域として捉える視覚要素です。point・line・planeを基礎要素として扱うdesign教育では、lineが広がったり閉じたりして面を作るという関係で説明されることがあります。実制作では、色面、画像領域、背景surfaceなどが画面のどの範囲を占め、他の領域をどう分割するかを見るために使えます。shapeと意味が重なる文脈もあるため、両者をすべての分野で厳密に別分類できるとは限りません。 →
- 問題設定Problem Framing 問題設定(problem framing)とは、最初に与えられた要望や症状をそのままsolution taskとして受け取らず、調査で得た情報、対象、目的、制約、影響範囲を整理して「このprojectでは何を解く・伝える問題として扱うか」を定め直す活動です。design briefはその時点のchallengeや条件を共有するartifactになりえますが、problem framingは何をproblemとして切り出すかを考える行為そのものを指します。framingは制作中の発見によって更新されることがあります。 →
- 約物Japanese Punctuation Marks 約物(yakumono)とは、句点、読点、括弧、中点、区切り記号など、日本語組版で文字列の区切り・囲み・参照等に使う記号類の総称です。本文文字と同じ外枠を使う場合でも字面の位置や前後のアキ、行頭・行末での扱いが異なるため、通常の漢字・かなと同じspacingだけでは扱えません。 →
- 余白Whitespace 余白(whitespace)とは、文字、画像、UI部品など主要な要素が占有していない空間を、layout上のspacingや構成関係として扱う概念です。背景色が白である必要はありません。要素の分離、まとまり、焦点、リズム、均衡などに関わり、単なる「余った空間」ではありません。figureとgroundの関係から空いた領域自体のshapeを読むnegative spaceとは重なる場面がありますが、すべての文脈で同義ではありません。 →
- 様式化Stylization 様式化(stylization)とは、対象を自然な見え方そのままではなく、特定のstyleやconventionに沿って単純化・誇張・変形しながら表すことです。対象を認識できるまま形を変える場合も多く、abstractionや単純化そのものとは同義ではありません。 →
- 立体形態Form 立体形態(form)とは、visual artの基礎語彙ではlength・widthに加えてdepthを持つ三次元的な形態、または二次元画面上で三次元的に知覚される形態を指します。平面的なshapeとは区別されますが、分野によってformがより広い意味で使われることもあります。 →
- 両端揃えJustification 両端揃え(justification)とは、paragraphの各行をtext columnやframeの両端へ揃える組版方法です。実装ではword spacing、letter spacing、glyph scaling、hyphenation、composerなどの組み合わせによって行を満たすため、単に左右端が一直線なら同じ品質になるわけではありません。左揃えなどで生じるragとは異なるline-ending strategyとして扱います。 →
- 良い連続Good Continuation 良い連続(good continuation)とは、輪郭・線・配置が滑らかな経路や自然な延長としてつながる時、それらを同じまとまりや流れとして知覚しやすくなるgrouping原理です。単なる整列とは異なり、どの要素が同じ経路・輪郭として続いて見えるかを扱います。 →
- 類像記号Icon (Semiotics) 類像記号(icon / iconic sign)とは、Peirce系のsemioticsで、対象との類似性や共有するqualityを通して意味するsignです。portrait、diagram、対象に似せたpictorial symbolなどが典型例ですが、実際のsignはconventionなど複数の関係を併せ持つ場合があります。 →
- 類同によるグルーピングSimilarity Grouping 類同によるグルーピング(similarity grouping)とは、色、形、大きさ、向きなどの視覚特性が似た要素を、同じgroupに属するものとして知覚しやすくなるperceptual groupingの原理です。単に同じcomponentを繰り返すこととは違い、共通するvisual featureが関係性の手がかりとして働くことを指します。proximityなど他のgrouping cueと競合する場合もあります。 →
- 露出Exposure 写真の露出(exposure)とは、撮像面へ届いて記録される光の量に関わる撮影条件です。apertureとshutter speedが実際の露光量を変え、digital cameraではISO設定も最終的な画像の明るさやnoiseとのtrade-offに関わります。露出は知覚属性としてのbrightnessや物理量としてのluminanceそのものではなく、ISO値もsensorへ届く光量そのものではありません。 →
- 和欧文混植Japanese and Western Mixed Text Composition 和欧文混植とは、日本語の漢字・かなとLatin文字や欧文数字などを同じ文章・組版の中で併用することです。日本語文字の正方形を基準にしたspacingと、proportionalな欧文のword spacing・字幅が異なるため、単に同じfont sizeで並べるだけではbaseline、字間、見かけの大きさが揃わない場合があります。 →