ふーしゃのWeb制作ブログ

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

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

Adobe Xd Webデザイン

背景

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

PC版のデザインカンプから先に作成しました。
理由としてはワイヤーフレーム上にお客様側から掲載要望に上がっていたコンテンツ内容が多い印象を受けたので、すべてを掲載する前提でのイメージを作りたかったためです。

成果物

プロトタイプ

画像

PC版デザインカンプ
PC版デザインカンプ

制作スケジュールと工数

  • 6/25
    • 課題ページ解釈 1.0h
    • 素材集め 1.0h
    • 画像編集 1.0h
    • デザインカンプ(はじめからcardまで) 5.0h

合計 8.0h

  • 6/29
    • 素材集め・画像編集 1.0h
    • デザインカンプ(reserveからfooterまで) 2.0h
    • プロトタイプ制作 1.0h

合計 4.0h

【全体工数】
合計 11.0h

工夫点

  • ウォームナチュラル配色(※)と植物・木目の写真素材を使用
  • 記号、アイコン、画像等に丸みをつける
  • 手描き風フォントを使用
  • 読みやすさのため数字のみ別フォントを使用
  • 派手な演出のない穏やかなアニメーションを採用
  • 特に変わった点のないレイアウトを採用

すべて、安心感・親しみやすさを与えるように意識した点です。

※ウォームナチュラル配色の解説↓
色彩検定1級2次の基礎知識（15）〜配色イメージ〜 | Itaming Note

反省点

【共通パーツをまとめて作る】
セクションタイトルやメニュー枠など共通で使用できるパーツが複数あるにも関わらず、ほとんど一つずつ作ったことで余計な工数がかかっていました。まとめて作ることでぐっと時短できそうでした。

【細かい調整は大枠を作ってから】
全体の大枠が出来上がる前に段落やセクション間の細かい余白の調整をしていました。結局後からも調整は入るので、前半の作業に無駄が多くなりました。

次記事にて、SP版制作についてまとめます。