アプリアイコンをデザインしよう

アプリアイコンを デザインしよう Everyone Can Code このプレゼンテーションでは、iPadOS 16.3と、iPadのためのKeynoteバージョン13.0およびiPadのためのSwift Playgroundsバージョン4.3での例を 使って説明します。ユーザーインターフェイスの要素は、デバイスにインストールされているソフトウェアのバージョンによって異なる場合があります。

学習モジュール2 アプリアイコンを デザインする 自分が考えたアプリのアイコンを Keynoteを使ってデザインしましょう。 推定所要時間： 30分

セクション1 アプリアイコンを作成する 次のスライドのテンプレートを使って、 自分のアプリのアイコンを作りましょう。

いろいろな要素を追加する セクション2 Keynoteのツールを 使ってみる これから紹介するKeynoteのツールを使って、 アプリのアイコンを作ってみましょう。 背景に色を付ける 図形を結合する 図形を分割する レイヤーを使って色を重ねる

いろいろな要素を追加する テキスト、線、図形などを追加します。

手順1 テキスト、線、図形を追加するには、 図形ボタン をタップして、 追加したい要素を選択します。

ヒント アイコンのテンプレートに 引かれたグリッド線を 目安にします。

手順2 図形を回転させるには、 図形を2本の指で押さえてから、 回転させたい方向に回します。

ヒント 様々な図形を組み合わせて オリジナルのデザインを 作りましょう。

手順3 図形の色を変更します。 • 図形を1つタップして選択します。 または1つの図形をタップして 押さえたまま別の指でほかの図形を タップして複数の図形を選択します。 • フォーマットボタン を タップします。 • 「スタイル」タブで 「塗りつぶし」をタップします。

手順4 背景のテンプレートが 見えるように透明度を調整します。 • 編集したい図形やテキストなどを 選択します。 • フォーマットボタンをタップします。 • 不透明度スライダをドラッグし、 好みの透明度に設定します。

背景に色を付ける 背景の角丸四角形の色を編集しましょう。

手順1 背景の角丸四角形の色を 変更できるように、 グリッドを背面に移動します。 • グリッドを選択します。 • フォーマットボタンをタップします。 • 「配置」タブをタップします。 • 「後ろ／前に移動」オプションの スライダをドラッグして、 四角形が前面に表示されるまで グリッドを後ろに移動します。

手順2 角丸四角形の色を変更します。 • 角丸四角形を選択します。 • フォーマットボタンをタップします。 • 「スタイル」タブをタップします。 • 「塗りつぶし」をタップします。

手順3 デザインに合うように 色を編集します。

ヒント グリッドを使って作業を続ける 場合は、グリッドが前面に 表示されるように、 角丸四角形を背面に移動します。

図形を結合する 図形を結合し、新しくできた図形を使って、 アイコンの背景色に複雑なグラデーションを加えましょう。

手順1 アイコンの背景色となる複雑な グラデーションを作って いきます。まずは角丸四角形に 色を設定します。

手順2 図形の下半分を別の長方形で 覆い隠します。

ヒント ルーラを使うと、中心線がどこか わかりやすくなります。

手順3 両方の図形を選択します。

手順4 新しい図形を作成します。 • フォーマットボタンをタップします。 • 「配置」タブをタップします。 • 下にスクロールして、「図形を結合」 オプションを見つけます。 • 交差アイコン をタップします。

手順5 作成した新しい図形を複製します。 • 図形をタップします。 • 「コピー」をタップします。 • スライドの背景の任意の場所を タップします。 • 「ペースト」をタップします。

手順6 向きを反転させます。 • 片方の図形をタップします。 • フォーマットボタンをタップします。 • 「配置」タブをタップします。 • 「上下反転」をタップします。

手順7 角丸四角形になるように、 半分の図形2つをぴったりと 合わせます。

手順8 グラデーションの色を変更します。 2つの図形の「開始カラー」と 「終了カラー」を配色バランスが よくなるように設定します。

図形を分割する 分割機能を使うと図形を個々のパーツに分解できるので、 それぞれのパーツを個別に選択して操作できるようになります。 この機能を利用して、図形のそれぞれのパーツに色を付けたり、 断片を取り除いたりします。

手順1 図形ライブラリの図形の中には、 複数のパーツで構成されている ものがあります。

手順2 図形を分割してみましょう。 「図形」メニューの「幾何学的」 タブで20面体を選択し、 四隅のいずれかをドラッグして 拡大します。

手順3 図形を分割します。 • 図形をタップします。 • フォーマットボタンをタップします。 • 「配置」タブをタップします。 • 「分割」をタップします。

手順4 分割された図形の個々の パーツを選択して、削除したり、 複製したり、色を付けたりします。

レイヤーを使って色を重ねる 分割できないオブジェクトの場合は、 レイヤーを使うことで、より複雑なデザインに することができます。

手順1 ドーナツなど、 くり抜かれた部分がある図形を 追加します。

手順2 デザインに合うように 色を編集します。

手順3 1つまたは複数のくりぬかれた 部分の上に別の図形を重ね、 それぞれの図形に色を付けます。

手順4 元の図形を前面に移動します。 • 図形をタップします。 • フォーマットボタンをタップします。 • 「配置」タブをタップします。 • スライダをドラッグして、 元の図形を前面に移動します。

手順5 レイヤーをさらに追加していき、 画像のそれぞれの部分の色を 完成させます。

学習モジュール4 書き出して保存する アイコンを画像として書き出し、 デバイスに保存しましょう。 推定所要時間： 2分

手順1 アイコンを書き出します。 • 画面左上にあるプレゼンテーションの 名前をタップします。 • 「書き出し」をタップします。 • 「画像」をタップします。

手順2 「画像オプション」で 次の操作を行います。 • 「PNG」をタップします。 • 「透明な背景」オプションが オンになっていることを確認します。 • 「書き出し」をタップします。

手順3 「画像を保存」をタップすると、 アプリアイコンが写真アプリに 保存されます。

学習モジュール5 作成したアイコンを Swift Playgroundsに アップロードする カスタマイズしたアプリアイコンを、Swift Playgroundsの アプリのプレイグラウンドの1つに追加します。 推定所要時間： 3分

手順1 Swift Playgroundsを開きます。

手順2 アイコンを設定したいアプリの プレイグラウンドを開きます。

手順3 左のサイドバーを開いて、 「App設定」をタップします。

手順4 「カスタム」をタップして、 「“写真”から読み込む」を タップします。

手順5 作成したアイコンをタップします。

手順6 これで、「App設定」および 「マイプレイグラウンド」画面に アイコンが表示されるように なります。

TM and © 2024 Apple Inc. All rights reserved.