幹部ナビをご覧の皆様、2度目まして。
制作部のOです。
前回は新入社員ブログを執筆させていただきましたが早いもので一端のwebスタッフとしてブログを書かせていただけるようになりました。
今回は、現在弊社でも徐々に増えてきている「レスポンシブデザイン」についてお話させていただこうと思います。
手前味噌な内容ですが最後までお付き合いいただけると嬉しいです。
ご存じの方も多いとは思いますが、レスポンシブデザインとは「ユーザー側のデバイス幅に応じてデザインを可変させる手法」です。
以前は同じサイトをPCで閲覧した場合とスマートフォンで閲覧した場合では同サイトの別URLで表示する手法が一般的でした。
(一軒の家があって訪問した人によって違う部屋に案内する、とイメージしていただければ分かりやすいかと思います)
そこがレスポンシブだと同じページ(URL)でありながらPCとスマホで違うデザインを表示させることが可能になります。
(同じ部屋に案内しても人によって間取りや内装が変わる・・・現実にはありえない話ですがそんな感じだと思ってください)
例えば下のが画像はPCとスマホで違う物が表示されるようにしています。(スマホでご覧の方は横向きに、PCの方はウィンドウサイズを思いっきり狭くしてみてください!)
(貴方のお好みはどっち・・・?)
ちなみに、世界中のwebサイトの実に8割以上がレスポンシブデザインを採用していると言われています。
今ご覧いただいている「幹部ナビ」はもちろん、大手企業のサイトやいわゆる「まとめサイト」もそのほとんどがレスポンシブデザインで作られています。
スマホ時代の現在では当然の流れですね。
レスポンシブにすることのメリットですが主だったところでは
・元となるHTMLファイルが一つで済む(メンテナンスの工数が抑えられる)
・URLが単一なのでアクセスが集約できシェア率の向上に繋がる
・Google他検索エンジンが推奨しておりSEO上有利になる
と、いいこと尽くめのようにも思えますが
・制作時の工程が複雑になるため工数が増える可能性がある
・1つのページにPC、スマホ双方のデザインやプログラムが混在することになるので表示速度が遅くなる可能性がある
といったデメリットもあります。
そこを
「無駄な記述を無くす」
「プログラムは出来る限り共有する」
「無理なくレスポンシブにできるレイアウトを提案する」
といったことでコンセンサスを取るのも制作の腕の見せどころなのです!
・・・と偉そうに語ってますが、未だに自分で書いたコードを見返すとジーパン刑事よろしく「なんじゃこりゃあ!」と叫びたくなる事も多く、まだまだ自己研鑽が必要だなぁ、と痛感する今日この頃です(汗
ここまでお読みいただいて
「こいつにできるなら自分にもできそうだな」とか
「おいおい、自分ならもっといい物作れるよ!」
などと思われたそこの貴方!
シンデレラFCグループではそんな猛者(もさ)の到来を心待ちにしております!
少しでも興味をお持ちいただけたら↓のバナーをクリックして(もっと丁寧な)採用情報をご覧になってみてください。