Photoshop

Photoshopでテクスチャを使う3つの方法【初心者向け】現役デザイナーが解説

Photoshopの【テクスチャ】の使い方を初心者向けに紹介する記事。「パターンの定義」「レイヤーマスクの使用」「フィルターギャラリーを使用」の3つの方法を紹介。テクスチャを使うことで紙や布、岩などの質感を表現することが可能。

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

テクスチャとは画像の一部、または全体に特殊な効果を入れることによって紙や布、岩などの質感を表現するものです。

Photoshopではさまざまな方法を使ってテクスチャ効果を付けることができます。

パターンの定義を使用する方法

自分で用意した画像からテクスチャのパターンを新たに作成し、塗りつぶしツールで他の画像に適用させる方法です。

まずはテクスチャに使用したい画像を開き、ツールバーの選択ツールを右クリックして「長方形選択ツール」を選びます。

ps_textu_1

画像全体を、あるいはテクスチャとして使いたい部分をドラッグして選択範囲を作成します。

ps_textu_2

選択範囲を作成した状態で、上部メニューの「編集」から「パターンを定義」をクリックします。

ps_textu_3

パターン名を入力して「OK」をクリックします。

ここでは「パターン1」という名前にしてみました。

ps_textu_4

これで新規パターンが追加されました。

次に、テクスチャの質感を追加したい画像を開きます。

ここでは背景が透明な以下のイラストを用いて説明します。

ps_textu_5

ツールバーのグラデーションツールを右クリックし、「塗りつぶしツール」を選択します。

ps_textu_6

すると、Photohsop上部のオプションバーで、塗りつぶしの設定ができるようになりますので、以下の順序で設定してみましょう。

1．まず種類が「描画色」となっている場合は「パターン」に変更します。

2．サムネイルの右の下向き矢印をクリックして、パターンの一覧を表示させます。

3．先ほど新規作成した「パターン1」を選択します。

ps_textu_7

さらに、モードを「乗算」にし、不透明度を70％に調整しておきましょう。

ps_textu_8

※モードを乗算に設定し、不透明度を調整することで、イラストの色に馴染む自然なテクスチャを追加できます。

上記の設定を済ませた状態で、イラストの上でクリックして塗りつぶします。

ps_textu_8_2

これでテクスチャがイラストに追加されました。

ps_textu_9

レイヤーマスクを使用する方法

2つ目の方法です。

先ほどとは逆に、まずテクスチャを追加したい画像を開きます。

ここでは背景が透明な以下のイラストを用いて説明します。

ps_textu_10

上部メニュー「ファイル」から「配置」を選択します。

※「配置」がない場合は「埋め込みを配置」を選択します。

ps_textu_12

テクスチャとして使用したい画像を選択し、「配置」をクリックします。

ps_textu_13

これでイラストの上にテクスチャのレイヤーが作成されます。

下の画像ようにイラストがはみ出している場合は、上部メニュー「編集」の「自由変形」などでイラスト全体を覆うように調整します。

ps_textu_14

イラスト全体にテクスチャが重なった状態で右クリックし、「配置」を選択します。

ps_textu_15

さらに、テクスチャのレイヤーを選択した状態で、イラストのレイヤーを下の「レイヤーマスクを追加」のアイコンまでドラッグします。

ps_textu_17

すると、イラストの形状に沿った形で、テクスチャが切り抜かれました。

テクスチャのレイヤーを見ると、レイヤーマスクが追加されているのがわかります。

ps_textu_18

ここからテクスチャのレイヤーを調整していきます。

テクスチャレイヤーを選択した状態で、レイヤーパネル上の「通常」という部分を「乗算」に変更し、右隣の不透明度のパーセンテージを下げてみましょう。

イラストとテクスチャがうまく馴染んだら完了です。

ps_textu_19

この2つの手順では、あらかじめテクスチャ用の画像を用意する必要があるね。

手元にテクスチャ画像がない場合はどうしたらいいんですか～？

Photoshopのフィルターギャラリーからでも、さまざまな効果を適用できるよ。

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

フィルターギャラリーを使用する方法

最後の3つ目は、Photoshopにあらかじめ内蔵されている「フィルターギャラリー」の機能を使用して画像全体にテクスチャ効果を付ける方法です。

ここでは以下の画像を使用します。

ps_textu_20

上部メニュー「フィルター」から「フィルターギャラリー」を選択します。

ps_textu_21

「テクスチャ」を選択すると、反映できる効果の一覧が表示されます。

今回は「クラッキング」を選び、設定は以下のように調整してみましょう。

ps_textu_22

※「クラッキング」を選択すると、画像内の境界に沿って細かい溝が入り、石膏の表面に画像を描いたような効果を加えることができます。

