Photoshop

Photoshopで写真の色を置き換える方法【初心者でもできた！】

Photoshop（フォトショップ）で【色の置き換え】を初心者でも簡単にできる方法を解説した記事です。記事を読めば、写真の一箇所だけ色を変える処理がすぐにできるようになります。色相を調整して複数の色にする応用編の紹介もあり。

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

監修してくれたメンター

メンターOM

Webデザイン勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。現在もロサンゼルスで働く傍ら、フリーランスとして日本からの仕事も請け負う。

CMなどで、形が同じで色違いの商品の画像が出てくるのを、見たことはないでしょうか？

実はあのような画像の撮影は1回だけで、編集で色違いの画像を作っている場合が多くあります。

例えば、Photoshopの「色を置き換える」機能を使うことで実現できます。
今回は初心者のための、写真の特定の色だけを置き換える方法をご紹介します。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

色を変更する処理

Photoshopはいくつかの方法で、特定の色を別の色と置き換えることができます。

「色の置き換え」処理と「色相・彩度」の処理です。

ここでは比較的扱いが簡単な「色の置き換え」処理について説明します。

まずは画像を読み込みましょう。

元画像

イメージメニューにある色調補正から「色の置き換え」を選びます。

色の置き換え

すると調整画面が出てきます。

色の置き換え詳細

右側矢印の茶色が今選択している色です。

画像を表示を選択し、左の矢印のスポイトツールを選び、修正したい部分を指定してください。

今回は花の色を補正しますので下記の青矢印の位置にスポイトを合わせます。

色の選択

指定した部分の色が現在選択されている色のところに表示されます。

さらに、下図の矢印の彩度のバーを動かせば花の色が変わります。

OKを押せば画像に処理が適用されます。

色の置き換え詳細

処理結果はこのようになりました。

処理結果

また、色相を動かして他の色に変えることもできます。

色相を変える

色の調整はこれで完了です。

花の部分だけ色が変わりました！

色の調整はプレビューに反映されるので、それを見ながら好きな色に変えることができるよ。

あれ、でもこれって画面の中に花と同じような色のものがあったらその色も変わっちゃいませんか～？

対象物が多い写真のときは、確かにそういうケースもあるかもしれないね。

そういうときは選択範囲と併用して使ってみよう。

特定の花の色だけを変える

応用として、特定の花の色だけ変えてみます。

まず領域を指定します。

領域指定

領域指定方法は、画像上の花の領域を含む四角をドラッグ&ドロップで指定するだけです。

あとは先ほどと同じ手順で色相を変えてみましょう。

ドラッグ&ドロップ

もう1つの花も同じ方法で、領域指定して色を変えてみます。

これで完成です。

いかがでしたか？

いっけん難しそうですが、初心者でもできるテクニックですので、ぜひ試してみてください。

選択範囲を作成してから、色の置き換えを行うんだ。

なるほど、これならその部分だけに適用されるんですね！

指定した色が画像内のどこにあるかはプレビューの「選択範囲」で見られるので、関係のないものが対象に入っていないかよく確認して使いましょう。

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

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

Photoshopを学習中の方へ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshop

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

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

Photoshop

Photoshopで塗りつぶしなしのシェイプを作成する方法を現役エンジニアが解説【初心者向け】

Photoshopで塗りつぶしなしのシェイプを作成する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記...

Photoshop

Photoshopでレイヤーを結合する方法を現役エンジニアが解説【初心者向け】

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

Photoshop

Photoshopで文字をパス化する方法を現役エンジニアが解説【初心者向け】

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

Photoshop

Photoshopの代用になる！無料で使える画像編集ツール・ソフト10選

Photoshopの代用になる無料で使えるツール・ソフトをまとめて紹介しています。 Photoshopは少し高額なソフトウェアでこれから試しに使ってみよう...

Photoshop

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

PHPのreplace関数で文字列の置換をする方法【初心者向け】

