どうもー。ホーム画面沼のせいで高校の定期試験前日はいつも3時間睡眠だったポッターです。
この記事では僕が自作したスプラトゥーン3風のホーム画面と、その大まかな作成方法やこだわりについて紹介します。
細かい手順を書くと地獄のような長さになるので、作り方は本当に簡単に書かせてもらいます。
Androidのホーム画面の作り方に関してもう少しだけ詳しく書いた記事を書いたので、興味があればコチラも是非～
ホーム画面の紹介
歴代のホーム画面
見ての通り面倒くさくて背景デザインだけ変えています。ボタン配置もほとんど変えていません(笑)。
でも背景を変えるだけで完成したときに滅茶苦茶テンション上がりますよ。
ちなみに、Xperia XZ2 compactという縦長画面のスマホを使っているので全部縦長になっています。
ホーム画面の動作
実はこのホーム画面は1画面構成になっていて、上に貼られたスクリーンショットの画面以外はありません。「あれ？アプリそんなに少ないの？」と思うかも知れませんが、収納していたりジェスチャー操作に割り当てたりしているだけです。
このホーム画面の収納や操作を列挙しますと
- Lineボタン長押しでtwitter起動
- Skype長押しでDiscord起動
- Storage長押しでZ-achiever(圧縮解凍ソフト起動)
- Camera長押しで無音カメラ
- ミュージック長押しでApple music
- 歯車を下にスワイプで通信ログ表示
- 歯車を上にスワイプでgreenifyのアプリ休止コマンド実行
- メモ長押しでtrello
- 空きスペースをダブルタップで電話
- 空きスペースで上にスワイプで下からカレンダーと予定一覧のウィジェット
- 空きスペースを左にスワイプで頻繁に使うアプリグループの一覧を表示。もう一度左スワイプで全てのアプリを一覧表示。
隠し操作がとても多いですが、作った本人である僕には超使いやすいです。同じくホーム画面制作をしている人の参考になれば嬉しいです。
皆さんがスプラトゥーン風のホーム画面と聞いて頭に浮かんだものと比較してどうだったでしょうか。Androidのホーム画面カスタム事情に詳しくない人は驚くかも知れませんね。自由過ぎるホーム画面改造は泥勢の特権です。
(泥勢とはAndroidスマホ使用者という意味。Android⇒アンドロイド⇒ドロ⇒泥から)
おおまかな作り方
装飾はほとんど壁紙、必要部分のみアプリで表示
上の方で歴代のホーム画面を見せたので分かる人も多いと思いますが、装飾はほとんど壁紙に書き込んで、必要なボタンだけホーム画面のアプリで作成しています。
使ったアプリはLightning Launcher
昔からLightning Launcherというランチャー(ホーム画面の役割をするアプリのこと)を使っています。自分がホーム画面沼にハマり始めた頃は革命的なレベルで自由なアプリでした。今となっては同じくらい自由なホーム画面のアプリが他にも出ていると思います。
普通のホーム画面はアプリがキレイに整列して並んでいますが、このアプリでは設定を変更すると完全に自由な位置にアプリを配置できる上に、自由な角度に傾けることができます。
イメージとしてはパワーポイントで好き勝手にアプリを配置する感じです。
アイコンパックはWhicons
設定ボタン、Playストア、クロームなどのアイコンはWhiconsというアイコンパックを使用しています。
アイコンパックとは、ホーム画面アプリでアイコンデザインを一括で変更するためのものです。Playストアからインストールして対応しているホーム画面アプリで反映させると、アイコンのデザインを変えることができます。
僕は白一色でシンプルなデザインのWhiconsというアイコンパックを使いました。
壁紙の作成はPC版のAffinity designer
壁紙はもちろん自作です。自作でキレイな壁紙を作るにはPCのデザインソフトを使用することをオススメします。作りたい壁紙によってはPowerPointやExcelなどで図形を組み合わせて作っても良いと思います。
個人的にオススメのデザインソフトはAffinity designerです。このソフトは簡単に言えば格安Illustrator(イラストレーター)です。もちろんイラレで作って良いんですけど、イラレは高くて手を出しづらいなって人にはAffinity designerがオススメです。サブスク形式じゃなくて買い切り形式なので本当に安いです。
まぁ壁紙を作る方法は何でも良いんですけど、できればベクター形式で画像を作れる方が良いです。ベクター形式なら機種変更をして画面の解像度が変わった際にもキレイに出力できます。ノイズ無しのドットバイドット表示のホーム画面は眺めてて最高ですよ。
このブログ上では画像が圧縮されてノイズが入っちゃってますが、僕が手元で見てる実物のホーム画面はとてもキレイで質感ハンパないですぜ…ふへへ…
ホーム画面の作成についてもう少し詳しく知りたい人は下の記事も是非～
こだわりの原作再現
インク飛沫
スプラトゥーンと言えばインクは必須でしょう。もちろんデザインのコンセプトによっては他の部分でスプラ感を出しても良いですが、この特徴的なインクを載せれば詳しくない人にもスプラトゥーン風だと伝わりますよ。
逆に飛沫を描かずにスプラのデザインを取り入れたら、分かる人にしか伝わらないものが作れると思います。
インク飛沫の描き方としては、デザインソフトで下の画像ように頂点を配置して描いています。絵を描くのが上手い人はもっと頂点を置いて細部までこだわると思うんですけど、僕は不器用で微調整が苦手なのでなるべく頂点を減らして自然な曲線が多くなるように意識しています。
また、物理法則というか自然法則をちゃんと意識するとより自然になります。
例えば、ビチャ！ってぶちまけたインクって基本的には中心から外側に広がりますよね？なのでインクが伸びる方向に線を引いたときに中心付近を通るように意識します(完全に中心だとそれはそれでちょっと変な気がする)。
また、インクには重力が働くので下の方にインクが溜まります。なので、下向きに伸びるインクはちょっと太めで長めにするとビチャビチャ感が強く出てエモいです。
ちょっとキモイ話をしますが、理系の人は液体の表面張力などからどんな式の曲線になるか考えてこだわって描くとさらにハイレベルなデザインになると思います。僕は頭悪いので今回は感覚でテキトーにやりましたけど、論文用の図を書くときはどんな数式の曲線になるか意識して描いた方がカッコ良いですよ。
と偉そうに語ってますが、僕はデザインやイラストの専門家じゃないので参考程度に…
斜めのストライプ模様
スプラ風ホーム画面 Ver.1の時計の後ろにある灰色のストライプ模様もスプラトゥーンでよく使われているデザインです。Switchのホーム画面のスプラトゥーンのアイコンでも後ろは灰色のストライプ柄ですね。本当はカラーピッカーとかで色を合わせたかったのですが、時計の部分のコントラスト比が十分に出なかったので、この時は自分で灰色の明るさを調整しました。
イカ矢印
イカの矢印は普通の矢印だけでなく、イカリング2だと背景の装飾としても使われています。僕も前のホーム画面では背景にも使いました。
バンカラスタイル(スプラトゥーン3)の再現
ここからは、現在使用しているスプラ3風デザインのこだわりについて語ります。基本的に公式トレーラーの動画を参考にしました。バンカラ文化カッコ良すぎて限界オタク化しそうだぜ。
ステッカーやシールをペタペタ
まず僕がスプラ3のアートスタイルで惚れた部分としては無造作にシールが貼られた背景ですね。最初にこれは絶対に入れようと思いましたね。個人的にはもう少しシールの種類を増やしてより近いものにしたいと思っています。
あと、最初に見たときに「郊外の治安が悪い通りにあるステッカーだらけの壁」がモチーフかなーと思ったんですけど、よく見ると飛行機乗るときにスーツケースに貼られるようなシールと何かの入場チケットやパンフレットみたいなものが多いんですよね。
バンカラ地方って人気の観光地という設定だったりするんですかね？または、ヒーローモードの主人公や主要キャラが放浪の旅しててステッカーだらけのボロボロなカバンを常に持ち歩いてるとか…妄想が捗りますねぇ…
風化・劣化の表現
あと、スプラ3で特徴的なデザインは周囲がボロボロのテキストボックスですね。
スプラトゥーンのデザイナー天才。めちゃスコ。いっぱいちゅき。優勝。お前はそうやってすぐ俺を喜ばせてきやがって…っ！
僕はホーム画面で風化・劣化の表現を入れるときは、黒いダンボールが擦れてボロボロになっている様子をイメージしてデザインしました。
黒いダンボールの端を爪で引っかいてボロボロにしたときを想像し、近くの部分は切込みが同じ方向に向かうべきだとか、力がこの方向にかかったら線はこっちに傾くべきとか考えて端っこは作りましたね。
ちなみに、むしれた部分の一部を灰色にするため、灰色と黒の同じ図形を重ねて劣化表現を入れる部分だけ少し灰色が出るようにしました。
スプラ3カラー
インクの色は公式の画像からカラーピッカーで取りました。世の中の広告とかロゴとかの色って凄いこだわって作られています。個人的な意見ですが、何かの作品の雰囲気を再現したいなら色はこだわって似せた方が良いです。
やりたいけど時間が無くてやれていないこと
フォントを全てスプラフォントにする
初代スプラトゥーンのUIデザインに関する講演が過去にありまして、その中でフォントの重要性が言われていました。
なので、本当は全部の文字をイカフォントにしたいんです。でも、時計のウィジェットのフォントを変える方法が浮かんでいないのと、フォントは配布されていないので画像のコピーやトレースをするしかないので面倒に感じています。
バンカラスタイルの背景のシールの種類を増やす
スプラトゥーン3の公式イラストや公式動画で登場するシールやステッカーってよく観察してみるとメチャクチャ種類が多いです。デザイナーさん大変そう…
僕のホーム画面の壁紙がちょっとイマイチな点はそこかなーと思っているのですが、最近忙しくてトレースしまくる余裕なんてない。
インクが垂れる演出を入れる
歯車のマークを押したときに黒いインクが飛び散る演出を考えていましたが、アニメーションにするのが大変そうなので止めました。電池の持ちも悪くなりそうですしね。
スプラ3の新しいUIデザインの更なるお披露目が楽しみ
シールペタペタの背景とボロボロのテキストボックスの時点で、かなり僕の趣向にドストライクだったんですが、今後さらに僕を限界オタク化させるようなイカしたUIデザインが出てくるんじゃないかと凄く楽しみです。
そして、新しいデザインの尊さに昇天させられた後はもちろん自分のホーム画面にも取り入れますよ。
ぁあ！もうスプラトゥーンのデザインしゅき。いっぱいちゅき。プレイ中に悶絶しちゃうよこんなん。イカし過ぎだろ。
最後に
好き勝手に書きたいこと書いたこの記事が参考になる気がしませんが、皆さんもホーム画面沼に沈んで、ついでにスプラトゥーン3廃人になりましょうね。
ー 最後まで読んだアナタにオススメの記事
【フラクタルアート】絵心なくてもOK！幻想的な画像を自作しよう！
【新発想】カフェ作業そのものを趣味にしよう！PC使う趣味が捗るぞ！
【PCの大掃除】Windows11定期メンテナンスの勧め！
