自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編②】HTML完成、デモサイトを公開

アイキャッチ画像HTML/CSS

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

予定していたデザインのコーディングが完了しました!
(本番はこの後の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で実装しました!

 

動作確認

Windows10
GoogleChrome、MicrosoftEdge、FireFox
Mac
GoogleChrome、Safari(ver 15.3)、FireFox
その他
iPhone7(ver15.3)、androidタブレットのGoogleChrome
IE11 一応確認。当然ながらNG(画像表示くずれ、js動作NG)

 

参考:XDのデザイン

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

デザインサイズは以下の通りです。
SP:iPhoneX(横幅 375px)
PC:横幅1280px

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

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

 

 

さあWordPressへ!

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

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

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


HTML/CSSWordpress
スポンサーリンク
この記事が気に入ったらシェアしてね!
na2factoryをフォロー
スポンサーリンク
フリーランス Webデザイナー

このサイト、
Na2 factory(なな ふぁくとりー)を運営している
"ななふ"と申します。
群馬県在住の40代女子です。

2020年8月からWebデザインの勉強を独学でスタートし、
12月にクラウドワークスでチラシ制作を初受注!
以降、細々とバナーやチラシ制作を受注しております。
2021年11月、フリーランスWebデザイナーとして開業しました。

このサイトでは、Webデザイナーになるべく自分が調べた事、
テクニック等を詳細に紹介していきたいと思います。
これからWebデザイナーを目指す方々や、活躍中の方々と
情報共有できたら嬉しいです!

詳しいプロフィールはこちら

na2factoryをフォロー
Na2 factory ななファクトリー

コメント

タイトルとURLをコピーしました