架空整骨院サイトのTOPページ（スマホ版）

昨日「架空整骨院サイトのTOPページ」を掲載しましたが、今日はそのスマホサイト版についてまとめてみたいと思います。タイムリーなことに、ちょうど記事を書き始めたところに先生からこの課題完了とのご連絡をいただきましたので、フィードバックいただいたポイントなどを書いてみたいと思います。

まずは、初稿はこんな感じです。

工夫した点としては

◆PCサイトのファーストビューのビジュアルを縦向きに変更したかったので、画像を丸くくりぬいてぼかしをかけて並べてみた。PCサイトの雰囲気をそのまま引き継いでくれるかな。

◆デザイン4原則を踏襲したいと思い、特に近接、整列を意識。左右の余白はページ全体を通して一貫させた。

◆PCサイトと同様に、セクションごとの区切りを可視化するために、背景の色に変化を持たせた。

初稿で指摘されたのは、

◆ファーストビューヘッダーの「ハンバーガーメニュー」「電話ボタン」が大きすぎる。電話ボタンに関しては、タッチしたらそのまま通話になるので、あえて電話番号は書かなくてもいい（目から鱗でした。たしかにその通りです）

◆ファーストビューのトレーニング画像は、余白を左に設けるためにもう少し中央に。

◆下層ページに行くためのボタンはサイズをもう少し大きく（確かに小さいと押しにくい。。。）

◆"アクセス"の隣の文字はもう少し大きく。

そして、今回いただいたフィードバックで最も "なるほど、さすがプロ" と唸ったのは以下の2点！

◆スマホ版のフッターは、押しやすいように2列表記ではなくもう少しスペースを設けて（確かに確かに！自分自身、小さい文字だといつも操作にもたついているではないか！）

◆コーディングするときに作業を効率化できるよう、背景色の順番はPCサイトのものと同一に！（まったく気づかなかった！）

なるほどなるほど、デザインの段階で、後々のコーディング作業をどれだけ効率化できるかを考慮しながらやるのがキモなのですね。頭ではわかっていたつもりでも、背景色にもそれが適用されるとは知りませんでした。いやぁー、勉強になりました！作業中のレイヤー整理も、もっと頑張ってやらないといけませんね。。。（反省）

最終的にはこのように仕上がりました。

というわけで、今回もとても学びの多い課題でした。下層ページも頑張るぞ！