新人Webディレクター、Web担当が一皮むける基礎知識

新人Webディレクター、Web担当が一皮むける基礎知識(この記事は2020年6月30日に更新されました。)

Web業界に入りたい!でもWeb業界入るために何知っておけばいいんだろう…

 

最初はなにがわからないかもわからないですよね。
私が未経験でWeb業界に入って先輩社員に”そんなこともわからないのか…”と言われて恥かきながら覚えていました。
新人Webディレクター時代につまずいたことやあらかじめ知っておくといいことを解説していきます。
NOBU

 

新人Webディレクター、Web担当が一皮むける知識

サイトやWebページの設計について

サイトやWebページの設計について

そもそもサイトとかWebページってどうやって作ってるの?
黒い画面に英数字を打ち込んでるの?

平成~令和となればプログラムの授業があるのだと思いますが、実際それでもやってみないとわかりにくいですし、雲をつかむような感覚ですよね。

 

サーバーとドメインって何?

Webサイトを作るうえでまず土台になるなくてはならないものが「サーバー」と「ドメイン」です。

Webサイトの作り方はよく家を建てることに例えられますが、サーバーは「土地」の部分になります。
サイトの情報(データ)を貯めて置く場所になります。
費用は月換算で1,000円前後で契約期間が長いプランは割安になる傾向にあります。

▼XSERVER(エックスサーバー)


▼heteml(ヘテムル)サーバー

▼LORIPOP!(ロリポップ)サーバー

続いて、ドメインは「住所」に当たるものでURLの部分になります。
URLの末尾についている「.com」「.jp」「.net」「.org」などを習得するために「お名前ドットコム」などドメインを販売しているサイトでドメインを買う(契約)わけです。
ドメインによって金額も違いますし、「.co.jp」やなどのドメインによっては登記簿謄本の写しなど必要書類、取得条件が必要なので、サイトの信頼性を証明する一つの材料にもなります。
ドメインの代金は年間で1,000~2,000円です。

▼お名前ドットコム

▼ムームードメイン


▼XDOMEIN

サーバーとドメインは、すでに年払いで運用していることが多いと思います。
一担当が新たに選定して契約することは稀かと思いますが、定期的に支払いが発生していることを覚えておきましょう。

 

どんな人が関わっているの?

個人のフリーランスを除き、企業で制作するサイトは一人の力で0から100まで完結するわけではありません。
様々な担当が関わって一つのサイト、一つのページを制作していきます。
どんな担当がいてそれぞれどんな役割を担うのか簡単に説明します。

【ディレクター】
工事現場でいう現場監督のような役割です。

  • クライアントとの折衝業務
  • サイトの要件定義
  • サイトマップ作成
  • スケジュールの進行管理
  • コンテンツの品質管理
  • プロジェクトメンバーの選定
  • サイト運営でのサイト数値分析・検証

【システムエンジニア・プログラマ】
クライアントの要件に従って、サイトの見えない裏側のシステムを構築する役割。
「要件定義」「基本設計」「詳細設計」「テスト」「保守・運用」という工程管理が仕事の内容になります。

【デザイナー】
サイトの見た目の部分やバナーなどをPhotoshopやIllustratorでデザインする役割です。
その会社によって業務範囲が様々ですが、下記で登場する【コーダー】の行うコーディングも行うケースも多いです。
ある程度のhtml、cssの知識を持ち合わせて静的なページや簡単な動作の入ったページくらいなら組むことができる場合が多いです。

【コーダー】
デザイナーから降りてきたデザインをプログラミング言語を用いてコーディングを行います。
html、cssなどに加えてJavaScriptやjQueryといった広範囲のプログラミング技術を用いてより複雑な動きのあるサイトを構築します。
画像がフワッと表示させる、画像のスライド表示、マウスオンエフェクトなどがわかりやすい項目です

サイトの種類と制作費用目安

WEBの業種