「OK」をクリックすると画像全体にテクスチャ効果が反映されました。

ps_textu_23

今回の記事は以上です。

3つのうち、自分ができそうなものから試してみてください。

元画像や表現したい効果によって、適用方法やテクスチャの種類をいろいろ使い分けてみよう。

テクスチャを使うと全体の印象が大きく変わりますね。

パターンなどに画像を使用する場合は、著作権の問題がないように気をつけようね。

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

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

Photoshopを調べたけど分かりづらい
副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

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

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

Photoshop

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

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

Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】現役デザイナーが解説

この記事では、Photoshopで画像の背景を透明にする方法を初心者の方にもわかりやすく解説します。画像を合成する際、不要な部分を「透過」の状態（何も描...

Photoshop

Photoshopのカスタムブラシの作り方【超初心者向け】現役デザイナーが解説

Photoshopでは、描画に使うブラシを自由に作成、編集することが可能です。そこで今回は初心者向けに「カスタムブラシの作り方」を紹介します。手...

Photoshop

Photoshopでカスタムシェイプを作成する方法【はじめてでもできる！】

Photoshopでは、「カスタムシェイプの定義」を行うことで、独自に作成した図形をいつでも呼び出して使えるようになります。本記事では、初心者向けにその...

Photoshop

Photoshopで画像のノイズを除去する方法【初心者向け】

デジカメなどで写真を撮影した際、ノイズと呼ばれる小さな粒が画像に生じることがあります。 Photoshopでは、このノイズをプレビューを見ながら調整しつつ...

Photoshop

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

実は簡単！Photoshopで写真をイラスト風にする方法【初心者向け】現役デザイナーが解説

