Androidのホーム画面をカスタマイズした過程をまとめてみました

大学時代の後輩から、「Android使ってましたよね？仕事で調べてるんで、ホームカスタマイズしてどんなのが良かったか教えてくださいよー」って言われてたのでやってみました。

結果

こんな感じになりました！

ブログに合わせたデザイン

壁紙やフッターなど使える素材はそのまま流用ですw Dock（ドック）部分のアイコンをブログフッターのアイコンと同じデザインにして、通常エリアのアイコンは、タイトル画像と合わせてクラフト地にスタンプを押したように作ってみました。

時計は無料アプリのウィジェットなので、後ほど紹介しますね。

使用素材

このブログにも使っているクラフトやレースの素材はこの本から。いつもお世話になってます！

• iconmonstr – Free simple icons for your next project

アイコンはこちらから。とっても使いやすくて大好きです！

どちらも個人使用という目的で使わせてもらっているので、作った素材ではなく作り方のほうをシェアさせて頂きたいと思います。

自作のための下準備

先に準備しておくと便利なものから。

オンラインストレージ（クラウド）

PCで作ったアイコンなどをスマホへ受け渡す際に。DropBoxとかでも良いと思いますが、お使いのGoogleアカウントそのまま使えるので楽かもです。USBで直接つなげるっていう手もありますね。

ファイル管理

スマホでDLしたらそのアプリのフォルダに入っちゃった！でもこっちのフォルダにまとめておきたいんだけど…！ってことがよくあるので重宝しています。複数選択して切り取りや貼付けも出来ます。

画像ビューアー

アイコンなど、こまごました画像をあれこれしなきゃいけないので。Xperia Aに入ってたデフォルトのビューアーがあまり好みじゃなくて探してみたら、これが一番使い勝手が良かったです。プライベートなフォルダを（サブフォルダ含め）表示/非表示できたりする機能もあって良いですねー！

ホームアプリの選定

何を選ぶかで今後の方針が決まってくると思うのですが…！

私はコレにしました。

一番の理由はアイコン変更が簡単というところです。今まで試したホームアプリは、アイコン変更するためのアプリをインストールしなきゃいけなかったりして、全部をカスタマイズするのはちょっと大変かも…。と思ってしまって。ADW.Launcherはホーム上のアイコンをダブルタップするだけで編集ができちゃうのがすごく良いです！

壁紙作成

これはあんまり説明することもないのですが…私の使っているXperia Aは、ググってみたら壁紙のサイズが1440x1280pxとのことだったのでそれに合わせて手持ちの素材から画像を作って壁紙設定しただけです。

フッターのノートの切れ端部分がちょうど良い位置に来るまで、何回かリトライしました。

ガーリーな時計ウィジェット

冒頭の、時計ウィジェットアプリはこちら。すっごく好み…！(*´∀｀*) 他にもたくさんの種類があって、もうちょっと小さいサイズも設定できます。ガーリーなもの探してる方はチェックしてみてくださいー！

アイコン作成

多様な解像度

Androidのホーム画面のアイコンの大きさは、「基本的には」48×48pxなんだそうです。ここへ、端末毎にHDとかフルHDとかそれは多様な画面比率が関わってきて実際に作る大きさが全然違って、それはそれは開発者泣かせなんだとか(´;ω;｀)

それと、Android開発者向けのこちらを見てみて、

• Iconography | Android Developers

背景画像とメイン画像の比率が4:3なの、いいなぁと思いました。これを元に、こんなイメージにしたいなーっていうのと、各解像度別のpx数を書きだしてみたものがこちらです。

自分のスマホの解像度チェック

さて、実際に、私の持っているスマホはどれにあたるんでしょう？ldpiってことはないと思ったのでそれは外して、4つの大きさのものを実際に作って違いを見てみる事にしました。

クラウドなどを使ってスマホへファイルを移したら、適当なアプリのアイコンをホームに4つ並べてみて、アイコンを変えてみましょう。

ダブルタップして[Edit]を選択。

アイコン画像をタップして選択します。ラベルも変えられます。

スマホで4つ並べてみたスクリーンキャプチャがこちら。96pxが一番綺麗に見えますね。ということは、私のスマホ（Xperia A）はxhdpiということですねー。ちなみにフルHD端末はxxhdpiらしいです。

拡大してみても、くっきり。

不特定多数の方に配布するものではなく、あくまで「自分のスマホで一番綺麗に見える」というものを目指して、96pxをベースに作っていきます！

加工のテンプレートを決める

ホーム上のアイコンは、クラフト素材を角丸にして内側シャドウを白、ドロップシャドウを黒30%にすることでちょっと浮き出る感じにしています。逆にドック上のアイコンは、内側シャドウを黒30%、ドロップシャドウを白にして凹み感にしています。また、ドック上アイコンはちょっと小さめにしたかったので、画像の大きさ自体は96pxですが、イラストは48px四方に収めています。

ホーム上アイコンの茶色のざらっとした加工は、同じ作業を繰り返すためにPhotoshopのアクションを作成しましたので、こちらをシェアして説明してみます。同じようなアイコン作ってみたい方は使ってみてください。

アクションをDL→読込

まずはこちらをダウンロード。

右上のボタンを押して、[アクションを読み込み]からDLして解凍したstamp.atnを読み込んでください。

追加されました。左の三角を押すと、

ふたつ出てきます。

スタンプ加工

画像を用意します。これは96×96px（中身は72×72pxに収まるようにしたもの）、解像度は72pixel/inchで作った画像です。くっきりした白黒画像で、線太めなのがおすすめ。レイヤーは統合しちゃっておいてください。

ここで、背景色は白・描画色は黒にしておきます。（雲模様1というフィルタを白黒で利用したいので。）

[stamp]というアクションを選択して、再生ボタンを押してください。

ざらっとしました。スタンプみたいに…見えるか見えないかは貴方次第…ッ！

線画抽出

今度は描画色を好きな色に変更してください。この色で黒い部分を抽出します。

[outline]というアクションを選択して、再生ボタンを押してください。

指定した色で抽出したレイヤーができました。

ホントはここまでをひとつのアクションにしたかったんですけど、色を途中で変える方法がわからず…。誰かご存知でしたらおしえてください…！

追記：すいませんなんか、カンバスの大きさが違うと、最後の塗りつぶしがうまくいかないかも…！もし駄目だったらヒストリーで塗りつぶしの前まで戻って、手動で塗りつぶしてみてくださいすみません｡･ﾟ･(ﾉД`)･ﾟ･｡

テンプレートにのせる

今作ったレイヤーを背景用の画像にのせて、両方選択しておきます。

[移動ツール]を選択したときに出てくる[中央揃え]のアイコンを、垂直水平共に押してやると簡単に真ん中に合わせられます。

真ん中に来ました！ボタンかぶった…ッ！((└(:3」┌)┘))

あとは、こまごまと設定

いっぱいアイコン作って、一個一個変えていくのが一番大変でしたw あとは、ラベルテキストの色を変えたり、テキストシャドウを不透明の白にしてみたり。

あ、それと、デフォルトのドックのシャドウが気になってたんですが、[ADWSetting]→[Themes]→[Customize]→[Main dock]→[None]にして、右上の[Apply]を押したら消えました。

こんな感じに。

いかがでしたでしょうか…。だいぶ長くなってしまいましたが、Androidのカスタマイズやってみたいー！という方のご参考になれば幸いです。（あと後輩の仕事の参考になるのか心配です。）