サイトといっても色々な形式があります。
クライアントがどんなサイトを望んでいるのか、適切に導くにはいくつかの形式を覚えていくといいです。

 

コーポレートサイト

企業サイトのことです。
例えばコカ・コーラ社だったらコカ・コーラの企業情報や製品ラインナップなどを一括掲載するサイトです。

制作費用は50~150万ほど。
※サイトの規模、制作会社によります。

ブランドサイト

会社の中でもある製品やブランドにフォーカスしたサイトです。
コカ・コーラ社で言うと「コーラ」にフォーカスしたサイトがブランドサイトです。

制作費用は40万~
※サイトの規模、制作会社によります。

ECサイト

製品を販売するオンラインストアのことです。
ECとは「Electronic Commerce」の略のことで、直訳は電子商取引です。

ECサイトの中でもAmazon、ZOZOTOWN、楽天市場などのような様々な企業の様々なブランドを取り扱っているECサイトを「モール型EC」、企業が独自で運営しているECを「自社EC」と分類分けされます。

モール型ECは出店料などコストが発生するのに対して、自社ECは運用コストのみですので近年ではモール型EC依存から脱し自社ECでの利益拡大を目指す企業が増えています。

制作費用は300万~
※サイトの規模、制作会社によります。

メディア系サイト

広告収入を目的としたサイト。オウンドメディアともいわれます。
掲載するニュースや情報はいくつかのジャンルに絞った特化型コンテンツを発信する場合がほとんど。

サイトデザインよりサイト内のコンテンツの中身が重要で、ユーザーにとって有益な情報を提供し続ける運用体力が必要。

制作費用は30万~
※サイトの規模、制作会社によります。

キャンペーンサイト

一つの製品やサービスのプロモーションや懸賞キャンペーンのためのサイト・ページ。
キャンペーンの期間に合わせて公開されるため一定期間しか公開されないものも多い。

制作費用は25万~
※サイトの規模、制作会社によります。

LP・ランディングページ

Web上で展開される広告をクリックした先のページのことをLP(ランディングページ)と言われます。
キャンペーンサイトとLPがよく混同されますが、キャンペーンサイトの多くも広告の受け皿になることが多いためです。

逆に広告の受け皿にならなくても「特集ページ」自体をLPと言っている人もおり、LPページ制作依頼は広告運用の有無から認識をすり合わておく必要があります。

制作費用は25万~
※サイトの規模、制作会社によります。

 

プログラム言語は必須なの?

プログラム言語は必須なの?html、css、JavaScript、jQuery、phpなど様々なプログラミング言語があります。
プログラマーやシステムエンジニア、コーダーのような技術職は必須です。

Webディレクターは必須ではありません。
未経験でも実務経験を積めば、すでに作られているhtmlの簡単な修正くらいは自然にできるようになります。

ですが、技術者がどこまで対応できるのか、予算と工数が合うのかなどザックリでも把握できるとスムーズにミッションを進められます。
未経験でWeb制作会社に入った筆者はこれが最初のハードルでした。
クライアントからできるかどうか聞かれた内容に即答できずに持ち帰って技術職に聞いてから対応したり、よくコーダーにスケジュール的に無理を言って困らせたりしていました。

転職前や実際転職後実務を行いながらスクールに通うとよりスピード感持って成長できます。

 

CMSってなに?

CMSってなに?CMSとは、コンテンツ管理システム(Content Management System)の略称です。
htmlやcssの知識はなくても、サーバーにファイルをアップロードなど意識しなくてもサイトの更新ができるように構築が可能です。

最も馴染みのあるCMSだと「Wordpress」が挙げれます。
プラグインで機能を拡張することで手軽にブログ記事を作成できるCMSです。
ちなみにこのブログもWordpressを用いて構築されています。

構築後は簡単な更新ならマニュアルさえ渡してしまえば、制作会社の手を離れクライアント自身でサイトを更新していくことも可能です。

CMSによって強みやできることが異なりますので、経験を積んでいくと案件ごとにどのCMSを提案すればいいかわかってくると思います。

 

