無知なクライアントのための20のWebデザイン業界用語
Webデザイン業界では、私たちは多くを使用しています インサイダー用語. これは初心者を始めるのを難しくするだけではありません, 特にデザイン業界に関与していない顧客, しかし、それらの意味を適切に伝えることは時々かなりの挑戦になり得ます。.
この用語集では、まとめました よく使われる20のWebデザイン用語 そして、それぞれに簡単な説明を付け加えました。そうすれば、不確実な場合に誰でもすぐにそれらを見ることができます。 Webデザインの専門用語でクラッシュコースが本当に必要なクライアントがいる場合は、この記事を共有してください。.
“アニメーション”
Webデザイン手法 動きを加える 画面上の要素に 変化を視覚化する またはへ ユーザーの注目を集める.
アニメーションは 遷移よりも強力, 始点と終点の間でさまざまな状態を通過できるため、これらの目的に使用できます。 より複雑な効果.
“ブレッドクラム”
A ナビゲーションタイプ それはユーザーに彼らのことを知らせる 現在位置 サイト上.
パンくずリストには パス 現在のページにホームページからアクセスできる、通常は ホーム/カテゴリ/ページ. パスの各要素も クリック可能 ユーザーがすぐにできるように サイト階層内を移動する. パンくずリストは通常表示されます 各ページの上に.
“クラッタ”
Webデザインの失敗、aの指標 うまく設計されていないページ.
デザイナーがデザインを作成するときに雑然としたページについて話します。 あまりにも多くの情報を絞った 同じページ上に十分な空白を追加せずにコンテンツを適切に構成する。雑然としたページがあります 読みにくい, そして ユーザーエクスペリエンスに害を与える.
“カラースキーム”
A 調和のとれた色のコレクション を作成するために使用されます 認識できるブランドアイデンティティ.
通常同じ配色は 一貫して使用される ブランドのWebサイト、モバイルアプリ、ロゴ、およびマーケティング資料全体。配色は以下に従って設計することができます。 異なる原則, 単色、類似、補色、3色、その他の配色があります。.
“コントラスト”
デザイン手法 違いを強調する 役割や意味が異なる要素間.
を使う 補色 （カラーホイール上の反対）は、コントラストを表現するための最もよく知られている方法ですが、 視覚的な違い 区別したいページ要素の形状、スタイル、タイポグラフィ、またはレイアウトでも、対照的な効果が得られます。.
“空の状態”
Webサイトまたはアプリケーションの特定の状態 まだコンテンツがありません 特定のページでは、デザイン要素は すでに彼らの場所に.
空のプロファイルなどの初回使用状態は、空の状態ページの典型的な例です。それらは特定の設計技術（オンボーディング設計など）を必要とします。 ユーザーに知らせる ページに表示される内容について それらを励ます 特定の活動を実行する.
“固定レイアウト”
A レイアウトタイプ サイトとその要素 同じ幅を使う すべての解像度にわたって, 静的値で定義されている （通常ピクセル）.
Webサイトを構築するための伝統的な方法。固定レイアウトのサイトは、モバイル画面ではほとんど使用できない（読みやすい）ため、新しいWebサイトにはめったに選択されません。モバイルユーザーがアクセスしやすいように、多くの固定レイアウトサイトでは、 予備の携帯サイト.
“フラットデザイン”
A UI デザイン言語 清潔でシンプルなスタイルに焦点を当てています, また、複雑なテクスチャ、パターン、グラデーション、およびその他の派手な効果を取り除き、ユーザーを支援します。 内容にもっと焦点を当てる.
フラットデザインは、から生じるユーザビリティの問題で批判されています 立体性の欠如. より成熟した Flat 2.0デザイン言語, グーグルのマテリアルデザインのように、反応として現れて、フラットデザインに戻って少し深さを加えました.
“流体レイアウト”
A レイアウトタイプ それ 相対単位を使用 サイトの幅とその要素を定義する.
流動的なレイアウトに最も頻繁に使用される相対単位は 割合, しかし emの そして レムの 使用することもできます。流動的なレイアウト サイズ変更（伸縮） ビューポートの幅が変わると、レスポンシブレイアウトとは異なり、流動的なレイアウト メディアクエリを使用しない. とも呼ばれる 液体レイアウト.
“折る”
画面の表示部分の下側.
用語 “ひだの上” 訪問者が見ることができるWebページの一部を指します。 何もしないで, しながら “折り目の下” ユーザーができるページの残りの部分を指します。 サイトと対話することによってのみ到達する - 通常はスクロールやスワイプ（携帯）.
配置することをお勧めします ブランド要素 （ロゴなど）, サイト内ナビゲーション, そして 魅力的なコンテンツ ユーザーがサイトの目的をすぐに理解し、残りのコンテンツに興味を持つようにするため.
“グレースフルデグラデーション”
Webデザイン戦略 すべての高度な機能が含まれています サイトではデフォルトで設定されていますが、後で古いブラウザ、機能の低いデバイス、または低い帯域幅では機能しないものが削除または単純化されます。.
焦点 外観の詳細 内容よりも。モバイル時代には、プログレッシブエンハンスメントが新しいサイトの主なWebデザイン戦略になりました。 古いサイトや古いサイト.
“ヒーローイメージ”
特大 画像バナー 置いた ひだの上.
ヒーロー画像は、サイトのコンテンツに関連する高品質の、通常全幅画像です。それらの上に、通常あります 短い（1行または2行）テキスト ユーザーにメッセージを伝えます。 行動を促すボタン ショッピングやサイトへのサインアップなど、特定の行動を取るように彼らに要求します。.
“ランディングページ”
もともと任意のページ オンライン訪問者がサイトに入る. 最近では、この用語はむしろ、 特定のビジネス目的.
たとえば、Webユーザーがバナー広告をフォローしている場合、関連する商品を購入するように要求するランディングページに自分自身が頻繁に表示されます。の着陸ページ 単焦点 そして 行動を促す明確な より高いコンバージョン率に達する傾向がある.
“遅延読み込み”
画像やビデオなどの他の静的コンテンツをそれらの直前にロードする手法 ユーザーに表示される.
Webサイトが遅延読み込みを使用している場合、折り目より上の画像のみが最初に読み込まれ、残りはユーザーがページをスクロールした場合にのみ読み込まれます。レスポンシブデザインやモバイルデザインでよく使用されています リソースを節約. たとえば、Google AMPはモバイルサイトを次のようにスピードアップします。 静的リソースの遅延ロード デフォルトで.
“メディアクエリ”
作るCSS機能 レスポンシブWebデザイン デザイナーが作成することを可能にすることによって可能 さまざまなデバイス寸法に対してさまざまなデザイン （幅や高さ）、向き（横または縦）、メディアの種類（印刷、画面など）.
通常、レスポンシブサイト 別々のレイアウトがある デスクトップ、タブレット、モバイルの画面用 ブレークポイント それらの間にあります メディアクエリで定義 CSSに追加.
“プログレッシブエンハンスメント”
最初のWebデザイン戦略 基本要素のみを追加 サイトにアクセスすると、ブラウザ、帯域幅、およびデバイスで動作します。より高度なフロントエンド機能（スタイルと対話性）は レイヤにロード その後.
主にプログレッシブエンハンスメント 内容に焦点を当てます, あるサイトになります アクセス可能 そのため、すべてのユーザーにとって、携帯電話時代にWebサイトを構築する主な方法です（優雅な低下とは対照的に）。.
“レスポンシブデザイン”
Webサイトを作成するためのWebデザインアプローチ 寸法に合わせる 設計によるさまざまなデバイスタイプ（最も頻繁にはモバイル、タブレットおよびデスクトップ）の さまざまなレイアウトや他のスタイル （タイポグラフィ、画像サイズなど）.
レスポンシブデザインは、次のようなさまざまな技術を利用しています。 相対単位, フレキシブルグリッド, そして メディアクエリ すべてのユーザーに有用で読みやすくアクセスしやすいコンテンツを提供するため。最新のWebサイトのほとんどはレスポンシブデザインを使用しています.
“骨格変形”
を活用するUIデザイン言語 親しみの原則, そしてデザイン要素の作成に焦点を当てています。 実社会のものと似ている.
たとえば、次のような効果を使用して実際のボタンのように見えるボタン ベベルとエンボス、ドロップシャドウ、グラデーションなど. フラットデザインが主流になる前は、スキューモルフィズムが長年にわたって主要なWebデザインのトレンドでした。.
“遷移”
Webデザイン手法 簡単な変更を視覚化する 画面上の要素 スムーズに変更 開始状態と終了状態の間.
遷移とは - アニメーションとは異なり - 中間の状態を持たない、ただ 始点と終点, それ故にそれらはのために使用されるべきです 微妙な変化, 視覚化などに ホバーステート.
“ホワイトスペース”
の 空白 隣接するデザイン要素間とも呼ばれる ネガティブスペース.
余白はユーザーを助ける コンテンツを読み飛ばす, そして視覚的に コンテンツ階層を示します. 空白は必ずしも白ではなく、サイトの背景色を使用します。十分な余白がないと、 雑然としたページ.
