担当者様に読んで欲しい、Webサイト制作の基本。



僕は以前(というか少し前まで)
Webサイトの制作会社で働いていました。
制作の進行をしていると、

代理店からは、
「はい修正!なるはやで!よろ!」
制作陣からは、
「ちょっと待って今からそれは無理

この板挾みでした。

代理店からは、
クライアントの意向だからはよ」
制作陣からは、
「なんで代理店はそんな無茶言うの?」

正直webサイトを、
一切作ったことのなかった僕からしたら、

「代理店の言い分わかる。
 なんでそんな時間かかるんや?」

という「?(はてな)」の方が多かった。

一生わかりあえなさそうだったので、
そんな文句を言ってないで、

どうして時間がかかるのか、
基本を説明した方がいいのでは?と思い、

自分が元々思っていたサイトの作り方と、
実際に作られる過程の差を書き出してみた。

最近のWebサイト制作会社の人は、
入社前からサイトを作ったりするので、
どこがわからなかったか?ということが、
すごい遠くの記憶だったりするわけで。

サイト一回も作ったことがないと、
ここから説明しなきゃいけないのか!
に寄り添って解説いたします。

 

別に今はWebサイト制作に
携わっているわけでもないので、
「これ見て代理店の人は我慢してくれ」
という言い訳のためでもない。

しかし、これを知っていることで、
お互いに会話がスムーズになったり、
少しでもみんなが納得して
制作を進められたらいいな
と思って書いております。

スマホ向け?PC向け?

なんとなく違うんだろうな
ってことはわかってたんですけど、

かなり違うし、
作るとき別々なんだ
ってビックリした。

最適化してくれるかと思ってたけど、
ゼロから作ると、別々なんだと。

予算があまりない時、
どちらかしかできない場合。

特に若者向けのキャンペーンなどの際は、
スマホ向けのみをオススメします。

PC向けとかそんなに見ないので。

フォントについて

フォントにはwebサイトで使う際に、
お金がかかるフォントがあります。

使用料を払えば、
Webフォントとして使える。

そのフォントの使用料は、
サイトの閲覧数によって変わることが多い。
アクセス数が多いほど、高いのだ。

しかし、その使いたいフォントを、
「Webフォントとして使わない」
という選択肢が残っています。

それは画像として書き出して使うことだ。
そうすれば使用料はかからないのだ。

だからそういうフォントを使う文字は、
例えサイト内の文言変更だとしても、
デザイナーがわざわざ一旦画像にして、
エンジニアに渡して変更してもらう。
という手間が発生している場合が多い。

直前にも変更がありそうな文言は、
すぐに流しこめる無料フォントを使うよう、
最初に言っておくと、変更対応が早いです。

文言の変更は長さが変わったりすると、
もともと作っていた枠からはみ出てしまい
枠のサイズを変更したり、
改行のタイミングを探したりと、
わりと、思ってるより面倒くさいです。

変更後の文言をコピペすれば、
はい終わり!ってなると思ってました。

写真について

写真素材は基本的に「レタッチ(加工)」して、
webサイトに載せることになります。

サイト全体の雰囲気に合うように、
一旦デザイナーが加工するのです。

また出来上がった写真は貼るだけでなく、
作ってある枠に入れる必要があります。

そのため画像の入れ替えは、
もともとのサイズと違う場合は、
切り取り作業なども発生します。

送る場合は、
解像度の高い画像でお願いします。

音声について

音声をwebサイトに載せるのはわりと簡単。
どこを押せばどの音声が流れるか
というものがきちんと決まれば、
音源の変更は比較的簡単です。
(納入は直前で良い)

注意したいのはスマホサイトでは、
「音声をONにする」アクションが必須。
ということです。

サイトを開いて最初に、
「このサイトでは音声が流れます。

サウンドをONにしてお楽しみください」
といったモーダルを表示するのが一般的。

シェアボタンについて

現在はどのようなサイトでも、
「シェアされる」ことが大事。

シェアされやすい仕組みを、
きちんと作らなければなりません。

今だと、twitterFacebook
LINEのシェアボタンをつけます。

