Magazine

Webデザイン業界でよく使うIT用語集

Webデザイン業界でよく使うIT用語集

今回はWebデザインを勉強する方向けに、デザイン業界でよく使うIT用語をまとめました。Webデザインでは、横文字がとにかくたくさん出てきます。これからWebデザインの学習を始める上で最低限知っておくべきデザイン用語についてまとめましたので、今回ご紹介させていただくワードの意味をしっかりと理解しておきましょう。



Webデザインソフト/システム/スキル編

使用するWebデザインソフトとプログラム、その役割についての重要なワードについて解説します。

Adobe Photoshop

Adobe Photoshop

Webデザインソフトで世界で最も使われているのがAdobe社が出しているPhotoshopです。Adobe Photoshopを使う事でWebデザイン、印刷物などのグラフィックデザイン、ロゴデザインなどあらゆる媒体のデザインを作る事が出来ます。

リリースから30周年を迎え世界で最も有名な最高峰のデザインソフトして多くの人に愛用されています。

Adobe illustrator

Adobe illustrator

Adobe illustratorは、ロゴ、印刷物のデザイン、イラストデータなどの制作に特化したデザインソフトです。illustratorの最大の特徴は、データを大きくリサイズしても劣化しないベクターデータである事です。サイズを引き伸ばす可能性のあるデータは、Adobe illustratorでデータを作成する事がとても多いです。

Adobe Dreamweaver

Adobe Dreamweaver

Adobe Dreamweaverは、Webデザインのコーディングをする際に使うソフトです。コーディング自体はテキストエディターでも編集可能ですが、Dreamweaverにはコードを予測して入力してくれる機能があります。作業の時短に繋げる事が出来るのでWebデザイナーはAdobe Dreamweaverでコーディングを行っている事がほとんどです。

Adobe XD

Adobe XD

Adobe XDは、モバイルアプリやWebデザインのソフトとして開発。AdobeのIDを発行する事で無料で使う事が出来ます。Photoshopと比べると作り込んだデザインはXDでは厳しいですが、ややシンプルなデザインを作る時に向いているソフトです。Webサイトを作る前に、ワイヤーフレームの作成にも活用する事が出来ます。

CMS(コンテンツマネジメントシステム)

CMSとは、Webにあまり知識のないクライアントでも気軽にサイトのコンテンツを更新追加することが出来る仕組みです。WebサイトにCMSを導入する事で、簡単にコンテンツページを量産する事が出来るようになります。

WordPress

WordPress

WordPressは、CMS(コンテンツマネジメントシステム)の中で最もシェアの多いシステムです。世界のサイトは約10億サイトあるといわれていますが、WordPressサイトはそのうち3/1を占めています。

前述させていただいた通りWordPressを導入する事で、Webサイトに知識がない人でも簡単にサイトを更新する事が出来るようになります。

PHP/MySQL

PHP MySQL

PHPはWebサービスを作る際にとてもよく使われているプログラム言語です。コードをシンプルに書く事が出来てとても人気があります。WordPressのシステムはPHPで構築されています。またMySQLというのはデータベースの事です。データベース(情報を一時的に保管しておく場所)に保存されたデータをPHPと組み合わせて取得する事もよくあります。

HTML5+CSS3

HTML5+CSS3

Webサイトをページとして表示する為の言語です。どのようなWebサイトもHTML5+CSS3をベースとして構築されています。

jQuery

jQuery

Webサイトに動きをつける事が出来る言語です。jQueryはJavaScriptをベースに作られていて、フェード、画像切替スライダー、スムーススクロールなど様々な効果を与える事が可能です。jQueryはデザイナーがゼロからプログラムを組む必要がなく、HTMLとCSSをカスタマイズする事で実装する事が可能です。

Webデザイン編

それではここからは、Webデザインの構築の過程でよく使うIT用語をまとめましたので参考にしてみて下さい。

ラフスケッチ

デザインソフトを使ってデザインを組む前に必ず手書きのラフスケッチを作成してチーム全体でゴールを決めます。この手書きレイアウトの事をラフスケッチと言います。

ワイヤーフレーム

ワイヤーフレームは、Webサイトの枠となるレイアウトの設計図の事です。ワイヤーフレームは手書きでも良いですし、Photshopまたはcacooというソフトを使う事でも作成する事が出来ます。

デザインカンプ

