自主制作サイトのコーディング編②になります。

予定していたデザインのコーディングが完了しました！
（本番はこの後のWordPress化なので、まだ無いページあります😅）

今まで実装した事のない機能も、できるだけ挑戦してみたので時間かかってしまいました。

コーディングってやっぱり一筋縄ではいきませんね。

各種ブラウザで意図した動作をしているのか？

自分の持っている環境ではできる限り動作確認しましたが、
全ては見切れないので何か不具合があったら是非教えて頂ければ幸いです。

尚、IE11はサポート対象外としてます💦

スポンサーリンク

スポンサーリンク

コーディングしたサイトを見てみる

以下のバナークリックでサイトを確認できますので是非ご覧になってください。

改善の余地が沢山あるので、適宜修正していくと思います!

補足情報

ハンバーガーメニューについて

SPとPCどちらも、グローバルナビがハンバーガーメニューになっております。

ハンバーガーメニューを開いている時は背景が固定されるつもりですが、
手持ちのiPhone7で若干不安定な動作をしていたので、もしかしたら動いてしまうかもしれません💦

PCは本当はハンバーガーメニューじゃない方が
UI的に良いのかと思ったのですが
最近のデザインで割と多く見かけるので採用してみました・・・

自分で作っておいてなんですが、やっぱりメニューをいちいちクリックしないとで
二度手間になる感じで良くないな～💦と思ってしまいました😅

それにブラウザでJavaScriptが無効の設定をされていた場合は
メニューが開けなくなってしまいますしね・・・

一応、JavaScriptが無効な場合は簡易メニューを表示するようにはしたのですが😅
他にもJavaScriptが無効な場合の対策として、swiperが動かなくなる事への対応も必要ですが、
現状できておりません。
こういった対策も何処までやっておくのが常識なのかな？？なかなか悩ましいところですね💦

Informationの記事は一つだけ個別ページあります

Informationの一覧で記事が5つあるように見えてますが、
「焼きたて食パン受け取り予約、始めました」だけ個別ページを作成してます。
wordpress化したら記事は全て同じフォーマットになります。

Menuは一覧のみ

どんなパンが売っているのかを一覧で見れるページで、個別のパンについての記事はありません。

MAPは群馬県庁

架空のお店の為、群馬県庁の住所を入れて作成してます💦
群馬県庁さんすみません・・・<(_ _)>

まだ無い部分（WordPressで実装)

あらゆるところにバナーが貼ってある、「焼きたて食パン受け取り予約」はリンク先がまだありません。

お問い合わせもまだありません。

Staff Blog（スタッフブログ）もリンク先ありません💦
こちらは将来的にお客様がブログをやりたい！となった時の為に予め準備している部分なので
WordPress化した際には「まだ投稿がありません」的に表示しておくか、
そもそも項目を隠しちゃうかのどちらかになる予定です。

表示速度向上と見た目の兼ね合いについて

以下の対応をしてます。

• 日本語フォントのサブセット化（速度向上）
• 画像の軽量化（速度とレティーナディスプレイ対応とのバランスを考えつつ・・・）
• トップページのヒーロー画像の読み込み速度が気になったのでローディング画面を追加（見た目）
• CSSとjsをminify（速度向上になれば）

改善が必要

アクセシビリティ対応が途中。マークアップ要改善。

jQueryを使わずに実装

トップページのローディング、ハンバーガーメニューの開閉、
画像などのふわっと表示、ページトップボタン等はjQueryを使用せず、CSSとバニラjsで実装しました！

動作確認

参考：XDのデザイン

SP(スマホ)とPC用のデザインです。前も見たという方、しつこくてすみません💦

デザインのグローバルナビの項目に抜けがあってコーデイングで追加しています。（HOMEとお問い合わせを追加）

また、デザインのグローバルナビのフォントがコーディングしてみたら大き過ぎて見づらかったので💦
コーディング後にフォントサイズ調整してます・・・

さあWordPressへ！

まだコーデイング完璧！とは言えませんが、これからWordPress化していきたいと思います。

また途中経過を記事にしたいと思ってます(^^)/

今回は以上になります。最後までお付き合い頂き、ありがとうございました。