しかしLINEの場合はPCでは見られないため、
基本的にPC用サイトにはつけません。

シェアされる際、どう表示されるんだろう?
というのは、しっかりチェックしましょう。

Facebookはこちらで。
twitterはこちらで。

Instagramの埋め込みについて

Webサイトに、
インフルエンサーの投稿を埋め込みたい。
そんな案件もあるかと思います。

埋め込みの際のデザインで、
自由が効かないのがInstagram。
埋め込む際には十分チェックが必要です。

favicon/OGPとは?

faviconとは、ココの画像。

どの画像を使うのか?
キャンペーンサイトの場合は、
普段の物をそのまま使うのか?
検討が必要です。

 

OGPとは、
ページをシェアする際に出る画像。

シェアされた際、サイトに来る
「きっかけ」になる画像のため、
画像を作るならココに力を入れるべきです。
しっかりと選びましょう。大事。

修正が反映されない?キャッシュとは?

サイト修正しました!更新しました!
と言われて見てみたら、
何も変わってない……

画像も文言も反映されないんだけど?
みたいな状態があります。

おそらくそれは、
「キャッシュに残っている」
というのが問題です。

キャッシュとは、よく利用するデータを高速な記憶装置に蓄積しておくことにより、コンピュータのデータ処理を高速化することです。
(中略)
また、インターネット閲覧時には、ブラウザやWebサーバが自動的にキャッシュを行っています。Webページを構成する画像などのファイルをキャッシュに保存して、その画像を再び呼び出すときにはゼロからダウンロードするのではなく、保存されたキャッシュを再生することで表示速度を上げているのです。

(引用:OCNインターネット用語辞典)

要するに、便利なはずの物に邪魔されてる。

なので、キャッシュを消す
という作業が必要になります。

Macの場合は、
Command + Shift + R

WIndowsの場合は、
Shift + F5

を押すとキャッシュクリアできます。

しつこいのは下の方法で消してください。

デスクトップPC向けブラウザ別キャッシュクリア方法
スマホ向けのブラウザ別キャッシュのクリア方法

モーダルとは?スライダーとは?

モーダルはコレ。

画像などをクリックした時、
飛び出てくる印象のやつです。

 

スライダー(カルーセル)はコレ。

画像のサイズを揃えなければならない。
スリックという言い方をする人もいます。

下に点を付けるのか?
端に行ったらそこで止まるのか?
それともループするのか?
自動で動いているのか?
スマホはスワイプで動くようにするか?

動き方についても滑らかだったり、
いろいろと調整ができます。

地図について

地図の埋め込みをしたい時もあります。
そんな時は、Google mapが便利で、
スプレッドシートや
エクセルに登録したものを、
まとめてマップにできたりします。

詳しくはこちら

その後、説明文画像も登録できるので、
埋め込むなら充実した地図にしましょう。

住所や地名と一緒のシート、
スプレッドシートやエクセルに、
まとめておいてもらえると助かります。

GAタグとは?

GAタグというのは、
Google Analyticsタグのことだ。

Google アナリティクスというのは、
サイトを訪れた人の動向が見れる、
Googleが提供する便利なサービスだ。

ユーザーがどこから来たかリピート率は?
などを詳しく見ることができ、分析できる。

基本的にはシェアボタンなど、
何かボタンを押した際に、
カウントするように設置し、

ページごとのアクセス数だけでなく、
ユーザーがどこに反応したか、
どこで離脱したか細かく確認できます。

サービス自体無料のため、
基本的には入れておきます。

管理画面を持つことができるため、
クライアント側でトラッキングコード
を発行するのをお勧めします。

まとめ

いかがでしたでしょうか?
そんなん知ってたよ!
ってなるのが理想ですが、
意外に面倒くさいことが多いのね。
って感想な気がします。

他にも、
○○が時間かかるって言われたんだけど!?
みたいな疑問や質問があればください。
書き足していきます。

頭に思い描いたページが、
そのままページに反映されたらいいな。。。

あ、このページも、
シェアよろしくお願いします!

 

星流 咲音。

 



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です