Profile cover photo
Profile photo
深井学(Manabu Fukai)
8 followers -
デザイン事務所Glitter Style(グリッタースタイル) クリエイティブディレクター
デザイン事務所Glitter Style(グリッタースタイル) クリエイティブディレクター

8 followers
About
Posts

Post has attachment

Post has attachment
「デザイン事務所Glitter Style」のGoogle+を更新しました。
現在、主にこちらに投稿しております。
宜しければフォローくださると嬉しく思います。
Add a comment...

Post has attachment
またまた非常に光栄なお仕事をさせていただけました♪
【The New York Timesが年一回発行するマニュアル誌『Global Agenda』のWebスペシャルページを製作させていただきました!】
「未来の新聞ってこんな感じかな…?」なんて考えながら作りました。
『Global Agenda』は今月の13日に発売された雑誌ですが
アート、カルチャー、ライフスタイルから、政治、経済、世界情勢、テクノロジーまで
ありとあらゆる分野の「2014年とこれから」が網羅されてます。
本当に面白くて興味深い内容がいっぱい書かれています!オススメ!!

全21ページというボリュームで、Web版だけでも誌面の70ページ分くらいあるため結構雰囲気は伝わると思いますが、これは是非とも雑誌を読んでいただきたいなーと思います。

==================================
全編pjaxという『ページを移動せずに、コンテンツの中身だけを取り替える』手法で製作しています。
次のページへの移動が非常にスムーズ(ほとんど時間がかかりません)かつ、切り替わり時の演出も付け加えられるので
そういった部分でもページ移動していくことに飽きずにご覧いただけるんじゃないかなと思います。
(※コンテンツ切り替えモーション、コンテンツ表示モーションもそれぞれ複数用意してあり、結構ダイナミックな動きもあります。笑)
※注:IE9以下はこのpjaxには対応していない為、通常のページ移動になります。
画面右下・一番上の「インフォメーション」にも書いてありますが、ブラウザの「戻る」「進む」ボタンもちゃんと効きます。
(※ただし、一部のページ、特定の移動方法をとると正しく表示されないページがあるので、その際は「更新」ボタンを押していただけると正常に表示されます)
モバイル版でもほぼ同様の動きをするので、同じく楽しんでいただけると思います。
でもって、無駄にIE8にまで対応させています…笑 はい、バカですね。笑
だって……Global Agendaの内容はとても素晴らしく、非常に為になるものなので、
是非とも多くの方に読んでいただきたいなー…と思って。。笑

::発行元のNew York Times様にもお褒めいただけたので、自分のクリエイションにちょっと自信がもてるようになりました。
いつもながら、本当に素晴らしい機会をいただけて心から感謝しております!
Global Agenda
Global Agenda
sp.mensclub.jp
Add a comment...

Post has attachment
『生ける伝説のロックバンド、KISS』からの特別メッセージ動画を製作させていただきました。
今ももクロとコラボで新曲も出ていますね。アルバムが本日発売とのこと!

「KISSが…KISSが…ウチのPCの中に…‼︎」なんて変なテンションで編集していたのはここだけの話です…笑
また、完成品にKISS直々のチェックもあったので、プレッシャーで吐きそうになっていました…笑
Add a comment...

Post has attachment
年も明けて、しばらく経ってしまいましたが新年のご挨拶と抱負を書かせていただきました。
Add a comment...

Post has attachment
この度、日本でもっとも歴史のある月刊男性ファッション誌『MEN'S CLUB』様の創刊60周年を記念した特設ページ「メンズクラブを振り返る(※Web版)」をGlitter Styleが製作させていただきました。
http://sp.mensclub.jp/fashion/60th/ (Chrome,Safari推奨)

総ページ数13+αという濃厚なつくりなので、時間のある時にじっくりとご覧になっていただけると嬉しく思います。

トップページはパララックスを用いた構造になっており(PC版のみ)、各セクション毎に違った演出を施しています。その為、セクションによってはスクロールのさせ方によってはコンテンツを飛ばしてしまうところもあります‥苦笑
なるべく全体的にゆるやかめにスクロールさせながらご覧いただけると幸いです。

動画コンテンツなども含む為、結構重いページになっています。ローディングも気長に待ってやって下さい。


この他にも今月は2つ、MEN'S CLUB様のページを作成させていただいています。(片方はシークレットページなので公開はできないと思いますが…)

最後になりましたが、大変光栄な機会を下さった担当の小川様、支えて下さった皆さまへ心から厚く御礼申し上げます。
Add a comment...

Post has attachment
ここのところ、ありがたいことにずっと慌ただしくさせていただいていました。
あまりの慌ただしさに報告が遅れてしまいましたが‥‥

MEN'S CLUBオンライン様のクリスマス用の特設ページ+動画を製作させていただきました。
動画はちょっとソフトに遊ばれてるレベルで…
くやしいので年明けに猛特訓します。。
Add a comment...

Post has attachment
今回もMEN'S CLUB様の特設ページを担当させていただきました。

今回は誌面デザインから結構離れたイメージでつくらせていただきましたので誌面を読んだ方も、また違った雰囲気を感じられるかもしれません。
また、今回は2名体制で製作した為、前回よりはクオリティが上げられたかな…と。

●トップ部分のアニメーションのフルVer.はPCからのみになりますが、よければ一度ご覧になってみて下さい。
●コンテンツはスライド式。モバイルでは左右フリックでも切替えられます。
●クライアント様の意向でIE8にも(力技ですが)対応させました
 (※完全対応とまでは言えませんが閲覧に支障はないはずです)
Add a comment...

Post has attachment
僭越ながら「MEN'S CLUBオンライン」様の特設ページ製作を担当させていただきました。(自分ごときが担当させていただいてすみません。。)

誌面デザインを踏襲しつつ(そこまでしてない…?)動きで遊び心を加えたつくりになっています。

「限られた時間の中でいかにパフォーマンスを出せるか」大きな課題だな…と身にしみ、もっともっと精進しなきゃなーと心底思わせてくれるとても素晴らしい経験になりました。ありがとうございます。
Add a comment...

Post has attachment
前回はありものを使ってのSVGスプライト編集方法でしたが、
今回は自作のアートワークをSVGスプライトにする方法です。

Illustratorでのスプライト用データ作成方法と(単体では作成しきれない為)書き出したデータのスプライトデータ化方法を書きました。

・g要素での作成方法と
・symbol要素での作成方法
両方のパターンも紹介しています。
Add a comment...
Wait while more posts are being loaded