写真を使って少し変わった加工をしたいと思ったことはないでしょうか？ Photoshopではフィルターギャラリーなどを使って写真を簡単にイラスト風に加工することができます。初心者向けに2つの方法を紹介するので、自分に合ったほうで試してみてください。目次今回は下記の2つの方法でご紹介します。フィルターギャラリーを使用した方法輪郭検出を使用した方法 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています) 田島悠介今回は写真からイラスト風の画像にする方法を練習してみよう。大石ゆかり田島メンター！！具体的にはどういった機能を使うんですか～？田島悠介主に使うのは「フィルターギャラリー」かな。あと「輪郭検出」を使った方法も、いかにも鉛筆で描いたような雰囲気になって面白いよ。大石ゆかりぜひやってみたいです！よろしくお願いします！今回はこの写真を使って加工していきます。フィルターギャラリーを使用した方法 Photoshopの「フィルター」機能を使うことで、写真を絵画やイラスト風にすることができます。色鉛筆フレスコ塗料水彩画カットアウトエッジのポスタリゼーションこするドライブラシパレットナイフ Photoshopのメニューから「フィルター」→「フィルターギャラリー」を選択します。 (フィルターギャラリーは、背景レイヤーのままでも処理が可能です) 左にプレビュー、中央に適用できる効果の一覧、右には細かい調整に使用する欄が表示されます。フィルターギャラリーを使用した加工にはいろいろなものがありますが、今回はその中から「アーティスティック」フォルダに保存されているフィルターを使って画像をイラスト風にします。 1.色鉛筆「色鉛筆」を使って加工した写真がこちらです。それでは、実際に作ってみましょう。「フィルターギャラリー」→「アーティスティック」→「色鉛筆」を選択し、左のプレビュー画面を見ながら以下の設定を調整します。芯の太さ：値を小さくすると細かく色が彩色されます。筆圧：値を小さくするとベタ塗りになります。用紙の明るさ：「0」にすると、黒一色で塗りつぶされた状態になりますが、値を大きくすると背景色に設定された色が反映されます。背景色は、Photoshopの左に表示されているツールバーの背景色アイコンで確認できます。今回は下記の内容で設定しています。背景色：白芯の太さ：3 筆圧：15 用紙の明るさ：50 色鉛筆で書いたような画像の完成です。 2.フレスコ次に、「フレスコ」を使って加工してみましょう。「フィルターギャラリー」→「アーティスティック」→「フレスコ」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。ブラシの細かさ：値を小さくするとテクスチャが追加されます。テクスチャ：値を大きくすると境界線が強調されメリハリがでます。今回は下記の内容で設定しています。ブラシサイズ：2 ブラシの細かさ：8 テクスチャ：3 境界線が強調された、メリハリのある画像の完成です。 3.塗料「塗料」を使って加工すると以下のようになります。「フィルターギャラリー」→「アーティスティック」→「塗料」を選び、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。シャープ：値を大きくすると境界が強調されます。ブラシの種類：「シンプル」以外のブラシを設定すると、「ぼかし」などの違う効果を追加することができます。今回は下記の内容で設定しています。ブラシサイズ：13 シャープ：40 ブラシの種類：シンプル少し大きめの筆で描いたような仕上がりになります。 4.水彩画次に、「水彩画」の加工をしてみましょう。「フィルターギャラリー」→「アーティスティック」→「水彩画」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシの細かさ：値を小さくするとテクスチャが追加されます。シャドウの濃さ：値を大きくすると暗部が強調され、画像が黒く塗りつぶます。テクスチャ：値を大きくすると境界線が強調されメリハリがでます。今回は下記の内容で設定しています。ブラシの細かさ：8 シャドウの濃さ：0 テクスチャ：1 元の画像より柔らかな印象になりました。 5.カットアウト次に、「カットアウト」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「カットアウト」を選択し、左のプレビューを見ながら以下の設定を調整します。レベル数：値が小さいほど色が単純に、大きいほど複雑に(元画像に近い状態に)なります。エッジの単純さ：値が小さいほど細かく、大きいほど大まかなタッチとなります。エッジの正確さ：値が小さいほど崩れた感じになり、大きいほど元画像に近くなります。今回は下記の内容で設定しています。レベル数：7 エッジの単純さ：1 エッジの正確さ：3 色紙を貼り付けたような画面になります。 6.エッジのポスタリゼーション次に、「エッジのポスタリゼーション」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「エッジのポスタリゼーション」を選択し、左のプレビューを見ながら以下の設定を調整します。エッジの太さ：値を大きくすると境界線の線が太くなります。エッジの強さ：値を大きくすると境界線の色が濃くなります。ポスタリゼーション：値を小さくすると、テクスチャが失われよりイラスト風になります。今回は下記の内容で設定しています。エッジの太さ：4 エッジの強さ：1 ポスタリゼーション：6 線が強調されたような画像になります。 7.こする次に、「こする」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「こする」を選択し、左のプレビューを見ながら以下の設定を調整します。ストロークの長さ：値を大きくすると「こする」ストロークが長くなります。領域のハイライト：値を大きくするとハイライトされる範囲が広がります。適用量：値を大きくするとコントラストが強くなります。今回は下記の内容で設定しています。ストロークの長さ：2 領域のハイライト：0 適用量：2 線で擦ったような画像になります。 8.ドライブラシ次に、「ドライブラシ」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「ドライブラシ」を選択し、左のプレビューを見ながら以下の設定を調整します。ブラシサイズ：値を大きくするとテクスチャが失われます。画像がイラスト風になります。シャープ：値を大きくすると境界が強調されます。ブラシの種類：「シンプル」以外のブラシを設定すると、「ぼかし」などの違う効果を追加することができます。今回は下記の内容で設定しています。ブラシサイズ：6 ブラシの細かさ：9 テクスチャ：1 ブラシでぼかしたような画像になります。 9.パレットナイフ最後に、「パレットナイフ」を使って加工した画像です。「フィルターギャラリー」→「アーティスティック」→「パレットナイフ」を選択し、左のプレビューを見ながら以下の設定を調整します。ストロークの大きさ：値を大きくするとテクスチャが失われ、全体が塗りつぶされていきます。ストロークの正確さ：値を大きくするとテクスチャが追加されます。ただし、「ストロークの大きさ」が０より大きい時にのみ効果がでます。線のやわらかさ：値を大きくすると境界がぼやけ、全体的にやわらかい雰囲気になります。今回は下記の内容で設定しています。ストロークの大きさ：10 ストロークの正確さ：3 線のやわらかさ：2 「3.塗料」よりも、さらに大きめのブラシでぼかしたような画像になります。フィルターギャラリーを使った方法は以上です。田島悠介フィルターギャラリーを使った方法だよ。大石ゆかりこんなにたくさんの効果があるんですね！しかもやりたい表現を選ぶだけで、いろいろ適用できるので便利です。田島悠介各オプションは写真の大きさや状態によって全部変わってくるので、プレビューを見ながら動かしてみよう。大石ゆかりはい！次は輪郭検出ですね。 [PR] Webデザインで副業する方法とは輪郭検出を使用した方法 2つ目の方法です。引き続き、1つ目の方法で使った画像を輪郭検出とレイヤーの属性を使い加工していきます。まずは、期待する仕上がりにならなかった場合にいつでもやり直せるようオリジナル画像を複製し、加工用の画像を用意します。 1.画像レイヤーを右クリックし、「レイヤーを複製」を選択します。 2.「レイヤーを複製」ダイアログが開きます。ダイアログで、複製レイヤーに「明るさ調整」と名前をつけ「OK」をクリックし、複製レイヤーを作成します。 3.同じ操作を繰り返し「輪郭」レイヤーを作成します。編集しないレイヤーは、レイヤーの左にある目のアイコンをクリックし、非表示にします。 4.「明るさ調整」レイヤーを選択し、「色調補正」パネルの「コントラスト」を選択します。「色調補正」パネルが表示されていない場合は、メニューの「ウィンドウ」→「色調補正」をクリックすると表示されます。 5.「明るさ」の部分を上げて「OK」をクリックします。今回は以下のように調整しています。 6.「輪郭」レイヤーを編集します。レイヤーの左にある目のアイコンをクリックし表示状態にしてから選択し、メニューの「フィルター」から「表現方法」→「輪郭検出」をクリックします。 7.「輪郭検出」を設定すると、以下のようにテクスチャが失われ、輪郭が強調された画像になります。 8.「輪郭」レイヤーの「不透明度」を下げ、完成です。「輪郭」レイヤーの「不透明度」を下げ、下の「明るさを調整」レイヤーのテクスチャをブレンドすることで、画像をイラスト風に加工することができます。イラスト風にうまく仕上がりましたか？少し変わった加工がしたい方はぜひ試してみてください。執筆してくれたメンターメンターOM Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。田島悠介輪郭検出を使ったやり方では複数のレイヤーを使って、それぞれに役割を持たせるんだ。大石ゆかりフィルターギャラリーを使った方法と比べると、ちょっと複雑ですね。田島悠介その分、各レイヤーの色相や明るさを調整することで、さまざまな調整ができるというのもあるね。自分のやりたい表現に応じて、いろんな方法を試してみよう。大石ゆかり分かりました！ありがとうございます！ Photoshopをさらに使いこなしたい場合は、Photoshopで手ぶれ写真を補正する方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

