に投稿 コメントを残す

【iOS 14】iPhoneホーム画面をシンプルなアイコンでカスタマイズ【 Googleウィジェット】

iOS14のアップデートによってホーム画面のカスタマイズ機能が向上したのは、iPhoneユーザーならもうだいたいの方がご存じでしょう。なので、ここでは私が実際にカスタマイズしたホーム画面を、その方法とともにシェアしたいと思います。

必要なもの

アイコンを作る上で、パソコンまたはiPadと、そこで動かすアプリを使うことを前提にしています。

パソコンの場合

Illustrator(イラストレーター)
ない場合は画像加工アプリなど何でもOKです、いろいろあるので好きなものを使ってください。
Illustratorの価格:月々2,480円(税別)

iPadの場合

Procreate(プロクリエイト)
手書きアイコンを作ることが前提になります。
ドローイングアプリならProcreateでなくても何でもOKです。
Procreateの価格:1,220円(税込)

ここで「パソコンもiPadも持ってないし、Illustratorなんてなおさら持ってない」という方のために、今回作った壁紙やアイコンをダウンロードできるようにしておきましたので、もしよかったら使ってください。ダウンロードは無料です。
また、ここで載せてる以外のアプリのアイコンも入れてほしいというご要望もあるかと思いますので、その場合はコメントなどでお知らせください。ニーズがありそうなら作って追加します。

今回作ったホーム画面のテーマ

以下の5項目をテーマにして作ってみました。

  • Googleウィジェットに合わせる
  • シンプルに
  • フラットデザイン
  • アプリ名を非表示
  • アイコンの輪郭を見せない


まず、iOS14からウィジェットをホーム画面に配置できるようになったので、Googleのウィジェットを入れてみました。そして、その雰囲気に合わせるために全体的にシンプルでフラットな感じにします。
それとアイコンについては、ペットの写真など何でもいいのですが、これだと視覚的に何のアプリなのか分かりづらいので、基本的にはひと目で何のアプリか分かるようなフラットデザインのアイコンにするというのと、それによってアイコンの下に表示されるアプリ名を全て非表示にします。
ついでに、アプリアイコンの角丸の四角い輪郭をなくして、ロゴマークだけが並んでいるだけというような見た目にします。

アイコンの作り方

それではここからホーム画面に配置する各アプリのアイコンの作り方の説明に入ります。iOSのバージョンが14になっている前提で進めますので、もしまだ14になってないという方は、まず14にアップデートしてください。

ウィジェット「Google」を配置

まずはホーム画面のどこか空いている場所を押し続け、ホーム画面が編集できる状態にし、左上に出ている「+」ボタンをタップします。

検索バーに「google」と入れて、出てきた「Google」を選択してください。

なお、検索してもGoogleが出てこない場合は、App StoreからGoogleアプリをダウンロードして事前にインストールしておいてください。
さらにこのアプリを開き、Googleアカウントでログインしておいてください。
Googleウィジェットはアイコン4マス分と8マス分という2種類の大きさがありますが、画像や音声での検索ができる8マス分の大きい方がすごく便利なので、こちらを選んで「ウィジェットを追加」します。

ホーム画面をスクショ

Googleウィジェットが配置された状態で、ホーム画面のスクショを撮ります。スクショは電源ボタンと音量を上げるボタンの同時押しです。

カラーコードを調べる

このGoogleウィジェットで使われている色について、それぞれ6桁のカラーコードを調べます。無料でカラーコードを調べられるウェブサービスがいくつかありますので、ここではそれを利用します。今回は「HTML Color Codes」というサービスを利用します。
「Upload File」という青いボタンをタップして画像を選択、画像の中で知りたい色の箇所をタップすると、そのカラーコードを表示してくれます。

ここではGoogleウィジェットの背景の黒と、全部使うかは分かりませんがアイコンに使われている赤・黄色・緑・青の4色、合計5色のカラーコードを調べて、メモなどに控えておきます。

するとこうなりました。