今回は、replace関数の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。文章中のある語句を他の文字列に置き換えたい場合に便利です。実務でもreplace関数を利用した文字列置き換え実装をしますので、ぜひ学習してみてください。目次色を変更する処理特定の花の色だけを変えるPhotoshopを学習中の方へそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！ワードやテキストエディタで置き換えをよく使うんですが、PHPにも特定の文字を別の文字に置き換えるような関数はありますか？田島悠介それが今回紹介するstr_replace関数なんだ。大石ゆかり指定した文字列の中の、特定の文字を置き換えてくれるって感じですか？田島悠介そうだね。複数の条件を指定したりできるんだけど、まずはstr_replace関数の書き方などを見てみよう！ replace関数とは str_replaceは、文字列内の指定した部分を他の文字列に置き換えるときに使用する関数です。文章中にある「,（カンマ）」を「、（読点）」に置換したり、「作る」という表記を「創る」に置き換えるような使い方が可能です。 replaceの書き方 str_replaceは以下のように記述します。 str_replace("検索を行う文字列","置き換えを行う文字列","対象の文字列","str_replace処理の回数"); 「検索を行う文字列」「置き換えを行う文字列」「対象の文字列(または配列)」「str_replace処理の回数」を順番に指定します。それぞれの内容は以下の通りです。検索を行う文字列：別のものに置き換えたい部分の文字列を入力します。置き換え後の文字列：置き換えた後の文字列を入力します。対象の文字列：置き換えの処理を行う文字列(全体)です。 str_replace処理の回数：変数を指定して、str_replaceの処理が何回行われたかという数字を格納できます。 <?php $str = "文字列1\n文字列2\n文字列3\n"; echo $str; $str = str_replace("文字列", "置き換え後", $str,$n); echo $str; echo $n."回置き換えました"; str_replaceによる置き換えの処理は3回行われているため、$nの値は”3″となります。画面ではこのように表示されます。この4つ目の要素は省略が可能です。大石ゆかり文字列が置き換え後に変換されてますね。置き換えた回数もわかるんですねー。田島悠介掲示板とか他のユーザーからの投稿の改行文字をbrタグに置き換えた場合とか、置き換え回数が多い場合警告を発するという使い方もいいね。 [PR] Webデザインで副業する学習方法を動画で公開中str_replaceを実際に書いてみよう str_replace関数を使用して実際に文字の置き換えを行います。変数の場合変数に格納された文字列の中から、対象の部分を別のものに変更した場合の例です。サンプルコード <?php $str = "I have a pen"; echo $str; echo "\n"; $str = str_replace("pen", "pineapple", $str);

PHP

