Webデザイナーとして仕事を始めると、デザインやコーディングの知識だけでなく、仕事の中で当たり前のように使われる専門用語にも戸惑うことがあります。
私自身、Webデザイナーとして働き始めた頃は、
「カンプって何？」
「ステージング環境と本番環境ってどう違うの？」
「すり合わせって、具体的に何をすればいいんだろう？」
と、会話の中に出てくる言葉の意味が分からず困ることがありました。
しかも、周りの人が普通に使っている言葉ほど「今さら聞いて大丈夫かな？」と思ってしまうんですよね。でも、最初からWeb業界の専門用語をすべて知っている人ばかりではありません。
実際に仕事をしながら、「こういう意味だったんだ」と少しずつ覚えていく言葉もたくさんありました。
今回は、私がWebデザイナーの仕事をする中で、最初は意味が分からなかった・戸惑った専門用語を7つ紹介します。
これからWebデザイナーを目指している人や、仕事を始めたばかりの人の参考になればうれしいです。
1．カンプ
Webデザイナーの仕事を始めて、比較的早い段階で耳にしたのが「カンプ」という言葉です。
「このカンプをもとに作ってください」
「カンプと実際のページを見比べてください」
など、制作現場では普通に使われることがあります。
カンプとは、簡単にいうとWebページの完成イメージを作ったデザイン見本のことです。
実際に公開されるWebページを作る前に、文字や画像、色、余白、ボタンなどを配置して、完成したときにどのような見た目になるのかを確認できるようにします。
最初は「デザイン案」「完成イメージ」と言ってくれたほうが分かりやすいのに……と思ったこともありました。
実際の仕事では、このカンプを見ながらHTMLやCSSでページを作ったり、すでに作られているページとカンプを比較して修正したりします。
そのため、単純に「だいたい同じならOK」というわけではありません。
文字サイズや余白、画像の大きさ、色、位置など、細かな部分まで確認する必要があります。
Webデザイナーとして働くなら、比較的よく出てくる言葉なので、最初に覚えておくと安心です。
2．ステージング環境
私が特に「何のこと？」と思った言葉のひとつが、ステージング環境です。
ステージング環境とは、簡単にいうと本番公開する前にWebサイトの動作や表示を確認するための環境です。
実際にユーザーが見ているWebサイトとは別の場所で、修正内容を確認できます。
たとえば、
- 文章を変更する
- 画像を差し替える
- 新しいページを追加する
- レイアウトを変更する
- スマートフォン表示を確認する
といった作業をしたとき、いきなり公開中のWebサイトを変更するのではなく、まずステージング環境で確認することがあります。大規模なWebサイトになれば修正の影響も大きい場合もあるので、さらにステージングの環境で作業することが大事となります。
私も仕事を始めた頃は、
「これは触っていいサイトなの？」
「ここで修正したら一般の人にも見えてしまうの？」
と不安になることがありました。
特に会社によっては、「ステージング」「テスト環境」「検証環境」など、少し違った呼び方をすることもあります。名前だけで判断せず、分からない場合はどの環境で作業するのかを最初に確認することが大切だと感じました。
3．本番環境
ステージング環境とセットで覚えておきたいのが、本番環境です。
本番環境とは、実際にユーザーがアクセスしているWebサイトが動いている環境のことです。
つまり、本番環境で修正した内容は、そのまま一般の人が見るページに反映される可能性があります。私は最初の頃、「本番」という言葉を聞くだけでも少し緊張しました。
ステージング環境なら、多少失敗しても確認して修正できます。
しかし本番環境では、間違った文章を公開したり、画像が表示されなくなったり、レイアウトが崩れたりすると、その状態を実際のユーザーに見られてしまう可能性があります。
そのため、本番環境を触るときは、
「修正するページはここで合っているか」
「変更するのはこの部分だけでいいか」
「公開まで自分で進めていいのか」
などを確認するようにしていました。
慣れてくると当たり前になりますが、最初のうちはステージング環境と本番環境の違いをきちんと理解しておくことがとても大切だと思います。
4．レスポンシブ
Webデザインを勉強していると比較的よく出てくるのが「レスポンシブ」です。
レスポンシブとは、パソコン・タブレット・スマートフォンなど、画面サイズに合わせてWebページのレイアウトや表示を調整することです。
パソコンでは横に並んでいるコンテンツを、スマートフォンでは縦に並べたり、文字サイズや余白を小さくしたりします。
Webサイトはパソコンできれいに表示されていても、スマートフォンで見ると、
「文字がはみ出している」
「画像が大きすぎる」
「ボタンが押しにくい」
「横スクロールが出ている」
ということがあります。
そのため、Webデザイナーの仕事ではパソコンだけを見て終わりではなく、スマートフォンなどでも表示を確認する必要があります。
私も実際の仕事では、修正後に画面幅を変えて確認したり、ブラウザの検証ツールを使ってスマートフォン表示を確認したりしていました。
「レスポンシブ対応お願いします」と言われたら、いろいろな画面サイズで見やすくなるよう調整することと考えると分かりやすいです。
5．ワイヤーフレーム
「ワイヤーフレーム」も、Web制作ではよく聞く言葉です。
ワイヤーフレームとは、Webページのレイアウトや情報の配置を決めるための設計図のようなものです。
完成したデザインを作る前に、
「ここにメイン画像」
「ここに見出し」
「この下に文章」
「ここにボタン」
といったように、ページ全体の構成を決めます。最初は「カンプと何が違うの？」と思うかもしれません。大まかに分けると、
ワイヤーフレーム＝ページの構成や情報の配置を決めるもの
カンプ＝色や画像なども含めた完成イメージに近いデザイン
と考えると分かりやすいです。
いきなり完成デザインを作り始めるのではなく、まずワイヤーフレームで必要な情報や配置を整理してからデザインに進むと、方向性も決めやすくなります。
実際の仕事では、自分でワイヤーフレームを作る場合だけでなく、ほかの担当者が作ったものをもとにデザインすることもあります。
そのため、「ワイヤーを確認してください」と言われたときに何のことか分かるだけでも、仕事を進めやすくなります。
6．Git
Webデザイナーなのに、こんなものまで覚えるの？と思ったもののひとつが**Git（ギット）**です。
Gitとは、簡単にいうとファイルの変更履歴を管理するための仕組みです。
以前勤めていた会社はエンジニアが多く、Webデザイナーもエンジニアと一緒に仕事をする機会がよくありました。
Webサイトの修正では、デザイナーがHTMLやCSSを変更し、その内容をエンジニアに共有したり、エンジニアが修正したファイルを確認したりすることもあります。
そのたびに「どのファイルを修正したのか」「どこを変更したのか」を説明するのは手間がかかります。また、複数人でファイルを扱っていると、修正内容に行き違いが起こる可能性もあります。
そこで、変更履歴を残しながらファイルを管理できるGitを導入することになりました。
Gitというと、複数人で開発や制作をするときに使うイメージが強いかもしれません。
しかし、実際に使ってみると、一人でWebサイトを修正するときにも便利だと感じました。
たとえば、ファイル数が多いサイトで複数のページを修正していると、
「今回どのファイルを変更したんだっけ？」
「このファイルは今回の修正に含まれていたかな？」
と分からなくなることがあります。
特に修正範囲が広い案件では、HTMLやCSS、JavaScriptなど複数のファイルを触ることもあり、すべてを自分で覚えておくのは大変です。
Gitで変更履歴を管理していれば、自分がどのファイルを変更したのかを確認しやすくなります。
これはFTPで修正ファイルをサーバーへアップロードするときにも役立ちました。
変更したファイルをきちんと把握できていないと、必要なファイルをアップロードし忘れたり、反対に今回の修正とは関係のないファイルを間違えてアップロードしたりする可能性があります。
本番環境へのアップロードでは、ちょっとした間違いがWebサイトの表示崩れなどにつながることもあるため、できるだけミスは避けたいところです。
Gitで変更したファイルを確認できるようにしておくことで、アップロードするファイルの間違いや漏れといったリスクの軽減にもつながりました。
また、作業が終わったあとにほかの人へ報告するときも、
「このファイルとこのファイルを修正しました」
と、修正範囲を的確に伝えやすくなります。
大勢で同じWebサイトを扱うときの管理はもちろん、作業者が自分一人の場合でも、ファイル数や修正箇所が多い案件ではGitが役立つと感じました。
最初にGitを使うことになったときは、「Webデザイナーでもここまで覚えるの？」と思いました。
さらに、commit（コミット）、push（プッシュ）、pull（プル）、branch（ブランチ）など、Gitを使うために新しい言葉が次々に出てくるので、最初は難しく感じるかもしれません。
ただ、Webデザイナーがエンジニアと一緒に仕事をする環境では、Gitの基本的な仕組みを知っていると役立ちます。
最初からすべてを覚えようとするのではなく、実際の仕事で必要になった操作から少しずつ覚えていけば十分だと思います。
7．すり合わせ
最後は「すり合わせ」です。
これはWeb専門の技術用語というわけではありませんが、実際に仕事をしているとよく耳にする言葉でした。
「一度、認識をすり合わせましょう」
「デザインの方向性をすり合わせてから進めましょう」
などと言われることがあります。
すり合わせとは、簡単にいうとお互いの認識や考え方にズレがないか確認して、方向性を合わせることです。Web制作では、同じ修正依頼を見ても、人によって受け取り方が違うことがあります。
たとえば、「もう少し目立たせてください」という依頼ひとつでも、
文字を大きくするのか、色を変えるのか、余白を広げるのか、背景色を付けるのか、人によってイメージするものが違います。
ここを確認しないまま作業を進めてしまうと、完成してから、
「思っていたものと違います」となり、修正をやり直すことになります。
私も仕事をしていて、分からないまま最後まで作るより、早い段階ですり合わせたほうが結果的に仕事が早く進むと感じることが多くありました。
特にデザインは、文章だけでは細かなニュアンスが伝わりにくいことがあります。
チャットだけで分かりにくければ、参考サイトや画像を見せてもらったり、必要であれば直接話したりすることで、認識のズレを減らせます。
「すり合わせ」は難しい専門用語ではありませんが、Webデザイナーとして働くうえでは覚えておきたい言葉のひとつだと思います。
専門用語は最初から全部分からなくても大丈夫
Webデザイナーの仕事を始めると、今回紹介した言葉以外にも、知らない言葉が次々に出てくることがあります。
私も最初からすべて理解していたわけではありません。
分からない言葉が出てきたら調べたり、周りの人に確認したりしながら、実際の仕事の中で少しずつ覚えていきました。
特にWeb業界は、デザインだけでなく、コーディングやサーバー、CMS、Gitなど幅広い知識が関わってきます。
すべてを完璧に覚えてから仕事を始めようとすると、なかなか一歩を踏み出せません。
大切なのは、分からない言葉をそのままにせず、その都度確認することだと思います。
一度実際の仕事で使うと、「あのとき言っていたのはこれか」と理解できることも多く、少しずつ専門用語にも慣れていきました。
まとめ｜Webデザイナーの専門用語は仕事をしながら覚えていけばOK
今回は、私がWebデザイナーの仕事で最初に戸惑った言葉として、
の7つを紹介しました。
Webデザイナーとして働き始めると、聞き慣れない言葉が出てきて不安になることもあります。でも、一度にすべて覚える必要はありません。
私自身も、仕事で実際に使ったり、分からないことを調べたりしながら少しずつ覚えていきました。
分からない専門用語が出てきたときは、「こんなことを聞いても大丈夫かな」と一人で悩まず、早めに確認することも大切です。
専門用語が少しずつ分かるようになると、修正依頼や社内での会話も理解しやすくなり、仕事も進めやすくなります。
これからWebデザイナーを目指す人も、まずはよく使われる言葉から少しずつ覚えていけば大丈夫です。
コメント