【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 5 PC版デザインカンプをつくる【Adobe XD】
背景
アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、単体のアイスクリーム画像の制作についてまとめました。
本記事では、PC版デザインカンプの総振り返りとなります。
制作物
続
— ふーしゃ@web (@fuchsia_84) 2020年2月4日
プロトタイプでうごきもみれました🎬
制作期間🗓 : 1/31、2/3 - 2/4 の3日間
合計制作時間⏰ : 約20時間(素材集め含む)
波形作成ツール : https://t.co/XF2okXDCRn
しずく形作成ツール : https://t.co/j5N26RdB7u
写真素材はPixabayとAdobe Stock
つぎはタブレット版、スマホ版を！ pic.twitter.com/xFiCMFpxYR
制作物(パーツ)
- 自作ロゴ
- 水彩背景素材
- 単体アイスクリーム画像素材
※リンクから各まとめ記事へ飛べます
制作スケジュール
PC版デザインカンプ制作期間
全体 : 1/31 - 2/4 約20.0h
内訳 :
自作ロゴ : 1/31 - 2/3 約6.0h
水彩背景素材 : 2/4 約2.0h
単体アイスクリーム画像素材 2/4 約2.0h
ワイヤーフレームから全体修正 : 2/4 約1.5h
テキスト内容執筆 : 2/4 約1.5h
画像素材の検索その他 : 合計約5.0h
使用ソフト/ツール
- Photoshop
- Fresco
- XD
- Astro Pad(iPad/Apple Pencilペンタブ化)
- Adobe Stock:画像集
- Pixabay:画像集
- getwaves:波形SVG作成
- blobmaker:しずく形SVG作成
まとめと感想
｢自作の画像素材をつかった自作Webデザインとつくる｣というテーマを掲げ、
お題・コンセプトを決めてスタートした今回の制作でしたが、
無事制作物として落とし込むことができました。
また、｢つくったことのないレイアウトに挑戦する｣ということで、
2カラムレイアウト・マテリアルデザイン、写真をマスクしたデザインをとりいれました。
今までの模写&コーディングからは一歩踏み出せたものを
つくることができたのではないかと思っています。
一方で、現在は実務未経験ながらひたすら手を動かし
"つくってみた"を積み上げようとしているところですが、
現在のやり方が実務とどれだけ離れているのかということを
客観的にみつめる場がない・情報がないという点が気になっていました。
すると、実務に近い形で制作に取り組める資料を公開して下さっている方を発見...！
はじめまして！
— ふーしゃ@web (@fuchsia_84) 2020年2月17日
現在仮想サイトをつくっていますが、
実務の情報をしりたかったので大変ありがたいです✨
ワイヤーフレーム活用させていただきます！☺️💓
みてみると、制作スケジュール目安がありました。
水族館のWebサイト制作依頼、
ワイヤーフレームからデザインをおこす設定。
ロゴの制作も含んでいます。
この条件で、
PC作成は2人日、とあります。つまり16.0h...
今回の制作では全体が20.0hでしたので
少々オーバー気味でありながら、そこまで乖離しているわけでもなかった...！
すこし達成感を感じつつ、
クオリティー込みでかんがえると身の引き締まる思いがしました。
さらに衝撃だったのが、
現状で自分がつくるワイヤーフレームはただのスケッチ、こちらは仕様書
という印象を抱くほどにワイヤーフレームの時点でかなりしっかりと設計されていたことです。
今後の作成で、見直していきたいです...！
そして、ポートフォリオ掲載も許可とのことでしたので
今回の制作の次には是非ともこちらのデザインカンプ制作を行いたいと思っています。
さらなる成長に向けて...！
一つ一つ、積み上げていきます。
次回
次は、SP版のデザインカンプ制作振り返りです。