202124
d8503f
f1be42
58a55c
5383ec

壁紙を作る

アイコンを作る前に、まずは壁紙作りから。壁紙は単色(ベタ)で、色は先ほど抽出した黒っぽい色の#202124にします。縦横サイズは何でもOKですが、今回は1242×2688ピクセルにしておきます。
ここではMac版のIllustratorとiPad版のProcreateでの作り方の説明をしますが、どちらも使える環境ではない場合は、アイコン同様この壁紙をダウンロードできるようにしてありますので、そちらをご利用ください。

Illustrator

新規作成(幅は1242px・高さは2688px・カラーモードはRGB・ラスタライズ効果はスクリーン(72ppi)で「作成」)


カラーの「塗り」を202124、「線」をなしに


長方形ツールで画面上をクリック、「幅は1242px・高さは2688px」でOK


作られた長方形をアートボード(白い部分)に配置


メニューのファイル→書き出し→Web用に保存(従来)→保存(ファイル形式はPNGで。PNG8でもPNG24でもどちらでもOK)


AirDropでiPhoneに送るか、iCloudなどクラウドにファイルを送る

Procreate

ここではApple Pencilを使って操作しますが、Apple Pencilはなくても問題ありません。

左上の「ギャラリー」→右上の「+」→黒いアイコン「+」→幅は1242px・高さは2688px・DPIは72で「作成」



右上の丸い「カラー」から「値」タブを開き、「16進」の数値を「202124」に



この丸い「カラー」をキャンバスにドラッグ&ドロップで塗りつぶす


左上の「ギャラリー」1つ右にあるスパナアイコン→共有タブを開き、「イメージを共有」の「PNG」を選択、AirDropなどで自分のiPhoneに送る

再度スクショを撮る

作った壁紙を、iPhoneのホーム画面の背景として配置します。その画面を再度スクショしてください。なぜこの作業が必要かと言うと、ホーム画面のDock(下のアイコンが4つ固定表示される部分)は若干背景色が変わってしまい、あとで説明しますがその部分のカラーコードも必要になるからです。


そのスクショした画像を使い、再度カラーピッカーなどのサービスを使ってDockの背景色のカラーコードを調べます。

黒(Dock背景):232326

アイコンを作る

知りたいカラーコードが全て分かったので、ここからはアイコンを1つずつ作っていきます。サイズは正方形であれば何でもOKですが、1024×1024pxが推奨サイズです。

Illustrator

全部のアイコンを作るとキリがないので、ここでは設定アプリ用に歯車のアイコンだけ作ります。歯車の作り方にもいろいろと方法はありますが、ここではジグザグの効果を使った方法で進めていきます。他のアイコンについても同じような要領でどんどん作っていってもらえればOKです。

新規作成→幅も高さも1024px・カラーモードはRGB・ラスタライズ効果はスクリーン(72ppi)で「作成」


カラーの「塗り」を202124、「線」をなしに

長方形ツールで画面上をクリック、「幅は1024px・高さは1024px」でOK

作られた長方形をアートボード(白い部分)に配置


新規レイヤーを作成しつつ、最初のレイヤーをロック


カラーの「塗り」を違う色に変えて(色は何でもOK)、「線」をなしに

楕円形ツールで円を4つ作る



それぞれのオブジェクトの区別をつけやすくするため4つの円の色を全て違う色にする

このうち1つを小さく(だいたい40〜60%くらい)、もう1つも小さく(80%くらい)に(サイズは後で変更できるのでとりあえずでOK)



100%の円と小さい円を、2つとも選択した状態で水平・垂直の両方向で中央揃えし、メニューのオブジェクト→複合パス→作成でくり抜く




もう1つの100%の円を選択し、効果→パスの変形→ジグザグで歯車の歯を表現



複合パスでくり抜いたドーナツ状のオブジェクトを最前面に配置


3つのオブジェクトを全て選択した状態で水平・垂直の両方向で中央揃えにし、オブジェクト→クリッピングマスク→作成