カートシステムについて

カートシステムについて

制作するサイトがECサイトの場合、フューチャーショップ、MakeShop、BASEなどASPカートシステムを導入する必要があります。

BASEは香取慎吾さんのCMでも露出されていますのでやや馴染みがあるのではないでしょうか。

ただ、ASPカートシステムはデザインに制約があります。
なので、Wordpressなどでデザイン部分を構築して商品のカート以降のオペレーションはASPカートにすることもあります。

 

Webマーケティングについて

Webマーケティングについて

Webマーケティングは多くの手法があり、覚えるのが大変です。
今回はさわりの部分だけ簡単に記載しますので、詳細はまだ別途紹介していく予定です。

SEO対策

主にGoogleでの検索結果で上位表示させる対策です。

リスティング広告

検索エンジンで上位や右側に表示される部分の広告です。

アフィリエイト広告

個人ブログやメディアサイトの記事内やバナー枠に掲載してもらう広告です。
ASPサービスに広告主として登録・出稿し、個人ブロガーやメディア運営者が提携・サイトに広告掲載することで拡散することが可能です。

アドネットワーク広告

メディアの広告枠を買ってバナーを掲載してもらう広告です。ヤフーの右上のバナーが有名です。

SNS広告

Facebook、Twitter、Instagramで行える広告です。
年齢、居住地、性別、趣味嗜好などからユーザーの属性に絞って(セグメントをきって)表示されることができる広告。

リターゲティング広告

一度サイトから離脱後に再度サイトを回遊していると過去の検索をもとに以前閲覧していた商品やサービスのバナーなどが表示される追尾型の広告です。

メールマーケティング

いわゆるメルマガです。メールマガジンを登録・購読している方に向けて商品やサービスを紹介する手法です。

Googleマイビジネス

Googleマイビジネスに登録することで、Google MapやGoogle検索でお店の情報やキャンペーンなどを表示させることができます。

インフルエンサーマーケティング

親和性の高いターゲットに影響力の高いインフルエンサーに自社のPRをおこなってもらうマーケティングです。
インフルエンサーとは主にSNSで影響力のある人のことを指します。
有名人・著名人だけでなく、昨今では一般人にもインフルエンサーが増えています。

 

Webデザインについて

Webデザインについて

WebデザイナーはPhotoshopやillustratorを使用してデザインを制作します。
そのため「アーティスティック」な職種と思われがちですが、あくまでユーザー目線で見やすいサイト、使いやすいサイトを理解していないといいデザインできません。
デザイナーが制作したデザインのクオリティを判断するためにも以下の項目は最低限覚えておいてください。

UIUXとは

UIとは「User Interface」の略。ユーザーにとっての見やすさや操作性のことです。

UXとは「User Xperience」の略。ユーザーがそのサービスやシステム、商品などから得られる体験のこと全般に対して使われます。

このUIUXを常に意識しデザインすることが求められます。
そのことから、Webデザイナーと言わずに、「UIUXデザイナー」と呼ぶ会社もあります。

 

画像ファイルの種類やルール

画像はすべて綺麗で美しくあればあるほどいいというわけではありません。

いくら美しい画像でも読み込みに何十秒も待たせてしまってはユーザーにストレスを与えてしまいます。
最低限の美しさで表示が軽い画像であるべきです。

また、画像にもいろいろなファイル形式があり使用する場所によって適切に使い分ける必要があります。

 

【JPEG】
画像でもっとも多い形式で基本的にJPEGを使用。

  • カラーやグラデーションに強い。
  • 容量軽い。「非可逆圧縮」のため劣化した画像は戻せない。

【PNG】
背景を透過したいロゴなどに使用。

  • カラーに強い。
  • 透過できる。容量重い。
  • 「可逆圧縮」のため低画質で保存しても元の画質に戻せる。

