新人Webディレクターが知っておきたい基礎用語

これからWebディレクターになるなら、現場で飛び交う専門用語は抑えておきたいですよね！
新人のうちからミーティングに参加することもよくありますが、知らない言葉だらけだとググるのも追いつきません。
さらに、新人は議事録を任されることもあるので、基礎基本の用語は予め頭に入れておくことをおすすめします。

今回は、日常の業務でよく使用する用語をまとめてみました。少しずつでもいいので言葉を覚えて、まずは先輩の話が理解できるようになりましょう。途中、私の経験談なども織り交ぜ、リアルな現場の様子をちょっとだけ紹介しています。ぜひ、参考にしてみてくださいね！

カタカナや英語を恐れずに、とりあえず覚えていこう！

Webの専門用語は、カタカナや英語が使用されていることも多く、それだけで覚えにくかったり、苦手意識を持ってしまうこともあると思います。
私もカタカナや英語は苦手なので、初めのうちは日本語で言ってくれー！と心の中で叫んでいました!　でも、知らず知らずのうちに耳が慣れて、何度か口に出して発音してみると口も慣れて、用語を使うことに抵抗がなくなります。みなさんも恐れず、仲良くお付き合いしていってほしいなと思います。

基礎中の基礎用語

ウェブ（インターネット）ブラウザ

ブラウザとは、Webサイトを閲覧するためのソフトのことです。
あなたがwebサイトを閲覧する時、パソコンでもスマートフォンでも、何らかのブラウザを立ち上げているから閲覧できているのですよ。ブラウザには、いくつか種類があります。お馴染みなのは、IE（Internet Explorer）ですね。
ですが、ウェブブラウザとしてのIEは、2022年6月にサポートが終了すると発表されています。
他にも、GoogleChrome、safari、Firefox、edgeなどがありますが、WEBディレクターはサイトの表示・動作確認のため複数のブラウザをパソコンに入れています。ブラウザによって表示が崩れたりすることもあるので、納品前には各種ブラウザや端末で目を皿のようにして確認しています。

ウェブサーバ

ブラウザでURLを入力すると、そのURLの先にあるWebサーバにファイルを要求（リクエスト）します。Webサーバはこの要求に対する応答として、ブラウザにファイルを送ります（レスポンス）。ブラウザは、受け取ったファイルの内容を解読して画面に表示します。

Webコンテンツを理解しよう

Webサイトは、静的コンテンツと動的コンテンツの2種類があります。

静的コンテンツとは

いつだれが見ても同じコンテンツが表示されるものが静的コンテンツです。
静的コンテンツは、htmlファイルで作られています。index.htmlなどの実態がサーバ上にあり、そのデータがそのまま表示されるWebページのことです。よって、表示速度が速いことがメリットになります。

動的コンテンツとは

Webサイトを訪れたユーザーや入力した情報に応じて、それぞれ異なるコンテンツを表示するのが動的コンテンツです。ECサイトや予約サービス、SNSなども動的コンテンツにあたります。
動的コンテンツでは、index.htmlなどの実態がサーバ上なく、コンテンツ情報はデータベースで管理し、プログラムからページを出力しています。
Webブラウザからのリクエスト(要求)に対して、Webサーバがプログラムを呼び出してリクエストに応じた結果(html)を返す仕組みです。
リクエストに応じて内容が変わるページを動的ページといい、動的ページ上の情報を動的コンテンツと呼びます。昔から馴染み深いものとしては、cgiなどのメールフォーム、BBS(掲示板)。最近では、WordPressなどのCMSが代表例です。
しかし、動的コンテンツはページを表示させるためにプログラムを呼び出しているため、表示に時間がかかるのがデメリットです。

Webサイト制作でよく使う用語

CMS

Content Management Systemの略。Webコンテンツを更新・管理するシステムのことで、文章や画像、レイアウトなどを更新管理するためのツールです。WordPressなどが代表例。

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

ランディングページというと、訪問者のアクションを誘導することに特化した縦長レイアウトのページを思い浮かべる人も多いかと思いますが、Google AnalyticsではWebサイトの中で訪問者が1番最初にアクセス（着地）するページのことをランディングページとしています。どちらもラインディングページの意味としては正しいものなので、両方覚えておきましょう。

キャッシュ

一度アクセスしたサイトの情報を一定期間ブラウザ上で保存する仕組みのこと。
2回目にサイトにアクセスした際に、保存した情報を表示することで表示スピードが速くなりますが、最新の情報を表示するにはキャッシュクリアが必要な場合があります。Webサイト制作をしていると、修正依頼を反映しても「直っていない」と言われることがよくあります。その場合は、だいたいがこのキャッシュの影響によるものなので、キャッシュクリアしてから確認するように案内してあげましょう！

リダイレクト

あるWebサイトを表示した際に、別のページに自動的に転送することです。
家を引っ越した時に、古い住所に届いた郵便も新しい住所に転送してもらえる手続きをすることがあると思いますが、それのWeb版がリダイレクトです。
たとえば、サイトリニューアルを行いURLを変更した際、お客様が古いURLをブックマークしていた場合などはサイトが表示されなくなってしまいます。そんな時でも、リダイレクトで新しいサイトが表示されるように設定しておけば、新旧どちらのURLでアクセスしても新しいサイトが表示されるようになります。

モバイルファースト