意外と簡単！Photoshopで木目を描く方法【初心者向け】

Photoshopのさまざまな合成機能を使って、画像の一部を木目調にすることができます。今回は、画像から新しくパターンを作成し塗りつぶしツールで使用する方法と、木目テクスチャ用の画像をオブジェクトにそのまま貼り付ける方法の2つを紹介します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。大石ゆかり田島メンター！！床とか壁に使われるような、木目っぽい表現の画像を作りたいんですが…… 田島悠介ブラシツールを使う手もあるけれど、範囲が大きい場合は写真などの素材を利用するのがいいかもしれないね。大石ゆかり素材が用意できたら、次はどうしたらいいんですか～？田島悠介木目の写真を実際に画面に適用させる方法として、パターンによる塗りつぶしの方法とテクスチャを使った方法のふたつを見てみよう。パターン作成から塗りつぶしツールを使う方法写真などの一部から新規にパターンを作成し、それを塗りつぶしツールを使って画像に適用させる方法です。素材にする木目の画像を開いた状態で左のメニューから選択範囲作成アイコンを右クリックし、「長方形選択ツール」を選びます。パターンとして使用したい部分を選択してください。選択範囲が作成された状態で「編集」をクリックします。さらに「パターンを定義」を選択します。これでパターン作成のダイアログが表示されます。今回は「木目」と名前をつけて「OK」をクリックしました。次に木目調にしたい画像を開き、パターンを適用させたい部分を自動選択ツールなどで範囲作成しましょう。左のメニューから「塗りつぶしツール」を選択します。塗りつぶしの種類を「パターン」に変更し、先ほど作成した「木目」を選択してください。選択範囲の中でクリックして塗りつぶします。これで作成したパターンが画像に適用されました。 1つ目の方法は以上です。田島悠介パターンによる塗りつぶしを利用した方法だよ。大石ゆかり塗りつぶしツールにはこんな使い方もあったんですね！田島悠介このようにパターンは自分でいくつでも追加できるので、使いたい素材や表現方法があったら普段からストックしておくといいかもしれないね。テクスチャ用画像をオブジェクトに適用させる方法木目画像をオブジェクトの形に直貼りしていく方法です。まず、適用させたい木目の画像を用意します。今回はこちらの画像を例として使用します。次に、木目調にしたい画像を用意します。適用させる部分以外は透明の状態になっています。テクスチャに使用する画像のレイヤーを上に、適用させたいオブジェクトのレイヤーを下に配置します。 (この時、オブジェクトがテクスチャのレイヤーからはみ出している場合は拡大縮小などで調整します) テクスチャに使う木目画像のレイヤーを選択した状態で、オブジェクトのレイヤーを下図の赤丸の部分へドラッグしてください。これでオブジェクトに木目の画像が適用されました。さらに下にレイヤーを追加し、白で塗りつぶした状態にしました。透過の部分は下レイヤーの状態が反映されます。今回の記事は以上です。田島悠介テクスチャを使用した方法では、元の木目画像の向きや大きさなどを変えることで色々違った表現をすることができるよ。大石ゆかりシルエットに画像を適用させるだけで、こんなに雰囲気が変わるんですね。田島悠介パターンやテクスチャに使用する画像は、著作権に関する問題がないように自分で撮ったものやフリー素材などを使おうね。大石ゆかりはい！気をつけます！さらにPhotoshopを使いこなしたい場合は、Photoshopでレイヤーマスクを描画する方法も合わせてご覧ください。 TechAcademyでは初心者でもフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】現役デザイナーが解説

