背景
お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組んでいます。(有料noteです)
今回はSP版デザインカンプ制作について記事にまとめます！
前回:
課題元: Webデザインカンプを1から作るための説明書｜こばやす｜Webデザイナー｜note
成果物
工数
合計 4.0h
工夫点
- 共通パーツを活用…PC版制作で共通するパーツをまとめて作成、その複製とスタイル調整で作成できた。
- 通販ページへのリンクボタン、ページトップボタンの変更…スマートフォン画面でも押しやすく、コンテンツ内容を邪魔しないシンプルなものを新たに作成。
- トップのマスク画像を新たに作成…画面の縦横比が変わるため、新たに作成。ゆるやかな曲線が出るようにした。
- グローバルナビゲーションはトグルボタンで開閉
- スマートフォンで読みやすいフォントサイズ16pxに設定(タブレットは18px)
- コーディングを意識…font-sizeに対するline-height/letter-spacingの比率を固定して作成。line-heightはfont-sizeの1.5倍、letter-spacingは5%(一部のみ変更)とした。全体に統一感を与えるとともに、コーディングの際の効率アップを狙う。
SP版カンプ制作を終えて
全体的にPC版で作成したパーツやフォントの大きさと配置のバランスをそのまま持ってきて調整する形で終了でした。
さらに、新たにパーツを製作するにしてもFigma内で完結させることができたため4時間程度での完成となりました。
今後・おわりに
お題からの制作を経て、今回も多くを学びました。
本課題の配布元: こばやす(Twitter: @kobayas_s)さん に感謝申し上げます。
ありがとうございました！
課題にプラスして、今回はFigmaでの制作にも初挑戦。
素材の作成と編集がとてもスムーズに行え、Figma内で完結できる作業が多く操作も手軽でした。
プロトタイプの作成や、その他拡張機能を入れるとさらに色々とできるようで...
ちょっとハマってしまいそうです...w
前から気になっていたツールだったので、今回経験できてよかったです！
このあとは、今回制作したカンプを元にコーディングを進めます。
引き続き。精進！
