市場価値診断ならミイダス!

Webディレクターの基本用語12選(初心者向け)

Webディレクターの基本用語12選(初心者向け)

ワイヤーフレーム(WF・ワイヤー)

ワイヤーフレームはWebサイトを作るときに使用するWebページ構成を表した線画です。
Webページの設計書になります。

ワイヤーフレームはWebページに必要な要素が書かれたもので、デザイン要素はありません。

ファーストビュー、コンテンツの流れ、キャッチコピー、見出し、導線などの構造面の設計書になります。

ワイヤーフレームをもとにクライアントに構成確認をして、内容が固まったらWebデザインを作ります。

Webディレクターの腕の見せ所。
大事な仕事です(Webデザイナーが作ることもあります)。

ワイヤーフレームはPower PointやAdobe XDなどのソフトで作ります。

レスポンシブデザイン

レスポンシブデザインはWebデザインの一つで、パソコン(PC)・スマートフォン(SP)・タブレットの各デバイスごとにデザインを最適化することです。

一つのHTMLファイルの中で、画面の表示幅に合わせて適用するCSSを切り替えることで、Webページ内の要素の表示・非表示、デザインの変更を行います。

HTMLファイルが一つであることで制作や更新、管理が用意になるメリットがあります。

現在のWebサイト制作の主流な方法です。
(Google推奨)

※レスポンシブデザイン以前のWebデザインは、パソコン用とスマートフォン用と分けてHTMLを作っていました

UI・UXデザイン

UIはUser Interface(ユーザーインターフェース)の略で、ユーザーとの接点という意味です。
具体的には、パソコンやスマートフォンの画面、ブラウザ、アプリなどのユーザーが操作する部分の「見た目」や「操作性」のことです。

UXはUser Experience(ユーザーエクスペリエンス)の略で「ユーザー体験」という意味です。
ユーザーが商品やサービスを通じて得られる体験のことです。
「欲しい情報がすぐに見つけられる」「ボタンが分かりやすい」「ストレスなく買い物ができる」「写真や説明文から購買意欲が高まる」などの体験を表します。

UI・UXデザインは、UIとUXを意識したデザインのことを指します。

Webサービスを利用するユーザーが質の良い体験(UX)をするためには、質の高い「見た目や操作性(UI)」が必要となります。
そのため、UIはUXの一部となります。

  • UX > UI

タイトル(title)

タイトル(title)はWebページの表題です。

タイトルはGoogleなどの検索エンジンでの検索結果画面で表示されるWebページのタイトル部分になります。
ブラウザのタブ名にもなります。

head内に記述するページの設定情報(meta)の一つです。

ページ内容を表す分かりやすく、キャッチーでクリックしたくなるような魅力的な名称をつけるのが重要です。

ディスクリプション(description)

ディスクリプション(description)はWebページの説明文です。

Googleなどの検索エンジンでの検索結果画面に表示されます。

head内に記述するページの設定情報(meta)の一つです。

検索しているユーザーはタイトルとディスクリプションを見てWebページを選んで見るため、Webページ内容を表し、読みたくなるような内容にすることが重要です。

キーワード(keyword)

キーワード(keyword)はWebページの特徴を表すキーワードのことです。

head内に記述するページの設定情報(meta)の一つです。

以前はキーワードを設定しておくとSEO対策として有効でしたが、現在は効果がなくなったためWebサイト制作においても記述することは少なくなりました。

OGP(オージーピー)

OGPはOpen Graph Protocolの略で、TwitterやFacebookなどのSNSでシェアしたときに表示されるイメージ画像やURL、タイトル、説明文などの設定情報のことです。

head内に記述するページの設定情報(meta)の一つです。

SNS用に最適なサイズの画像を作る必要があります。

Googleアナリティクス(GA)

Googleアナリティクス(GA)はGoogleが提供するアクセス解析ツールです。

計測したいWebサイトに設置して使用します。

WebサイトのPV数、訪問者数、滞在時間、直帰率、離脱率、使用デバイス、参照元、アクセスのある曜日や時間帯などのさまざまなデータが取得できます。

Webサイトを運営する上で欠かせないアクセス解析ツールです。

サーチコンソール(Search Console)

サーチコンソール(Search Console)はGoogle検索結果でのWebサイトの掲載順位を解析できるGoogleのツールです。

Webサイトがどんなキーワードで検索されているのか、Webサイトのインデックス状況、リンク状況、検索順位などを確認することができます。

CMS(シーエムエス)

CMSはContent Management Systemの略で、HTMLやCSSなどのコーディングをすることなくWebページを更新することができるシステムのことです。

CMSがあればプログラム知識がなくても新規ページの追加や既存ページの更新が容易なため、自社で運用したいときに最適なシステムです。

CMSはWordPressやMovable typeなどが有名です。

インクルード

インクルードはWebサイトの制作手法の一つで、ヘッダーやグローバルナビゲーション、サイドバー、フッターなどを共通パーツ化して管理する方法です。

共通パーツをページ内に含める(インクルード)という意味になります。

各ページに読み込む記述をすることで呼び出せるため、共通部分の更新・管理が簡単にできます。

インクルードのやり方にはいくつか方法があり、サーバー側でインクルードする場合はSSI(Server Side Include)と呼ばれます。

WBS(ダブリュービーエス)

WBSはWork Breakdown Structureの略で、Web制作の各工程を詳細に記載しスケジュール化したものです。

プロジェクトに必要な作業内容をすべて挙げて、各項目について制作スケジュールを記入します。

工程を1から順にガントチャートで表すことが多いです。

Excel、Googleスプレッドシート、Backlogなどのソフトで作ります。

まとめ

Web制作の専門用語は他にもたくさんあります。

慣れるまではその場で聞いたり調べたりしながら覚えるしかないので根気強くやっていきましょう。

Web業界はどんどん新しい言葉が登場するし、現場の独自用語なんかもあるので、適応力が大事ですね。

今回は以上です。

Webディレクターを目指している方はこちらの記事もどうぞ。

Webディレクターになるための勉強法
Webディレクターになるためのデザイン、プログラミング、SEO対策、Webディレクションの勉強方法を解説します。セミナーや勉強会を探せるサイトや、仕事を受けながら勉強する方法もあります。勉強がんばりましょう!