デザイナーを目指すなら知っておきたい基礎用語②

2021年06月03日

目次をチェック

よく使う基礎用語
SEO対策
まとめ

デザイナーを目指すなら、業務に必要な基礎用語を知っておきましょう。例えば「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で集客を行う際に欠かせない要素といえるでしょう。

まとめ

今回は、デザイナーを目指すならまず知っておきたい基礎用語をご紹介しました。用語には、似たような機能や言葉がありますが、より深く知ることで細かな違いを理解することができます。また、用語を理解することで視野が広がり、新しい見方やアプローチを行える可能性もあります。デザインを行う際は、さまざまな知識をデザインツールとして活用することが大切です。