デザイナーを目指すなら、業務に必要な基礎用語を知っておきましょう。

例えば「HTMLやCSSでイメージを形に、JavaScriptやCodingで構築したものをSEO対策で成果につなげる」などは、デザイナーが頻繁に利用する用語です。

このような、基礎用語を知ることで、業務を円滑に進めることができるでしょう。

そこで今回は、デザイナーを目指すなら知っておきたい基礎用語をご紹介させて頂きます。

よく使う基礎用語

Web制作の現場では、基礎用語が頻繁に飛び交っています。

ここでは、プログラミングで使う代表的な用語をご紹介いたします。

 

 

HTML（エイチティーエムエル）

HTMLは、Hyper Text Markup Languageの略です。

Webサイトのコンテンツの構造を定義するために使われているコードです。

サイト上で右クリックを行い「ページのソース表示」を選択すると、閲覧しているWebサイトのHTMLを見ることができます。

コンテンツは、一連の要素で構成されており、タグで囲んだ文字をクリックした際のリンク先を指定するなど、一定の表示や動作を指定できます。

また、HTMLはマークアップ言語という分類になるため、入力内容に応じて表示を変えたり、自動で画面が更新されたりするような動的な処理は行えません。

 

CSS（シーエスエス）

CSSは、Cascading Style Sheetsの略です。

Webページで表示される際の表示・出力・再生についての指定ができる、スタイルシート言語です。

HTMLで記述した文章などに対し、CSSで文字のサイズや色を指定し、装飾することができます。

この2つの言語は、Web制作に携わる際に、必ず身につけたい知識です。

HTMLは、コンテンツの情報や構造を定義しますが、CSSはデザインを定義する言語であり、共に組み合わせて使用されます。

HTMLとCSSの知識を習得すると、簡単なWebサイトを制作できるようになります。

 

Coding（コーディング）

Codingは、本来プログラミング言語を使って、ソフトウエアの設計図を作成することです。

Webサイト制作では、HTMLやCSS、後述するJavaScriptを使ってデザイン通りにコードを指定し、表示できるようにします。

例えば、PhotoshopやIllustratorなどでつくったデザインを、Webサイトへ表示させるためにはコーディング作業が必要です。

近年は、管理・構築が行いやすいCMS（後述参照）の導入が増え、テンプレートの作成などもコーディングに組み込まれています。

 

 

 

 

CMS（シーエムエス）

CMSは、Contents Management Systemの略です。

Webサイトのコンテンツを構成するデータを保存・管理し、専門的な知識がなくても、更新やページの追加を行えるシステムです。

また、データベースに必要なデータを保存しておくと、閲覧デバイスに対応したテンプレートを表示できます。

CMSには様々な種類があり、それぞれ特徴を考慮して導入することで、効果的なWeb制作や運用が可能です。

中でもWord Pressは、個人から制作会社まで、世界中で広く利用されています。

 

LP（ランディングページ）

LPには、2種類の表現があります。

1つは、検索結果を経由して最初に表示されるページです。

2つ目はWebマーケティングの施策で、有料広告からリンク先に誘導することに特化し、何らかの目的達成のために表示されるページです。

どちらもアピールしたい商品・サービスに対し、ユーザーの興味や認知度を上げるよう働きかけ、コンバージョンまで完結させる目的があります。

このように、LPは売上を向上するために重要な役割を担っているのです。

 

JavaScript（ジャバスクリプト）

JavaScriptは、Webサイトに動作をつけるクライアントサイドスクリプトです。

この言語がなくてもWebサイトは見られますが、画面には文章や写真がそのまま表示されるだけで、何も操作はできません。

JavaScriptを使うとWebサイトに掲載している画像の拡大表示や、お問い合わせフォームの記入漏れチェックなどができます。

ほとんどのブラウザには、JavaScriptの実行環境が搭載されており、関連する内容を理解すると多くの機能を実現することができます。

 

レスポンシブデザイン

レスポンシブデザインを用いることで、複数の異なる画面サイズに合わせて、ページのレイアウト・デザインを柔軟に調整することができます。

ここ数年、モバイル端末の急速な普及により、Webサイトをモバイル画面に適した表示に対応させることで、宣伝効果を高める設計が必要になりました。

見やすい画面は、ユーザーエクスペリエンスが向上し、コンバージョンを促進します。

そのため、様々な構成要素を理解することで実例分析を行い、デバイスごとの規格変更に対応することが求められます。

 

ワイヤーフレーム

ワイヤーフレームとは、Webページのレイアウトやコンテンツの配置を定める設計図です。

ホームページに使うコンテンツを整理し、サイトの目的に応じた最適なレイアウトを採用します。

代表的なレイアウトには、カラムレイアウト・タイル型レイアウト・マルチカラムレイアウト・サイドバー固定レイアウトなどが、挙げられるでしょう。

ワイヤーフレームは、画面の情報を整理できるため認識を共有しやすく、作業のブレを防いだり、足りない要素をチェックすることも可能になります。

SEO対策

Webデザイナーを目指すなら、デザインやプログラミング言語のほかに、SEO対策も知っておきましょう。

例えば、ページ内文章にある見出しは、SEO対策に役立つ重要な要素です。

単に文字を装飾するだけでなく、「hタグ」を利用して見出し化することで、検索エンジンに表示されやすくします。

他にも、キーワードの選定やURLの正規化、内部リンクの構築、パンくずリストやソーシャルボタンなどを活用して成果につなげます。

SEO対策は、Webで集客を行う際に欠かせない要素といえるでしょう。

 

 

まとめ

今回は、デザイナーを目指すならまず知っておきたい基礎用語をご紹介しました。

用語には、似たような機能や言葉がありますが、より深く知ることで細かな違いを理解することができます。

また、用語を理解することで視野が広がり、新しい見方やアプローチを行える可能性もあります。

デザインを行う際は、さまざまな知識をデザインツールとして活用することが大切です。