実際のアプリに学ぶ！モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、エンジニアのNick Babich氏によって投稿されました。配色は、モバイルデザインにおいて、おそらく機能性の次に重要なものです。人間からコンピュータへの命令は主に、グラフィカルUI（GUI）の要素へのインタラクションを通して行われ、「配色」は重要な役割を担っています。ユーザーが、アプリのコンテンツを見て理解し、アクションするときに役立ちます。すべてのアプリにはそれぞれに独自の配色があり、主な領域には原色を使っています。新しいアプリをデザインするとき、可能な色の組合わせは無数に存在するので、それに合う配色を決定することは困難です。この記事では、モバイルデザインの配色で最も重要なことについて紹介します。伝統的な配色のパターン（モノクロ―ム、類似色、補色）、どのパータンにも依存しない配色を自作する方法、ユーザビリティに優れたアプリのための色の選び方をテーマとして扱います。また、この記事で紹介しているAdobe XDは、ダウンロードして無料で試用することもできます。効果的な配色を選ぶ方法配色を作るときには考慮すべきことがたくさんあります。例えば、（あなたの製品や組織の）ブランドカラー、あなたの地域に調和するカラーなどです。使うカラーの数はいくつにするべきか？カラーの組合わせをシンプルにすると、ユーザーエクスペリエンスを向上する効果があります。シンプルな配色は、人間の目に自然になじみやすく、コンテンツの理解を促進します。反対に、過度に多くの場所に過度に多くの色を使う場合には、混乱したデザインになります。トロント大学がAdobe Color CCの使用に関する調査を行ったところ、ほとんどの人が2〜3色のみ使用するシンプルな色の組み合わせを好むことが明らかになりました。配色を作る方法この2～3色を選ぶには、カラーホイール（色相環）を使うのが効果的です。既存の配色は豊富にありますが、これらを利用すると新しいスキームの作成が容易になります。特に初心者の方にとっては。モノクロームモノクロは、各色が同じベースカラーから生成されるため、最もシンプルな配色です。モノクロームのカラーは全体的な色の調和を生み出し、すっきりとした印象になります。画像：モノクロームの配色は、単色、そのティント（色相に白色を混ぜて生まれる色）、そのシェード（色相に黒色を混ぜて生まれる色）、そのトーン（色相に灰色を混ぜて生まれる色）から構成されます。特に、青や緑のモノクロームの配色は、人間の目に優しい色合いになります。画像引用元：Adobe Color CC 画像引用元：Louis Saville モノクロームの配色は、クリーンで洗練された印象になります。類似色類似色の配色は、互いに調和する、カラーホイールで隣り合う色から作られます。そして、1色をドミナントカラー（支配色）として使い、他の色は配色を引き立てるために使います。画像：12色のカラーホイールで隣り合う3色を使うことで、類似色の配色が作られます。類似色の配色は比較的簡単ですが、色の鮮やかさが強調されやすいため、その決定が重要です。例えば、ジェスチャー駆動のToDoリストアプリであるClearは、視覚的にタスクの優先順位を示すためにこの配色を使っています。画像引用元：Adobe Color CC Clearのデフォルトの配色は、ヒートマップを連想させるようなデザインで、より重要度の高いタスクは、鮮やかな赤い色で画面に表示されます。一方、瞑想アプリのCalmはユーザーがリラックスできるように、類似色の配色に青と緑を使っています。画像引用元：Adobe Color CC Calmは全体のデザインにも、類似色の配色を使っています。補色補色とは、カラーホイールで正反対の位置にある色です。補色の色同士は必ずしも不調和になるというわけではありません。補色とは、カラーホイールで正反対の位置にある色です。補色はコントラストが強く、ユーザーの注意を引くために使うことができます。一方の色をドミナントカラー（支配色）にして、もう一方の色をアクセントカラーにすることが重要です。例えば、緑のオブジェクトの上に赤を合わせると、非常に目立ちます。補色の配色は、何かを目立たせたい場合に効果的です。しかし、補色の配色を使うときには、不調和な配色とならないよう注意も必要です。カスタムの配色を自作する配色を自作することは、多くの人が考えているほど複雑ではありません。明るいアクセントカラーを中間色（ニュートラルカラー）に加える方法は、その中で最も簡単な配色の1つであり、視覚的な効果も非常に高いといえます。グレースケールのデザインに1色を追加するだけで、シンプルかつ効果的に視線を集めることができます。 Dropboxの配色を構成しているのは、白の背景、グレーのテキスト、青いアクセントカラーです。画像引用元：Dropbox Adobe Color CCは配色を効率化する Adobe Color CCを使うと、色の選択が容易になります。パレットの各カラーは、数回クリックするだけで基本色として修正または選択できます。各カラーのコードをエクスポートする機能もあります（16進数カラーコードを含む）。パレットは直接的にライブラリに保存または追加できます。さらに、コミュニティによって作られた数多くの配色も、サイト上で利用できます。ゼロから作る必要がなくなるので、ぜひ試してみることをおすすめします。 [PR] Webデザインで副業する学習方法を動画で公開中コントラストの効果一般的に、UI上で色のあるオブジェクトや領域は、単独で表示されるということはなく、他の色のオブジェクトや領域と隣り合うか重ねられています。このことがコントラストの効果を生みます。コントラストとは、ある色が別の色からどのくらい対立するかを表す指標です。コントラストを適切に使うと、目への負荷を減らし、画面上のデザイン要素をはっきり区別することでユーザーの注意を引く効果があります。高いコントラストの場合はそれぞれのカラーがはっきりと目立ちますが、低いコントラストの場合はそうなりません。コントラストとテキストの可読性カラーコントラストは、色彩理論がデザインのユーザビリティに重要な影響を及ぼす分野の1つです。デザイナーは、美しくて調和が取れているように見える、低いコントラストを好む傾向にあります。しかし、美しいことは常に可読性を高めるベストな方法であるとは限りません。テキストにカラーを使うときには、低いコントラストにすると読みにくくなるため、注意が必要です。このことは特にモバイルス画面において注意するべきであり、ユーザーは外出先でデバイスを利用することが多いため、明るい場所で光が画面に反射するときには、ますます読みにくくなるのです。デザイン要素同士のコントラストは十分に高くしておきましょう。その方法は簡単で、コントラスト比を確認するだけです。コントラスト比は、あるカラーが別のカラーからどのくらい対立するかを示す比率です（一般的に、1:1や21:1などの形で表記されます）。コントラスト比の差が大きくなるほど、相対輝度の差も大きくなります。 W3Cは、本文のテキストと画像のテキストについて次のコントラスト比を推奨しています。小さな文字のテキスト：背景に対して少なくとも4.5：1のコントラスト比とする必要があります。大きな文字のテキスト（14 ptの太いウェイト/ 18 ptの標準的なウェイトおよびそれ以上）：背景に対して少なくとも3：1のコントラスト比とする必要があります。このガイドラインは、低視力、色覚異常、または視力の低下しているユーザーが画面上のテキストを見たり読んだりする際にも役立ちます。テキストの色と背景色をW3Cの推奨するコントラスト比に従って修正すると、読みやすくなります。画像引用元：マテリアルデザインアイコンなど他のデザイン要素も、W3Cの推奨するコントラスト比を実践することが望ましいです。選択したパレットのコントラストの度合いについて、有益なフィードバックを提供してくれる無料のツールもいくつかあります。その1つはWebAIMのColor Contrast Checkerで、選択した色をテストできます。ユーザーの注目を集める効果コントラストは読みやすいテキストを作るだけではなく、画面上の特定の要素にユーザーの注目を集める効果もあります。一般的に、高いコントラストは、重要度の高い要素を引き立てるために使うのに適しています。例えば、ユーザーは背景色と高いコントラスト比にあるコールトゥアクション（CTA）のボタン要素を、よりクリックしやすいといえます。コントラストによって、画面上でデザイン要素が目立っています。色覚異常（カラーブラインド）の人のためのデザイン視覚的な障害を持つ人があなたのアプリのユーザーとなり得ることを想像したことがありますか？通常、色覚異常は「特定の色を多くの人と同じように知覚しないこと」という意味で使われています。男性の約8％、女性の約0.5％が何らかの形で色覚異常の影響を受けているとされています。赤と緑の色について、よく問題となるようです。色覚異常としてさまざまなタイプ（赤、緑、青、黄、モノクロームなど）が存在するため、アプリにおいて重要度の高いことを表示するときには、あらゆる人が知覚できるような視覚的な配慮が重要です。システム状態を知らせるために、カラーだけを使用しないように注意してください。また、Photoshopは色覚異常の人が見た場合をシミュレーションするのにも役立つツールです。アプリの画面が実際にどのように見えるかを表示する機能を備えています。画像：Airbnbアプリのログイン画面　画像引用元：Pinterest コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

