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に関する内容だね！

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします！

目次

 

コンタクトシートとは

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

 

[PR] Webデザインで副業する方法とは

自動で画像を並べる方法

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

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

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

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

 

その他の便利な自動処理

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

 

まとめ

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

 

監修してくれたメンター

メンターOM

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

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

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

今さら聞けない！Photoshopで文字を加工する方法【初心者向け】現役Webデザイナーが解説

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「文字を加工する方法」です。 この記事を見ながらぜひ使ってみて...
Photoshop

Photoshopで鉛筆風のイラストを描く方法【初心者向け】

Photoshopで鉛筆風のイラストを描く方法を初心者向けに解説した記事です。 Photoshopでは、「選択範囲」機能と「ペンツール」を使用することで鉛...
Photoshop

Photoshop CCのインストール方法

Photoshopの最新版として、Photoshop CC（Creative Cloud）があります。 今回は、Photoshop CCをインストールする...
Photoshop

Photoshopでトーンカーブを使って色調補正する方法【初心者向け】現役デザイナーが解説

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。 トーンカーブを使用すると、画像の色や明るさを細かく調整できます。...
Photoshop

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

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

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

最もよく使われるデザインの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年の歴史があり、ベストなツールとして選ばれ続ける理由があるのです。   グラフィックデザイン 一言に「グラフィックデザイン」といっても、様々なタスクが含まれます。アイコンのデザインも、グラフィックデザインの領域に含まれるといえますし、アイデンティティデザイン（identity design：視覚的なブランディングデザインなど）、ロゴのデザイン、印刷物のデザインなども同様です。 Photoshopは、グラフィックデザインに関しても優れた機能を備えています。写真の編集や加工については基本的に何でもできます。またテキストの編集ツールも備えています。もっとも個人的な意見としては、タイポグラフィをカスタマイズするには、Illustratorの方が優れていると思いますが。   Sketchは、グラフィックデザインに関してはまずまずのツールです。しかし、ほとんどの人はSketchをインターフェースのデザインに使っているため、Web上のSketchのチュートリアルも、Webとモバイルのデザインに焦点を当てたものが多いです。 これらの特定のタスク以外では、Sketchはグラフィックデザインに使うにはベストなツールではありません。 グラフィックデザインに関してはIllustratorが一番だと私は思います。ポスター、ステッカー、パンフレット、さらにはTシャツのデザインに至るまで広範囲に使えます。またどのようなプロジェクトにおいても、グラフィックの最適なサイズを選択できます。 もっとも、写真加工に関してはPhotoshopも大いに役に立ちます。雑誌の中の広告のデザインなどでは、写真加工がよく使われています。 しかし、その他についてはIllustratorの方が優れています。 IllustratorはPhotoshopよりも長い歴史があります。PSファイルとAIファイルを相互に変換したときにも、Illustratorほどスムーズな編集が可能なソフトは、私は他にはないと思います。   熟練したグラフィックデザイナーになるためには、おそらく両方のソフトウェアを学ぶ必要があります。クリエイティブなプロジェクトにおいてそれぞれ、異なる目的、異なる段階で役に立ちます。いずれにしても、Sketchはグラフィックデザインにおいてはベストなツールではないと思われます。 また、印刷物のデザインに使うツールとして、もう1つおすすめなのがAdobe InDesignです。Adobe製品なので、Photoshop、Illustrator、InDesign間でファイルを移動するときにも、インポートの設定に困ることもありません。   デジタルペインティング（デジタル絵画） デザイナーが、アナログ媒体からデジタル媒体へとツールを移行するときには、2つの問題に直面します。：「どのタブレットを購入するか」と「どのソフトウェアを使うか」です。 デジタルペインティングには、ペイントツールSAI、Kritaなどのツールを使うこともできます。しかしほとんどの人は、Photoshopを選択するでしょう。またもし、IllustratorとSketchを比較するとしたら、どちらも遜色ないと思います。   Photoshopには、ピクセル単位のデザインを可能とするペイントツールとしてブラシが備わっています。ブラシを設定からカスタマイズすれば、滑らかな線を描いたり、筆圧感知をコントロールすることも可能です。 また、Photoshopは数多くの描画タブレットと互換性があります。Coolorus（カラーホイールのプラグイン）などのプラグインを追加すれば、Photoshopを使ったデジタルペインティングのワークフローを、よりスムーズに進めることができます。 Illustratorがデジタルペインティングにおいて良い選択とはいえない理由は、主にベクター形式で編集するツールであるからです。ベクター形式は、デジタルペインティングにおける画像の繊細な描写などに使う形式としては、適していません。 Photoshopのブラシのツールを利用すれば、ピクセル単位のデザインが可能であるため、デジタルアートにも最適なツールです。   まとめ これら3つのソフトウェアはどれも、それぞれが得意とするタスクで役に立ちます。 デザインのワークフローはデザイナーによって異なるため、一般化するのは難しいですが、私としては次のようにまとめられると思います。 Adobe Photoshop：写真加工とデジタルペインティングに最適なツール Adobe Illustrator：アイコンのデザインとグラフィックデザインに最適なツール Sketch：全てのUI/UXのデザインと一部のアイコンのデザインに最適なツール これらのソフトウェアには、それぞれにニッチ市場があり、各分野の専門家から過剰に称賛されることもあります。これらの中で、どれか1つのソフトウェアが他よりも絶対的に優れているというわけではありませんが、それぞれが得意とするタスクにおいては他を凌駕します。 あなたがクリエイティブな分野に進出したり、デザインの新たな領域に挑戦するときには、ぜひこのことを覚えておいてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。デザインのスキルを磨きたい方はぜひご覧ください。
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のアイキャッチ画像の最適なサイズとは アイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。   画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。 縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。 この例では、元の画像は横620pxで縦349pxの画像です。 この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。 この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。 固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。 アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。 様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータ   まとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう 標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。 アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。 アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。   他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。   大石ゆかり アイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介 そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！ 大石ゆかり はい、分かりました！   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。  
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氏の作成したテストページでどのように動作するかを見ることができます。   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サイト用の画像を作成する「スライス機能」の使い方を初心者向けに解説した記事です。 スライス機能は1つの画像を分割して複数の画像に書き出したい時に便利です。 やり方を覚えればすぐに実践できるので、自分で試してみてください。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています) 目次コンタクトシートとは自動で画像を並べる方法その他の便利な自動処理まとめ監修してくれたメンター   田島悠介 今回はスライス機能による画像の処理を行ってみるよ。 大石ゆかり 田島メンター！！スライス機能というのは何ですか～？ 田島悠介 スライスを使うことで、1つの画像を複数の画像に一度に分割して保存できるんだ。 Webデザインでも使われる機能なので、覚えておくと便利だよ。実際にやってみよう。 大石ゆかり はい！   スライス機能とは スライス機能とは、1つの画像を複数に分割できる機能です。 スライス機能は切り抜きツールを発展させたもので、並べられた画像などを一度に切り抜くのに便利です。 この機能を使えば、Web ページに表示する画像を複数に分割し、1枚の画像のように表示できます。 今回は以下の画像をもとに、スライス機能を使って画像を書き出す方法を紹介します。   領域を指定する まずは1つのつながった画像の中から、画像として書き出したい領域を指定します。 今回、指定方法として以下の2つを紹介します。 どちらを使っても大丈夫です。 個々に領域を指定する方法 ガイドに合わせて領域を指定する方法   個々に領域を指定する方法 まずは対象の画像を開きます。 次に、Photoshop画面の左側のツールバーにある切り抜きツールのアイコンを長押ししてください。 そうするとサブメニューが表示されるので、この中の「スライスツール」を選択します。   スライスツールが選ばれた状態で、画像として書き出したい領域の左上から右下にかけてドラッグし、四角形の画像領域を指定します。   すると、指定した領域の左上に「02✉」と表示され、その他の部分も自動で領域が作成され「01✉」「03✉」「04✉」といった具合に番号が付けられます。   同じようにして順次画像を指定していけば、すべての領域を指定できます。 また、自動の領域指定をうまく利用すれば領域を指定する回数を少なくできます。   ガイドに合わせて領域を指定する方法 もう1つの方法の紹介です。 まずガイドを表示するために、表示メニューの定規を指定します。   次に横の分割線1本と縦の分割線2本を引きます。 線を引くには、一度マウスを上端または左端の目盛のところに持って行き、そこから境界線の方向にマウスをドラッグします。 こうして3本の境界線を引きます。   この状態で先ほどのスライスツールを選びます。 （すでに選ばれていれば再度選択する必要はありません。） すると、画面上部のオプションバーのところがスライスツール用になり、「ガイドに沿ってスライス」というボタンが表示されるので、そのボタンを押します。   この操作で、6枚の画像の領域が指定できました。   以上で領域の指定は完了です。   大石ゆかり うーん、なかなか操作が難しいですね…… 田島悠介 ガイドを使った方法もあるので、やりやすい方を使ってみよう。 大石ゆかり 分割ができたら、次は何をしたらいいんでしょうか？ 田島悠介 画像の情報を設定して、「Web用に保存」を使用するよ。次の手順を見てみよう。   [PR] Webデザインで副業する方法とは画像情報を登録する 続いて、画像を利用しやすいように情報の登録を行います。 ただし、画像の分割だけする場合は、この工程は飛ばしても構いません。   画像の情報を登録するにはスライス選択ツールを使います。 Photoshop画面左側のツールバーの切り抜きツールのアイコンを長押しすると、サブメニューが表示されるので、その中の「スライス選択ツール」という項目を選択します。   先ほど分割した画像の領域をダブルクリックすると、それぞれの画像用に入力ウィンドウが表示されるので必要事項を入力します。 なお、すべての項目を埋める必要はありませんので、必要な項目だけ入力してください。 情報の登録は以上です。   Web用に画像を保存する 最後に画像を保存します。 メニュー「ファイル」の「書き出し」の中にある、「Web用に保存」をクリックします。 単純に「保存」や「別名で保存」を選択しても、スライスツールで分割した画像は保存されません。 なので必ず「Web用に保存」を選ぶ必要があります。   Web用に保存画面が開くと、画像形式や画質などの調整ができるようになっています。 ここで保存のボタンを押します。   保存するフォルダを指定すると、中にimagesというフォルダが生成され、そこに先ほど分割した画像が保存されます。   スライス機能の使い方は以上です。   田島悠介 ファイル名を見ると、最初に指定したものに準拠した連番の名前になっているのが分かるね。 大石ゆかり なるほど、管理しやすくていいですね。 田島悠介 スライスによる処理を行った画像を保存する場合は、いつものファイル保存ではなくてこの「Web用に保存」を使うということを忘れずに覚えておこう。 大石ゆかり 普段とは少し保存の手順が違うということですね。分かりました！   Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

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で逐一、画像を開いて、処理して、画像を保存するという様子が見えます。 エラーが発生した場合はどこで止まっているかを確認して、次に実行する処理が何かを考えて対処してみてください。   執筆してくれたメンター メンターOM Webデザインの勉強のためロサンゼルスに留学。 その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、 アメリカだけでなく日本からのWeb制作も請け負う。 また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。   田島悠介 自動処理はうまくいったかな？ 大石ゆかり ちゃんと全部変更されていました！ でもこれってひとつ処理が間違ってると全部が失敗しちゃいますね。 当然といえば当然ですが…… 田島悠介 バッチ処理を使う際は、ファイルの扱いに注意しよう。 また、処理しなくてもいい画像が一緒に入っていてももちろんアクションは適用されるからね。 切り取りなどの場合は特に注意が必要だよ。 大石ゆかり なるほど、気をつけます。 ありがとうございました！   合わせて、Photoshopで画像を切り抜く方法もご覧ください。 [お知らせ]TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次コンタクトシートとは自動で画像を並べる方法その他の便利な自動処理まとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海">   それぞれ1つずつ確認していきましょう。 imageタグ <img   …  > ここには画像を表示しますよ、ということを示します。   ソース属性      src=”…” ソースは、出所や源泉という意味です。 表示する画像ファイルの、ファイル名やファイルの場所を示します。   タイトル属性  title=”….” 画像のタイトルを指定します。   オルト属性      alt=”…” オルタナティブ、代替の略です。 目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。   では具体例をみてみましょう。 表示したい画像ファイルを用意してsrc属性で指定しましょう。 ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。 マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。 基本的な使い方はこれだけです。   大石ゆかり サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！ 田島悠介 そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。 大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。 田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。   画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。 この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。   Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。 このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。   パスの書き方には、絶対パスと相対パスの2種類あります。 それぞれ詳しく説明しますね。   絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。 市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。 絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。 今回の図では、demoというフォルダがおおもとですね。 パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。 また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。   実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" >   分解して翻訳すると、こんな意味ですね。 「 / 」おおもとのフォルダ内の 「 images/ 」images というフォルダ内の 「 image.jpg 」image.jpg  というファイル   この道順に沿って、HTMLは表示する画像ファイルを見つけるのです。   また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。   相対パス パスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。 市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。 相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。 いくつかのパターンで、具体的に説明していきます。   HTMLとファイルが同階層にある場合 このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。   パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" >   また、カレント記号は省略することもできます。 <img src="image.jpg" >   どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。   ファイルがHTMLより下のフォルダ階層にある場合 次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。   このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" >   また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" >   ファイルがHTMLより上のフォルダ階層にある場合 最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。   パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。 ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" >   これを応用すると、下記のように複雑なパスも簡単に示すことができます。   親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" >   パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。   [PR] Webデザインで副業する方法とは【応用】画像の表示スタイルを調整する 画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。   画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。 はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。 画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{  
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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