いしばしボート Webサイト リニューアル

課題

サイトはHTML4.01ベースのテーブルレイアウトで構築されており、HTTPSにも対応していない状態でした。PCとスマートフォンでURL・ソースが分かれた別サイト運用となっており、更新のたびに二重管理が発生していました。トップのヒーロー部分にはFlashが使用されていましたが、ブラウザ側のFlashサポート終了により、空白表示のままになっていました。

設計

現在のWeb利用状況を踏まえ、モバイルファーストで設計を進めながら、PC側のブレイクポイントにも配慮し、レスポンシブ化によってPC・スマートフォンを1つのソースへ統合しました。全ページに散在していたCSS・インラインスタイルは、Pythonスクリプトを用いてstyle.cssへ集約し、3段階のブレークポイントを整備しています。お知らせ欄については、JUGEMブログのRSSを取得し、DOMXPathでパースして表示する仕組みに変更しました（30分キャッシュ）。ヒーロー画像は、静的だったFlashから富士山と湖の写真へ差し替え、CTA（予約・LINE相談）を上部に配置しています。あわせてLINE公式アカウントを新設し、電話以外の問い合わせ導線も確保しました。

結果

HTML4.01・Flash依存という技術的負債を解消し、HTTPS対応・レスポンシブ・CMS的な更新性を備えたサイトとして納品しました。