既存のWEBサイトを改修する際に起きた事件を振り返る
初めましてこんにちは。ハルカフンと申します。
普段は個人用のアカウントで趣味丸出しの記事を書いています。
たまには業務にまつわる記事も書きましょうとお達しがありましたので、こちらでも書かせていただきます。
普段私共は主にWebサイトの制作を行なっているわけですが、新規でイチから作るサイトばかりではなく、弊社以外が制作したすでにある既存のサイトに対して、改修やコンテンツの拡充を行なってほしいといったご依頼をいただくことがあります。
すでにあるものに手を加えるだけなら新規で作るより楽でしょうと思われるかもしれませんが、実はご依頼されたサイトのソース（htmlやcssなど）によっては新規で作るより大変になってしまうというケースが存在します。
なぜそんなことが起きてしまうのか、その理由をみていきましょう。
【理由1】すでに多数の人の手が入っておりソースが煩雑になっている
弊社が作ったサイトではない場合、まずはソース全体を把握し、目的の改修を行うためにはどうすればよいのかを理解するための調査が必要です。
それがすでにソースに多数の人の手が入り、記述がぐちゃぐちゃになってしまっていた場合、その調査だけで途方もない時間がかかってしまうことがあります。
ちなみにこういったソースはプログラム用語でスパゲティコードと呼ばれたりします。
【理由2】最初の時点で改修されることを想定して作られていない
サイトを拡張したりコンテンツを増やすには最初の段階である程度将来を見越して設計をしている必要があります。
そこが考慮されていないと、改修作業が大掛かりになってしまったり、そもそも改修不可能といったケースもあり得るので注意が必要です。
サイトの構築は家の建築と似ていると思っていまして、基礎や土台がしっかりしていれば増築やリフォームも簡単ですが、すでに増築を繰り返してツギハギだらけになっている家ではいつ倒壊するかわかりませんし、ログハウスとして設計されたものを急に10階建てのマンションにはできないわけです。
結果どういうことが起こるの？
上記の理由で挙げたようなソースに当たってしまった場合、具体的には次のようなことが起こったりします。
ソース内の修正すべき該当箇所がなかなかみつからない
やっとみつかっても修正が正しく反映されずに見た目がおかしくなる
一箇所を変えたら関係のない他の箇所に影響が出て崩れてしまう
元が酷いと大幅に作り直さないと目的の改修が実現できない
なぜかJavaScriptで作られている部分が動かなくなる
などなど。
総じて本来は簡単なはずの修正に想定外に時間がかかったり、新規で作るより改修の方が時間がかかってしまう、といったケースが発生することになります。
自分が実際に遭遇した事例を紹介します
ケース1 作業時間が通常の4倍かかってしまうサイト
現在のWeb制作はレスポンシブデザインというもので作られるのが主流となっています。
レスポンシブとは…
CSSでPCで見た時の表示やスマホで見た時の表示を切り替えることにより、1枚のhtmlであらゆる大きさのデバイスに対応する技術のことです。
レスポンシブが登場する以前は、PC用のhtml、スマホ用のhtmlとデバイス毎にhtmlを分けて制作する必要がありました。
それがレスポンシブではhtmlが1枚で済むため、特に運用におけるコンテンツ更新や改修において作業工数が大幅に短縮できるメリットがあり、近年作られたサイトではほとんど採用されていると言っても過言ではないくらい普及している技術です。
ところが、この時に作業のご依頼のあったサイトはレスポンシブに未対応。
更にページが日本語と英語の2種類存在していて、結果的に
PC用html（日本語）
スマホ用html（日本語）
PC用html（英語）
スマホ用html（英語）
という4種類のhtmlが存在し、何をするにしても通常の4倍の作業をしないといけないという大変高コストな状態になっていました。
このレスポンシブというのは後から導入するのは難しく、サイトを作り直すのとほぼ変わらない工数がかかってしまうため、運用コストは高いが根本的な解決方法もない、という困った事例でした。
ケース2 ロゴ画像の拡張子が偽造だった
Webサイトにはほとんどの場合メインのロゴ画像が存在すると思います。
近年はロゴなどの画像はSVGという画像ファイルで作られることが多くなってきました。
例えば今見ているこのページなら、左上にnoteのロゴ画像があると思いますが、これもSVGで作られています。
少し専門的な話になってしまうので、なるべく噛み砕いて説明をしたいと思います。
実は画像には「ラスター」と「ベクター」という2種類が存在します。
ラスター画像とは…
みなさんが普段使われているJPG、PNG、GIFなどの画像のことです。
例えばスマホのカメラで撮って保存される写真はラスターです。
ラスターは点（ドット）で構成されていてその点の数が多いほど高解像度ということになります。（液晶モニターを想像してもらえればよいかも）
特徴として色数が多く綺麗なのですが、拡大縮小に弱く特に元のサイズ以上に拡大しようとするとボヤけたり画質が悪くなってしまいます。
Web上にある画像の多くはラスターです。
ベクター画像とは…
主に印刷などの用途で使用されるAIやEPSといった拡張子のファイルです。
Illustratorなどのツールで制作され、主にベジェ曲線と呼ばれる線で構成されています。
名刺の印刷用のデータや看板のデザインデータ、企業のロゴマークのデザインなどはこのベクターで作られています。
特徴として色数は多く使えませんが、無限に拡大縮小が可能で、ベクターで制作していればどれだけ巨大なサイズで印刷しても解像度が損なわれることはありません。
尚、このベクターの画像をJPGやPNGに書き出した場合、それはラスター画像になります。
SVGとは…
ベクター画像はIllustratorなどの特殊なツールでしか表示できませんが、これをWeb上でも表示できるようにしたのがSVGファイルです。
JPG画像などと同じような感覚で扱え、さらに中身はベクターなのでどれだけ拡大縮小しても画像が汚くなったりすることがありません。
夢のようなフォーマットですがベクターなのでやはり写真のような高画質な画像には向きません。
上記の説明の通り、SVG画像はどれだけ拡大縮小しても綺麗なため、先ほど出てきたレスポンシブとも相性がよく、大きさを変えて繰り返しサイト内で使用されることが多いロゴ画像やアイコンで多く採用されている、というわけです。（細かい理由はもっとありますが割愛します）
前置きが大変長くなりました。本題に戻ります。
この時の作業内容は、既存のサイトのベースは残したままデザインを若干リニューアルしたいといったご依頼でした。
新しいデザインでは従来よりロゴ画像をかなり大きく表示する必要があったのですが、画像はSVGで作られていたため、特に問題ないだろうと思い作業をしていました。
ところが実際に画像のサイズを拡大してみたところ、なんとロゴ画像がガビガビにボヤけてしまったのです。
びっくりしてSVGの画像ファイルを調べたところ、この画像実はちっちゃいラスター画像をむりやりSVGに埋め込んで書き出しただけの擬似SVGといった状態のものでした。
これでは拡張子こそSVGなものの中身は普通のラスター画像ですので拡大などできるはずがありません。
想像ではありますが、このサイトの最初の制作者がSVGを使う意図や特性などを知らず「今はロゴをSVGにするのが流行っているから」くらいの理由でSVGにしたのではないかなと思いました。
こうなるともう新しく高解像度の画像を用意してもらう以外に方法はなく、さらに事前に調査してもこれはなかなか気付けないことから大変困ったという事例でした。
ケース3 画像フォルダの罠
先ほど話題に挙げたロゴ画像をはじめ、Webサイトではほぼ必ず画像や写真が使用されます。
デザイン上必要な画像だったり、掲載する商品の写真だったりと用途は様々なわけですが、それらの画像は大体の場合サーバー上では画像専用のフォルダにまとめて置かれています。
そしてその画像をまとめて格納するフォルダには「img」「image」「images」といったフォルダ名が付けられるのが一般的となっています。
さて、この時に更新を依頼されたサイトは元々規模が大きく、更に長年の運用や改修によりソースが肥大化、読み解くのがかなり難解な状態となっておりました。
いわゆる最初の方に挙げたスパゲティコードの最たるような状態です。
更にシステムとの兼ね合いでサーバーの内部もとても複雑になっており、新しく使用する画像をアップロードする場所を探すにも一苦労といった具合でした。
そんな中、どうにか画像が格納されていそうな場所を特定したのですが、その場所を見て私は驚愕しました。
そこには「img」「image」「images」と3種類それぞれの名前がついた画像フォルダが3つあったのです。
画像フォルダは相当特別な理由がない限り通常は1つです。（親フォルダの中でさらに細分化してフォルダ分けすることはあります。）
これではどれが正しいフォルダで、どこに画像ファイルをアップすればいいかわかりません。
もしや間違ったフォルダにファイルを上げたらトラップが発動するんだろうか、などと思いながら頭を抱えることとなりました。
Webrydayでは常にメンテナンスを意識したサイト制作をしています
もちろんサイト制作を依頼されるお客様は、ご自分のサイトのソースがどうなっているかなど知る由もありません。
見た目（サイトの表示）では綺麗でも中身はボロボロというケースも数多く存在します。
そういう意味ではやはり家づくりに似ているかもしれませんね。
個人的にも自分の作ったソースで他の人に迷惑をかけたりしたくないという思いもありますし、綺麗に作ることで運用コストが下がればお客様にとっても当社にとっても双方メリットになります。
当社では必ず後から人の手が入ることを意識し、メンテナンス性を意識したサイト制作をするよう心がけています。
Webサイトのリニューアル周期はおよそ3〜5年くらい
サイトのジャンルにもよるのであくまで参考ではあるのですが、Webサイトの多くは3年から5年くらいの周期でリニューアルされるという調査結果があるそうです。
Web制作の現場では日進月歩で技術革新が行われています。
リニューアルすることで最新のデザイントレンドを取り入れたり、新たに開発された技術を利用することで、結果的に今までにない魅力を創出し、訴求力を更に高めることも可能になると思います。
現在のサイトに物足りなさを感じていたり、ご不満な点がありましたらリニューアルも視野に検討されてみてはいかがでしょうか。
その際は当社にお気軽にご相談ください。