TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopで自動で画像を並べる方法を現役エンジニアが解説【初心者向け】
icon
icon
Photoshop

Photoshopで自動で画像を並べる方法を現役エンジニアが解説【初心者向け】

初心者向けにPhotoshopで自動で画像を並べる方法について解説しています。自動処理のコンタクトシートを使うと、複数の画像をまとめて一覧することができます。基本の手順を覚えましょう。

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

Photoshopで自動で画像を並べる方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。

なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。

 

田島悠介

今回は、Photoshopに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

自動で画像を並べる方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

1時間でできる無料体験！

 

コンタクトシートとは

複数の画像を一気に確認したい時に、画像のサムネイル画像を一覧にしたシートのことです。Photoshopのコンタクトシート機能を使うと、画像が保存されたフォルダーを選ぶことで簡単に作成することができます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

自動で画像を並べる方法

Photoshopで「ファイル」ー「自動処理」ー「コンタクトシート II」を選択します。

ダイアログボックスで、必要な設定を行います。

  • A．ソース画像：画像を保存したフォルダーを選択します
  • B．ドキュメント：コンタクトシートの単位、幅と高さ、解像度、モード（カラーモード）を設定します。必要に応じて「すべてのレイヤーを統合」オプションを選択します
  • C．サムネール：画像の配置方法を指定します
  • D．ファイル名を説明として使用：オプションを選択すると、画像のファイル名がラベルとして表示されます

「OK」をクリックし、コンタクトシートを作成します。

 

その他の便利な自動処理

自動処理には、コンタクトシート IIの他にも以下のような便利な機能があります。

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

コンタクトシートは、画像をまとめて確認することができ便利ですが、サムネイル画像のサイズが小さすぎると、画像が確認しづらくなるため、用途に合わせ、指定する画像サイズを設定するようにしてください。

 

監修してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。
その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、
アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。

現役デザイナーに毎日チャットで質問することができます。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

Photoshopを使ってベジェ曲線を描く方法【初心者向け】

ベジェ曲線とはコンピューターグラフィックにおいて主に図形や文字を描画する際に使用されるもので、始点・終点などの座標を元に形成されています。一般的には、A...
Photoshop

Photoshopで画像を左右反転にする方法【初心者向け】

Photoshopの変形機能を使って画像を左右反転することができます。画像全体を左右反転する他に、選択した部分だけを左右反転、特定のレイヤーだけを左右反転するこ...
Photoshop

Photoshopで360度パノラマ写真を作成する方法【初心者向け】

Photoshopでは、撮影が難しいパノラマ写真を編集によって簡単に作成することができます。 使うのは、「Photomerge」という自動合成機能。簡単な...
Photoshop

Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】

Photoshopでガイドを数値指定して表示する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、...
Photoshop

初心者が知っておきたい！Photoshopの便利なショートカット10選

Photoshopで覚えておくと便利なショートカットについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 今回は知ってお...
Photoshop

Photoshopで三角形を描画する方法を現役エンジニアが解説【初心者向け】

Photoshopで三角形を描画する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、TechAc...
Photoshop

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

WordPressでカスタムタクソノミーを設定する方法【初心者向け】

