皆さま、こんにちは。
既存サイトのデザインはそのままに、見栄えや不具合を調整したいと思うことはありませんか。例えばスマートフォン表示に対応させたい、httpsに移行したい、などです。
くまWEBでは既存サイトの運用や部分的なコーディングも受け付けています。そのため、WEBサイトを作成してから時間が経ってしまい「スマートフォンから見づらい」「セキュリティ的に問題が出てきた」「リニューアルするほど予算がとれない」「デザインは気に入っているのでそのままがいい」といった点について、相談をお客さまからお受けすることがあります。
いくつかのポイントをコーディングで調整すれば、WEBサイトを丸ごと作りなおさなくても、見栄えや不具合を解消して気になる点を解消することは可能です。
この記事ではどんな点を調整するとよいか、相談に多いポイントを5つ挙げてご紹介します。
- 閲覧のしやすさ向上：レスポンシブ表示に対応する
- セキュリティの向上：httpsに対応する
- 表示速度の向上：画像の最適化、不要なスクリプト削除
- SEOの向上：構造化データに対応する
- 見栄えの向上：アニメーション、動きを取り入れる
１．閲覧のしやすさ向上：レスポンシブ表示に対応する
スマートフォンでもWEBサイトが閲覧しやすいようにする技術「レスポンシブデザイン」が一般的になったのは2013年ごろといわれています。とはいえ、スマートフォンからWEBサイトを閲覧する人は今ほど多くなかったため、この頃に作成したWEBサイトの中にはスマートフォンから快適にWEBサイトが閲覧できないものもあります。
現在ではスマートフォンから閲覧されることを前提とするデザインが主流のため、スマートフォンから快適に閲覧できないと訪問者さまがすぐに離脱してしまう可能性が大きいです。
デザインを変えなくても、例えばサイドバーや画像の表示調整などでスマートフォンから閲覧しやすくすることは可能です。
■レスポンシブ表示はCSSで対応する
スマートフォンやPC、タブレットなど異なる画面サイズでも快適に閲覧できるレスポンシブ表示の実装はCSS（スタイルシート）で対応します。
WEBサイトを作ってくださった制作会社さんやデザイナーさんにご連絡ができるのであれば、CSSを調整して今のサイトをレスポンシブ表示にできないかと相談してみてください。
レスポンシブ表示のメリットやコードの書き方、関連する便利ツールについては別記事にまとめています。詳しい設定等でお悩みの方は以下の記事もご覧下さい。
▼
知っておくと役に立つ！レスポンシブデザイン系CSSツール6選
▼
レスポンシブデザインでスマホ対応させる方法（CSS3、メディアクエリ）
2．セキュリティの向上：httpsに対応する
WEBサイトの情報はインターネットを通して全世界に公開されているため、セキュリティに弱点があると情報が盗まれやすくなってしまいます。特にメールフォーム等で名前や住所、メールアドレスといった個人情報を送信すると、これらのデータが第三者に盗まれるリスクがあります。このようなリスクを抱えないために、「https」（通信内容を暗号化する仕組み）を導入することが特にGoogleにより推奨されています。
■https化はレンタルサーバーの設定やWEBサイト内部の調整で実現
一般的なレンタルサーバー（例えばエックスサーバー、さくらインターネット等）をお使いであれば、レンタルサーバーのヘルプページに設定方法が書かれています。
https://www.xserver.ne.jp/manual/man_server_fullssl.php
httpsへ移行する作業はヘルプページを見るとおおよそ理解できるのですが、URLが変更となるためリンク切れにならないように調整（リダイレクト設定）を行う必要があります。
既存サイトのデザインには触らずに設定できるため、https化の作業だけを外注することができます。設定したいけれど自分には難しいと思われる方は、くまWEBへご相談ください！
3．表示速度の向上：画像の最適化、不要なスクリプト削除
WEBページの表示が遅いのはさまざまなデメリットがあります。今はどのWEBサイトも表示速度の改善に努めているため、なかなか表示されないというだけでページから離脱される可能性があります。また、Googleが「あらゆるデバイスでウェブページの読み込み時間を短くしましょう」とページの表示速度の改善を推奨しており、表示速度を測定するツールも出しています。
https://pagespeed.web.dev/?hl=ja
■表示速度改善のためにできる調整
- ページの HTML構造のシンプル化
- 画像のフォーマット変更（例：WebP）
- JavaScriptのファイルサイズ圧縮や統合
- CSSの圧縮や書き方の工夫 など
特に制作から時間が経ったWEBサイトは最新の画像フォーマットに対応していない、JavaScriptコードが古いなど、その制作段階では問題がなかったけれど、時間の経過とともに最新対応できず読み込みを遅延させる原因となってしまっていることがあります。
これは最新の画像フォーマットへの変更やコードの書き換え、最新ブラウザへの対応処理で改善できるため、デザインや見せ方の問題とは切り離した技術的な最適化の作業です。デザイン事務所ではなく専門的な技術を元にしたサービス展開をしている企業に依頼する必要があります。くまWEBではページ単位の対応もしておりますので、ご要望があればお気軽にお問い合わせください。
4．SEOの向上：構造化データに対応する
3と重複するのですが、SEO対策の面でも古いHTMLデータは修正することが求められています。特にGoogleはWEBページの内容を把握するためにHTML構造を分析して評価しているため、ページの内容を正確にGoogleへ伝えるには、ページの各部分がどのような内容を指しているか伝えるタグを使っていく必要があります。
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja
構造化データをWEBページに追加することにより検索エンジンに表示される内容が変わったり、内容が正確に伝わることで検索順位が上がったりするメリットがあります。コーディング作業担当者の業務内になりますので、仕組みに対応できる企業・サービスへ依頼してください。
構造化データをWEBページに追加してブラッシュアップしていきたい方は以下の記事もご参考になると思いますので、ぜひご覧下さい。
5．見栄えの向上：アニメーション、動きを取り入れる
近年は「動きのあるWEBサイト」が非常に多くなりました。視覚的に訪問者さまに魅力や情報を伝えるデザインが主流になってきています。WEBサイトの内容がわかりやすく、使いやすくなるため、信頼感や明るいイメージを与えられます。
・メニューの開閉でコンテンツの整理をする
・トップページのメインビジュアルに動きを入れて離脱を防ぐ
・ボタンにアニメーションを入れて操作に楽しさを持たせる
さまざまなアイデアで動きを取り入れるとWEBサイトをブラッシュアップできます。依頼するときはまずサンプルを見つけ、「こんな動きを入れたい」とコーディング担当者に伝えることでスムーズに動きを取り入れられます。
くまWEBが運営するコーディングギャラリーサイト「codefolio（コードフォリオ）」には動きのあるWEBサイトをたくさん紹介していますので、サンプル探しにぜひご覧下さい。
まとめ
デザインを大幅に改修しなくても、部分的なブラッシュアップでも訪問者さま、検索エンジンへの対策ができます。少しずつ修正を加えてモダンなWEBサイトを保つことは企業イメージの向上にもつながります。限られた予算でもできますので、大幅リニューアルを断念せざるを得ない場合も、できる範囲で手を加えてみませんか？メリットは大きいと思います。