【GIF】
背景を透過したいカラーがあまりないロゴなどに使用。
コマ送りアニメーションの画像にしたい場合に使用。

  • カラーに弱い。
  • 透過できる。
  • 容量比較的軽め。アニメーションが作れる。
  • 「可逆圧縮」のため低画質で保存しても元の画質に戻せる。

【TIFF】
圧縮してもデータが損ないが、容量が非常に重くWEBに適していません。主にjpgに書き出して使用します。

【Adobe系】
psd…フォトショップで編集したデータ。
レイヤーやパス、解像度、埋め込みテキストなどPhotoshop独自の編集情報を完全な形で保存することができる。
JPEGやPNG、GIFなどに書き出して使用します。

ai…イラストレーターで編集したデータ。
JPEGやPNG、SVG、PDFなどに書き出して使用します。

 

フォントについて

フォントは文字の書体のことで、サイトの印象に大きく作用します。

無料もあれば有料のフォントもあります。
サイトのイメージに合うフォントの選定も重要な要素の一つです。

カラーについて

Webでカラーは「システムカラー」で表現できます。

#000000のよう#のあとの6桁の英数字の組み合わせを変えることでカラーを変更できます。

#000000は真っ黒ですが、実はWebではあまり使われません。
あまりに真っ黒過ぎて眼が疲れてしまいます。
Amazonでは#111111〜#333333が使われています。

ユーザーにとって見やすさを追求するとカラーにもこだわりが出てきます。

RGBカラーとCMYKカラーの違い
Photshopやillustratorで扱うデータには2種類のカラーモードが存在します。
RGBカラーは、光の三原色「R(赤)・G(緑)・B(青)」のことです。
CMYカラーは、色料の三原色「C(シアン)・M(マゼンタ)・Y(イエロー)」のことです。

PCのモニターやデジカメ、スキャナなどはRGBカラーを使用し、印刷物など紙媒体ではCMYKを使用します。
つまりWEBサイトで扱う画像はRGBカラーモードで制作した画像を使用しなければなりません。
「元データと色がなんか違う!」っていう場合、よく知らずにCMYKの画像データを使用している場合がありますので、覚えておくと対処しやすいですね。

 

Webサイトの確認について

Webサイトの確認について

Webサイトの確認、会社のPCだけでやってませんか?
世の中、スマホでしかネットを見ない人が増えています。
扱う商材によってもスマホユーザーとPCユーザーの割合は変わってきますが…
ちなみに私が会社で運用している多くのサイトは7割がスマホユーザーです。

つまり、PCで見やすくて100点満点だとしてもスマホで見づらかったら総評で0点なのです。
むしろスマホで見やすいことを優先して確認する癖をつけて、スマホファースト(モバイルファースト)の意識を強くしてください。

そこで、PCのブラウザでもスマホビューが見れる方法がありますので、ご紹介します。

Google Chrome:「F12」⇒「F5」 or 「Ctrl+Shift+I」

Firefox:Ctrl+Shift+M

インターネットエクスプローラーを使っている場合はブラウザを変えることをオススメします。
このスマホビューもやりにくいですし、マイクロソフトのクリス・ジャクソン氏は「IE(インターネットエクスプローラー)は使わないで」と公言するほどブラウザ闘争に敗れ開発が遅れています。

その分、IEで表示が崩れている!!などトラブルが起きやすいので、PCでは軽く確認しておきましょう。

現状あなたのサイトに来ているユーザーがスマホユーザーが多いのか、PCユーザーが多いのか、そして今後この割合がどう変わっていくことが予測できるのかをしっかり分析しておきましょう。

 

Webサイトの分析について

Webサイトの分析について

Webディレクターは運用するサイトの分析をしなければなりません。
Webアクセス解析に必要な法則の基本はもちろん、サイトを分析するツールなども知っておきましょう。

プラットフォームやSNSごとに様々な分析ツールがありますが、まずは以下の二つは必修ですのでサイトに導入して分析できるようにしておきましょう。

UCCの法則

