アライツ社労士事務所　＃スマホサイト模写①

レスポンシブサイトのデザインを見据えて、今日はスマホサイトの模写に取り組みました。完成した模写、オリジナルのスマホサイト、PC版サイトを見比べてみると、PC版からスマホ版に対応させるための工夫が色々！デザイン面で気づいたことをまとめてみたいと思います。

PC版でのデザイン
◆TOPページにナビゲーションメニューあり。

◆ファーストビュー（以下FV) のビジュアルは横幅いっぱいに取ったヒーローヘッダー。

◆FV直下の画像は、少し位置を右にずらして左に余白をたっぷりと。

◆"MORE"ボタンは横幅を短めに。

◆"業務内容”はアイコン、文言ともに横一列に羅列。

◆"事業所情報""セミナー情報"も同じく横方向に羅列。

◆"お知らせ"のアイテムは、カラムの幅をたっぷり取って、横方向に伸ばす。

◆フッターのグローバルナビは横一列表示。

スマホ版のデザイン
◆TOPページのナビゲーションメニューは、ハンバーガーメニューに格納。

◆FV下の画像は、スマホの横幅いっぱいに表示。

◆文言もほぼ左右いっぱいいっぱい。

◆"MORE"ボタンも同じく横長スタイルに。

◆"業務内容"はアイコン、文言ともに縦方向に羅列。

◆"事業所情報""セミナー情報"も同じく縦方向に羅列。

◆"お知らせ"のアイテムは、カラムの幅をスマホ幅いっぱいに取って縦方向に羅列。

◆フッターのグローバルナビは縦2段組みに収める。

なるほど、こうして横長のコンテンツを縦長のボックスに収めていくのだなぁ…。無茶苦茶ざっくりとした分析ですが、いい勉強になりました。

（模写サイトの引用元：アライツ社労士事務所様　　https://arights.com/）

(traced SP site , time required: 2.5h )

(original SP site)

(original PC site)