ふーしゃのWeb制作ブログ

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

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 2 SP版コーディング内容のまとめ

Webコーディング Webデザイン HTML CSS JavaScript

背景

先日PC版コーディングを終えたページのSP版コーディングについてです！

fuchsia-84.hatenablog.com

成果物

実際のWebページをみる(GitHub Pages)

※Chrome/Safari対応、レスポンシブ済 2021/8/30現在

github.com

制作期間と工数

制作期間

2021/08/26、2021/08/27

スケジュールと工数

  • 8/26
    • ヘッダー(グローバルメニュー除く) 1.5h
    • トップセクション 1.0h
    • トップ下コンテンツ 2.5h

5.0h

  • 8/27
    • グローバルメニュー 1.5h
    • おすすめ・モデルセクション 2.0h
    • ニュース・アクセス・施設案内 1.0h
    • 料金 1.5h
    • フッター 1.0h
    • ページトップに戻るボタン(PC時も変更) 1.0h
    • 全体の修正 1.0h

9.0h

合計14.0h / 約1.75人日

未実施事項

  • Chrome/Safari以外のブラウザ対応
  • 言語切替機能(メニューのみ設置)
  • バナー制作

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

UI/UXを想定した上でつくる

今回、ページトップに戻るボタンのデザイン・仕様をコーディング中に変更しました。フッター上部に固定されたただの四角ボタンになっており、ユーザーは実際にフッターまでスクロールしないとボタンを押せず、機能の魅力やうま味が半減されてしまっていました。
そこで、トップ以下までスクロールすると出現する上向き矢印のボタンに変更しました。これならば存分に役割を果たせるかと。

before : フッター上部の四角ボタンafter : スクロールで画面下部に出現
ページトップボタンの変更
こういうことがなぜ起きるかですが、実際のページの中でユーザーにどんな操作を求めてどんな振る舞いをするかを想像できていなかったためと思います。コードを書いているうちにようやくおかしいことに気付きました。本来ならワイヤーフレームを見てデザインを作っている時にそこから汲み取るものでしょう...。
勉強になりました。

em/remのうまみを知った

数値設定に慣れていなかったこと、何が嬉しいのかイマイチわかっていなかったことで使えていませんでした。資格試験以降、なんとか数値変換がすんなりできるようになってきたので挑戦です。
そしてはじめてのアハ体験できました...！

今までは、たとえばa要素をボタンとして全体がクリックで反応するようにするには上下左右にpaddingを設定するとき、font-sizeに加えて上下左右のpadding・line-heightに至るまですべてをpxで指定していました。
この書き方でそのままレスポンシブ対応していくとなると、それぞれタブレットの時も〜px、〜px。スマホの時は〜pxなどとすべての数値を個々に変えていました。

ところが、em/remをはじめから使っておくと、文字の大きさに対して余白がこれだけあるボタン、という形を作れてしまうので、レスポンス対応としてはfont-sizeを変えるだけで済むのですね。同じ比率で作られたパーツを拡大縮小して使用していけるわけです。めっちゃくちゃ便利だなぁ！？？
もっと慣れていけば大幅に時短できそう。コードの可読性も上がりそうです。
カンプに対してpx単位で合わせるよりも、サイズ感やパーツ配置で合わせることを考えるという点があたらしい気付きでした。
(もちろん実務となるとデザイナー・コーダー間で擦り合わせる部分だと思いますが...！)

今後・おわりに

今回で水族館HPもレスポンシブ対応でき、その制作まとめ記事でした。
今回未実施となっている言語切替機能について、実装してみた！という形で別記事にできたらいいなーとおもってます。

ありがとうございました！