TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリのアイコン画像を変更する方法【初心者向け】
オーダーメイドコース
icon
icon
Androidアプリ開発

Androidアプリのアイコン画像を変更する方法【初心者向け】

Androidアプリの【アイコン画像】をEclipseから変更する方法を初心者向けに解説した記事です。アイコン画像設定にあたって必要なサイズもわかる内容です。また、設定後にマニフェストファイルの変更も必要なので注意しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリの顔とも言えるアイコン。Google Playストアでも、アイコンはとても目立つ位置に表示され、ダウンロード数に影響が出るとも言われています。

そこで、今回はAndroidアプリのアイコン画像をEclipseから変更する方法をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！Androidアプリのアイコンってどうやって変更するんですか？

田島悠介

アイコンもEclipseでできるよ。

大石ゆかり

あ、そうなんですね！教えてください〜♪

 

目次

本記事は下記の流れでご紹介します。

アイコン画像を用意する

まずは、Androidアプリのアイコンに使う画像を用意します。

使用できる画像は、PMGやJPG、GIFですが、PNGを使われることが多いです。また、画像のサイズは、もとの大きさに関係なく適当に作成しても自動でリサイズをして表示してくれます。

解像度に応じて表示させるアイコンを作成したいという場合は、以下のサイズで作成してください。

  • 低解像度(mdpi)　：　48px
  • 中解像度(hdpi)　：　72px
  • 高解像度(xhdpi)　：　96px
  • 超高解像度(xxhdpi)　：　148px

また、Google Playストアでリリースしたいと言う場合は、512pxのPNG画像が必要になります。

 

今回は例として、このような単純な画像を使ってアイコンを変更をします。

new_ic_launcher

 

 

[PR] Androidアプリ開発コース

作成したアイコンをプロジェクト内に保存

画像が用意できたら、Eclipseを開きましょう。

[res]フォルダ内に[drawable]フォルダがなければ作成します。

0021

 

 

続いて、作成[drawable]フォルダにアイコンを保存します。

001

この際、解像度に応じてアイコンを作成した場合は、それぞれの対応するフォルダに保存する必要があります。

また、変更前のアイコンと同じファイル名の場合は、頭に[drawable]が付くフォルダ内の変更前のアイコン画像をすべて削除するようにしてください。

 

 

マニフェストファイルを変更する

画像を保存しただけでは、反映されないためマニフェストファイルを変更します。

変更するには、AndroidManifest.xmlを開きます。「android:icon」で始まる行を探し、「@drawable/」の後ろをアイコンにしたい画像のファイル名に変更します。

このとき、拡張子は必要ありません。

002

これで変更は完了です。

 

 

動作確認

最後に、Androidアプリのエミュレーターを使って新しいアイコンが表示されるか動作確認をしてみましょう。

アプリの一覧で自分がセットした画像が表示されていれば成功です。

004

 

難しい作業ではありませんが、アイコン画像は大事な要素になるので、しっかりと設定するようにしましょう。

アプリが開発できたら、Androidアプリのデバッグも行いましょう。

 

大石ゆかり

こうやってアイコンを変更するんですね！

田島悠介

うん。Androidは特に機種がたくさんあるから、解像度によってアイコンの大きさをつくっておくことをおすすめするよ。

大石ゆかり

はい、わかりました♪

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

【ゼロから作る！】初心者から始めるAndroidアプリ開発の開発手順とは

Androidアプリの開発手順をゼロから紹介していきます。 今回の記事では、アプリを作ったことがないという未経験者でも分かりやすく2人のキャラクターが登場...
Androidアプリ開発

Androidアプリ開発でArrayAdapterクラスを使ってリストを表示させる方法【初心者向け】

Androidアプリを開発では、ArrayAdapterクラスを使うと簡単にリストを表示することができます。 そこで今回はArrayAdapterクラスを...
Androidアプリ開発

Android StudioでAndroidアプリのデバッグをする方法【初心者向け】

今回は、初心者向けAndroid StudioでAndroidアプリのデバッグをする方法を解説します。 Androidアプリをリリースする前に、実際にアプ...
Androidアプリ開発

KotlinでのNullの扱い方を現役エンジニアが解説【初心者向け】

KotlinでのNullの扱い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初心者向けに...
Androidアプリ開発

Androidアプリ開発でListViewを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのなかの1つである、ListView...
Androidアプリ開発