WordPressには投稿タイプをカスタマイズできる「カスタム投稿タイプ」という機能があります。そのカスタムタイプにカテゴリーを追加できるのがカスタムタクソノミーです。 今回は、カスタムタクソノミーの説明から、簡単な導入方法まで説明します。 目次コンタクトシートとは自動で画像を並べる方法その他の便利な自動処理まとめ監修してくれたメンター   大石ゆかり 田島メンター！！カスタムタクソノミーの使い方を教えてほしいんですけど、いいですか？ 田島悠介 カスタムタクソノミーを使う方法は「テーマを編集する方法」と「プラグインを利用する方法」の2種類あるんだ。それぞれ教えてあげるね！ 大石ゆかり はい、お願いします♪   カスタムタクソノミーとは カスタムタクソノミーとは、カスタム分類とも呼ばれる機能です。これは、カスタム投稿タイプにとってのカテゴリーやタグにあたります。 最初の設定さえしてしまえば、カテゴリーやタグとほぼ同じように扱えます。   例えば、カスタム投稿タイプで「グルメ感想」というレビュー集を作っていた場合、そのタクソノミーとして「和食」「洋食」「中華」などを設定するイメージです。 カスタムタクソノミーの設定には2つの方法があるので、順番に説明していきます。   テーマ（function.php）を編集する方法 まず、ダッシュボード＞外観＞テーマ編集　を開いてください。 次に、function.phpを開きます。   ここで、下記のコードを入力し、更新します。 function people_init() { // 新規カスタムタクソノミーを作成 register_taxonomy( ‘washoku’,// 新規カスタムタクソノミー名 ‘kanso’,// 新規カスタムタクソノミーを反映させる投稿タイプの定義名 array( ‘label’ => __( ‘和食’ ),// 表示するカスタムタクソノミー名 ‘rewrite’ => array( ‘slug’ => ‘washoku’ ),// カスタムタクソノミースラッグ名 ‘capabilities’ => array( ‘assign_terms’ => ‘edit_guides’, ‘edit_terms’ => ‘publish_guides’ ) ) ); // 新規カスタムタクソノミーを作成 register_taxonomy( ‘chinese’,// 新規カスタムタクソノミー名 ‘kanso’,// 新規カスタムタクソノミーを反映させる投稿タイプの定義名 array( ‘label’ => __( ‘中華’ ),// 表示するカスタムタクソノミー名 ‘rewrite’ => array( ‘slug’ => ‘chinese’ ),// カスタムタクソノミースラッグ名 ‘capabilities’ => array( ‘assign_terms’ => ‘edit_guides’, ‘edit_terms’ => ‘publish_guides’ ) ) ); } add_action( ‘init’, ‘people_init’ );   カスタム投稿タイプを定義したコードに続けて記載します。 なお、「//」以下はコメントアウト（メモ書きできる）部分なので、あとでわかりやすいように補記しておくと安心です。 名称などは、お好みで変更してください。   ただ、カスタム投稿タイプは通常ではサイトに表示されません。 表示するには、さらにページの重要ファイルを編集する必要があり、PHPなどの知識がないとつまずいてしまいがちです。 そこで今回は初心者の方でも負担・ミスなくカスタムタクソノミーを活用するためのプラグインを紹介します。     [PR] Webデザインで副業する学習方法を動画で公開中プラグインを利用する方法 テーマを直接編集するのが怖いという初心者の人は、プラグインを利用すると簡単です。今回は、Custom Post Type UIを紹介します。   ダッシュボード>プラグインからこのプラグインをインストールすると、ダッシュボードに表示されます。 先に「投稿タイプの追加と編集」で「グルメ感想」の投稿タイプを追加しておきます。 次に「タクソノミーの追加と編集」をクリックします。   表示されている項目に沿って、必要事項を入力していくだけで簡単にカスタムタクソノミーが作成できます。 気をつけたい点は、「利用する投稿タイプ」の選択です。   作成済みのカスタム投稿タイプ「グルメ感想」を選択して「タクソノミーの追加」をクリックします。 ダッシュボードで表示を確認すると、カスタム投稿タイプの中に作成したカスタムタクソノミーが表示されていることがわかります。   今回の記事は以上です。 ぜひ自分でも試してみてください。   大石ゆかり カスタムタクソノミーを追加できました♪ 田島悠介 よかったね♪カスタムタクソノミーはカスタム投稿タイプを使っているととても便利な機能だから、なれないうちはプラグインを使っても使えるようになっておくと良いね！ 大石ゆかり はい、わかりました！！！   コラム
WordPress

Kotlinのdata class（データクラス）の使い方【初心者向け】

Kotlinのdata class（データクラス）の使い方について解説します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   田島悠介 今回は、Androidアプリ開発に関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Kotlinのdata class（データクラス）の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   Kotlinのdata class（データクラス）とは 例えばデータベースやファイルからデータを読み込んだ場合、オブジェクト指向プログラミングでは、読み込んだデータをクラスに保存してプログラム中で使用することがあります。そのような場合に便利なのがデータクラスです。 Kotlinの data class (データクラス)は、データを保持するだけのクラスを作成する記述方法で、少ないコード量でクラスを記述することができます。   data class（データクラス）の使い方 data class (データクラス) の使い方は以下の通りです。 data class クラス名(valまたはvar プロパティ名:型, ...) プロパティには、読み取り専用の場合は「val」を、更新可能な場合は「var」を指定します。上記のように記述するだけで、クラスとプロパティ、及び以下のメソッドが自動的に作成されます。 equals() / hashCode() のペア：オブジェクトの比較の際に使用 プロパティも含んだ形式のtoString()メソッド：次節で例示 componentN() メソッド：宣言した順番でプロパティを取り出すことができるメソッド copy()メソッド：次節で例示 data class について、詳しくは公式ドキュメントを参考にしてください。 https://kotlinlang.org/docs/reference/data-classes.html   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 今回のサンプルプログラムでは、enum class の使い方の例をいくつか確認します。実行は Kotlin の公式サイトの Playground を利用します。なお、 Playgroundでは、fun main() { … } の中にプログラムを記述します。またクラスの定義はその外側で記述します。 https://play.kotlinlang.org/   基本的なデータクラスの書き方 Userというデータクラスを作成します。プロパティはnameが更新可能、ageが読み取り専用です。 // データクラスの宣言 data class User(var name: String, val age: Int) fun main() { val user1 = User("煌木 太郎", 25) user1.name = "きらめき　たろう"
Androidアプリ開発

最もよく使われるデザインの3大ツールを比較してみた！

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、デザイナー、ライターであるJake Rocheleau氏によって投稿されました。   絶えず拡大し続けるデザインの世界に初めて入った人にとって、この世界は理解しにくいと思えるかもしれません。あまりにも多くのツールやテクニックがあるため、何から始めたらいいか分かりにくいかもしれません。 最も広く使用されているのデザインソフトウェアは、Adobe Photoshop、Adobe Illustrator、Sketchです。 このガイドでは、これらの3大ツールを比較しながら、デザインの一般的なタスクにおける活用方法をご紹介します。どれも優れたツールですが、それぞれ長所と短所があります。タスクごとに最適なツールを知っていれば、デザインの学習や作業は、はるかに効率的になると思います。   目次 UIデザイン アイコンのデザイン 写真の編集 グラフィックデザイン デジタルペインティング   UIデザイン インターフェースのデザインは、通常、Webサイトやモバイルアプリを対象としますが、ゲームのUI、インタラクションデザインの画面を対象に含むこともあります。 過去数年においては、PhotoshopがUIデザインにおける第1位のツールでした。Photoshopを使用すれば、ベクター形式のアイコンとテクスチャ素材の背景を組み合わせて、1つのレイアウトを作成することも可能です。   また、本来Photoshopは、画像編集のソフトウェアパッケージ（スイート）ですが、Adobe社によってFireworksの開発終了が宣言されたため、Photoshopの需要は一層高まっていました。 こうした状況で新たに登場したのがSketchです。Sketchのアプリの最初のリリースは、2010年後半のことでした。それ以来、Sketchの学習コミュニティ、無料サイトなどが拡大しています。 Sketchの使い方 現在では、UIデザインツールの覇者はSketchです。Sketchは、WebとモバイルのUIデザインに特化したソフトウェアパッケージです。パタン、テクスチャ素材、ベクター素材などを組み合わせた編集は、Photoshopで行うよりも簡単です。 唯一の短所は、対応OSがMac OS Xのみであるため、Windowsのユーザーは利用できない点です。 UIのデザインにIllustratorを好んで使う人もいますが、機能が不十分に思えます。Illustratorは、インターフェースに求められるピクセルパーフェクトなデザインを実現できるソフトウェアではありません。一方Sketchを使えば、ベクター素材とピクセル単位のデザインを組み合わせて、インターフェースを作ることも可能です。シェイプとベクターの編集、レイヤーの編集もより簡単に行うことができます。   もし、UIデザインのためのソフトウェアを探しているとしたら、Sketchが明らかにベストな選択です。しかし、OSがWindowsの場合にはSketchは選択できないので、Photoshopがベストな選択になります。PhotoshopでもSketchと同じような作業ができますが、Sketchを使った方が、UIデザインのワークフローは円滑に進みます。 現在Photoshopを使っていてSketchに乗り換えようか迷っている人は、「Sketchに乗り換えた理由と気に入っている点」を解説したSagi Shrieber氏による記事などが参考になると思います。 またもし、試しにSketchでデザインの作業をしてみたいという方は、Sketchのサイトで提供されているフリートライアルやチュートリアルを活用することもできます。 Sagi Shrieber氏による記事 Sketchによるヘッダーのデザイン例 Sketchによるログインフォームのデザイン例 Sketchによるニュースレターのデザイン例 Sketchのフリートライアル   [PR] Webデザインで副業する学習方法を動画で公開中アイコンのデザイン アイコンのデザインは、ベクター形式で進められることがほとんどです。多くのデザイナーは、まずアイデアを紙に書き出して、次にそれをデザインソフトウェアに取り込むことでトレースします。私の経験からいうと、ペンツールによる直感的な描写が可能なIllustratorが良いと思います。 私はPhotoshopのペンツールもよく使っています。Photoshopは、アイコンをトレースしたり、デザインをマッピングする際に優れたツールとなります。ただし、Photoshopで作成したベクター素材をIllustratorで編集するのは簡単なことではなく、その逆もしかりです。しかしどちらかというと、IllustratorからPhotoshopへ編集を移行する方が、ワークフローはスムーズになると思います。   Illustratorではアイコンの細かな編集が可能で、Photoshopのパスパレット（paths palette）を使うよりも、レイヤーの編集が容易になります。 Sketchにも、アイコンのデザインに使える優れたツールが備わっています。操作性はIllustratorととよく似ていて、オンラインのチュートリアルなどを利用して練習を積めば、基礎を学べると思います。Sketchにおける重要な機能は、シェイプ（shape）を結合するときに使える、結合ボタン（Union button）です。これはちょうどIllustratorにおけるパスファインダー（Pathfinder）と似ていて、リアルな質感のアイコンをデザインするには欠かせないツールです。 ベクター形式のアイコンのデザインに関しては、Illustratorがベストな選択です。 しかし、Sketchも基本的な機能を備えていて、アイコンのデザインに使うには優れたツールでしょう。   写真の編集 Adobe Photoshopが特に優れているのは、写真の編集です。独自のアイデアからフォトバッシュ（photobashing：複数の写真や画像を組み合わせて、ペイントなどを加え、新たな1つの画像を作成するデザイン技法）をするとしても、古い写真をレタッチするとしても、Photoshop1つあれば全てのデザイン作業を完了できます。 Photoshopには、赤目の修正機能、部分編集に使える複製（duplicate）＆パッチツール、カラーやテクスチャのブレンドモード、選択したサイズで画像をエクスポートする機能など、豊富なツールが備わっています。 このような機能に関しては、IllustratorやSketchは到底敵いません。 Photoshopの代替ツールとして、AffinityやGIMPなどもありますが、Photoshopと同じようなワークフローを実現できるツールはほぼないといえます。 タスクによっては、アイコンのデザインはPhotoshopで行い、インターフェースのデザインはIllustratorで行うなど、複数のツールを切り替えて使うのが良い場合もあります。しかし写真編集に関しては、IllustratorやSketchを開く必要はありません（Photoshopだけで十分です）。 Photoshopは写真編集のソフトウェアパッケージとして25年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
Webデザイン

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] Webデザインで副業する学習方法を動画で公開中WordPressのアイキャッチ画像が表示されないときの対処法とは 大石ゆかり 田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！ 田島悠介 原因はいくつかあるから順番に対処法みていこうか。 大石ゆかり お願いします！   ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。 前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。 オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。   functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。 このような場合は、有効化しているプラグインを順番に無効化していきます。 これにより、影響をおよぼしているプラグインを特定できます。 プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。 または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。 最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
WordPress

