【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版デザインカンプ

背景

公開されているワイヤーフレームからカンプ制作する課題です。
【ポートフォリオ掲載OK！】実践的なWeb制作課題を配布します | PENGIN BLOG

前記事のPC版カンプをもとに、SP版カンプも制作しました。

成果物

画像

SP版デザインカンプ

制作スケジュールと工数

• 6/29
  • はじめからMenuまで 2.0h

合計 2.0h

• 8/10
  • Reserveからfootrerまで 1.0h
  • 全体余白の修正 0.5h

  合計 1.5h

【全体工数】
合計 3.5h

【空白期間の理由】
7月前半には資格試験を入れ、合格していざ...と思ったら異常な常夏状態、自室でのPC稼働が難しくなりました(自室はエアコンなし)。
97年ぶりに最長記録更新　札幌で18日連続の真夏日（フジテレビ系（FNN）） - Yahoo!ニュース

8/10現在いきなり落ち着き18℃、無事再開できました！
(来年までにエアコン付けます^^;)

工夫点

• PC版カンプから使い回して時短
• 縦幅を大きく使って余白を設け、見やすく
• スマホ上で読みやすい文字サイズ16pxを使用(※)

※ 【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ

反省点

【コンテンツ内容の多いセクションが詰まった印象】
特にメニューセクション。ヒアリング時にスマホのページで乗せる内容をもう少し検討したい。
レスポンシブ対応として縦に羅列する以外の方法も考えたい。

おわりに

本課題を公開しているPENGIN BLOGさま。
Webデザイン制作・コーディングを学ぶ中、実践的に手を動かせる課題の提供をありがとうございました。

ワクチン接種完了まではまだ就活に備える予定なので、とにかく手を動かすこと+資格試験をルーティンに過ごしている自分にとって大変ありがたかったです。

次はこちらのデザインカンプを元にコーディングを進めていきます！