スマートフォン用サイトを作るのに使ったネタ（WebFont、角丸ほか）

Tweet

この前作ったDTPの勉強会ツイートライブ実況専用サイトは、結果的にHTML5時代の材料でスマートフォン用のアプリケーションサイトを作ることになったのでした。

僕がいろいろ作っているのは、誰かにもっといいものを作ってほしいからですので、今回作った時の経験を記録として書いておけば、誰か真似して、もしくはさらにいいものを作ってくれることもあろうかと思います。

① WebFont

タイトルバーに、とてもthinな書体を使いたかったので、WebSocketが使えるということはMozilla Firefox 7と限定されるということもあり、WebFontが使えるわけですので、使ってみました。

Google Web Fonts
http://www.google.com/webfonts

Google Web Fontsは、APIが用意されているので、CSSに1行書き加えるだけで、フォントが使えるようになります。

② タッチでトップ

iOSなどで採用されている、タイトルバーのところをタッチすれば、コンテンツのトップが表示される仕組みですが、jQueryなどを使えば、$('body').click(function(){scrollTo(0,2);});で実現できてしまいます。アニメーションするようにするとモアベター（というよりはマスト）です。

スクロール位置を(0,0)にしないのは、URL入力バーをを出さないようにする工夫です。たいていのサイトでは、scrollTo(0,1)と書いていますが、Android版Firefox 7では、それだとまだURL入力バーが見えてしまうので、あえて(0,2)の位置にしました。

③ WebSymbol Font

WebFontが使えるということで、機能ボタンのアイコンもフォントです。

Web Symbols typeface
http://www.justbenicestudio.com/studio/websymbols/

画面では○に＋とかなっているのはすべてフォントです。大きさも調整できるのがいいですね。

④ CSS3で角丸

角丸は今やCSSで簡単にできてしまいますよね。僕はいつもCSS3 PIEでCSSを生成してコピペしています。

CSS3 PIE: CSS3 decorations for IE
http://css3pie.com/

～～～

これらのほかにも細かいネタを使って、短時間でそれっぽいUIを作ることができたと思います。

このような感じで、DTPや印刷の人にぜひ役立つサイトや役立たないサイトを作ってもらえればと思っています。

2011.11.30 22:50 投稿　大野 義貴 [DTP] | 固定リンク |