デザインカンプはAdobe Photoshopを使ってページの完成図のデザインを作る事です。

コーディング

完成したデザインを元に、画像を切り出してHTML5+CSS3を使ってページに変換していく作業の事です。WebデザインではAdobe Dreamweaverを使ってコーディングする事が多いです。

レスポンシブWebデザイン

PC、タブレット、スマートフォンなどの様々なデバイスの横幅にフィットするように作るWebデザインの事。近年のWebサイトでは、レスポンシブでのコーディングが主流となっています。

ユーザビリティ

ユーザーにとって使いやすさを示す言葉。Webサイトを作る時は常にユーザービリティを考えて構築する必要があります。

UI/UX

UI(ユーザーインターフェイス)の略で、ユーザーとのデバイスの画面に表示されているインターフェイスの事。

UX(ユーザーエクスペリエンス)の略で、ユーザー体験の事。提供されるサービスを通してユーザーがどのように行動するのかデザインすること。

ヘッダー/フッター/サイドバー/ナビゲーション

Webサイトデザインの上部のメニュー・ロゴがある部分をヘッダー。最下部のページトップへ戻る・コピーライトなどの部分をフッター。サイドにある記事一覧リンク。カテゴリー 一覧リンクなどがある部分をサイドバー。全主要ページへジャンプする為のメニュー 一覧の事をナビゲーションといいます。

メインビジュアル

トップページの一番目立つ所にあるエリアの事。切替式のスライダーなどを使う事が多いです。

デザインコンペ

大手広告代理店などの大きな仕事を獲得する為に各デザイン会社が作品を仕上げて競うコンペティションの事。

ランディングページ/LP

ユーザーに申込・資料請求など目的を達成する為に最適化されたページ。オンラインビジネスではLP制作こそが鍵となります。

工数

デザイン制作にかかる時間の事。

px(ピクセル)

Webデザインで一般的に使われる単位。

ブレイクポイント

PC・タブレット・スマホなど各デバイスの横幅に合わせてデザインを切り替えるポイントの事。

メディアクエリ

PCの横幅、タブレットの横幅、スマホの横幅それぞれの横幅のサイズの画面になった時のみ適用されるCSSの事。メディアクエリを使う事で、各デバイスに応じたデザインを適用する事が出来ます。

ヒアリングシート

クライアントとの初めてのミーティングの前に記入してもらうシートの事。クライアントの意向を確認する為に記入してもらうシート。ヒヤリングシートがある事でスムーズにプロジェクトを進める事が出来るようになります。

カラム

Webレイアウトの縦の分割する列の事です。2カラムなら2列レイアウト。3カラムなら3列レイアウトという意味になります。

ホバー/マウスオーバー

マウスが乗った時に加える効果の事です。マウスが乗った時に色を変えたり、フェード効果をつけたり、境界線を表示したり様々な効果を加える事が出来ます。

サイトマップ/サイトストラクチャー

サイトマップとは、サイト構築を始める前にサイト全体のページ構成を把握する為に作成します。どのようなページが必要なのかすべてをリストアップして一つのマップにする事でプロジェクトを円滑に進める事が出来るようになります。

Webディレクション

Webサイト構築を円滑に進める為に、クライアントとのやりとりを行ったり、デザイナー、コーダーへの指示を出す役割をディレクションと言います。

Google Chrome検証ツール

コーディングをする際に必須のGoogle Chrome検証ツールはコードを解析することが出来るツールです。コーディングを行う際にはプレビューを行うことを目的として必須のツール。

パンくず

パンくずとは、トップページから見て今自分がどのページにいるのかを表すことが出来る機能です。パンくずは、Webサイトを作る上でとても重要なナビゲーションになりますので、必ず実装するようにして下さい。SEOにも効果的です

まとめ

いかがでしたでしょうか?

たくさんのワードが出てきたと思いますが、デザイン業界では日常的に使われているワードにフォーカスしてご紹介させていただきました。これからデザイン業界に就職転職をされる場合は、これらのワードの意味を知っておく事はとても重要です。ぜひこの機会にそれぞれのワードの意味を理解しておきましょう。



The following two tabs change content below.
鳥取県米子市出身。大阪市在住。 株式会社STACK ONLINE 代表取締役。2018年11月に株式会社STACK ONLINEを設立し、デザインの教育事業を展開。デザイナー歴17年。好きなデザインはシンプルで力強いデザイン。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事一覧

最新の記事