【Webデザイン】オリジナルWebデザイン : 水族館の仮想HP - 3 PC版デザインカンプをつくる

背景

公開のワイヤーフレームからのデザイン作成課題。
前回は背景用の波形SVG作成についてまとめました。

今回は、PC版デザインカンプ全体のまとめです。

成果物

画像

プロトタイプ

→
プロトタイプ🎥

工夫点 :
・メイン写真映えるようヘッダー背景透明(スクロール時変更)
・水イメージでセクション境界波型
・綺麗/明るい印象の淡い水色背景
・下部(フッター)は濃い色で安定

詳細は後日記事にします📝

実務めざす取組として、貴重な経験の機会をありがとうございます☺️ pic.twitter.com/ht4Kbidaqe
— ふーしゃ@web (@fuchsia_84) 2020年4月28日

制作工数

調査 : 1.5h
画像探し : 0.5h
XDデザイン編集 : 12.0h
プロトタイプ作成 : 1.0h
ロゴ制作 : 3.5h
背景用波形SVG作成 : 1.5h
全体の軽微な修正 : 1.5h

PC版デザインカンプ制作
合計 : 予定 16.0h(2人日) / 実時間 21.5h(約2.7人日)

使用ソフト・ツール

Adobe XD
Adobe Photoshop

工夫したところ

メイン写真が映えるようヘッダー背景透明、白文字
水や海が連想されるようにセクションの境界は波形に
カップル/家族向けに明るい印象を与えるライトトーンに
下部(フッター)を濃い色にして全体を安定させる

できなかったところ

予定の2人日をオーバー
- バナー制作/担当者チェック・修正を未実施
- ほぼほぼPhotoshopスキル不足が原因！

全体を振り返って

工夫したところにも記述した配色の面に関しては、ワイヤーフレーム作成のあやさんからもこのようなリプが！ コンセプトに合う配色にできたのではないかと...！ (とってもうれしかった)

はじめまして！
水族館の水の感じがでていて素敵です✨
涼しげな配色がいいですね！
ありがとうございました🥰
— あや🐈webデザイン&ディレクション (@ayaweb3) 2020年4月28日

ただ、"涼しげ"という点については、図らずも札幌市のイメージを強めることにもなったと同時に、"寒々しい"印象を与えてしまったかな、と少し気になりました。 人が遊びに訪れる場所、というところでは、ポップなイメージの黄色を加えるなど、もっと明るさを足してもよかったかもしれないです。

そして、全体を振り返ってみると、
できたと思えているのが実は上記のことくらい。

目安が2人日ということでしたが、バナー制作と担当者チェック・修正なども実施せずでこの工数がかかっていました。

Photoshopを使っていてかなり身に染みましたが、まだまだイメージしているものを実際の画像素材なりに落とし込むには足りていない模様...力不足を感じました。

さらに、あまりこだわる必要のないところに時間を割いてロスしたところも。(ロゴ制作で顕著)
Web制作を行う上では欠かせないところなので、実務前にできることとしてはPhotoshopでの制作スキルを鍛えておきたいと思いました...！