モバイルサイトから先に構築するという意味の言葉です。モバイル端末は画面が小さいことに加え、通信速度も必ずしも高速とは限りません。そのような環境でも快適に閲覧、操作できるようモバイルサイトから先につくることで、無駄のないWebサイトを開発することができます。普及が進んでいるスマートフォンやタブレットでの利用が快適になるよう、Webサイトやアプリケーションのデザインを最適化することは、もはや当たり前の時代です。例えば、マウスを使ってボタンをクリックするPCと、指で画面をタップするスマートフォンではボタンのデザインひとつとっても全く違ってきますよね。使う人のことを良く考えたデザインにすることが大切です。また、Googleの検索ロボットもスマホ向けサイトをインデックスするので、モバイルファーストで制作する方がSEOの面から見てもおすすめです。

レスポンシブウェブデザイン

モバイルファーストでの制作・開発が大切ということは上記で述べた通りですが、多様化するデバイスに対応するのは非常に大変でコストもかかります。それを解決するのが、レスポンシブウェブデザインです。PC、スマホ、タブレットなどユーザーが使用する端末が多岐に渡る中で、どのデバイスからでも見やすく、そして使いやすいようなデザインにすることをを指します。技術的には、情報は1つのHTMLでまとめ、位置や大きさ、装飾の部分をデバイスに応じたCSS（Cascading Style Sheets）で指定して、画面サイズによってデザインを切り替えます。
例えば、画面サイズが480px以上であれば「sp.css」を読み込め。
画面サイズが、760~1024pxであれば「tablete.css」を読み込め。
…という命令をCSS内に記述します。このデザインを切り替える基準となる数値をブレイクポイントと言います。

ワイヤーフレーム

Webサイト制作における設計図のようなものです。どこに、どのコンテンツを配置して、どのように動作させるかということを視覚的に表現します。
基本的にワイヤーフレームにはグラフィック要素は含まず、あくまで下書き、骨組みのイメージです。
Webディレクターはお客様の要望をヒアリングし、ワイヤーフレームと設計書を作成していきます。ワイヤーフレームの作成では、AdobeのXDなどを使用するとデータの共有やお客様の確認も効率的に行うことができます。

里芋の失敗談

新人の頃、ワイヤーフレームを作っていた際に、お客様がよりイメージしやすいようにと思って、ロゴやらコーポレートカラーをワイヤーフレームの中にぶち込み、先輩に怒られたという苦い経験があります。良かれと思ってのことでしたが、これってデザイナーさんの領域を侵食していることになるんですよね。みなさんも注意してください！

設計書

Webディレクターがワイヤーフレームと同時に作成するのが設計書です。
お客様も開発者たちも（デザイナーもフロントエンドエンジニア、バックエンドエンジニア、ディレクター、プロデューサー、ライターなど）、この設計書を見て内容の確認ができるようにします。そのため設計書には、サイト制作の概要や目的、お客様の想いといったところから、使用するドメイン、サイト/ページ構成、各ページのコンテンツ内容、テーマカラー、SEOの内部施策など事細かに記載し、齟齬がないように1つ1つ確認を重ね、認識の擦り合わせを行います。
この作業をおろそかにすると、お客様のイメージと違うサイトになってしまうため、ワイヤーフレームと設計書の作成と確認は、Webサイト制作での肝となる工程のひとつです。

余談ですが…

残念ながら、お客様はこの設計書の確認が甘いことが多いです…。読み合わせをして、きっちりディレクターが説明をして、合意を取っていても、あとから内容をひっくり返してくることがあります。やはり、デザインとしてビジュアルで見て、さらに実装されて動くサイトを見て、やっぱりこうしたい、あんな風にしたいという要望が出てくるのでしょう。ですが、できあがってから大幅な変更というのは、もう1サイト作るのと変わらないくらいの労力が必要となります。設計書の段階で、あとからどんでん返しがないように素晴らしい提案をすることがディレクターとしての腕の見せ所になります。

デザインカンプ

”Desing Comprehensive Layout” を略して、デザインカンプと呼びます。
ワイヤーフレームと設計書が固まったあとは、Webデザイナーがデザインカンプ（完成イメージ）を作ります。これを作ることで、さらにお客様は完成イメージを明確に把握することができるほか、ワイヤーフレームでは気付かなかった問題点などの発見にも繋がります。Webデザイナーによって様々ですが、IllustratorやPhotoshopで作成します。

サイトマップ

読んで字のごとく、WEBサイトにおける地図の役割を果たします。サイトマップがあれば、どこにどんな情報が記載されているかが、訪問者にも検索ロボットにも分かりやすくなります。ちなみに、人間が見てわかるサイトマップとGoogle Botに認識させるための「sitemap.xml」は別のものです。
Webディレクターの仕事においては、新規でWebサイトを制作する時も、リニューアルをするときも、このサイトマップ作成は必ず行います。
この棚卸作業を行うことで、制作しようとしているサイトの規模感を可視化したり、リニューアルの場合は既存サイトの構成調査にもなります。

まとめ

Webディレクター1年生向けによく登場する用語の一部を紹介しました。Webディレクターには、マーケティング、デザイン、プログラミング、SEOと幅広い知識が求められます。
今すぐそのすべてを習得することは難しいですが、学びを積み重ねること、先輩ディレクターの仕事を見てワザを盗むこと、そして案件をたくさん経験することが成長に繋がります。
まずは、自分の会社でも好きなお店のサイトでもいいので、設計書とワイヤーフレームをつくってみましょう。数をこなしていくと、Webサイトの構成やどんなコンテンツが必要か、そのサイトの目的は何か？などが分かってくるはずです。そして、新人でもできることはお客様のお話に真摯に耳を傾け、どんな想いやビジョンがあるのか、どんな業界なのか、苦労話や面白いエピソードなど色々聞き出してみましょう。そんな話の中にデザインやコンテンツのヒントが隠されていることもあるので、聞くチカラ、聞き出すチカラ、そのあたりも気にしてみてくださいね！