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アプリ開発のLayoutの使い方【初心者向け】

Androidアプリ開発において、GUI（ボタンやラベルといったパーツ）をどのように配置するかによって、いくつかのレイアウトが用意されています。そこで今...

Androidアプリ開発

Androidアプリ開発でTypefaceクラスを使ってフォントのスタイルを指定する方法【初心者向け】

Androidアプリ開発では、Typefaceクラスを使ってフォントや書体を変更することができます。今回はTypefaceクラスを使ってフォントのスタイ...

Androidアプリ開発

Kotlinの関数名の頭にある「::」とは何かを現役エンジニアが解説【初心者向け】

Kotlinの関数名の頭にある「::」とは何かについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

Androidアプリ開発

Androidアプリ開発でResourcesクラスを使ってリソースを参照する方法

Androidアプリ開発では、Resourcesクラスが用意されていて、画像やテキストなどの外部リソースを利用して開発することができます。そこで今回はR...

Androidアプリ開発

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

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

Androidアプリ開発

KotlinのMapでオブジェクトのペアを保存する方法【初心者向け】

KotlinのMapの使い方について解説します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内...

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

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Nick Babich氏によって投稿されました。全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。 1. 識別しやすいアイコンをデザインするアイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。アプリ「The Game Center」のアイコンは何を表しているように見えますか？ゲームに関連した意味があるように見えますか？ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。アイコンの「封筒」そのものが「メール」の意味を伝えています。 2. ミニマリズムを追求するアプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。写真の画像やスクリーンショットは使用しないこと透視投影による3Dデザインはアイコンに使用するべきではありません。透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中3. 異なる背景上でアイコンをテストするアイコンはホーム画面の背景上で見やすいデザインにしましょう。識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。ユーザーがアイコンを探すのに苦労するようなデザインにしないことアイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。透明なアイコンを使用するのは避けましょう。また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。結論今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。 TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。

アプリデザイン

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アプリ開発

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。テックアカデミーマガジンの場合は、このように表示されています。アイキャッチ画像を設定すると、下記のメリットがあります。記事の内容がひと目で分かる記事一覧の画面でわかりやすい記事のクリック率が上昇する SNSなどでシェアされた時に目立つそこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。目次アイコン画像を用意する作成したアイコンをプロジェクト内に保存マニフェストファイルを変更する動作確認大石ゆかり田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？田島悠介アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。大石ゆかりはい、お願いします！ Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。【Gutenberg】アイキャッチ画像を設定する「アイキャッチ画像の設定」ボタンをクリックします。上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。これで設定は完了です。設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。これでアイキャッチ画像追加の準備はできました。【旧エディタ】アイキャッチ画像を設定するアイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これでアイキャッチ画像の設定は完了です。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中WordPressのアイキャッチ画像が表示されないときの対処法とは大石ゆかり田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！田島悠介原因はいくつかあるから順番に対処法みていこうか。大石ゆかりお願いします！ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。 functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。このような場合は、有効化しているプラグインを順番に無効化していきます。これにより、影響をおよぼしているプラグインを特定できます。プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。 WordPressのアイキャッチ画像の最適なサイズとはアイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。この例では、元の画像は横620pxで縦349pxの画像です。この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータまとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。大石ゆかりアイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！大石ゆかりはい、分かりました！ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

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

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アプリのアイコン画像を変更する方法【初心者向け】

目次

アイコン画像を用意する

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

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

動作確認

関連するキーワード

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

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

【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

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

WordPressでアイキャッチ画像を設定する方法【初心者向け】

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

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

アイコン画像を用意する

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

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

動作確認

記事を検索

関連するキーワード

関連する記事

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

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

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