歯の大きさや中心の抜け部分など気になるところがあれば、戻って各オブジェクトの大きさを調整したり、ジグザグの感じを調整するなどして、再度クリッピングマスクしてください。

ダイレクト選択ツールでこの歯車の内側を選択し、カラーの「塗り」を5383ec(青)に

ダイレクト選択ツールで今度は外側の歯の部分を選択し、スポイトツールで歯車の内側部分をクリック


楕円形ツールで円を作り、歯車の中央に配置


長方形ツールで歯車の中心と外側をつなぐように線のような図形を作り、高さを垂直方向中央に整列(真ん中に来ない場合は整列が「アートボードに整列」をになっているか確認してください)


回転ツールで歯車の中央部分をoption(Winはalt)を押しながらクリック→角度は120度→「コピー」をクリック



もう1つ必要なのでcommand(WinはControl)+D


大きさを調整して完成

メニューのファイル→書き出し→Web用に保存(従来)→保存(ファイル形式はPNGで。PNG8でもPNG24でもどちらでもOK)

保存先は、Macの場合はあとで使いやすいようにiCloudに専用フォルダを作り、そのフォルダ内に全てのアイコンのファイルをまとめて入れておくと便利です。WInの場合は、iPhoneとデータをやり取りするためのクラウドサービスなどを使っているのであれば、そこにフォルダを作ってまとめて入れておきましょう。

次のアイコンを作るときは、今のレイヤーを非表示にして、新規レイヤーを作り、そのレイヤーに作っていきます。
ちなみにガイド線を引いておくと、他のアイコンとの大きさのバランスを取れます。ガイド線を引くには定規が必要ですが、もし定規が表示されてない場合は表示→定規→定規を表示で表示されます。
なお、Dockに配置するアイコンの場合は背景の色が若干変わりますので、Dock用の背景レイヤーも作っておきます。

カラーの「塗り」を232326、「線」をなしに


長方形ツールで画面上をクリック、「幅は1024px・高さは1024px」


作られた長方形をアートボード(白い部分)に配置

Procreate

左上の「ギャラリー」→右上の「+」→黒いアイコン「+」→幅も高さも1024px・DPIは72で「作成」


「カラー」から「値」タブを開き、「16進」の数値を「202124」にして塗りつぶす



Dock用の背景も作っておきたいので、今作った背景用のレイヤーの下に1つレイヤーを作り、「カラー」から数値を「232326」にして塗りつぶす

レイヤーを追加し、「カラー」を「5383ec」にして、ペンの種類や太さなどを選んで描いていく


オブジェクトがキャンバスの中心に来ているかどうか見て、もしずれていたら中央に移動させる。便利な方法としては変形ツールを使ってスナップをオンにするとガイド線が表示されるので、それに合わせる



左上の「ギャラリー」1つ右にあるアクションツール(スパナのアイコン)→共有タブを開き、「イメージを共有」の「PNG」を選択、AirDropなどで自分のiPhoneに送るか、iCloudにフォルダを作ってそこに保存



次のアイコンを作るときは再度レイヤーを開いて、すでに作ったアイコンのレイヤーは非表示にし、新規レイヤーを作って、そこに描いていく

もっと元のアイコンに近い感じで描きたい場合、画像を背景のレイヤーに配置し、不透明度を下げて、その上からなぞるとより綺麗に描けます。

新規レイヤー

使いたい画像をSlide Overで表示させてドラッグ&ドロップ



大きさや位置を調整

レイヤーの「N」をタップして不透明度を下げる(ここでは20%)




その上に新規レイヤー

先ほど配置した画像の上をなぞるように描く



描き終わったら、画像のレイヤーを削除

ただ綺麗に描きすぎると手書き感が損なわれるのでほどほどがいいでしょう。

補足:背景透過について