Web業界で使われる成約数を求める考え方、法則は覚えておく必要があります。

UU × CVR = CV

UU:ユニークユーザーの頭文字。訪問者数のこと。
CVR:コンバージョンレート(コンバージョン率)の頭文字。コンバージョン率とは成約率のことで訪問者÷成約数で導き出せる。
CV:コンバージョンの頭文字。成約数のこと。

ECサイトだとここに1訪問者がどれだけページ数を閲覧したかPV(ページビュー)も加わってきます。

UU × PV × CVR = CV

訪問者数とページビュー数、コンバージョン率のかけ合わせが成約数になります。掛け算ですのでどの要素も欠けては成約数は上がってきません。
どの数値が足りないのか分析していくことで、全体の成約数を上げていくという考えを持ってください。

Google Analytics

主に分析できる項目は以下になります。

  • どこから流入しているのか?
  • どんな人が来ているのか?
  • どんなページがよく見られているのか?
  • 来た人がどういう行動をしているのか?
  • どのくらいの時間滞在してくれているのか?
  • コンバージョン率は?

Google search console

主に分析できる項目は以下になります。

  • どんな検索キーワードで入ってきたか?
  • どのくらい表示されているか?
  • どのくらいクリックされてるか?

よく使われるビジネス用語

よく使われるビジネス用語

これはおまけですが、Web業界だけじゃなく一般の会社員もよく使う「好きな横文字」も紹介します。
乱用するとウザいですが、意味をうっすらでも理解して用法容量を守って使うとそれっぽくなれます…

リソース

人員のこと。

例文:リソース確保お願いします。
リソース足りてますか?

アサイン

プロジェクトの人員や役割を割り当てること。

例文:例のプロジェクトのメンバーアサインしておいて。

バッファ

余裕を持たせること。

例文:ギリギリだとスケジュール危険だから、ある程度バッファ持たせといて。

フィックス

確定する(した)こと。

例文:デザインはフィックスしました。
このデータフィックスしてる?

PDCA

Plan(計画)Do(実行) Check(評価) Action(改善)の頭文字を取ったもの。

計画から改善までの上記の流れを「PDCAを回す」と表現します。

これを回し続けれる人材が求められます。

KGI、KPI

KGIは「Key Goal Indicator」の頭文字を取ったもの。日本語では「重要目標達成指標」と言われます。

KPIは「Key Performance Indicator」の頭文字を取ったもの。日本語では「重要業績評価指標」と言われます。

KGIが「目標・ゴール」に当たるものです。KPIとはその「目標・ゴール」にたどり着くために必要な項目、指標を細分化したものです。

「売上目標500万」を例にすると…

【KGI…売上目標500万】
KPI1…新規客売上:100万
KPI2…顧客売上:200万
KPI3…広告流入売上:100万
KPI4…SNS売上:100万

このようにそれぞれのKPIを達成することでKGIを達成することができるという設計です。

新規プロジェクト発足の際はこのKGIとKPIの設定を行う必要があります。

最後に

いかがでしたでしょうか?
覚えること多いなって思いましたか?
最低限の要素でなおかつ非常にかいつまんで記載していますが、それでもこの量になってしまいました。(まだまだあります…)

これらは教わりながら学んだ部分はありましたが、私の場合オペレーションのなってない小さな企業でマニュアルなんて一切ありませんでした。
独学で調べながら得ていくほうが多かったです。

実際やってみてわかっていくと思うので、知識として頭に入れておいて忘れたらまたこの記事を見直しながら運用してもらえればうれしいです。

最後まで読んでいただきありがとうございました。

 

関連記事

Twitterのフォロワーの増やし方 Vol.02【3ヵ月で1万の実体験】

Web WORKS

2020/8/7

Twitterのフォロワーの増やし方 Vol.02【3ヵ月で1万の実体験】

