ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webコーディング】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 2 SP版コーディング内容のまとめ

Webコーディング Figma HTML CSS JavaScript

背景

お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです)
Webデザインカンプを1から作るための説明書｜こばやす｜Webデザイナー｜note

今回はSP版コーディングについてのまとめです。

制作したデザインカンプについてはこちら↓

fuchsia-84.hatenablog.com

PC版コーディングについてはこちら↓

https://fuchsia-84.hatenablog.com/entry/2021/12/17/200000fuchsia-84.hatenablog.com

成果物

動画

今回は下記のように4つのブレイクポイントを設け、
スマートフォン幅に近付くにつれてSP版カンプのデザインに近付くよう
PC版・SP版カンプでの中間択をとりながら調整しました。
※ 12/17 ボタン類にドロップシャドウ追加

【ウィンドウ幅 < 1074px】

  • スクロール後のショッピングボタンの位置を調整

ウィンドウ幅 &lt; 1074px

【ウィンドウ幅 &lt 1024px】

  • フォントサイズ変更
  • ヘッダーのロゴをテキストのみに変更
  • ボタン類:
    • スクロール矢印削除
    • ショッピングボタンのデザイン変更
    • ページトップへ戻るボタンのデザイン変更

ウィンドウ幅 &lt; 1024px

【ウィンドウ幅 < 768px】

  • コンセプトの改行位置変更
  • サービスのコンテンツを円形横並びから長方形折り返し
  • インフォメーションを横並びから折り返し
  • フッターの形状を変更
  • フッターのグローバルナビゲーション削除
  • フッターのリストを右へ移動

ウィンドウ幅 &lt; 768px
※容量のためgifにノイズ有

【ウィンドウ幅 < 599px】

  • フォントサイズ変更
  • トップ画像の形状を変更
  • ヘッダーのグローバルナビゲーションをトグルボタンで開閉
  • ヘッダーのグローバルナビゲーション内にロゴ表示

ウィンドウ幅 &lt; 599px
※容量のためgifにノイズ有

リンク

制作スケジュールと工数

  • 12/16
    • ヘッダー 1.0h
    • トップとコンセプト 1.0h
    • サービス、アクセス 1.5h
    • インフォメーション 0.5h
    • フッター 1.0h
    • ボタン類 1.0h

合計 6.0h / 0.75人日

学習事項

  • 今回は、ほとんど既知の内容でコーディングできた
  • rem、emでの指定で全体の比率をレスポンシブで変更できたため、必要な場所のみ個々に設定した
  • パフォーマンスを意識したコーディング: 不要な読込を避ける書き方
    • 表示/非表示が切り替わるimg要素はpictureで記述(今回は該当なし)
    • divにbackground-imageした時の画像はブラウザ依存でロードされる
      → 子要素にbackground-image、親要素をdisplay:noneでロード発生なし
  • (.moveを.gifに変換 ffmpeg)

レスポンシブ対応を終えて

表示/非表示を切り替える必要のあったパーツが多く、スタイル調整の記述が増え、煩雑になった印象でした。 また、ほとんどをdisplay:block/none;で記述したため不要な読込が多いのではないか？と心配になり、調べることに。

特にimg要素についてはpicture要素を使用すること、検索でもよく見る上、資格試験等でも見てきました。

今回はdiv要素にbackground-imageで画像を使用したものをdisplay:none;することが多かった(例: ロゴSVG)のですが、
その対応については↓のページに答えが。
CSSの "display: none" と画像ロード処理について - Qiita

こちらによると、[2]の書き方に該当しそうでした。[4]に変更するならば、あえてdiv divと二重に要素を作成し、この子要素にbackground-imageを適用すればよい、となります。

デザインカンプから読み取れることだけでなく、パフォーマンスも意識した記述を心がけたいと思いました。

おわりに

今回は、お題noteからワイヤーフレーム作成・デザインカンプ制作・コーディングに取り組みました。
全行程を10日間で終えることができたことで、成長を感じることができました。

そこに+αでFigmaでの制作に初挑戦したことで、Figma・Photoshop・Illustratorと多くの画像編集ソフトを渡り歩いたことで
これまでよりも画像編集ソフトと仲良くなれたような気がしました。

​また、コーディングでも知らなかったプロパティやjsライブラリと出会うとともに、パフォーマンスを意識した記述を知ることで新しい側面に大きな気付きがあったように思います。

さいごに、大きな学びの機会を与えて下さったこばやすさんに感謝申し上げます。
Twitter上でも進捗報告内容をいいね&RTくださり、大変励みになりました！！
ありがとうございました！