アプリデザイン

Rubyでtrを使う方法を現役エンジニアが解説【初心者向け】

Rubyでtrを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。田島悠介今回は、Rubyに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Rubyでtrを使う方法について詳しく説明していくね！大石ゆかりお願いします！ trメソッドでできること文字列 String クラスの tr メソッドは「文字の置換」を行うメソッドです。文字列から指定の文字を変換したあとの文字列を返します。リファクタリング単純に文字を置き換えるだけであれば同じ置換メソッドであるgsubメソッドより高速になると言われています。なので、すでにgsubメソッドで書かれているコードでも、単一文字の置き換えで済むのであれば tr メソッドに書き換えたほうが処理も高速になり、コードも単純になります。引数の変換与える引数は2つです。第一引数に「置換したい文字」を与えます。第二引数に「置換する文字」を与えます。 trとgsubの違いとは trメソッドは「（単一）文字」を置き換えるメソッドになります。引数に文字列をあたえることもできますのが、それぞれのインデックス位置の一致する文字に置き換わるだけです。それに対し、gsubメソッドは正規表現を活用し「文字列」を変換するメソッドになります。 trを使う方法以下のように「tr(“変換したい文字”, “置き換え文字”)」のように文字列のインスタンスメソッドとして使用します。文字列のインスタンス.tr("変換したい文字", "置き換え文字") Rubyのtrメソッドの例: "abcdefg".tr("abc","123") それぞれインデックス位置の一致する文字に置き換えられます。上記の例ではそれぞれ「a」が「1」に、「b」が「2」に、「c」が「3」に置き換えられます。 [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう # 文字列を作成します。 str = "abcdefg" # 「a」を「1」に置き換えます。 puts str.tr("a", "1") #=> "1bcdefg" # それぞれ「a」が「1」に、「b」が「2」に、「c」が「3」に置き換えます。 # それぞれインデックス位置の一致する文字に置き換わることを意識します。 puts str.tr("abc","123") #=> "123defg" # 小文字が大文字に置き換えます。 puts str.tr("a-z","A-Z") #=> "ABCDEFG" __END__ 実行結果 1bcdefg 123defg ABCDEFG まとめ trメソッドを使うことで簡単に文字を置き換えることができました。 trメソッドは「文字の置き換え」をするメソッド。インデックス位置が一致する文字に置き換わる。 trは「文字の置換」、gsubは「文字列の置換」。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ

Ruby

最もよく使われるデザインの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デザイン

JavaScriptでreplaceメソッドを使って指定した文字列を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでreplaceメソッドを使って指定した文字列を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでreplaceメソッドを使うと、文字の置き換えが可能です。実務でも、JavaScriptでreplaceメソッドを使って文章の一括修正を行うので、ぜひ学習してみてください。目次色を変更する処理特定の花の色だけを変えるPhotoshopを学習中の方へそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでreplaceメソッドを使って指定した文字列を削除する方法について詳しく説明していくね！大石ゆかりお願いします！ replaceメソッドとは replaceメソッドは文字列の特定部分を置き換えることができるメソッドです。たとえば、文章の中の特定の名前などを別の名前に置き換えることができます。 replaceメソッドの使い方 replaceメソッドでは置き換え対象の文字列を、文字列または正規表現によって指定できます。サンプルコード let str = "田中さんは、今日も元気です。"; let ret = str.replace("田中", "小林"); console.log(ret); 実行結果解説 let str = “田中さんは、今日も元気です。”;では、変数strに「田中さんは、今日も元気です。」という文字列を代入しています。 let ret = str.replace(“田中”, “小林”);では、変数strの中の「田中」という文字列を「小林」にreplaceで置き換えて、変数retに代入しています。 console.log(ret);では、変数retを表示しています。表示結果は、「小林さんは、今日も元気です。」になります。 [PR] Webデザインで副業する学習方法を動画で公開中正規表現とは正規表現とは、文字や記号を使って文字列の中の特定部分を指定する表現方法です。正規表現を使うと、行頭、行末、数値のみを指定したり特定の文字コードを指定したり、様々な方法で文字列を表現できます。サンプルコード let str = "先月のテストの点数は50点でした。先々月のテストの点数は60点でした。"; let ret = str.replace(/[0-9][0-9]/g, "100"); console.log(ret); 実行結果解説 let str = “先月のテストの点数は50点でした。先々月のテストの点数は60点でした。”;では、変数strに「先月のテストの点数は50点でした。先々月のテストの点数は60点でした。」という文字列を代入しています。 let ret = str.replace(/[0-9][0-9]/g, “100”);では、変数strを、replace関数で数値の部分を100に置き換えています。 /[0-9][0-9]/gで指定した部分が正規表現です。具体的には、/で囲まれた部分が正規表現の指定です。 [0-9]では、0から9までの数字を指定しています。 [0-9]が2つあるので、2桁の数値に対応しています。 gを指定すると、置き換えたい文字列が複数存在しても、すべて置き換えるという指定です。今回は50と60を100に置き換えています。 console.log(ret);では、変数retを表示して「先月のテストの点数は100点でした。先々月のテストの点数は100点でした。」と表示しています。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。

JavaScript

【Webデザインで必ず役立つ！】理想的な配色を作る9つの方法！

本稿は、Designmodoのブログ記事を、Designmodoより了解を得て日本語翻訳し掲載した記事になります。サイトの作成にあたり最も難しいことの一つとは、ブランドやメッセージを印象的にするための配色選びです。理想の配色選びとは、ただ色を選んでそれらを散りばめれば良いという訳ではありません。意外にも、化学や色彩論に関係しているのです。今回は、より理想的な配色選びについて、9つの方法をご紹介します。（もちろん、理想的な配色を用いたWebサイトと共にご紹介していきます。）色相環子供の頃、学校の授業で見た色相環という図を覚えていますか？これは、実際に大人の学習者へも用いられているものなのです。色相環からは、他の色との違いや関係を見ることができ、配色選びの一つの要素となります。色の相対を順序立てて円環にして並べたものです。色相環は原色・等和色・第三色によって構成されています。原色（赤、黄、青）等和色（緑、赤紫、オレンジ）原色のうち2色を混ぜたもの第三色（紺、青紫、バラ色、赤オレンジ、若草色、黄緑）原色と等和色を混ぜたものあなたが色相環からどの色を選びどのようにミックスするかで、配色の良し悪しが決まるのです。アナロジー：色相環上で連続した関係の色相の組み合わせコンプリメンタリー：色相環上で正反対に位置する色の組み合わせスプリットコンプリメンタリー：反対色、補色に近い色相の組み合わせダブルコンプリメンタリー：2組の補色となる色相のペアの組み合わせ。最も難しいと言われるモノクロマテイク：単一の色相を用い、明度彩度を変えるトライアッド：補色関係の組み合わせこれらの色相環上のパターンは、色を選ぶ上で多く用いられているツールの一つです。（ただ、いつもこれらのルールに従えば良いというわけではありません。（デザインにルールは絶対ではないのです）黒、白、灰色色というのは、明るい色だけで成り立っているわけではありません。最も重要の色とは、私達があまり見ることのない色だという説もあるのです。その色とはー黒、白、灰色、です。これらの色は、何かを引き立てるのに最適なカラーです。背景として使用されることはもちろん、目的に合わせて暖かさやクールを与えることができます。また、印刷面などに関しても他の色と比べると有効性が高いです。 [PR] Webデザインで副業する学習方法を動画で公開中トーン、ティント色相環の中からいくつかの色を選びそのまま使用する人はあまりおらず、何かしら色を変化させることがほとんどです。まさにそれをティント、トーン、シェードといいます。ティント：純色に白を加えたものシェード：純色に黒を加えたものトーン：純色に灰色、または黒と白を加えたものこれらの方法で色彩を変え、あなたのパレットに変化を与えることができます。ティント・トーン・シェードのコンビネーションを使い色を作り出すことによって、2,3色を同じ種類でありながらさらに広げることができるのです。（一つの文章の中で、太字やイタリックなど形式を変えて文字を打つようなものです。）トレンドカラーの使い方たくさんのトレンドカラーがあります。それらは程よくうまく使いこなすことが必要です。なぜなら、トレンドカラーは長期的に使うことが難しいからです。トレンドカラーを使用する場合は、一つに絞ってあなたのパレットに取り入れることをおすすめします。色を作る際、基本的には長く、何度でも使える色を作るのがいいでしょう。（色は、各ブランドのアイデンティティーであり重要な提供者です。） ”あなた色”に染まった色を作り、そこにインパクトを与えるためのアクセントとしてトレンドカラーを使うのです。（そうすればトレンドが終わった時に他のアクセントカラーに戻すことができます。）コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Photoshopで写真の色を置き換える方法【初心者でもできた！】