ヒーローイメージで印象を大きく変える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] Webデザインで副業する学習方法を動画で公開中3. 感情的に説得力のある画像を選択する デザインにも感情を組み込むべきです。 感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。 結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。 肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。   4. 読み込みとレンダリングは可能な限り早くする ヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。 デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。 1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。 <img src="hero.jpg" onload="performance.mark('hero1')"> <script>performance.mark('hero2')</script> このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
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] Webデザインで副業する学習方法を動画で公開中アクションを実行するドロップレットを作る 続いてドロップレットを作ります。 「ファイル」メニューから「自動処理 > ドロップレットを作成」を選びます。     「ドロップレットを作成」のダイアログが表示されるので、必要項目を入力します。 まず「実行」の部分にアクション名をセットします（上2つの赤矢印）。 次に「”開く”コマンドを無視」にチェックを入れます（ここは重要です）。     さらに「実行後」の項目を入力します。 「別名で”保存”コマンドを省略」にチェック（重要です）を入れてから「選択」ボタンを押して処理結果を入れるフォルダを選びます。 今回は新規フォルダを作成して保存することにします。     次に「ドロップレットを保存」の項目で「選択」ボタンを押し、ドロップレットの名前（今回は640×480化）を入力します。     するとドロップレットがデスクトップに作成されました。     ドロップレットに画像をドラッグ&ドロップしてバッチ処理を実行する いよいよ最後の工程です。 解像度を変更する画像を選択して、先ほど作成したドロップレット（640×480化.exe）のアイコンにドラッグ&ドロップすれば、バッチ処理が実行されます。     まずは画像をドラッグします。     作成したドロップのアイコンの上に重ねて、ドロップします。   すると、Photoshopが自動的に立ち上がり、ファイルを順次処理していきます。 処理した画像は指定した「新しいフォルダー」に記録されます。 これで全て完了です。     少し長くなりましたが、うまくいきましたか？ ポイントは「重要」と書いた「ファイルの入出力の処理をアクションの中に記録すること」と「ドロップレットを作成するときに、開くコマンドを無視、保存コマンドを省略というところをチェックする」です。   また、よくある失敗はファイルを読み込まない、ファイルを書き込まないというものです。 バッチ処理の実行時は、Photoshopで逐一、画像を開いて、処理して、画像を保存するという様子が見えます。 エラーが発生した場合はどこで止まっているかを確認して、次に実行する処理が何かを考えて対処してみてください。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
Photoshop

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopで自動で画像を並べる方法を現役エンジニアが解説【初心者向け】