header_img

ブログ

スマホ向けデザインリニューアル!

というわけで今まで無難に作って騙し騙し 使っていたスマホ向けのサイトデザインを 大きく変えることにしました。

自分がスマホあまり使わないので(ロマサガRS以外) 優先順位が低かったものの、 さすがに本腰を入れる時期ではなかろうかと。

私は仕事柄WebデザインやスマホアプリのUIデザインを やったりすることがあるのですが、 今まで「私はデザイナーではない」という免罪符で 凝ったことは出来ませんなスタンスでした。

が! 今回はもう「これが私のセンスだ、文句ある?」 と開き直ることにしました。

秘技『消えるヘッダー』!!

まぁ変えたのはヘッダー部分だけなんですけど 結構印象が変わるものですね。 最初はボタンもにゅって動く予定でしたが、 スペースの都合とか2回目以降はうるさいんじゃね? という懸念があったので今回は見送り。

スクロールするとヘッダー画像とボタンの テキストが消えて見やすくなります。 ふふふ……真似しても良いですぞ?

この機能最初はCSSで実装したんですが iOSのSafariもChromeも動かないので、 JavaScriptで実装し直してポリフィルを 追加したことでようやく実現出来ました。

特定条件下で戻る、進むの時にチラつくことがある とかバグがあるのはご愛敬。数年後にCSSに移行すれば 直るのでは? と期待してます。

で、肝心のヘッダー画像ですけどまだ全然途中だったりw まぁじわじわアップデートしていくのも楽しそうだなってことで。 モチベーションも上がるしね。 最終的に色まで塗れたらいいな、とは思ってますが果たして。

スマホのサイトデザインから逃げるな!

前後のエントリー