あっという間に、9月からスタートしたWEBサイト管理者コースがいよいよ終わりに近づきました。
卒業制作は、訓練で学んだHTML・CSS・JavaScript・jQueryの知識を生かして、直打ちで作った以下のサイトでした。
3ヶ月間（他の訓練科目を除いて1ヶ月半ぐらい）の訓練の集大成と言いたいのですが、授業中で理解したつもりのものを実装したら、全く想定しなかったトラブルの連続で、サイト作りの大変さを実感させられました。
特に、JavaScripとjQueryを使って、ヘッダーなどの動きを付けたり、スマホ対応のハンバーガーメニューを作ったり、レスポンシブ対応させたりするときはレイアウトが崩れまくりした。
そこで、一つの記録としてサイト作りやトラブル解決の過程を複数回に分けて書き留めようと思うようになりました。
構成としては、最初はサイトのコンセプト・テーマ・配色や工夫した仕掛けなどをご紹介し、そこからつまずいたところや苦戦してようやくクリアしたところをピックアップしていくと考えています。
サイトのコンセプト・テーマと配色
サイトのコンセプト・テーマ
今回の卒業制作において、8月末に行ったふもとっぱらキャンプ場を題材にして、自分だったらこういうサイトを作ってみたいなという考えでスタートしました。
まず、ふもとっぱらキャンプ場は自分にとって緑豊かで落ち着く感じがしたので、サイトのコンセプトとしてもリラックス、安らぎ、穏やかというイメージを与えると同時に、レジャーなので少し遊び心も込めたいと思いました。
そこで、サイトの色は中性色の緑を選んだうえ、トップページにJavaScriptとjQueryを使って動きを付けてみました。
サイトの配色
まず、ベースカラーとしてNIPPON COLORSのサイトから「白緑（#A8D8B9）」という色を選びました。
サイトのベースカラー（白緑）
そして、ヘッダーエリア等のメインカラー及びその他の配色はpaletton.comのサイトを参考にして決めました。
メインカラー及びその他の配色
また、ロゴや予約ページへの誘導ボタンなどのアクセントカラーは色相環で反対色の紫系の色をチョイスしました。
参考にした見本・書籍やコーディングの流れ
主に参考にした2冊の良書
今回の卒業制作において、基本となるHTMLやCSSのコーディングやサイト作りの流れは主に授業で使用していたFOM出版の『Web クリエイター能力認定試験 HTML5 対応エキスパート 公式テキスト』で、トグルメニュー（ハンバーガーメニュー）やスライドショー、画像のズームなどのプログラミング関係は、主に翔泳社の『jQuery標準デザイン講座』を参考にさせていただきました。
二冊とも非常にわかりやすく丁寧に説明しているため、訓練校の先生の講義のあと、特に今回の卒業制作では何度か読み直して、サイト作りに役立っていました。本当にお勧めできる良書でした。
特に、『jQuery標準デザイン講座』において、プログラミングだけでなく、HTMLやCSSにおいても非常にうまいやり方や「これはすごい！」と感心した仕掛けなどが随所見られて、訓練校の先生も絶賛していました。
コーディングの流れ
まずはHTMLでの作業として、base.htmlを最初に作成して、そこにヘッダーエリア等のプログラミングも入れて、レスポンシブ対応をさせました。
ここでは一番時間を費やしていて、想定しなかったトラブルも多かったのですが、何とかクリアしたところで、後半のスピードもかなり上がりました。ですので、base.htmlで時間がかかり、思うように進まないと焦ってしまわないように、じっくり取り組んだ方が良いと思います。
base.htmlがある程度出来上がって、テストでそれほど問題がないところまで来たら、コピペしてトップページのindex.htmlなどのベースを作り、それぞれのページ内容に合わせて一つずつ作っていきました。
以上の作業を終えて、サイトもある程度形が出来たので、色やフォント、ボタン等の細かい修正を経て、サーバーにアップロードして、PCやスマホでの動作確認をして公開となる運びでした。
もちろん、デモ用サイトなので、忘れずにHTMLのheadタグにnoindexを追加し、検索エンジンにインデックスされないように設定しました。
工夫したところ・仕掛け
ここからは主に工夫したところやプログラミングによる動き・仕掛けを簡単に紹介したいと思います。
（詳細のコードやトラブル解決はこれからの記事にさせていただきます。）
スクロールによるヘッダーのリサイズ
まず、ロゴとナビゲーションメニューをヘッダーエリアの左側と右側に固定し、画面幅の縮小に合わせてナビゲーションメニューを自動的に2行目に送り込む設定をしました。
ナビゲーションメニューの画面サイズ適応
そして、画面を下にある程度スクロールしたら、ロゴを非表示させ、ナビゲーションメニューを画面上部の幅いっぱいに固定表示させるようにして、その際ナビゲーションメニューが後から降りてくるように遅延効果も入れてみました。
スクロールダウンによるヘッダーエリアの表示変化
ドロップダウンリスト
ナビゲーションメニューのサブメニューはあらかじめ非表示させ、ホバーしたら表示するドロップダウンリストを作りました。
ホバーしたら表示するドロップダウンリスト
トグルメニュー（ハンバーガーメニュー）
そして、スマホ画面用として、トグルメニュー（ハンバーガーメニュー）も実装しました。
スマホ画面用トグルメニュー（ハンバーガーメニュー）.gif
また、ハンバーガーメニューはスマホ画面用で、PCなどでの表示は必要なにため、画面幅が一定以上（480px等）になると、ハンバーガーメニューのボタン（3本の線と「MENU」の文字）を非表示させる設定も必要となります。
（ポイント）ユーザービリティの観点から、スマホのハンバーガーメニューに対してあまり慣れない人向けに、ハンバーガーメニューのボタン（3本の線）の下に「MENU」という文字も入れました。
スライドショー
トップページにスライドショー機能を実装しました。写真下の丸いボタンも設置して、それらをクリックして自由に見たい写真を選択することができます。
トップページのスライドショー
TOPに戻るボタンのフェードイン・フェードアウト
各ページの右下に設置した戻りボタンには初期状態では非表示にして、少しスクロールダウンしてからはじめてフェードイン表示というように設定しました。
TOPに戻るボタンのフェードイン・フェードアウト
ちなみに、ボタンの形は写真ではなく、CSSで実装しています。
画像のズーム
よくAmazonなどの通販サイドで見かける画像のズーム機能も実装してみました。
当時日の出を見た際に撮ったパノラマ写真は非常に大きくて横長なので、ちょうどズーム機能を活用して拡大表示できるようにしました。
画像のズーム
レスポンシブ対応
上でご紹介したスマホ画面用のトグルメニュー（ハンバーガーメニュー）の他に、
・画面幅及び余白の設定
・上下のmarginやpadding設定
・細かい位置調整
など、レスポンシブ対応をさせました。
ここもかなり時間を費やしました。
特にプログラミングの影響やPC用画面のmarginやpadding設定がスマホ画面ではかなり崩れたので、かなりの調整が必要でした。
レスポンシブ対応
まとめ
以上、卒業制作としてHTML・CSS・JavaScript・jQueryの知識を生かして作ったサイトの一部（トップページ）をご紹介しました。
授業中でそれほど難しく感じなかった機能などをいざ実装してみると、お互い干渉し合ったりして、ちょっと大変でした。
でも、一通り完成させると、大きな達成感とともに、理解が深まり、いろんなものがつながったと実感しました。
次はつまずいたところや苦戦してようやくクリアしたところなどをピックアップして書いてみようと考えています。
どうぞお楽しみに〜
