皆様、はじめまして！
Studio SPECウェブデザイナーのakrです。
麻野社長のBlogに引き続き、僕も恐縮ながら記事を書かせていただきたいと思います！
本当はロックスのパブやシドニーのラーメン屋さんについて書きたかったのですが、取り敢えず滑り出しはWebデザイナーらしく、ホームページ制作に関する記事を書かせていただきたいと思います。
先立つ事2013年7月1日にStudio SPECのコーポレートサイトはめでたく全面リニューアルをいたしました。そうです、今見て頂いているこのサイトです。
ちなみに前回のリニューアルが2010年の8月だったので約3年ぶりのリニューアルになります。
みなさん、3年前ってなにしていました？
2010年の8月、僕は立ち飲みスペースがある酒屋さんで飲む、いわゆる角打ち巡りにハマっていました。楽しいですよー！
ちなみに2010年のヒットチャートは何かな？と気になって調べたらTop10が全部、嵐とAKB48で埋まっていて驚愕しました。
AKB48ってそんなに前から人気だったんですねー。
話が完全にそれてしまうところでした（汗）
改めて声を大にして言います。
2013年7月1日にStudio SPECのコーポレートサイトはめでたく全面リニューアルをいたしました！
で、当たり前の事ですが時代の流れはめまぐるしいものですよね。しみじみ。
ウェブ制作やデザインにおける手法も勿論の事です。
そこで、今回のリニューアル作業でポイントに据えた箇所を、簡単にですがご紹介させていただきたいと思います！
目次
- Flashを使わずに動きのある表現を！←今回はここです。
- スマートフォン、タブレットPC対応にしたい！
- 更新情報を楽しく掲載したい！
- 各サービスを解りやすく区分けしよう！
もちろん挙げだすともっと沢山あるのですが、cssやphpがどーのって書いてもあんまり楽しくないと思うので、今回はこの4つについて書かせてもらいと思います。
Flashを使わずに動きのある表現を
最近Flashを使用しないサイトがとても多くなってきましたね。やはりiPhoneの台頭が大きいのでしょうか。
Studio SPECのサイトをiPhoneやiPadでも閲覧してもらいたい、だけど動きのある表現もしたい。そんなわがままを実現する仕掛けをいくつか設置しました。
では該当設置個所の紹介です。
トップページ上部
これはリニューアル前からですが、各サービスをユニークなテーマに例えてサービスの説明をしています。でもってこの説明画像が切り替わるようにしています。
PCの画面最大幅とそれ以下の画面サイズでは切り替わりの仕様も違うんですよー。
各ページの制作実例
https://studiospec.com.au/graphic/stationeries/
PCならまだしもスマートフォン等の場合、限られた画面幅での閲覧になるので、制作物の画像や説明をずらーっと記載する訳には行きません。
そこで限られたスペースで数多くの実例を紹介できるスライドショーを採用しました。
省スペースを有効活用ってやつです。無限に増やすことも可能です。
会社沿革
https://studiospec.com.au/info/history/
15年の歴史を持つStudio SPEC。せっかくだからその歴史も楽しく紹介したいという事で、画面を上下にスクロールさせると、その年代にあった出来事が横からスイーっと出てくる仕掛けを採用しました。
1999年から2013年までのボタンも用意しています。これをクリックしたら該当の年代までタイムスリップ！
ここ1カ月のStudio SPECのアクセス解析を見てみるとiPhone,iPadからのアクセスが全体の19.8％にものぼります。
万が一、Studio SPECのサイトが全部Flashで出来ていたら19.8％の人はサイト自体閲覧することが出来ないといった状態になります。
もちろん、Flashが悪者と言っているわけではありません。僕自身、初めてFlashに触れた時の感動は今でも覚えていますし、Flashにしかできないことも数多くあります。
Flashに関わらず、肝心なのはユーザーの環境や、サイトの目的に応じてサイトの仕様を検討する事だと思います。
次回は「スマートフォン、タブレットPCに対応」です。