この記事では、Photoshopで画像の背景を透明にする方法を初心者の方にもわかりやすく解説します。画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと、簡単にきれいな透明（透過）処理を行うことができるので、ぜひ覚えておきましょう。目次パターンの定義を使用する方法レイヤーマスクを使用する方法フィルターギャラリーを使用する方法Photoshopを学習中の方へ (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 【動画の解説はこちら】田島悠介今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。大石ゆかり田島メンター！！透過っていうのは何ですか～？田島悠介レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。大石ゆかりなるほど、透明な部分ってことですね！人物写真の背景を透明にする以下の2つの作業を順を追って紹介します。大まかな範囲を選択する境界線調整ブラシツールで調整大まかな範囲を選択するまずは人物写真を使って、基本的な透過の方法を解説します。今回はこちらの画像を使用していきます。左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。人物の形に沿ってドラッグしていきます。この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成できます。だいたい全体を選択した状態です。まだ髪などの細かい部分が選択できていないので調整していきます。「被写体を選択」コマンドを使う(※バージョン 21.2以降) ここまでの作業は、Photoshopのバージョン21.2以降の機能「被写体を選択」コマンドを利用すると、ワンクリックで選択できます。「クイック選択ツール」を選んだ状態で、対象が表示されているレイヤーを選択し、オプションバーの「被写体を選択」をクリックします。すると、人物に沿って選択範囲が作成されます。ここで選択されていない部分や選択を解除したい部分がある場合は、先ほどの「クイック選択ツール」で調整できます。境界線調整ブラシツールで調整では、髪などの細かい部分を選択していきます。オプションバーの「選択とマスク」をクリックし、「表示モード」を境界がわかりやすい「白黒」にしておきましょう。「エッジの検出」内の「スマート半径」にチェックを入れ、半径の長さを画面を見ながら調整します。 ※半径の値が小さければ境界がシャープになり、値を大きくするほど境界がソフトになります。 ※「スマート半径」にチェックを入れると、境界のシャープ〜ソフト具合をPhotoshopが自動で調整します。特に人物を選択する際に威力を発揮します。さらに境界を調整したい部分を指定するために、左メニューの「境界線調整ブラシツール」を選択します。髪などの細かい修正をしたい所を、塗りつぶすようにドラッグしてあげましょう。選択範囲の調整を終えたら、「出力設定」の「出力先」から「レイヤーマスク」を選択してOKボタンをクリックします。元の画面に戻り、レイヤーマスクで選択されていない部分が透過された状態になりました。髪の毛などの細かい部分も選択できています。基本的な透過の方法は以上です。田島悠介クイック選択ツールと「選択とマスク」を使った方法だね。大石ゆかりレイヤーマスクを使うことで、元の画像の情報を保持できるんですね。田島悠介消しゴムツールで消された部分なんかも透過になるよ。あと背景が1色だったりした場合はもっと簡単な方法があるんだ。大石ゆかりへー！どんなのですか？背景が1色の画像を透明にするロゴマークや文字列など、背景との境界がはっきりした画像で、背景が1色の場合はもっと簡単です。今回はこの画像を例にします。左メニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。オプションバーの設定項目の「隣接」にチェックが入った状態にしておきます。背景にしたい部分の中の適当なところをクリックします。すると、クリックした部分と同じ色の所がその場で透過状態に切り替わりました。また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。「隣接」にチェックが入っているときとは違い、図形の中の白い部分まで透過になっているのがわかります。「隣接」にチェックを入れると同じ色が隣接している部分をすべて選択するのに対し、チェックを外すと画像全体で同じカラーのピクセルが選択されるようになります。文字列の背景を透過にしたい場合などでは、「隣接」のチェックを外しておくと便利です。 [PR] Webデザインで副業する方法とは手描きのイラストの背景を透明にする（線画抽出する）最後に、スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。ここではチャンネルを使用した方法と、クイックマスクを使用した方法の2つを解説します。線画を抽出する前の共通の手順です。スキャンした画像をPhotoshopで開き、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。「明るさ」の部分を右に移動して画像を明るくすることで、さらに細かい汚れを消すことができます。これで下準備は完了です。チャンネルを使用した方法チャンネルパネルを表示し、「チャンネルを選択範囲として読み込む」をクリックします。すると、線画以外の白い部分が選択されました。この状態で、上メニューの「選択範囲」から「選択範囲を反転」をクリックします。選択範囲が反転し、線画の黒い部分のみが選択された状態になりました。レイヤーパネルにて、何もない新規レイヤーを作成します。元のレイヤーは左側にある目玉マークをクリックして非表示にしておきましょう。上メニュー「編集」→「塗りつぶし」を選択します。内容は「カラー」を選び、表示されたカラーピッカーで線画の色に使用したい色を選んだ上で、OKボタンをクリックします。線画の部分が塗りつぶされ、新規レイヤー上に線画を抽出することができました。クイックマスクモードを使用した方法線画を抽出する画像を開き、上メニュー「選択範囲」→「すべてを選択」をクリックします。上メニュー「編集」→「コピー」を選択します。レイヤーパネルで新規レイヤーを作成し、「編集」→「塗りつぶし」で線画の色に指定したい色で全面を塗りつぶします。そのレイヤーを選択した状態にし、元のレイヤー(下のレイヤー)は非表示にしておきます。左メニューの下から2番目にある「クイックマスクモードで編集」をクリックします。上メニュー「編集」→「ペースト」を選択します。画面では以下の画像のようになります。左メニューから先ほどと同じアイコンをクリックし、「クイックマスクモードで編集」から「画像描画モードで編集」に戻します。線画以外の部分が選択されました。上メニューの「編集」→「消去」を選択します。線画以外の部分が透過の状態になり、線画を抽出することができました。いかがでしたか？田島悠介最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。大石ゆかりクイックマスクモードというのは、こういうこともできるんですね。田島悠介透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。大石ゆかりそうですね。ありがとうございます！ Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

ヒーローイメージで印象を大きく変える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デザイン

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] Webデザインで副業する方法とはデジタルの装飾モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。 Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。本物のデザインモダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。しかし、正確には何がデザインを「本物」にするのでしょうか？本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」デジタルデザインにおいては、デザインは大きく次のように集約できます。デジタルな外観を保持すること金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。スキューモーフィズムを排すること電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。コンテンツを中心にしたスタイルにすることスタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。ミニマリズムではない機能性に美しさがあるデザインは、ミニマリズムのデザインとは同じではありません。前者は、使いやすく、効率性の高い、利用性が最大限に高められた製品を生産するために、デザイナーが余剰を排除して生まれるデザインです。一方、後者はミニマリズムの美学を追求することにより生まれるデザインであり、オブジェクトにシンプルさと美しさをもたらします。一方はデザインの基本原則であり、もう一方はスタイリングの選択肢なのです。インターフェースをよりシンプルで「本物」らしくするために、ミニマリズムのデザインを、スタイルとしてインターフェースのデザインに厳格に適用することは、間違いです。例えば、シャドウ、色、背景の多様なスタイルなどを見境なく排除する場合、必ずしもインターフェースが使いやすくなるとは限りません。ジョン・マエダは著書の『シンプリシティの法則』の中で、「シンプルさを達成する最も簡単な方法は、思慮深い削除です。不確かな場合は、削除してください。しかし削除するものには注意してください。」と述べています。要素を削除することがシンプルさにつながるのは、ユーザーが処理するアイテムが少なくなるからです。しかし、ユーザーがインターフェースの操作を理解するための視覚的な手がかりまで削除することは、――アイテムをまとめ、要素を目立たせるためにボタンやラベルを区別化するのが、グラフィカル要素の役割であるため――かえってユーザーの負担が増えて逆効果です。そのため、ユーザーへのガイドは、スタイルによってというよりも、デザインの原則によって実現するべきです。本物のデザインが重要である理由 Riseというアプリは、本物のデジタルデザインの完璧な例の1つです。目覚まし時計はすでにアプリとして開発されていましたが、このアプリを開発した会社Simplebotsは、純粋なデジタルキャンバスのコンテキストにおけるインターフェイスを再考することで、概念にゼロから取り組んだのです。 Riseのインターフェイスにはフルスクリーンのスライダがあり、時間設定した時の空の色に合わせて背景色が変化します。現実世界の時計、スライダー、テクスチャなどは模倣していません。その代わりに、Riseのデザイナーたちは、モバイル端末のタッチキャンバス機能に対応するデザインを生み出し、端末を最大限に活用できるようなユーザー経験を創造しています。革新的なデザインは、優れたユーザー体験を実現するだけではなく、アプリ市場で目立つことができます。 Riseのようなインターフェースは、現実の世界にソリューションを求めるというよりも、デジタルなコンテキストの中で、完全に設計上の問題に取り組む場合にのみ実現可能です。コンピュータの画面上では、抽象的なフォーム、アニメーション、明るい色、均一なシェイドを表現することが可能です。カラーパレットを抑制したり、静的表現に限定する必要はありませんが、スキューモーフィズムに縛られてもいけません。ピクセル単位のグリッドを使用して、コンテンツを表現する最良の方法を理解することによって、より良いシンプルなソリューション、使い心地が良い画面を備えた革新的なインターフェースを実現することが可能となり、より良いユーザー体験を提供し、その他大勢から目立つようなアプリのデザインを実現できます。まとめ近年人気の高い「フラット」なデザインは、1つのトレンドかもしれませんが、余剰な装飾を排除してコンテンツに集中することへの欲求の現れでもあるのです。19世紀に機械化された大量生産によって過度な装飾を生み出したように、またディスプレイやスタイリングの技術が初期のWeb・ソフトウェアデザインにおいて同様に過剰なデザインを生み出したように、技術の進歩は過剰につながることがあります。しかし、機能性に美しさを求めたモダニズムの先駆者たちによって、過剰な装飾が時間をかけて排除されたように、今日のソフトウェアにおける過剰も、やがて真のデザインへの欲求によって排除されることになるでしょう。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

