Designers Hack - デザイナーズハック

Web やアプリのデザイナーか「技術にしばられないでデザインを考えていく」コミュニティ。
月1回の定例MTGと年に数回のデザイン中心ハッカソンなどをしています。

  

Firefox OSを女子化してみた(その1)

ブログ

2012.11.16

以前のデザイナーズハック004「さわってみよう Firefox OS」で、終了後にOSを女子化することにいそしんでいまして、無事にいくつかのアプリを女子化することができました!

そしてきのう、味見部(#ajimibu)におじゃましてかんたんにこうなったよというのを発表させてもらってきました。

女子化したOSは実際、ミスターに実機に焼いてもらって確認しました!とってもかわいかったです!(自分で言うな)

ここではr2d2b2g上のものになりますが、スクリーンショットを公開します。

実際にカスタマイズした画面(ビフォー・アフター)

スプラッシュ画面

 

ロック解除画面

 

ブラウザ

 

 

キーボード

 

ブラウザでURLを入力するときの画面。ここも少し変えて女子っぽく(というかただのピンクですが)にしてみました。

ホーム画面

準備中

セッティング画面

準備中

デザインのカスタマイズ

使うもの

  • r2d2b2g(PC版Firefoxの拡張機能として出ている)
  • Photoshop
  • Coda(テキストエディタならなんでも)
  • Zip化、Zip解凍できるもの

 カスタマイズした画面

  • スプラッシュ画面
  • ロック解除画面
  • ブラウザ
  • キーボード
  • ホーム画面(準備中)
  • セッティング画面(準備中)

所要時間

1アプリあたり1時間ほど

 デザインは10分ぐらいで考えます。
その後、PC版FirefoxのFirebugでカスタマイズしたい要素をひとつずつ見ながら、画像を追加したりcssを上書きしたりします。(jQuery Mobileをカスタマイズする要領)

カスタマイズのしかた

Mozillaの浅井さんがまとめてくださったこちらもごらんください。
https://dynamis.etherpad.mozilla.org/osawarifx20121115? 

自分なりの説明は準備中。

GIGAZINEのヘッドラインニュースでとりあげられてた!

ものすごいアクセスがあったので何かなと思ったらGIGAZINEのヘッドラインニュースでテキストリンクでとりあげられてました!
ありがとうございます!

http://gigazine.net/news/20121116-headline/