ミライアークエステート株式会社　＃スマホサイト模写②

先日に引き続き、スマホサイトの模写をしました。今回もAdobe XDを使ったのですが、作業が随分速くなって、仕上がりは雑ですが、1時間半ほどで完成させることができました。スマホサイトは横幅が狭い分、マウスの動線がスムーズであること、プラグインのmimicで素材集めが楽にできること、そしてスマホサイトはグリッドが多用されていて、XDのリピートグリッドが威力を発揮することがサクサク作業できる要因かな、と勝手に思っています。

前回に引き続き、PCサイトをスマホサイトに移行する際の工夫をまとめてみようかと思ったのですが、今回のサイトはそこまで大きな差異がないようです。

強いて言うなら、スマホサイトは

◆メインビジュアルが縦長

◆TOPページのナビゲーションをハンバーガーメニューに収めている。

◆PCサイトでは横に並ぶグリッドが、スマホは縦にラインナップ。

◆フッターもPCサイトでは項目を横に羅列しているのに対し、スマホでは縦に羅列

ということぐらいでしょうか。これらの工夫は、前回のスマホサイトでもすべて施されていたことなので、レスポンシブ対応化の定石、ということなのでしょうね。

レスポンシブ対応に関して、今回模写をするまでまったく無知だったわたくし。てっきり、どの企業もPC版を先に作っておいて、それからスマホなど画面の小さいものにCSSを適用させていくものだとばかり思っていたのですが、最近は先にモバイル版を作ってからPC版に移行させていくという「モバイルファースト」が主流になっているようですね。

何はなくともまずはPCありき！とばかり勝手に思っていたので、ちょっと驚きでした。

模写サイトの引用元：　ミライアークエステート㈱様　（https://mirai-arc-estate.com/）

(traced SP site, time required: 1.5h)

(original SP site)

(original PC site)