ここまで聞いた方の中には「アイコンなんだから、背景は透過させたらいいんじゃないか」と思われる方もいるかもしれません。それができたらもっと楽なんですが、実は透過できません。実際に背景を透過させたPNGファイルをアプリのアイコンとして配置すると、透過部分はグレーっぽい色のベタで表示され、ちゃんと透過してくれません。なので、アイコンの背景がないようなイメージにしたい場合は、壁紙は単色にして、かつ同色をアイコンの背景にする必要があるということです。

アイコンの配置

他のブログや動画などですでに散々紹介されているので、このプロセスはできる限り簡潔に紹介します。

ショートカットアプリを開く

右上の「+」ボタンをタップ


アクションを追加


スクリプティン


Appを開く


「選択」という青い文字部分をタップ


検索バーにアプリ名(例えば「設定」など)を入力し、出てきたアプリの中から該当するアプリを選ぶ


右上の「・・・」アイコンをタップ


「ショートカット名」には自分が分かるように名前をつける(アプリ名でOK)


「ホーム画面に追加」という青い文字部分をタップ

「写真を選択」か「ファイルを選択」のどちらかを選び、画像を選択


「新規ショートカット」と書いてある部分は、右の「×」をタップして空欄にする


右上の「追加」をタップ



これをひたすら繰り返す

ホーム画面カスタマイズのメリットとデメリット

アイコンの作り方と配置方法の説明については以上になります。
ここからは余談になりますが、簡単にカスタマイズすることのメリットとデメリットについてお伝えします。

メリット

iPhoneの画面が個性的に

脱獄以外の方法でiPhoneのホーム画面をカスタマイズできるというのは、iPhoneの発売から10数年で初めてなわけですが、よく使うアプリというのもだいたいそんなにコロコロ変わるわけではありませんし、個性をほぼ出せないiPhoneのこのホーム画面も完全に飽きてますので、良い気分転換にはなるかなというところです。これが飽きたらまた変えればいいだけなので、それもメリットになりますね。

デメリット

デメリットは4つあります。メリットが1つに対して4つと、結構多めです。こんな話をしておいてなんですが、正直に言うと、メリットよりデメリットの方が大きいかなと思っています。

手間がかかる

何と言っても面倒です。今回は興味があって作りましたが、1年後にまた作るのかというと、多分作らないと思います。

アプリを開くたびショートカットを一瞬経由

現状では「ショートカット」アプリを使うことで自作アイコンを表示させているため、アイコンをタップするたびに、そのアプリが開く前に必ず一瞬ショートカットアプリが表示されます。慣れれば問題ないレベルですが、煩わしさは否めません。
これを表示させない対策方法もないことはないですが、個人的には推奨しませんのでここでは紹介しません、もし知りたい方はググってみてください。

バッジが表示されない

SNSなどで誰かからメッセージが届いたときなど、このバッジで「あ、そう言えば来てたな」などと気づくことが多いのですが、これが表示されないことで困るような人は、アイコンのカスタマイズはおすすめできません。

アイコンが動かない

これはほとんどデメリットにはなりませんが、一部の純正アプリの例えば設定アプリの歯車が回ったり、時計の針が動いたり、カレンダーが今日の日にちを表示したりするようなことは諦めないといけません。

最後に

実際に今回自分のiPhoneのホーム画面をカスタマイズしてみての正直な感想としては、いちいち毎回アプリを開くたびにショートカットが一瞬表示されるのは残念としても、画面を見るのが少し楽しくなったというのはあります。
かれこれずっと10年以上もiPhoneを使い続けてはいますが、配置しているアプリはほとんど変わりませんし、見た目的な新鮮さはもはや一切ないところではあったので、機能的にベストではなく、推奨される手段ではないとしても、自分の好きなようにアイコンを置けるようになったことは、iPhoneユーザーとしては高く評価したいところです。何しろ毎日何度も目にする画面ですからね。
という感じで、もしIllustratorを持っている方もしくはiPadを持っている方は是非ご自身でiPhoneのホーム画面用オリジナルアイコンを作ってみてはいかがでしょうか?

↓動画はこちら

↓いいねもお願いします!


コメントを残す