【Webデザイン】オリジナルWebデザイン : アイスクリーム専門店の仮想LP - 終 SP版デザインカンプをつくる【Adobe XD】

背景

アイスクリーム専門店の仮想LPの作成過程をまとめています。
前回は、PC版デザインカンプ制作の総振り返りでした。

本記事で、さいご。
SP版デザインカンプの総振り返りです。

続

タブレット版プロトタイプ🎬

つぎはコーディング！✊#今日の積み上げ　 #Webデザイン pic.twitter.com/RwALBGO6z5
— ふーしゃ@web (@fuchsia_84) 2020年2月13日

制作期間 : 2/12
制作時間 : 3.0h

PC版のデザインでは、波形のロゴボタンからトップページに遷移し、
2カラムレイアウトでヘッダーにロゴ・グローバルメニューを配置。
さらに、SNSリンクは+ボタンで開くマテリアルデザインを採用していました。

これをタブレット・スマホ版にどのように落とし込んでいくかかなり試行錯誤しました。

最終的に、1カラム・ヘッダーにトグルボタンでグローバルメニュー開閉(スライド)の形としました。
波形はグローバルメニュー下部に継承させ、
マテリアルデザインの+ボタンはなくし、
アイスクリームに見立てたカラフルな円形SNSボタンは残して
グローバルメニュー内に入れることにしました。

あまり新しくはないけれども、見やすくて操作しやすい
といった印象になったかと思います。

コーディング的には、＋ボタンとSNSリンクをまとめたPC版でのdivと
グローバルメニュー内に挿入されるSNSリンクは別々につくり、
それぞれをdisplay:none;で切り替える方法しか今のところは思いつかない...

こういう部分はつくらない方がいいんじゃないかなぁ...
と思いながら。

これで、SP版も完成。

コーディングも楽しみです！

アイスクリーム専門店の仮想LPのWebデザイン制作過程、
まとめ記事はこれで終わりとなります。

取り組んだ内容が多かったので記事をわけたことで、
2/15より毎日投稿することができました！
ブログへのアウトプット経験と、
それぞれの制作物についてできたこと・できなかったことを振り返り、
まとめることができたことも大きな収穫でした。

コーディングを終えたら、そちらも記事にまとめて
次の制作にすすみたいと思います。

今後も"つくってみた"を積み上げて
精進して参ります。

よろしくお願いいたします！