今さら聞けない！デザインパターンとは【初心者向け】

初心者向けにデザインパターンとは何なのか解説しています。プログラミングではよく聞く言葉なのですが、しっかりと基本を理解して使っている人は少ないようです。本稿ではデザインパターンの基本的な知識と、おすすめの書籍についてまとめました。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事をまずご覧くださいなお本記事は、TechAcademyのJava講座の内容をもとに作成しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！デザインパターンというのは何ですか～？田島悠介オブジェクト指向において色んなプログラムで再利用できる設計パターンのことで、1995年に発刊された「オブジェクト指向における再利用のためのデザインパターン」という本で広く知られるようになったんだ。大石ゆかり具体的にはどんなものがあるんですか？田島悠介主にオブジェクトの生成に関するもの、プログラムの構造に関するもの、オブジェクトの振る舞いに関するものがあるよ。実際に見てみよう。目次デザインパターンとはデザインパターンの目的デザインパターンの種類デザインパターンの学習におすすめの本デザインパターンとはデザインパターンとは、JavaやRubyなどのオブジェクト指向の言語で使われる設計パターンのことです。過去のエンジニアが解決してきた方法（設計）が、デザインパターンとしてまとめられているのです。デザインパターンと言ってもいろいろとあるのですが、最も有名なのはGoF（Gnag of Four）でしょう。「生成」や「構造」、「振る舞い」の3つに分類された、23のパターンがあります。デザインパターンは体系だっているので、ビギナークラスのエンジニアがオブジェクト指向を学ぶ題材としても役に立つことでしょう。 [PR] Webデザインで副業する方法とはデザインパターンの目的デザインパターンに取り組むべき主な目的は、以下の3つです。ベストプラクティスを体得するデザインパターンは、設計のベストプラクティスとも言えます。エンジニアが試行錯誤した結果を、少ない時間で体得する（利用する）ことができるのです。プログラミングの効率化もできますし、先人のアイデアを学ぶこともできるでしょう。再利用性の高いコードを書くデザインパターンに取り組むことで、再利用性の高いコードを書くこともできます。コードの見通しも良くなり、メンテナンス性も高まります。エンジニア同士の共通言語にするエンジニアの中には、デザインパターンに親しんだ人も数多くいます。そのため、デザインパターンが考慮されたコードは、他のエンジニアにとっても読みやすいコードになります。言わば、エンジニアの共通言語とも言うことができるのです。デザインパターンの種類 GoFデザインパターンという定番パターンは全部で23種類あります。それぞれ3つに分類され利用されているので、役割を理解しておきましょう。オブジェクトの生成に関するパターン Abstract Factory Factoryクラスを切り替えることでインスタンスを切り替えることが可能です。 Builder 複数のオブジェクトを生成する上で、専用のクラスを用意する際に便利です。 Factory Method 機能が複雑になりクラスが多くなった際に使えるでしょう。一緒に使いたいオブジェクトを生成する際に利用しましょう。 Prototype 同じクラスで複数のオブジェクトを作成する際に便利です。毎回コンストラクタを使ってオブジェクトを生成することなくクローンを生成できるので、作業の効率化が見込めます。 Singleton オブジェクトを一つだけ生成させるデザインパターンです。1つのクラスから1つのオブジェクトだけと制限する際に使えます。プログラムの構造に関するパターン Adapter 本来繋がっていないクラス同士を関連づけることができます。 Bridge 継承元のスーパークラスの抽象メソッドを適切に実装したり、機能を拡張する際に利用すると良いでしょう。 Composite インターフェースを利用した際に応用の幅が広がります。 Decorator 継承以外の手段で機能を追加することができます。 Facade 1つのメッセージを複数のクラスで処理を行うことができます。複数人で開発する際、クラスを作る人と使う人がいるかと思います。クラスを使う際に楽をさせる作業になるはずです。 Flyweight 小さなオブジェクトを数多くロードする状況で効率的に処理できます。 Proxy インターフェースとメッセージフックを応用するという点で便利でしょう。オブジェクトの振る舞いに関するパターン Chain of Responsibility メッセージを他のクラスのオブジェクトに送って処理することが可能です。 Command 命令を表すオブジェクトをメソッドの引数にすることで、1つの引数で複数のデータと処理を伝えることができます。 Interpreter インターフェースを使って、構文解析の結果をツリー構造で表示します。 Iterator オブジェクト間の関連をシンプルにすることができます。複数のつながりをシンプルにできるでしょう。 Mediator クラス間の疎結合を綺麗に整理することができます。複数のオブジェクトを組み合わせて機能を実装する際に使えます。 Memento オブジェクトの状態を保存したまま元の状態に復元することができます。 Observer あるオブジェクトの変化を別のオブジェクトに通知させることが可能です。 State if文を利用することなく、状態に対応した処理を行うことができます。 Strategy クラスを使う人のコードを変更することなくアルゴリズムを変更することが可能になります。 Template Method メソッドの機能を部分的に変更するために便利でしょう。 Visitor 利用頻度は少ないかもしれませんが、オブジェクトに動的に機能を追加するために利用できます。田島悠介「オブジェクト指向における再利用のためのデザインパターン」で取り上げられている23種類のデザインパターンだよ。大石ゆかりそれぞれが先ほどの3つの種類に分類されているんですね。田島悠介この本はGang of Fourと呼ばれる4人によって書かれたため、GoF本ともいわれるんだ。今は色々な書籍でこのパターンについての解説がされているよ。デザインパターンの学習におすすめの本最後に、デザインパターンのおすすめの書籍をご紹介しておきましょう。デザインパターンの入門書として活用してください。増補改訂版Java言語で学ぶデザインパターン入門増補改訂版Java言語で学ぶデザインパターン入門最も有名なデザインパターンであるGoFの23パターンを、Java言語を使って解説してある本です。初心者でも理解できるようにわかりやすく書いてあるので、デザインパターンの入門書としておすすめです。独習デザインパターン独習デザインパターン Java言語を題材に、デザインパターンについて平易な内容で説明してある入門書です。事例がたくさん盛り込まれているところもいい点です。オブジェクト指向における再利用のためのデザインパターンオブジェクト指向における再利用のためのデザインパターンデザインパターンのバイブル的存在の書籍です。デザインパターンの王道であるGoFをJavaを使って紹介しているのですが、内容的にはボリュームがあります。読み終えるには時間がかかるかもしれません。デザインパターンの基礎知識と、おすすめの書籍についてご紹介しました。デザインパターンは知識として持っておくだけでは意味がありません。積極的に使っていただき、日々のプログラミングを効率化していっていただければと思います。田島悠介最後に、デザインパターンに関する学習書籍を紹介したよ。大石ゆかり初めて勉強するならどれがいいでしょうか？田島悠介まずは「増補改訂版Java言語で学ぶデザインパターン入門」を読んでみるのがいいんじゃないかな。GoFの23のパターンを分かりやすく解説しているので、基礎を学ぶのに適していると思うよ。大石ゆかりなるほど、分かりました！ありがとうございます！入門向けのJava学習サイトも紹介しているので、合わせてご覧ください。また、オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。 JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。

Java

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Photoshopでテクスチャを使う3つの方法【初心者向け】現役デザイナーが解説

目次

パターンの定義を使用する方法

レイヤーマスクを使用する方法

フィルターギャラリーを使用する方法

Photoshopを学習中の方へ

関連するキーワード

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

実は簡単！Photoshopで写真をイラスト風にする方法【初心者向け】現役デザイナーが解説

意外と簡単！Photoshopで木目を描く方法【初心者向け】

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】現役デザイナーが解説

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

1900年代のデザインの歴史から学ぶ！デザインの基本とは

今さら聞けない！デザインパターンとは【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

パターンの定義を使用する方法

レイヤーマスクを使用する方法

フィルターギャラリーを使用する方法

Photoshopを学習中の方へ

記事を検索

関連するキーワード

関連する記事

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

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

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