ロゴ


20141216
こんにちは! グラフィック&WEBデザイン プロダクション代表のクスメです。
弊社が制作を担当させていただいた「バイトGET完全マニュアル」がリリースされました。(*゚▽゚ノノ゙☆パチパチ!!

レスポンシブでスマホファーストを考慮したインターフェイスデザインをテーマに画面設計をしました。具体的には、フィンガージェスチャーを意識したアプリライクな動作と画面表示にストレスを感じさせないよう軽量化を図ることがミッションとなります。

「SmartNews(スマートニュース)」や「グノシー」のようなナビゲーションにしたい!とのお話しがあり、「JavaScriptで実装できたら、おもしろい!」とこちらも乗り気でデザインワークを進めました。当初はタブ状のフラットデザインだったのですが、「ページネーションをよりわかりやすく」&「ボタンとしてより認識させたい」とのご要望で、グラデーションを用いた矢印っぽい形状に変更しました。

これが全ての始まり・・・。パッと見は何でもないように見えるナビなのですが、軽量化を図りなおかつIE8にも対応させるというところに手を焼きました。ボタンをどのように実装するか? SVGでの実装〜SVGとCSSの組み合わせ〜PNGとCSSの組み合わせ・・・。あちらを立たせば、こちらが立たずという一進一退の状況が続き、スタッフのYが半轍状態で何日も悪戦苦闘してくれました(感謝!)。

他にも、イラストのドットパターンがPC、スマホどちらで見ても違和感がでないよう画像を切り出し分けたりと細かい部分で気を遣いました。

ご担当者のサポートもあり、とても良いものが出来たと思います。

バイトGET完全マニュアル
<推奨環境>
スマホ:iOS 4.0以降、Android 2.0以降
PC:InternetExplorer 8以降、Safari・Chrome・Firefoxはそれぞれ最新版