Webデザイン業界でよく使うIT用語集
今回はWebデザインを勉強する方向けに、デザイン業界でよく使うIT用語をまとめました。Webデザインでは、横文字がとにかくたくさん出てきます。これからWebデザインの学習を始める上で最低限知っておくべきデザイン用語についてまとめましたので、今回ご紹介させていただくワードの意味をしっかりと理解しておきましょう。
Webデザインソフト/システム/スキル編
使用するWebデザインソフトとプログラム、その役割についての重要なワードについて解説します。
Adobe Photoshop
Webデザインソフトで世界で最も使われているのがAdobe社が出しているPhotoshopです。Adobe Photoshopを使う事でWebデザイン、印刷物などのグラフィックデザイン、ロゴデザインなどあらゆる媒体のデザインを作る事が出来ます。
リリースから30周年を迎え世界で最も有名な最高峰のデザインソフトして多くの人に愛用されています。
Adobe illustrator
Adobe illustratorは、ロゴ、印刷物のデザイン、イラストデータなどの制作に特化したデザインソフトです。illustratorの最大の特徴は、データを大きくリサイズしても劣化しないベクターデータである事です。サイズを引き伸ばす可能性のあるデータは、Adobe illustratorでデータを作成する事がとても多いです。
Adobe Dreamweaver
Adobe Dreamweaverは、Webデザインのコーディングをする際に使うソフトです。コーディング自体はテキストエディターでも編集可能ですが、Dreamweaverにはコードを予測して入力してくれる機能があります。作業の時短に繋げる事が出来るのでWebデザイナーはAdobe Dreamweaverでコーディングを行っている事がほとんどです。
Adobe XD
Adobe XDは、モバイルアプリやWebデザインのソフトとして開発。AdobeのIDを発行する事で無料で使う事が出来ます。Photoshopと比べると作り込んだデザインはXDでは厳しいですが、ややシンプルなデザインを作る時に向いているソフトです。Webサイトを作る前に、ワイヤーフレームの作成にも活用する事が出来ます。
CMS(コンテンツマネジメントシステム)
CMSとは、Webにあまり知識のないクライアントでも気軽にサイトのコンテンツを更新追加することが出来る仕組みです。WebサイトにCMSを導入する事で、簡単にコンテンツページを量産する事が出来るようになります。
WordPress
WordPressは、CMS(コンテンツマネジメントシステム)の中で最もシェアの多いシステムです。世界のサイトは約10億サイトあるといわれていますが、WordPressサイトはそのうち3/1を占めています。
前述させていただいた通りWordPressを導入する事で、Webサイトに知識がない人でも簡単にサイトを更新する事が出来るようになります。
PHP/MySQL
PHPはWebサービスを作る際にとてもよく使われているプログラム言語です。コードをシンプルに書く事が出来てとても人気があります。WordPressのシステムはPHPで構築されています。またMySQLというのはデータベースの事です。データベース(情報を一時的に保管しておく場所)に保存されたデータをPHPと組み合わせて取得する事もよくあります。
HTML5+CSS3
Webサイトをページとして表示する為の言語です。どのようなWebサイトもHTML5+CSS3をベースとして構築されています。
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にも効果的です
まとめ
いかがでしたでしょうか？
たくさんのワードが出てきたと思いますが、デザイン業界では日常的に使われているワードにフォーカスしてご紹介させていただきました。これからデザイン業界に就職転職をされる場合は、これらのワードの意味を知っておく事はとても重要です。ぜひこの機会にそれぞれのワードの意味を理解しておきましょう。
最新記事 by 石原 誠之 (全て見る)
- お問い合わせフォームがスマホで拡大されてしまうのを防ぐ為のCSS - 2024年4月10日
- スマホで横スクロールが出た場合の解決方法 - 2024年4月3日
- Contact Form 7でお問合せ後にサンクスページにリダイレクトさせる方法 - 2024年2月10日
- inputボタンがiPhoneでダサいグラデーションになってしまう問題を解決するCSS - 2024年2月9日
- Webデザインの独学に必要な期間は6ヶ月に設定しよう - 2023年10月11日
この記事へのコメントはありません。