【素材作成】デザイン一新に向け、新スクフェス風ホーム画面完成！【スクフェス風ホーム画面作成】

記事公開日：2015 09

前回、とりあえずやっつけ仕事でくり抜いた素材で新スクフェス風ホーム画面をレイアウトしてみましたが、なかなか難しいことになりそうだなぁ～と感じました。

あれから、やっつけ素材でいろいろ試して『よし！これでいいだろ！』ってとりあえず思えるくらいになったので、前回の記事を改訂するような意味合いで本記事を作成しております。

前回やっつけ仕事だった素材はちょっとだけ綺麗に切り抜き直し、
どーしても欲しかった『課題アイコン』の大きい版は「無いなら作っちゃえ！」ってことで自作してやりました！（笑）

つたない物ではありますが、お役にたてれば幸いです。

本家との比較

ちょっとだけ綺麗に修正した素材と自作課題アイコンをZooperWidgetで実際に配置してみました！
上が「お知らせ」で公開された新スクフェスホーム画面。
下が今回作成してみたスクフェス風ホーム画面です。

こうやって見比べてみると、それなりに雰囲気が似ている感じにできてるかなぁ～とは思います。
本家スクフェスでホーム画面の背景が選択できるようになれば、もっと綺麗な背景画像をトリミングすることができそうです。
今回は、実使用することを想定して色々と配置していますので、100%再現を目指している物ではありませんが、スクフェス風を味わうには十分かなと感じています。

吹き出しの形に変更されたアイコンは、本家と並びが違うんですが、どちらもパソコンで操作して確認します的なイメージで、ちょっと重なるように配置しました。

一応素材置いときます（改訂版）

前回と同じように各要素ごとに紹介しながら素材を置いておきます。

■課題アイコン【NEW】

前回と同様の二枚は切り抜きを若干綺麗に修正したくらいなんですが、

カレンダーの予定を表示させたかったので、本家スクフェスの素材では上下幅が圧倒的に足りない！！
つまりは上下に長いバージョンがどーしても欲しかったので自作しました！

慣れないベジェ曲線と格闘して、クリップ部とノート部にはドロップシャドウまで掛けてやって、白枠とピンク枠の囲みまでつけてやりました！しかし、ペンで引かれたような下線が無いことに今気付きました・・・
本家に比べてクリップが大きい気がしますね・・・まいっか（笑）

画像のサイズは大きいですが、容量自体は小さいです。（ブログ上では縮小して表示しています。）
配置後にZooperWidget上でスケール縮小して使用することを推奨しています。
（最初から小さい画像使うより、その方が綺麗に見える気がします。）

なお、Zooper上でクリックした場合はグーグルカレンダーへ飛ぶようにしています。

■ステータスバー

こちらは2chの『スクフェス風ホーム画面作成』のスレでどなたかが作成して下さったものを利用させて頂いております。
ですので本記事に素材としては置いていません。最新の該当スレをご覧いただければ幸いです。
作者様ありがとうございました。

前回悩んでいたRank枠、バッテリー残量をプログレスバーで配置したかったんですがいい場所がどーしても思いつかず、結局前回の想定通り帯の所に配置しています。batteryの文字と被っちゃいますが、意外と気にならないような・・・気にしないようにしています（笑）

■時計と電波アイコン
これはステータスバーの帯に配置する小さいアイコンです。
こちらは、どなたかが作成された旧スクフェス風ホーム画面のステータスバー素材から切り抜いたものです。
作者様ありがとうございました。

■メール(友達)アイコン

吹き出し内の半透明処理は今回もサボっていますが、汚かった部分をちょっと修正しました。
なお、Zooper上では『Gメール』へ飛ぶようにしています。

■プレゼントアイコン

こちらも上と同じく半透明処理はサボってちょっと綺麗にしただけです。
このアイコンの使い道が難しくて・・・今はタップしても何も起きないようになっています（笑）

■お知らせアイコン

こちらは全開切り抜きミスで白が見えてしまっていた箇所を削除しました。
スクフェス風ホーム画面としてスマホ上に配置するとかなり場所を取ってしまうのですが、目立つ分、これを配置しないと『新スクフェス風ホーム画面』に感じにくくなってしまうかもしれません。
なお、Zooper上ではラブライブ！公式のNews！ページへ飛ぶようにしています。

■背景画像

前回と変更はありませんが、せっかくなので一つの記事で全部紹介しておいたほうが良いと思い載せています。もう少しバリエーションを作りたいところですね。

■称号アイコン

称号アイコンの素材と配置した例は『夏の大型アップデート！スクフェスに新機能がついに実装！！スマホのホーム画面も新デザインに近づけてみる！』という記事にて紹介しています。

こんな感じで、なんとか新スクフェス風ホーム画面のカスタマイズが完了しました！前回も書きましたがAndroid本当に最高ー！！！！
実はロック画面にもスクフェス風ではありませんが、カスタマイズした色々な情報が確認できるウィンドウを配置しています。機会があればそちらも紹介したいと思います。

再現度だけにこだわらず、自分が一番使いやすい『新スクフェス風ホーム画面』を作るのが一番楽しいでしょうね♪

実際に実装されたら他にも新しいアイコンなどがあるかもしれませんので、アップデートが待ち遠しいです！