SNS担当 ツイッターのフォロワーが増えてきたけど伸び悩んできた… これ以上、何ができるだろう? 3ヵ月で1万フォロワーを獲得した実体験からノウハウを公開します!NOBU ツイッター関連では以前、「1ヶ月で4000フォロワー獲得したノウハウ」や「沈黙のWebマーケティングに学ぶSNS運用」について記事を公開しました。(以下参照) 上記の記事の内容をひたすら続けていることに加えて、さらに実施した内容を追記します。 まずは、二つの記事の内容をご理解いただいているという前提で進めさせていただきます。 &nbsp ...

ReadMore

【沈黙のWebマーケティングに学ぶ】SNS運用(Twitter運用)

Web WORKS

2020/8/6

【沈黙のWebマーケティングに学ぶ】SNS運用(Twitter運用)

SNS担当者 Twitterで商品紹介とかキャンペーン発信してるけど、フォロワーは増えないし、全然拡散してもらえない…   フォロワーや興味を持ってもらえそうな人とコミュニケーションとってますか? 以前、実体験をベースにTwitterにて”フォロワーの増やし方”を解説しました。 今回は人気の書籍からさらにTwitter運用の理解を深めて攻略していきましょう!NOBU   こちらもCHECK   今回は私の実体験だけでなく、大変人気のある「沈黙のWebマーケティング」を参考文献 ...

ReadMore

【1ヶ月で+4000人の実体験】Twitterフォロワーの増やし方

Web WORKS

2020/8/6

【1ヶ月で+4000人の実体験】Twitterフォロワーの増やし方

SNS担当者 Twitterのフォロワー数増やしたいけどなかなか伸びない… どうやったら増えるんだろ… そもそもフォロワーを伸ばす目的は理解していますか? 目的を明確にしたうえでフォロワー増やしていきましょう。 私が個人的に運用したアカウントでひと月で+4000のフォロワーを獲得したノウハウを解説します。NOBU   本記事の内容 目次1 【1ヶ月で+4000人】Twitterフォロワーの増やし方1.1 結論1.2 運用の目的を決める1.3 ジャンルとターゲットを決める1.4 プロフィールは「瞬 ...

ReadMore

【沈黙のWebマーケティングに学ぶ】Webデザインの本質

Web WORKS

2020/7/15

【沈黙のWebマーケティングに学ぶ】Webデザインの本質

新人Webディレクター デザイナーが3パターンのデザイン案を制作してくれた! どれも素敵だけど、自分の感覚だけで選んでいいのかなぁ…? でも私センスないし、どう選んでいいのか…   新人時代は”何を基準”にWebデザインをチェックしていいかわかりませんよね。 だから、自分の「好き嫌い」で選んでしまいがちです。 でもそれではだめなんです。 Webデザインを理論的に理解し、本質を知っておかなければいけません。 では、いい本があるのでそれを基に解説していきましょう。NOBU   本記事はこん ...

ReadMore

【2020年】SNSでモノ(サービス)を売るための考え方「ULSSAS」

Web WORKS

2020/6/30

【2020年】SNSでモノ(サービス)を売るための考え方「ULSSAS」

新人マーケティング担当 急に上司からSNSの担当に任命されてしまった… とりあえずTwitterとインスタで商品を紹介してればいいのかなぁ?   今の時代、企業もSNS運用は必須ですもんね。 ちなみにULSSASという購買行動プロセスはご存知ですか? SNSでモノを売りたいなら知っておくべき概念なので解説しましょう! NOBU   購買行動プロセスは時代によって変化しています。 現代のマーケティングにおいて重要とされているのが、Twitterやインスタグラム、YouTubeなどを駆使し ...

ReadMore

  • この記事を書いた人
  • 最新記事

NOBU

アパレル店員として物販を10年(店長7年)経験。その後、WEBリテラシーを磨くべく2年ECでWEBマーケティングを学ぶ。
現在は2018年から大手アパレル企業にてWEB担当に従事しています。

-Web, WORKS
-, , ,

© 2022 NOBUnoBLOG