Info kplace.plala.jpから移設しました
ski-odawaraサイト
作成日: 2015/11/01■目的
ski-odawara新規Webサイトを作成のメモです。
スマホ対応、Web申込や写真/ビデオ掲載などの課題をクリアします。
■サイトイメージ
サイトのコンセプトとイメージです。
・PC/スマホ/タブレットに対応のレスポンシブなレイアウト
・ユーザと組織内むけメニューの分離による使い勝手向上
・見やすく、シンプルかつ統一されたデザインポリシー
■機能拡張
従来のWebページに加えて5つの機能を追加します。
ただし公開までの時間は1か月余りと短く考えている余裕はありません。
Web上の無償サービス利用でコスト/セキュリティを考慮し期間短縮を図ります。
| 機能拡張 | 内容 |
| スマホ対応 | PC/スマホ共用のレスポンシブ対応Bootstrap採用 |
| Web申込 |
入力/表作成/自動返信対応のGoogleフォーム採用 |
| 写真 | 容量無制限でより高解像度写真のGoogleフォト採用 |
| ビデオ | 豊富なコーディック対応のYouTube採用 |
| コンテンツ管理 |
ページ作成/更新の省力化と管理のためのCMSの採用 |
■Bootstrap 3
スマホやタブレットからのWebページへのアクセス数はPCを超える勢いです。
それゆえPC用ページがスマホで縮小やはみ出し表示されるのを無視できません。
ページをグリッド(格子状)に分割して右端で折り返すレスポンシブデザインが解決策です。
ただこれには高いスキルと時間が要求されるのでBootstrap 3のCSSの利用で簡略化します。
またBootstrap 3のCSSにより、フォントなど統一された完成度の高いデザインが可能です。
今回メインページは1個のタグを例外にBootstrap 3のTemplateとCSS7個で構成です。
以下はレスポンシブデザイン適用のメインページのスマホでの表示イメージです。
「Bootstrap 3/Webページ作成」のページはこちら「Bootstrap 3/Gridシステム」のページはこちら「www.ski-odawara.com/」のページはこちら
■Google Form
スキー教室などのWeb申込みに利用の<Form>は表アプリとの連携や自動返信が課題です。
Google FormとGoogle Apps Scriptでこれらに対応します。
＊Google Apps Scriptは後に拡張機能のGoogle Form Notificationsに変更しました。
「Google Form/自動メール返信」のページはこちら
■GoogleフォトとYouTube
写真とビデオの掲載のため、GoogleフォトとYouTubeを利用します。
Googleフォトは埋込を未サポートのためリンクのみでの対応です。
■CMS(Contents Management System)
ページ数が20を超えるあたりから更新作業が複雑多岐になり手作業の限界を感じ始めます。
利用実績のあるMovableTypeまたはトップシェアのWordPressのいずれかの利用を予定です。
＊これらの利用/保守には採用以降も継続的に高いスキルが要求されるため現時点保留です。
■ドメイン移行
旧Webページは、新しいページに自動ジャンプさせます。
ジャンプするには<meta>タグでrefleshを指定します。
<head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<meta http-equiv="refresh" content="1; url=https://www.ski-odawara.com/">
<title>sao odawara ski</title>
</head>
■Webサーバ<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<meta http-equiv="refresh" content="1; url=https://www.ski-odawara.com/">
<title>sao odawara ski</title>
</head>
nifty@homepageサービスからレンタルサーバに移行し、また独自ドメインを取得します。
WebサーバはCMSに必要なmySQLデータベースを含むさくらのレンタルサーバです。
低価格ながらCMS/独自ドメイン/アクセス解析と必要な機能はそろっています。
さくらのレンタルサーバのページはこちら「Filezilla FTPクライアント」のページはこちら
■Google Search Console
完成したWebサイトはGoogle Search Consoleに登録しGoogleでの検索を可能にします。
Google Search Consoleではモバイル対応の状況や検索パフォーマンスの最適化も可能です。
なおサイト内の全ページともモバイル対応に関する問題は「なし」でした。
■結果
着手から1か月あまりの短期間でしたが、新規Webサイトを無事公開しました。
Bootstrap 3により、スマホ対応と統一感のあるデザインのページ作成が容易になりました。
サイト内のすべてのページはGoogleのモバイルフレンドリーの条件をクリアしました。
Web申込にはGoogle Formを利用し表アプリ連携と自動返信メールを可能にしました。
容量無制限のGoogleフォトは高解像度写真とあわせて従来より見やすいデザインです。
さくらのレンタルサーバーと独自ドメインを利用で年間費用はこれまでの1/3以下です。
CMSの採用はサイトのページ数が少ないのと利用や保守の難易度を考慮し当面保留です。
追記：2018/7月 全頁ともhttpsアクセスでのSSL暗号化転送に対応しました。