Androidアプリ開発でSpinnerを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのなかの1つである、Spinner（...
Androidアプリ開発

あわせてよく読まれている記事

Photoshopで写真の解像度を変更する方法【初心者向け】

Photoshopでは、写真の解像度を簡単に変更することが可能です。 今回は初心者向けに、解像度とは何かという説明からはじめましょう。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)   田島悠介 今回は解像度について勉強してみよう。 大石ゆかり 田島メンター！！解像度っていうのは何ですか～？ 田島悠介 主に印刷されたときの状態に関係するものだよ。まずは写真で確認してみよう。 大石ゆかり はい！お願いします！   解像度とは 解像度とは、1インチ内にドットがどれだけあるかという数値であり、dpi(dots per inch)と呼ばれます。 下の画像はデジタルカメラなどで撮影された通常の状態です。PCで見る限り、ドットやピクセルなどは特に意識されません。 例えば極端に解像度を下げると、印刷後の見た目はこのようなイメージになります。 解像度を上げると印刷時の画像は綺麗になりますが、サイズは縮小されます。サイズをそのまま、あるいは大きくしながら解像度を上げようとすると画質が非常に劣化してしまいます。 よって、基本的に“解像度を上げる＝印刷時のサイズは小さくなる”という形になります。   田島悠介 解像度についての基本的なことは分かったかな？ 大石ゆかり 画面の中のドットの数が少ないと、こんなぼやけたような感じになるんですね。ドットが多いほど綺麗になるという原理は何となく分かった気がします。 田島悠介 解像度は、場合によっては高ければ高いほどいいというわけでもないんだ。次は実際に解像度を変更してみよう。   Photoshopで解像度を変更する それでは実際に解像度を変更してみましょう。対象の画像を開いて「イメージ」から「画像解像度」を選択します。 「画像解像度」のウィンドウが開きます。現在の画像の容量やサイズ、調整する各項目が表示されます。 まず最初に「再サンプル」のチェックを外します。 「合わせるサイズ」の項目はデフォルトでは「オリジナルのサイズ」となっていますが、下の数値を調整すると自動で「カスタム」に変更されます(もちろんこちらで先に「カスタム」に変更してもOKです)。   「幅」「高さ」の単位は、以下の中から設定することが可能です。 これが印刷時の実際のサイズになります。   「解像度」の項目は「pixel/inch」と「pixel/cm」の2つから選ぶことができます。 ここでは「pixel/inch」に設定しています。これはピクセルが1インチ内にどれだけあるかというppi(pixels per inch)で、広義的にdpiと同じものとして扱われます。 印刷用の場合の推奨は350dpi(ppi)以上ですが、Webのみで使用する場合は72dpiより上げる必要はありません。これは、PCのディスプレイ自体が72dpiや96dpiしか解像度がないためです。   今回の記事は以上です。   田島悠介 ファイルを新規作成する際にも、解像度の設定をすることができるね。 大石ゆかり PCで使う画像に関しては、72dpiで問題ないんですね。 田島悠介 逆に意味なく解像度を上げすぎてしまうと、ファイルサイズが非常に大きくなってしまうので注意が必要だよ。 大石ゆかり 用途に応じて、必要な解像度にすることが大事なんですね。ありがとうございました！   さらにPhotoshopを使いこなしたい場合は、Photoshopで画像を角丸にする方法なども合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリ開発コースGridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発でImageButton(イメージボタン)を追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのなかの1つである、ImageButton（イメージボタン）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリの標準のボタンじゃなくて、自分で作った画像のボタンをおきたいんですけど、どうしたらいいんですか〜？ 田島悠介 それならImageButtonを使えばできるよ。   ImageButtonとは ImageButton（イメージボタン）は、画像ボタンを利用するためのGUIコンポーネントです。 自分で用意した画像を簡単にボタンとして利用することができます。     事前準備 ImageButtonを配置する前に画像を用意しておくと、スムーズに作業ができます。 プロジェクトの「resフォルダ」内に「drawableフォルダ」を用意します。その中に、ImageButtonとして利用したい画像を保存しておきましょう。     [PR] Androidアプリ開発コースImageButtonを配置する ImageButtonはレイアウトエディタのパレットの「イメージ＆メディア」から配置できます。 パレット内のImageButtonを、配置したい場所までドラッグしましょう。   ダイアログが表示されるので、drawableフォルダにコピーした画像のファイル名を選択し、[OK]ボタンをクリックします。   ImageButtonは配置されましたが、背景に色が付いてしまっているため格好悪いですね。 そこで、プロパティの「Background」を「#00000000」に変更すると、背景の透過が有効になります。 これで、ImageButtonの配置ができました。   xmlファイルを確認すると、次のようなコードが追加されています。 <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginLeft="68dp" android:layout_marginStart="68dp" android:layout_marginTop="56dp" android:background="#00000000" app:srcCompat="@drawable/button1" />     ImageButtonをカスタマイズする ImageButtonは、画面の解像度に合わせて表示させる画像を変更することができます。 プロジェクトを作成されたときに、下記のようなdrawableで始まるフォルダが作成されます。これに対して、端末に対応したフォルダ内に画像を保存しておけば、アプリを実行したときに、そのフォルダに保存されている画像を優先して表示させることが可能です。 drawable-ldpi　：　低解像度画像（120dpi） drawable-mdpi　：　中解像度画像（160dpi） drawable-hdpi　：　高解像度画像（240dpi） drawable-xhdpi　：　超高解像度画像（320dpi） drawable-xxhdpi　：　超超高解像度画像（480dpi）   例えば、「drawable-ldpi」フォルダにdrawableフォルダと同じ名前で別の画像を保存します。   そして、画面サイズが違う２つのエミュレーターで起動すると、このような画面が表示されます。 右側のエミュレータの画面は「drawable-mdpi」に対応していますが、「drawable-mdpi」に画像がないため「drawable」に保存された画像が表示されています。 一方の、左側のエミュレータの画面は「drawable-ldpi」に対応しています。「drawable-ｌdpi」に保存された画像が表示されています。 この画像の使い分けは、ImageButton以外でも使えるので覚えておくと便利です。 今回の記事は以上です。 他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でSwitchを追加する方法も合わせてご覧ください。   大石ゆかり これで好きな画像のボタンが設置できますね♪ 田島悠介 そうだね。標準のボタンだと堅いイメージがあるから、アプリによってはImageButtonを活用すると良いね。 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリ開発コースTableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     TableLayout上のパーツの配置を調整する 「0」ボタンは2つのセルをまたいで配置されています。 複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ />   実行すると、この画像のようにボタンが表示されます。   また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。 列番号は、一番左から「0,1,2,3…」となっています。 <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow>   さらに実行すると、この画像のようにボタンが表示されます。 これで完成です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり tableタグを同じように設置できますね！ 田島悠介 そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。   あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。 ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。 視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。 大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。 ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。 ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。   1. Webサイトの内容と関連性を持たせる ヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。 ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。 悪い画像選択の代表的な例、誰もがこの画像（上記参照）が銀行ローンに関連することに気づくとは限りません。 画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。   製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。 製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。 製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。 デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。 Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。 もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。 キーワードの関連性 画像はターゲットキーワードを視覚化できているでしょうか？ 目的の明確さ 画像はWebサイトのメッセージを明確に伝えていますか？ デザインのサポート 画像は行動喚起（Call To Action）を促すためにページフローをシームレスにサポートしていますか？ 信頼性 画像はあなたのブランドを信頼感のあるものとして表現していますか？ 付加価値 画像は関連性を高めたり、ユーザーにとってのメリットを示していますか？ 望みの感情 イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか？ 主人公としての顧客 顧客は製品を購入したら主人公になれるということを描写していますか？   2. 画像を中心的存在にする ヒーローイメージは、少ない情報を伝えるには完璧な環境です。 はっきりと目立つものがよいでしょう。 ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。 しかし、画像ですべてを伝える必要があるという意味ではありません。 むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。   [PR] Androidアプリ開発コース3. 感情的に説得力のある画像を選択する デザインにも感情を組み込むべきです。 感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。 結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。 肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。   4. 読み込みとレンダリングは可能な限り早くする ヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。 デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。 1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。 <img src="hero.jpg" onload="performance.mark('hero1')"> <script>performance.mark('hero2')</script> このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。   5. 高解像度の画像を使用する 画像は、ピクセル化（画像が粗くなり個々の画素が見えること）したりぼやけて表示されるべきではありません。 低画質の画像ほど悪いものはありません。ヒーローイメージは、画像がすべてであり、第一印象が重要になります。そのため高画質の画像を使用しましょう。 重要なヒーローイメージの場合、要素とsrcset属性やsizes属性を使用して、さまざまな画像のバリエーションを提供することが重要です。 低画質の画像 vs. 適正にサイズ調整された画像   6. 異なる画面サイズを考慮する 画像は、ディスプレイやプラットフォームに合わせて適切なサイズにしてください。すべてのデバイスに合わせて画像を最適化します。これは、小さなデバイスでは、大きな画像をサイズ変更（リサイズ）またはより小さな画像と交換することです。 レスポンシブデザインのWebサイトの開発者は、たとえモダンなWebサイトの場合でも、さまざまなデバイスに合う最適な画像解像度を選択することに苦労します。 すべての画面解像度とデバイスに対して、1つの画像では足りないことは明らかです。Webサイトは、すべての異なるデバイスにおいて、またすべての異なる解像度、ピクセル密度、向きにおいて完璧に表示されるように適応しなければなりません。レスポンシブWebサイトを構築する際、開発者が直面する主な課題の1つは、メディア（特に画像）の管理、操作、配信です。幸い、この問題の解決策があります。 レスポンシブブレークポイントジェネレーターは、画像のブレークポイントをインタラクティブに生成するのに役立つ、無料のオープンソースのWebツールです。 レスポンスブレークポイントジェネレーターは、複数のサイズの画像を管理するのに役立ち、レスポンシブデザイン画像のブレークポイントをインタラクティブに生成できます。   7. 行動喚起（Call To Action）を強調する デザインの主役はヒーローイメージにするとしても、行動喚起（Call To Action、以降CTA）などの要素も含める必要があります。 ただし、CTAはヒーローイメージと競合させるべきではありません。色は強調のために非常に重要です。CTAのボタンは他の要素よりも明るい色で目立つようにするべきです。 CTAのボタンの視覚的な重みは、ヒーローイメージと均斉がとれるようにしましょう。   ぼかし効果を行動喚起（CTA）にテストする ぼかし効果を使用して、ページの視覚的階層をテストしましょう。ぼかし効果のテストは、ユーザーの視線が本当にあなたの思惑通りに移動するかを実験する手助けとなる、簡単なテクニックです。 必要な手順は、Webサイトのスクリーンショットを撮り、Adobe XDでオブジェクトのぼかし効果を適用することです。 例として、以下のCharity WaterのWebページを見てください。ページのぼやけたバージョンでは、どの要素が目立っているように見えますか？その印象をあなたが気に入らなければ、戻って修正しましょう。 ぼかし効果のテストは、デザインの焦点と視覚的階層を明らかにするテクニックです。   8. コントラストをデザインする 画像の上にあるタイポグラフィが読みやすいか確認してください。太文字で読みやすくて画像と調和する、しかし画像から独立して目立つようなタイプフェイスを選択してください。 画像の上にテキストを配置する予定の場合、画像の主要部分が見えて、認識可能であることを確認してください。   オーバーレイ おそらく最も簡単な方法は、シンプルなテキストを画像の上に直接置くことです。ただし、テキストと画像のコントラストが十分でない場合は、画像全体に半透明色のオーバーレイを加えると効果的です。 Outlinesは、カラーオーバーレイを使用しています。 ブランドカラーを使用すれば、ヒーローイメージを向上させることができます。既存の製品やブランドのデザインをしている場合は、特定の色がすでにそれらに関連付けられている可能性が高いでしょう。 原色を特定し、それを画像の前面に表示してみましょう。 Cliqueのヒーローイメージは、アプリの青いインターフェースの色調と合っています。   スクリム（scrim） あるいは、スクリムを使用してテキストにコントラストを追加することもできます。スクリムは、オーバーレイされたテキストをより読みやすく柔らかい印象にするために使用される、半透明のレイヤーです。 不透明度の値はコンテキストに依存します。 デザインに応じてグラデーションの不透明度を選択します。一部のヒーローイメージには、以下に表示される画像のように暗めの60％のグラデーションが必要です。   9. 実際の人物画像を使用する 人物画像を使用することは、ユーザーの関心を引くのに非常に効果的な方法です。私たち人間は、人物の顔を見ると彼らとつながっているように感じ、単に商品を買っているような気分にはなりません。しかし多くの企業のWebサイトで、「信頼を築く」ための偽善的な印象の人物画像が使用されていることは、残念です。 ユーザビリティテストでは、純粋に装飾的な画像（以下に示すような）がデザインに価値付加を与えることは滅多になく、ユーザー体験を向上させるというより、むしろ逆効果であると示されています。 したがって、笑顔で無難な印象のビジネスパーソンの画像を理由もなく使用するのは避けてください。 不自然な画像は、浅はかで偽善的な印象をユーザに残します。 実践上役に立つルールは、あなたのアプリやWebサイトのキャラクターのイメージに合う人物の高品質の画像を使用することです。画像は、商品、企業文化の本物を表現したものでなければなりません。 以下にいくつかのヒントがあります。 混雑したショットの画像は避けてください。主役となる被写体が1つの写真を使用します。 本物のストーリー性を持つ画像を追求してください。興味深い活動をしている人々の写真を撮ってください。製品がある場合、人々がその製品を使用している写真を撮ることも検討してください。   10. ヒューマンタッチな（人間的な触れ合いの感じられる）イラスト ヒーローイメージは単なるビジュアルです。あらゆる種類の画像を利用することができます。イラストは人気の高い選択肢になりつつあり、時には写真よりも個性豊かな表現が可能です。 イラストは、画像のコンテンツとテクニックによる詳細なデザインの両方を、より制御できます。ユニークなイラストを使用すると、他のサービスと差別化され、より良いブランドの知名度を高めることができるでしょう。 Dropboxは、簡単に理解できるイラストを使用してメッセージを明確に示し、複雑なアイデアを伝えます。 イラストは想像力に訴えかけ、見る人との間に強いつながりを確立します。 イラストが機能するためには、容易に認識可能なものでなければならず、それが伝える情報は見る人が異なるとしても同じ様に解釈されるものでなければならないのです。 複数のイラストを使用する場合、一貫性がなければなりません。ソースが同じであるように、つまり同じ人がイラストを描いたように、見えるようにしましょう。   結論 クオリティが高く、見るのが楽しく、コンテンツと上手く機能する限り、ヒーローイメージは素晴らしい選択肢です。この技巧を最大限に活用するには、十分なコントラストとCTAのある設計にしましょう。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

