こんにちは！駆け出しWebデザイナーのれーかです。

さかのぼること1年前、自分のやりたいことをどうしても仕事にしたくて「Webデザイナーになろう！」と一念発起したわけなんですが… 最初はわからないことだらけで、何から覚えればよいのやらさっぱりわかりませんでした。 そこで、今回は私がWebデザインの勉強をはじめて最初に覚えておいてよかったなと思う超基礎の用語を紹介しますね！

Webデザインとは

主にWebサイトの表面のデザインをすること。情報を適切に並べ、コンセプトに合わせて装飾をしていきます。PhotoshopなどのソフトでWebサイトの完成見本画像をデザインします。

Webデザインに必要なソフト

・Illustrator(イラストレーター)

Adobeのソフトで主にイラストやロゴなどの素材を描くのに向いています。伸び縮みさせても画像が荒れないのが特徴です。

・Photoshop(フォトショップ)

ピクセルの集まりで形成されている画像を編集するAdobeのソフトです。主に写真や画像の加工、レタッチに向いています。Webデザインにおいては、加工済みの写真やIllustratorで描いた素材をPhotoshopで適切に並べてデザインしていくという、連携作業をする場合が多いです。

プログラミング(コーディングを含む)とは？

デザインをインターネットで表示できる形に組み上げることです。 HTMLやCSSなどの言語の場合はコーディング JavaScriptやPHPなどの言語の場合はプログラミング と呼ばれることが多いです。このような言語のコードを記述することでWebサイトを組み上げていきます。

Web制作で使われる言語

・HTML

Webサイトを制作する上でもっとも基本的なコーディング言語です。 この言語をつかってインターネット上に文章と画像を表示します。 Webサイトの中には色々な種類の文章があり、一つ一つが情報です。タイトルや見出し、テキストなど重要度や種類ごとに区切りタグと呼ばれる印をつけます。HTMLで情報を整理することによって文章構造ができ、次のCSSの作業がしやすい状態になります。

・CSS

Webサイトの見た目を整えるコーディング言語です。 例えば、テキストに色をつけたり、余白を開ける、どの位置に画像を配置する、枠をつける などといったことができます。 HTMLで文章に付けたタグと呼ばれる目印に対して、CSSのコードを書いていきます。

・JavaScript

Webサイト上のパーツに対して動きをつけるためのプログラミング言語です。 HTML/CSSのみでも、Webサイトとしては成り立ちますがJavaScriptを使う事によってよりリッチに見せることができます。 ※よく似た用語で「Java」がありますが、まったく別のプログラミング言語です。

・jQuery

JavaScriptを使いやすくするためのライブラリと呼ばれるコード集です。 JavaScriptで記述すると複雑で難易度の高い内容のコードを、簡潔に記述できるテンプレートが用意されています。

・PHP

Webサイト内にシステム(問い合わせ/予約/会員の登録・ログインのフォームなど)を組み込んだりするプログラミング言語です。 ・WordPress PHPで組み込もうとすると複雑で難易度の高いシステムをWebサイトに簡単に組みこく事ができる。また、ブログのようにWebサイトの更新をしやすくすることもできる。

Web制作における職種とは？

Webを制作する一般的な職種を4つあげます。この4人が1チームとなり、ディレクション、デザイン、プログラミングを分業しリレー形式で1つのWebサイト制作を進めることが多いそうです。

・Webディレクター

Web制作のプロジェクトにおいて、監督や編集、スケジュール、予算を管理をする人です。 クライアントから要望やWebサイトで解決したい問題点などを聞き出し、Web制作に関わるスタッフ(Webデザイナー/フロントエンドエンジニア/バックエンドエンジニア)に仕事をふっていきます。最終的に出来上がったWebサイトをクライアントに納品する役目もあります。

・Webデザイナー

Webディレクターがクライアントから聞き出してくれた情報をもとに、WebサイトのデザインをつくるのがWebデザイナーです。使い手が見て良いデザインをつくのことはもちろん、情報を適切にレイアウトし使いやすさを考えてデザインすることも重要です。PhotoshopなどのソフトでWebサイトの完成見本画像をデザインします。

・フロントエンドエンジニア

画像であるデザインをインターネットで表示できる形に組み立てる役割です。 HTMLやCSSと行ったコーディング言語でデザインを再現した上で JavaScriptやjQueryなどのプログラミング言語を使ってWebサイトに動きをつけたりします。 ちなみに、HTML/CSSのみを扱う職種をコーダーと言います。

・バックエンドエンジニア

フロントエンドエンジニアに対して、サーバー側の設定やWebサイト内にシステム(問い合わせ/予約/会員の登録・ログインのフォームなど)を組み込むのが主な役割です。

まとめ

今回紹介したような超基礎の専門用語を知っておくことで、勉強を始める前の情報収集や学校選びに役立つはずです！

どんな業界でも、特殊な専門用語は付きものです。

自分でやってみないと、なかなか理解できないものも多いと思います。

今回は、初心者がなんとなくイメージしやすいような温度感で説明しました。 それぞれの用語の意味には幅があり、制作現場や人によって使い方や捉え方が微妙に異なる場合がありますので、勉強を進めていく中で色々な意味を吸収していきましょう！

「ここの意味にはこんな解釈もある。」

「私の会社ではこんなニュアンスでつかってますよ！」

「れーかにここの意味を説明してほしい！」

などございましたら、どしどしご連絡ください！

最後にデジタルハリウッドSTUDIO横浜についてご案内!!

STUDIO横浜は駅直結の好立地で学習ができます！

渋谷駅 – 横浜駅　約30分

茅ヶ崎駅 – 横浜駅　約25分

横須賀駅 – 横浜駅　約45分

武蔵小杉駅 – 横浜駅　約10分

川崎駅 – 横浜駅　約10分

乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！

神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