スタジオポメロ webページリニューアル

今回もデザイン・コーディングを担当させてもらい少し凝ったものにしてみました。

http://st-pomelo.jp/index.html

前回は起業から間もなかったのもあり、コンテンツが少なかったのと
CIにどこまで手を加えて良いかわからなかったので
かなりフラットな感じで全体に淡白な仕上がりでしたが
今回は一応こちらからも提案しつつ、作り慣れているような画面を
FVとしてつくってみました。
基本的にCIである以上画像は新作せず、jsで実装したアニメーションをBGに
cssで合成モードの指定、マスク合成やグローなどの効果を使い表現してみました。
つまり、AEでやるような処理を全てhtml5とcssでやってみているのですがなかなかいけますね。
レイヤーなんかも使えるので、簡単な画面は作れそうです。
webブラウザーを使ったコンポアプリなんかもつくれるかもしれませんね。

全体的には、twitterのタイムラインや作業実績、パートナー企業など新たなコンテンツ追加をしています。
また、ポップアップやスマホ版のアコーディオンなどの定番的なアニメーションや
見えていませんが西暦表記を自動更新するなどにJSを実装しています。

次回リニューアルを担当させてもらうとしたら
リクルートや、コンタクトなどのフォーム系や
社内の風景などの雰囲気がわかるものや作品のBreak Dwonや担当カットの場面写などの
絵素材やYoutubeやvimeoなど動画系、instagramなどのスチル系のSNSや
必要に応じてBlogなどの準備ができた時になるでしょうか。
その際はhttpからセキュアなhttpsにする必要も出てくるでしょうし
長い目でみるとphpベースに変更しWordPressなどで簡単に更新できるようにするなど
結構大規模な改修になるだろうなーと思っています。

また、今回minifyというSublimeTextのパッケージを使って圧縮をかけてみたんですが
W3Cのバリデーションチェックに引っかかったりするので
自分でPythonを使って書いてみました。それは備忘録を兼ねて別でエントリーします。

コメントを書く