Photoshopのバッチでファイルを一括で処理する方法【初心者向け】現役Webデザイナーが解説

Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？ そんな時に便利なのが「バッチ」の機能です。 バッチ処理を使えば、プログラムのように繰り返し作業が可能になります。 例えば、画像をまとめてリサイズすることなども簡単です。 そこで、今回はPhotoshopのバッチで画像ファイルを一括で自動処理する方法を紹介します。   目次 本記事ではこのような流れで説明していきます。 バッチ処理のやり方はいくつかありますが、簡単で使いやすいドロップレットを使う方法を説明します。 アクションを使って処理を記録する アクションを実行するドロップレットを作る ドロップレットに画像をドラッグ&ドロップしてバッチ処理を実行する (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   大石ゆかり 田島メンター！！たくさんの画像ファイルの大きさをいっぺんに変えたりとかはできないんですか～？ 田島悠介 それなら、Photoshopのバッチ処理を使ってみよう。 複数のファイルに対して同じ処理を一気に行ってくれる機能だよ。 大石ゆかり ぜひやってみたいです！ 田島悠介 バッチを使う前に、まず行う処理の設定をする必要があるんだ。 実際の手順を見てみよう。   今回は例として、画像を640px × 480pxのサイズに縮小して保存するバッチ処理を扱います。 今回は扱いませんが、tif形式の画像をjpg形式にしたり、シャープネスをかけたりというようなことを自動で連続して繰り返すこともできます。   アクションを使って処理を記録する アクションとは、処理の系列を記録するものです。 「ウィンドウ」メニューのアクションをチェックすることで呼び出せます。 アクションには記録と再生の機能があり、記録ボタンを押せば画像処理の手順を記録し、再生ボタンを押せばアクション（＝処理の系列）を実行します。     今回は画像を640px × 480pxのサイズに縮小する処理をアクションに記録するので、まずPhotoshopを開きましょう。（画像はまだ開いていません）     「ウィンドウ」メニューの「アクション」をチェックします。     するとPhotoshopの右下に、アクションウィンドウが表示されます。 ここにある「新規アクション」（赤矢印）アイコンをクリックし、新規のアクションを作りました。     新規アクションのダイアログが表示されるので、アクション名（今回は640×480）を入力し記録ボタンをクリックします。     するとアクションウィンドウの記録ボタンが赤に変わり、記録が開始されます。 （アクションの記録に失敗した場合は、停止ボタンで停止し、アクションをゴミ箱アイコンにドラッグし最初からやり直してください）     流れがわかったところで、実際にアクションを記録してみましょう。 今回は「画像を開く」を記録するために、「ファイル」メニューから「開く」を選びます。     いつものように画像が開きます。 ここで、アクションウィンドウに開く作業が記録されています。     さらに画像解像度で、サイズを640px × 480pxに変更する処理を記録させるために、「イメージ」メニューから「画像解像度」を選びます。     幅を640px、高さを480pxに変更したらOKボタンをクリックします。     先程と同じように「画像解像度」の処理が記録されたことがわかります。     次に「別名で保存」を記録させます。 「ファイル」メニューから「別名で保存」を選びます。   保存のアクションも記録されました。     全ての記録が終了したら、アクションウィンドウで、停止ボタン（左の赤矢印）をクリックします。 すると、記録アイコン（右の赤矢印）が灰色に戻ります。   なお、バッチ処理のアクションを記録するときは「画像を開く」「画像を別名で保存する」が必須（重要です）になりますので、忘れないようにしましょう。     田島悠介 アクション機能については分かったかな？ 大石ゆかり あらかじめ指定しておいた一連の動作が、ワンクリックでできるようになるんですね！ 田島悠介 アクション自体も便利な機能なので覚えておこう。 次はバッチ処理でこのアクションを使用するよ。 大石ゆかり 今設定したアクションを、複数のファイルで実行するんですね。 やってみます！   [PR] Androidアプリ開発コースアクションを実行するドロップレットを作る 続いてドロップレットを作ります。 「ファイル」メニューから「自動処理 > ドロップレットを作成」を選びます。     「ドロップレットを作成」のダイアログが表示されるので、必要項目を入力します。 まず「実行」の部分にアクション名をセットします（上2つの赤矢印）。 次に「”開く”コマンドを無視」にチェックを入れます（ここは重要です）。     さらに「実行後」の項目を入力します。 「別名で”保存”コマンドを省略」にチェック（重要です）を入れてから「選択」ボタンを押して処理結果を入れるフォルダを選びます。 今回は新規フォルダを作成して保存することにします。     次に「ドロップレットを保存」の項目で「選択」ボタンを押し、ドロップレットの名前（今回は640×480化）を入力します。     するとドロップレットがデスクトップに作成されました。     ドロップレットに画像をドラッグ&ドロップしてバッチ処理を実行する いよいよ最後の工程です。 解像度を変更する画像を選択して、先ほど作成したドロップレット（640×480化.exe）のアイコンにドラッグ&ドロップすれば、バッチ処理が実行されます。     まずは画像をドラッグします。     作成したドロップのアイコンの上に重ねて、ドロップします。   すると、Photoshopが自動的に立ち上がり、ファイルを順次処理していきます。 処理した画像は指定した「新しいフォルダー」に記録されます。 これで全て完了です。     少し長くなりましたが、うまくいきましたか？ ポイントは「重要」と書いた「ファイルの入出力の処理をアクションの中に記録すること」と「ドロップレットを作成するときに、開くコマンドを無視、保存コマンドを省略というところをチェックする」です。   また、よくある失敗はファイルを読み込まない、ファイルを書き込まないというものです。 バッチ処理の実行時は、Photoshopで逐一、画像を開いて、処理して、画像を保存するという様子が見えます。 エラーが発生した場合はどこで止まっているかを確認して、次に実行する処理が何かを考えて対処してみてください。   執筆してくれたメンター メンターOM Webデザインの勉強のためロサンゼルスに留学。 その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、 アメリカだけでなく日本からのWeb制作も請け負う。 また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。   田島悠介 自動処理はうまくいったかな？ 大石ゆかり ちゃんと全部変更されていました！ でもこれってひとつ処理が間違ってると全部が失敗しちゃいますね。 当然といえば当然ですが…… 田島悠介 バッチ処理を使う際は、ファイルの扱いに注意しよう。 また、処理しなくてもいい画像が一緒に入っていてももちろんアクションは適用されるからね。 切り取りなどの場合は特に注意が必要だよ。 大石ゆかり なるほど、気をつけます。 ありがとうございました！   合わせて、Photoshopで画像を切り抜く方法もご覧ください。 [お知らせ]TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリのアイコン画像を変更する方法【初心者向け】