zuknow learn together

新しい教材を作成

Webデザイン用語

カード 65枚 作成者: もってぃー (作成日: 2015/06/22)

  • ECサイト (electronic commerce)

解説面  クリックしてカードを裏返す

アプリをダウンロードして、このコンテンツを学習しよう! AppStore / Google Play

教材の説明:

webデザイナーのための基礎用語をまとめました。

公開範囲:

公開

カテゴリ:

  • このエントリーをはてなブックマークに追加
  • 1

    ECサイト (electronic commerce)

    補足(例文と訳など)

    答え

    • "自社の商品(広義では他社の商品)やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである"

    解説

  • 2

    SVG (Scalable Vector Graphics)

    補足(例文と訳など)

    答え

    • "Webページ上で拡大縮小しても画質が劣化しない「ベクター画像」を表示する技術"

    解説

  • 3

    FTP (File Transfer Protocol)

    補足(例文と訳など)

    答え

    • ファイル転送プロトコル。"自分のコンピューター内にあるファイルを、他の人も閲覧できるようにWebサーバーにアップロードするための仕組み"

    解説

  • 4

    クラウド

    補足(例文と訳など)

    答え

    • "ファイルを自分のコンピューターではなく、インターネット上に保存する使い方やサービスのこと" インターネットにさえ繋ぐことができれば、自宅や会社はもちろん、外出先などさまざまな環境でデータを閲覧、編集可能。

    解説

  • 5

    コンバージョン

    補足(例文と訳など)

    答え

    • "商品購入、問い合わせ、資料請求、会員登録など、そのWebサイトにおいて獲得できる最終成果のこと" Webサイトへのアクセス数に対し、コンバージョンに結びついた件数の割合をコンバージョン率と呼びます。

    解説

  • 6

    CMS (Contents Management System)

    補足(例文と訳など)

    答え

    • "コンテンツを管理するためのシステムで、HTMLやプログラミングの知識がなくても、文章や画像を指定するだけで、あらかじめ用意されたテンプレートをベースにしたWebサイトを作成できる" WordPressが有名。

    解説

  • 7

    jQuery

    補足(例文と訳など)

    答え

    • "JavaScriptをより簡単に使えるように設計されたライブラリー(複数のプログラムを再利用可能な形でひとまとまりにしたもの)"

    解説

  • 8

    スライス

    補足(例文と訳など)

    答え

    • "デザインをパーツごとに分割し、切り取って画像を保存すること" 印刷物のデザインではそのまま印刷すればいいのだが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライスし、HTMLとCSSで組立ててWebサイト上に表示する

    解説

  • 9

    バックエンド

    補足(例文と訳など)

    答え

    • "ユーザーや他のシステムから見えないところでデータの処理や保存などを行う要素のこと" エンジニアやデベロッパーと呼ばれる人の活躍の場。Perl、PHP、Ruby、Java、Python等のプログラミング言語が用いられる。

    解説

  • 10

    バナー

    補足(例文と訳など)

    答え

    • "Webサイト上に表示される広告画像のこと" 駆け出しWebデザイナーはこのバナー画像制作の仕事を任せられることが多いとか。

    解説

  • 11

    パンくずリスト

    補足(例文と訳など)

    答え

    • "Webサイト内でユーザーが現在どの位置にいるかをわかりやすくするため、上位階層へのリンクを並べたリストのこと"「ホーム > 関東地方 > 東京 > 新宿」というように、「>」や三角などの印で区切られます。

    解説

  • 12

    フラットデザイン

    補足(例文と訳など)

    答え

    • "影や質感などを排除し、シンプルで平面的な見た目にするデザイン手法のひとつ" 単色・ベタ塗りで、鮮やかな色彩を用いることが多い。

    解説

  • 13

    フロントエンド

    補足(例文と訳など)

    答え

    • "ユーザーや他のシステムなどと直接データなどのやり取りを行う要素のこと" Webデザイナー、コーダーと呼ばれる人の活躍の場。HTML、CSS、JavaScript等が用いられる。

    解説

  • 14

    ミニマルデザイン

    補足(例文と訳など)

    答え

    • "デザイン手法のひとつ。見せたいものや伝えたいことの中から引き算をしていき、最小限度におさえたデザイン" 余分なものをそぎ落とすことで、ユーザーにより明確にメッセージを伝えることが可能です。

    解説

  • 15

    ユーザビリティ

    補足(例文と訳など)

    答え

    • "Webサイトの使いやすさのこと" ユーザーにストレスを与えることなく利用できるWebサイトを制作するため、あらかじめユーザビリティの面を考慮して設計していく必要がある。

    解説

  • 16

    レスポンシブデザイン

    補足(例文と訳など)

    答え

    • "様々なデバイスや画面サイズに、ひとつのファイルで対応させるWebデザインの手法のひとつ" デバイスごとに異なるファイルを用意する必要がないので、管理が楽になり、更新漏れなどを防止できる。

    解説

  • 17

    WordPress

    補足(例文と訳など)

    答え

    • "世界中で愛されているCMS。個人的なブログサイトはもちろん、企業ページやオンラインショップもこのWordPressで作成できる"

    解説

  • 18

    ワイヤーフレーム

    補足(例文と訳など)

    答え

    • "部屋の間取図のようなもので、Webページ内で「何を」「どこに」「どのように」表示させるかをまとめたもの" デザインを始める前に、このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズにすすむ。

    解説

  • 19

    ActionScrip

    補足(例文と訳など)

    答え

    • "Flashコンテンツに動的な処理を加えるためのプログラム" ActionScriptを記述することで、ユーザーの操作にともなって変化するようなコンテンツが制作できる。

    解説

  • 20

    アクセシビリティ

    補足(例文と訳など)

    答え

    • "「アクセスのしやすさ」のこと" 視力が低い方や視覚障害がある方や、使用デバイスがPCでないユーザーでも平等に情報を得ることができるかなどがアクセシビリティのポイントとして挙げられる。

    解説

  • 21

    SEM (Search Engine Marketing)

    補足(例文と訳など)

    答え

    • "検索エンジンからの訪問者を増やすためのマーケティング手法" SEOよりは広義に検索エンジンへの広告出稿等の施策も含めて扱われることが多い。SEMの手法の1つとしてSEOがある。

    解説

  • 22

    SEO (Search Engine Optimization)

    補足(例文と訳など)

    答え

    • "検索エンジン最適化。検索エンジンでキーワード検索がされた際に、検索結果としてより上位に自身のページを表示させるために工夫すること"

    解説

  • 23

    XML

    補足(例文と訳など)

    答え

    • "拡張可能なマークアップ言語という意味で、様々なデータを構造化、定義するためにあり、非常に多種多様な用途で利用されている" 厳密な文法があり、これをもとにHTMLの改良版であるXHTMLが作られた。

    解説

  • 24

    LP (Landing Page)

    補足(例文と訳など)

    答え

    • "Web上の広告や、検索結果等からのリンク先となるページ。つまり、ユーザーが最初に着地するページ" 必ずしもサイトのトップページとは限らず、広告からの訪問の場合は、それ専用のページを用意することもある。このページを工夫し、商品購入率や問合せ率の向上を図る。

    解説

  • 25

    デザインカンプ

    補足(例文と訳など)

    答え

    • "制作物の完成見本のこと" Web制作においては、HTMLやCSSのコーディングはまだされていない状態で、ページ全体のデザインが一枚の画像になっている状態を指すことが多い。まずはPhotoshop等でデザインカンプを制作し、クライアントのOKが出た後は、画像をスライス(切り出し)してコーディングに移っていくのが一般的。

    解説

  • 26

    PHP (Hypertext Preprocessor)

    補足(例文と訳など)

    答え

    • "サーバー側で動くプログラム" HTMLを動的に生成したり、データベースとのやり取りを行ったりできる。比較的覚えやすく、発展性が高いことから、Webアプリケーションの開発などでよく使われる。WordPress等のCMSもPHPで開発されている。

    解説

  • 27

    MySQL

    補足(例文と訳など)

    答え

    • "データベースの1つ。Oracle社が開発しており、無償で利用が可能なものと、有償のものがある" Webサイトのデータベースとして利用されることが多く、FacebookやTwitter等のサービスでも利用された事例がある。

    解説

  • 28

    リスティング広告

    補足(例文と訳など)

    答え

    • "一般的には検索エンジン等が提供するクリック課金型の広告のことを指す" ○○というキーワードが検索されたら、広告として何番目に表示されるか、というキーワードと順位に対して入札を行ない、クリックされた数に応じて課金される。

    解説

  • 29

    パララックス (多種スクロール)

    補足(例文と訳など)

    答え

    • "複数のレイヤーを違った速度でスクロールさせる事で「視差効果」を生み出し、奥行き感をディスプレイ上で表現する技術の事"

    解説

  • 30

    アピアランス属性

    補足(例文と訳など)

    答え

    • "アピアランスとはオブジェクトの外観のこと" Adobe Illustratorでは、アピアランス属性を変更することで、基本構造は変更せずに外観だけを変更することができる。

    解説

  • 31

    網点

    補足(例文と訳など)

    答え

    • "印刷において、スクリーンを用いて作られる規則的に並んだ小さな点の集まり" 写真や原画の濃淡を小さな点の大小で表現する。グラデーションの再現やカラー印刷に使われる。

    解説

  • 32

    アンシャープマスク

    補足(例文と訳など)

    答え

    • "ビットマップ画像に適用するシャープネス処理のひとつ。画像の輪郭をシャープにする"

    解説

  • 33

    テクスチャー

    補足(例文と訳など)

    答え

    • "画像への表面処理によって生まれるさまざまな質感のこと"

    解説

  • 34

    テーブルレイアウト

    補足(例文と訳など)

    答え

    • "HTMLのtableタグの特徴を利用して、HTMLだけでは難しい段組みされたレイアウトを実現する方法"

    解説

  • 35

    トグルボタン

    補足(例文と訳など)

    答え

    • "クリックすることでオン・オフを切り替えられるボタンのこと"

    解説

  • 36

    トラッキングコード

    補足(例文と訳など)

    答え

    • "サイトへの訪問データを取得するためにページに埋め込んでおくコードのこと"

    解説

  • 37

    パッチ処理

    補足(例文と訳など)

    答え

    • "あらかじめ設定しておいた処理手順をまとめて実行すること" 例えばRGBカラーモードのPICT形式の大量の画像ファイルを、Photoshopを使ってすべてCMYKカラーモードに変更してEPS形式に保存し直すというようなこと。

    解説

  • 38

    ピッチ

    補足(例文と訳など)

    答え

    • "等間隔に並んでいるものの間隔をピッチという" 字送りを文字ピッチ、行送りを行ピッチとも呼ぶ。

    解説

  • 39

    ベジェ曲線

    補足(例文と訳など)

    答え

    • "任意の複数の点を指定すると、その近傍を通る滑らかな曲線を描画することができる計算手法の一つ" Adobe Illustratorなどベクター形式の画像を扱うソフトで使用されている。

    解説

  • 40

    モックアップ

    補足(例文と訳など)

    答え

    • "「見た目、外観」を確認する為の、模型の事" web制作においては、「ワイヤーフレーム」や「ラフ画像」の事を指して「モックアップ」という事が多い。

    解説

  • 41

    リマインダー広告

    補足(例文と訳など)

    答え

    • "広告の受け手に商品やサービスを思い出してもらい、気づかせる目的で行う広告"

    解説

  • 42

    ルートディレクトリ

    補足(例文と訳など)

    答え

    • "階層型ファイル構造における最上階層のディレクトリのこと"

    解説

  • 43

    レイヤー

    補足(例文と訳など)

    答え

    • "ページ上に文字や画像のアイテムを作成すると、作成された順に層をなして重なっていく。このひとつひとつの層をレイヤー(layer、層)とよぶ"

    解説

  • 44

    レタリング

    補足(例文と訳など)

    答え

    • "文章・タイトルほか各種文字についておのおのの内容を考慮して字体の選定や文字を書くこと" 可読性・文体や訴求内容との適合性・美感・独自性・統一性など情報表現計画にそって決定され、広告・販促物制作において特に重要な構成要素である。

    解説

  • 45

    和文書体

    補足(例文と訳など)

    答え

    • "本で最初に活字が鋳造されて以来、明朝体が広く用いられてきた" 明朝体のほか、ゴシック体や丸ゴシック体が広告・販促物関係にも多く用いられている。

    解説

  • 46

    Sass

    補足(例文と訳など)

    答え

    • "Webページのレイアウトや修飾情報の指定に用いられるCSSを記述するための言語(メタ言語)の一つ"

    解説

  • 47

    SP (広告)

    補足(例文と訳など)

    答え

    • "広告活動全体をマスコミ4媒体による広告と、それを補完する広告活動に分けたとき、後者をSP広告と呼ぶ" 販促活動そのものをさす場合がある。SP広告には、交通広告、折込広告、DM、POP、展示、映像、屋外広告などがある。(sales promotion)

    解説

  • 48

    XHTML

    補足(例文と訳など)

    答え

    • "XMLをベースにHTMLを再定義した言語" HTMLにXMLの拡張性や汎用性をもたせ、将来のWebの基盤となる言語と言われていたが、HTML5の誕生により先行きが不透明になっている。

    解説

  • 49

    UI (ユーザーインターフェース)

    補足(例文と訳など)

    答え

    • "ユーザーとコンピューターの間で、情報をやり取りするための仕組み" ハードウェアではキーボードやマウス、ディスプレーなどを指し、ソフトウェアにおいては画面上でボタンをクリックするなどの操作方法や、ユーザーに提示するグラフィカルな各種の情報を指す。

    解説

  • 50

    タイポグラフィー

    補足(例文と訳など)

    答え

    • "デザインにおいて,活字の書体や,字配りなどの構成および表現"

    解説

  • 51

    メタ言語

    補足(例文と訳など)

    答え

    • "プログラミング言語の定義を行うための言語のこと" 言語記述言語とも呼ぶ。代表的なメタ言語の記法にBN記法があり、現在の多くの言語はこのBN記法で定義されている。

    解説

  • 52

    変数

    補足(例文と訳など)

    答え

    • 変数とは"「値につける名前」のことで、何度も同じ表記をする場合にコードを簡潔に書けるようにします"

    解説

  • 53

    モーショングラフィックス (MG)

    補足(例文と訳など)

    答え

    • 映像表現の手法の一つである。"従来の静止画としてのグラフィックスデザインに動きや音を加え、映像の形態を取った視覚表現である" 制作ソフトとしては主に、FlashやAfterEffects等が用いられる事が多い。

    解説

  • 54

    スキューモーフィズム (skeuomorphism)

    補足(例文と訳など)

    答え

    • "他の物質に似せるために行うデザインや装飾のこと" ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。

    解説

  • 55

    リアリズム

    補足(例文と訳など)

    答え

    • "グラデーションやハイライトテクスチャーなど、非常にこだわったリアルさを追求したデザインのひとつ"

    解説

  • 56

    ロゴタイプ

    補足(例文と訳など)

    答え

    • "ロゴのテキスト部分"

    解説

  • 57

    アッパーケース

    補足(例文と訳など)

    答え

    • "大文字"

    解説

  • 58

    アウターグロー

    補足(例文と訳など)

    答え

    • "外側の光彩"

    解説

  • 59

    アンチエイリアス

    補足(例文と訳など)

    答え

    • "文字や図系のギザギザした部分をなめらかに表示することで綺麗に見せる、コンピューターグラフィックスの表現手法"

    解説

  • 60

    パス

    補足(例文と訳など)

    答え

    • "Photoshopで使う「パス」とは、[ペンツール]で描く細い線のことを言います" 専門的には「ベジェ曲線」といわれる、摩訶不思議な線や塗り面を作成するための「セグメント」

    解説

  • 61

    マスク

    補足(例文と訳など)

    答え

    • "(Photoshopで)画像を直接編集せずに、画像の必要のない部分を覆って隠す機能" この機能を使って、選択範囲の作成、画像の調整、画像を切り抜いたように見せる事ができます。

    解説

  • 62

    ヒストグラム

    補足(例文と訳など)

    答え

    •  "画像の一番暗い部分から一番明るい部分までを複数段階に分け、全体でそれぞれの明るさの部分が、どのくらい存在するかを棒グラフで表示する機能のこと"

    解説

  • 63

    ラスタライズ

    補足(例文と訳など)

    答え

    • コンピューターのディスプレーやプリンターにデータを出力する際、"線や面などの図形要素で構成されるベクターグラフィックスを、ドットの集まりで表現するビットマップグラフィックスに変換すること"

    解説

  • 64

    クリッピングマスク

    補足(例文と訳など)

    答え

    • "アートワークをマスクの形にクリップ(切り抜き)して、その内側にあるエリアのみが見えるようにします"主に、画像から任意の箇所を切り抜いたように見せたり、画像の周りに表示される余白を透明にする場合に使用します。

    解説

  • 65

    アピアランスの分割(Illustrator)

    補足(例文と訳など)

    答え

    • "見せかけの形や効果を本物の形に変えること" アピアランスを分割することで個別の編集が出来る。(ハートを1つ1つを編集することができる。)

    解説

56726

セットの学習コンテンツ

公開初月で
60,000
ダウン
ロード!

無料アプリはこちら!

英単語をウェブサイト
からzuknowに簡単登録

覚えたい単語を選択するだけ!
簡単にzuknowに登録することが
できます

Get the free Chrome Extension

トップ