TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopで自動で画像を並べる方法を現役エンジニアが解説【初心者向け】
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でチャンネルミキサーを使う方法【初心者向け】

Photoshopでチャンネルミキサーを使う方法を初心者向けに解説した記事です。 この機能を使うことで、色を要素ごとに分けて、細かい調整を行えます。 ...
Photoshop

Photoshopでアートボードを追加する方法を現役エンジニアが解説【初心者向け】

Photoshopでアートボードを追加する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、Tec...
Photoshop

Photoshopで写真の背景をぼかす方法【初心者向け】

Photoshopを使うと簡単に写真の加工が可能ですが、写真の背景をぼかすこともできます。 今回は、選択範囲機能とフィルター機能を使って、対象物以外の背景...
Photoshop

Photoshopでテキストをスタンプ風にする方法を現役エンジニアが解説【初心者向け】

Photoshopでテキストをスタンプ風にする方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、T...
Photoshop

初心者でも簡単！Photoshopで画像を合成する方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「画像を合成（結合）する方法」です。 この方法を覚えると、画像...
Photoshop

Photoshopで逆光の写真を補正する3つの方法【初心者向け】

Photoshopでは逆光で暗くなった写真の明るさなどを補正し、画面全体を見やすくできます。 画像の補正にはさまざまな方法がありますが、今回はその中から「...
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デザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。   プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。 デザイナーとエンジニアの意見を一致させるのは、非常に大変です。 もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。   では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？ この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。   目次 グリッドシステムをレスポンシブデザインで設計する ピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える 値を統一する プロトタイプを使った共同作業をする デスクトップファーストの手法を排除しないこと アセットの引き継ぎには十分注意を払う   1. グリッドシステムをレスポンシブデザインで設計する グリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。   グリッドの幅を具体的に設定する まず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。 開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。 レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。   デザイナーは、モバイル端末上の表示もチェックすること モバイルビュー デザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！ もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。 デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。 プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。 また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。   互換性の問題 デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。 デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。 デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。 デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。   [PR] Webデザインで副業する学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使う ショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。 私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。   フォントの整合性 第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。 デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。 スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。   パフォーマンスの問題 ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。 その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。 また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。 スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。   解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。 軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。 見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。 一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。   Photoshopの代替ツールを考える あなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。 今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。 まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。   ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。 より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
Webデザイン

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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