TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopでチャンネルミキサーを使う方法【初心者向け】
Photoshop

Photoshopでチャンネルミキサーを使う方法【初心者向け】

Photoshopで【チャンネルミキサー】を使う方法を初心者向けに解説した記事です。チャンネルミキサーを使うことで、色を要素ごとに分けて、細かい調整が可能になります。3つの円の画像を例にして、色がどのように変わるのか具体例を紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Photoshopでチャンネルミキサーを使う方法を初心者向けに解説した記事です。

この機能を使うことで、色を要素ごとに分けて、細かい調整をおこなうことができます。

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

 

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

 

大石ゆかり

田島メンター！！チャンネルミキサーって何ですか？どのようなときに使うんですか？

田島悠介

色を調整する機能のひとつなんだけれど、画像全体ではなく特定の色に対しての補正を行うんだ。

大石ゆかり

なんだか難しそうですね……

田島悠介

その変わり、他の修正方法ではできないような複雑な加工もできるようになるよ。是非やってみよう！

 

チャンネルミキサーの使い方

まずは、メニューから「ウィンドウ」をクリックします。

color_rgb_m_1

 

「色調補正」にチェックを入れます。すでに付いている場合はそのままでOKです。

color_rgb_m_2

 

色調補正タブ内の「チャンネルミキサーの調整レイヤーを新規作成」をクリックします。

color_rgb_m_3

 

チャンネルミキサーのレイヤーが作成されました。

color_rgb_m_4

 

チャンネルミキサーのレイヤーとそれを適用させたいレイヤーの中間にカーソルを合わせ、Altを押します。図のようにカーソルが変化するので、その状態でクリックします。

color_rgb_m_5

 

これで下のレイヤーにだけチャンネルミキサーが適用されるようになりました。

color_rgb_m_6

 

チャンネルミキサーのレイヤーをダブルクリックするとダイアログが表示されるので、左上の「チャンネルミキサー」のアイコンをクリックします。

各表示項目の内容は下記の通りです。

  • 出力先チャンネル：デフォルトでは「レッド」に設定されています。これは#RRGGBBで構成されている色コードの#RRGGBBの部分を調整するという意味です。
  • 各スライダー：画面上の「レッド」「グリーン」「ブルー」に関連する色を調整するという意味です。ここで「レッド」のスライダーを動かした場合、下の黒丸で囲まれた部分にだけ変更が反映されます。他の部分は変化しません。

color_rgb_m_7

実際に使ってみましょう。

 

まず最初に、「レッド」のスライダーを100％から0％へ移動させてみます。

画面はこのように変化しました。

color_rgb_m_8

 

どのように各色のコードが変化したかを図にしてみました。緑の部分が変更された箇所になります。

“FF”の部分がそれぞれ”00″になり、そのコードに対応した色に変わりました。

color_rgb_m_9
 

大石ゆかり

「レッド」の部分だけを動かすと、緑色と青色の部分は変わらないんですね。

田島悠介

これがチャンネルミキサーでできることなんだ。特定のカラーチャンネル(色の成分の情報)に対してだけ補正を行うので、チャンネルごとに異なった調整ができるんだよ。

大石ゆかり

緑や青だけ変更することもできるってことですか？

田島悠介

その通り！他のパターンも見てみようか。

 

「レッド」を100％に戻し、次は「グリーン」のスライダーに関連するところを見てみます。

黒丸の部分がグリーンへの変更が反映される部分です。他の場所はこのツマミには関係がありません。

color_rgb_m_10

 

続いて、「グリーン」を0％から100％にしてみました。色はこのように変化しています。

color_rgb_m_11

 

各コードの変化です。黄色の部分は最初から調整する部分が”FF”という最大値のため変化しません。

他の色はそれぞれ”00″から”FF”へ変わり、それに対応した色へ変わっています。

color_rgb_m_12

 

「ブルー」の場合に適用される部分はここになります。

color_rgb_m_13

 

続いて、0％から100％に変更させた場合の図です。

color_rgb_m_14

 

各色コードの変化です。先ほどと同様に、最初から”FF”の部分はそのままになっています。

color_rgb_m_15

 

次に、「出力先チャンネル」を「レッド」から「グリーン」に変えてみましょう。

この場合、色コードで変化が起きるのは#RRGGBBの中の#RRGGBBの部分になります。

color_rgb_m_16

 

「レッド」のスライダーを0％から100％に移動させました。

color_rgb_m_17

 

色コードの変化です。緑色で印を付けている数値が変更が反映された部分になります。

「出力先チャンネル」をブルーにした場合は#RRGGBBの箇所が変更されます。

color_rgb_m_18

今回の記事は以上です。
 

大石ゆかり

「レッド」と「グリーン」みたいに、複数のチャンネルを同時に操作することもできるんですね。

田島悠介

チャンネルミキサーは感覚的に使うのは少し難しいけれど、うまく利用することで画面内の色を自由に操作できるようになるんだ。

大石ゆかり

色コードやチャンネルについてもよく知っておく必要がありそうですね。ありがとうございます！

 

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

Photoshopで文字をクレヨン風に加工する方法【初心者向け】

Photoshopでは文字を簡単に加工することができます。そのうち今回は、選択範囲作成機能とブラシツールを使用して、画像や文字をクレヨン風に加工する方法をご紹介...
Photoshop

Photoshopで写真の解像度を変更する方法【初心者向け】

Photoshopでは、写真の解像度を簡単に変更することが可能です。 今回は初心者向けに、解像度とは何かという説明からはじめましょう。  ...
Photoshop

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

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

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

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

Photoshopペンツール使い方の基本【初心者向け】

Photoshop初心者向けに「ペンツールの使い方」を解説する記事です。 ペンツールを使用してパスを形成すると、解像度に依存しないベクトル形式での描画が可...
Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】

Photoshopの使い方を初心者向けに解説した記事です。 画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければい...
Photoshop

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

Photoshopで写真をモノクロにする3つの方法【初心者向け】

画像を編集する際に、デザインとしてモノクロ（白黒）にすることもあると思います。 いくつかの方法がありますので、今回はPhotoshopで写真をモノクロにする3つの方法を紹介します。（今回はPhotoshop CCを使っています）   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。   田島悠介 今回は写真をモノクロにする方法を練習してみようか。 大石ゆかり カラーから白黒にするってことですね。でもそんなことできるんですか～？ 田島悠介 やってみると気付くと思うけれど、簡単なやり方ですぐできるんだ。3つの手法で試してみよう。 大石ゆかり 分かりました！   モノクロ画像の用途 モノクロで印刷する場合には当然モノクロ画像を作りますが、他にも画像認識や画像加工の際に3色（RGB）画像から1色（モノクロ）画像を作って活用しています。 モノクロ画像は前処理用画像としてよく用いられます。     写真をモノクロにすることの意味 カラーの画像は色のデータを持っています。色は3要素（色相、彩度、明度）をもっていて、それをRGB成分の値で表現しています。モノクロ画像とは主にカラー画像から明度データだけを取り出したものです。 一般的には3色データから1色データを作ることでモノクロ画像を作ることができます。     [PR] Webデザインで挫折しない学習方法を動画で公開中写真をモノクロにする方法 モノクロ画像を作る方法は大きく分けて3つあります。 グレースケール画像に変換する方法 画像の彩度を下げる方法 1チャンネルだけを抜き出す方法 これから順番に紹介していきます。   今回はこの画像をサンプルとしてモノクロにしていきます。   1.グレースケール画像に変換する方法 文字通り、カラー画像をグレースケール画像に変換する処理を行います。 方法は処理対象の画像を選んだ後、「イメージ」メニューで「モード> グレースケール」の順に選んでいきます。これはRGB（3色）成分の画像から明るさ（1色）成分の画像を作成する処理です。   グレースケールを選択すると、「カラー情報を破棄しますか？」というアラートが出るので「破棄」を選びます。   これでグレースケールにする方法は完了しました。   田島悠介 グレースケール画像に変換する方法だね。 大石ゆかり 本当に一瞬でできちゃいました！ 田島悠介 アラートのメッセージにも出ているけれど、もちろんカラー情報は失われてしまうので元の画像をとっておきたい場合は別に保存しておく必要があるよ。 大石ゆかり いわゆる不可逆ってやつですね。他にはどんな方法があるんですか？   2.画像の彩度を下げる方法 続いて、カラー画像の色の鮮やかさを落として無彩色にする方法です。 まずは「イメージ」メニューの「色調補正 > 色相・彩度」を選びます。   ここで「マスター」の色に対して、彩度を-100に設定します。 すると写真がモノクロになりました。     3.1チャンネルだけを抜き出す方法 最後に3つ目の方法です。 チャンネルとはRGBのような色の成分のことです。3つのチャンネルがあるのですが、このうち1つを抜き出すと写真がモノクロになります。   まずは、「ウインドウ」メニューから「チャンネル」にチェックを入れます。   するとPhotoshopの右下にチャンネルが表示されます。   ここで1つのチャンネルを選びます。今回はレッドを選びました。   この状態のまま、範囲選択メニューで「すべてを選択」を選びます。   さらに、編集メニューで「コピー」を選びます。   コピーした画像を貼り付けましょう。 ファイルメニューで「新規」を選び新しくファイルを作成します。   作成したファイルに先ほどコピーした画像を貼り付けます。 さらに、レイヤーメニューで「画像を統合」処理を行うことで、ペーストした画像が背景と統合されます。 これで写真が白黒になりました。 最初に選ぶチャンネルで画像も少し変わってくるので、他のチャンネルも試してみてください。     おまけ：応用例 おまけとして応用例をご紹介します。よくCMなどで1箇所だけカラーで、他は全部モノクロという画像（映像）があります。今回紹介した「画像の彩度を下げる方法」と同じ考え方で作ることができます。   イメージメニューから「色調補正 > 色相・彩度」を選び、残したい色（ここではレッド系とします）を選び、そのレッド系以外（グリーン系、ブルー系、イエロー系、シアン系）の色の彩度を-100にします。 マゼンタ系はレッド系に近い色なので、そのまま(0のまま）にします。   するとレッドだけを残してモノクロの画像が完成しました。     今回の記事はいかがでしたか？ ぜひ自分でもチャレンジしてみてください。   田島悠介 各色の要素を操作することで、こういった表現もできるんだ。 大石ゆかり 広告とかでよく見るやつですね！ 田島悠介 シンプルにモノクロにするだけならグレースケールで充分だけど、色調補正などを使うとカラーとモノクロの境目にしたり、上のような一部分だけを適用させたりという風に様々な調整ができるので目的に合わせて活用しよう。 大石ゆかり 実際に触ってみて確かめてみます。ありがとうございました！   なお、Photoshopのカスタムシェイプを作成する方法も公開しているので、合わせてチェックしてみましょう。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】

Photoshopの使い方を初心者向けに解説した記事です。 画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと簡単に、綺麗に透明（透過）の処理を行うことができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   田島悠介 今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。 大石ゆかり 田島メンター！！透過っていうのは何ですか～？ 田島悠介 レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。 大石ゆかり なるほど、透明な部分ってことですね！   目次 今回の記事では下記の3つの画像を透明（透過）にしていきます。 人物写真の背景を透明にする 背景が一色の画像を透明にする 手描きのイラストの背景を透明にする（線画抽出する）   人物写真の背景を透明にする まずは人物写真を使って、基本的な透過の方法を解説します。 今回はこちらの画像を使用していきます。   まず、画像のレイヤーが「背景」の場合は、通常のレイヤーに変換する必要があります。 レイヤーを右クリックし、「背景からレイヤーへ」を選択します。   左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。   人物の形に沿ってドラッグしていきます。 この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成することができます。   だいたい全体を選択した状態です。髪などの細かい部分が選択できていないので調整していきます。   上メニューから「境界線を調整」を選択し、「表示モード」を「白黒」にします。   「エッジの検出」内の「スマート半径」を選択し、半径の長さを調整します。   髪の修正したい所を塗りつぶすようにドラッグします。   細かい部分が選択された状態になります。   「境界線を調整」ウィンドウを閉じます。これで背景以外の部分が選択された状態になりました。   画像の選択が完了したら、上のメニューの「選択範囲」→「選択範囲を反転」をクリックします。   今度は逆に、人物以外の背景の部分が全て選択された状態になりました。   メニューの「編集」から「消去」を選択します。   先ほど選択されていた部分が消されて「透過」の状態になりました。   下にレイヤーを作成し、それを緑で塗りつぶした状態です。 透過の部分には下のレイヤーの状態が反映されます。 基本的な透過の方法は以上です。   田島悠介 選択範囲を作成して、それ以外の部分を「消去」する方法だよ。消去された部分は透過の状態になるんだ。 大石ゆかり この白とグレーの格子になっているのが透過なんですね。 田島悠介 そうだね。「消去」以外では消しゴムツールで消された部分なんかも透過になるよ。なので背景が一色だったりした場合はもっと簡単な方法があるんだ。 大石ゆかり へー！どんなのですか？   [PR] Webデザインで挫折しない学習方法を動画で公開中背景が一色の画像を透明にする 記号や文字列などのはっきりした画像で、背景が一色の場合はもっと簡単です。   今回はこの画像を例にします。   左のメニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。   上の設定項目の「隣接」にチェックが入っていることを確認します。   背景にしたい部分の中の適当なところをクリックします。   すると、クリックした部分と同じ色の所がその場で透過状態に切り替わります。   また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。   先ほどとは違って、中の「f」の文字内まで透過になっているのがわかります。   下に青色で塗りつぶしたレイヤーがある場合の違いです。特に文字列の背景を透過にしたい時は、「隣接」のチェックを外しておくと便利です。   手描きのイラストの背景を透明にする（線画抽出する） スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。 ここではチャンネルを使用した方法と、クイックマスクを使用した方法のふたつを解説します。   線画を抽出する前の共通の手順です。 スキャンした画像をPhotoshopで開きます。   まず最初に、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。   次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。   「明るさ」の部分を右に移動して画像を明るくすることで細かい汚れを消すことができます。   画像が背景レイヤーになっている場合は、右クリックして「背景からレイヤーへ」を選択します。   チャンネルを使用した方法 レイヤーの一覧が表示されているメニューから「チャンネル」タブを選択します。(「チャンネル」タブが表示されていない場合は上メニューの「ウィンドウ」から「チャンネル」を選択します)   以下のアイコン「チャンネルを選択範囲として読み込む」をクリックします。   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   「レイヤー」タブに戻り、新規レイヤーを作成して元のレイヤー(下のレイヤー)を非表示にします。   線画の色として使用したい色を選びます。今回は黒としています。(カラーのメニューが表示されていない場合は「ウィンドウ」から「カラー」を選択します)   上メニュー「編集」から「塗りつぶし」を選択します。   線画以外の部分が透過の状態になり、線画抽出が完了しました。   クイックマスクモードを使用した方法 線画を抽出する画像を開き、上メニュー「選択範囲」から「すべてを選択」をクリックします。   上メニュー「編集」から「コピー」を選択します。   レイヤーメニューから新規レイヤーを作成し、そのレイヤーを選択した状態にします。元のレイヤー(下のレイヤー)は非表示にします。   左メニューから「クイックマスクモードで編集」をクリックします。   上メニュー「編集」から「ペースト」を選択します。   画面ではこのようになります。   左メニューから先ほどと同じアイコンをクリックします。(今度は「画像描画モードで編集」となっています)   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   先ほどと同じように線画として使用したい色を選択し、上メニュー「編集」から「塗りつぶし」を行います。今回は暗めの赤色にしています。     線画以外の部分が透過の状態になり、線画抽出が完了しました。   線画の色は好きな色に設定することができます。スキャンした際にグレースケールなどで読み込んでいた場合は「イメージ」→「モード」「RGBカラー」などに変更することでカラーでの抽出が可能になります。   いかがでしたか？   田島悠介 最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。 大石ゆかり クイックマスクモードというのは、こういうこともできるんですね。 田島悠介 透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。 大石ゆかり そうですね。ありがとうございます！   背景が透明にできたら、Photoshopで画像の合成にもチャレンジしてみてください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

【完全初心者向け！】コミュニケーションツールSlack（スラック）の使い方

チーム内のコミュニケーションツールとして多くの人が利用しているSlack(スラック)。充実した機能やシンプルなデザインに慣れると他のツールでは物足りなく感じるでしょう。 IT企業ではすでにSlackを社内コミュニケーションツールとして利用しているところが増えています。非エンジニアでもSlackを利用している人、企業は増えてきているので、ぜひ使い方をマスターしましょう。   また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。   目次 Slackとは Slackの使い方 日本語化する方法 応用編 Slackのショートカット 連携できるアプリを一部紹介   Slackとは Slackはチーム内でのコミュニケーションをとることができるチャットサービスです。画像のアップロードやソースコード共有などの機能も充実しており、プライベートの他にプロジェクトの進行などにも役立ちます。 料金体系としては、無料から利用することができ、月額課金だと1ユーザー毎に6.67ドル、12.50ドルのプランが用意されています。課金することで過去のメッセージを無制限に検索することができたり、連携できるアプリも無制限になるなど、安価で幅広く使うことができます。   [PR] Webデザインで挫折しない学習方法を動画で公開中Slackの使い方 新規チームの作成とユーザー登録 まず、以下のリンクにアクセスします。 https://slack.com/ 「Email address」の欄にアカウントで使用するメールアドレスを入力し、「Create New Team」をクリックします。 以下の画面が表示されます。先ほど入力したメールアドレスに6桁のコードが送信されるのでここで入力します。 名前の設定をします。 Your name：名前と名字を入力します。省略することも可能です。(後で変更可) Username：Slack内で表示される名前を入力します。(後で変更可) パスワードを設定します。(後で変更可) チーム名を入力します。(後で変更可) チームのドメインを設定します。すでに他チームで使用されているものは設定することができません。(変更不可) ここではメンバーの招待を行うことができます。後でいつでも追加できるので、ここで招待しない場合は下の「Skip For Now」をクリックすることで省略することができます。 以上で最初の登録は完了です。   画面の見方と基本の使い方 メンバーの招待 チームにメンバーを招待するときは、「Invite people」をクリックします。 招待する人のメールアドレスと名前を入力し、下の「Invite～」ボタンをクリックします。名前は省略可能です。 「Add another」をクリックすると複数のメンバーを一度に招待することができます。   チャンネル 以下の部分は「チャンネル」と呼ばれる部分で、話題の内容ごとに分けた部屋を作成することができます。 新しくチャンネルを作成する場合はこの＋のボタン(「Create new channel」と表示される)をクリックします。 チャンネルの名前・内容・招待するメンバーを設定し「Create Channel」ボタンをクリックするとチャンネルが作成されます。 内容と招待メンバーは後から設定することもできます。 チャンネル内でチャットを行う場合は、該当のチャンネルを選択した状態で以下の箇所から内容を入力します。 入力した内容はそのチャンネルでのみ表示されます。   ダイレクトメッセージ 特定のメンバーにだけメッセージを送りたい場合は、DIRECT MESSAGESメニューから該当のユーザー名を選択します。 チャンネルのときと同様に内容を入力します。ここで書かれた内容は相手と自分にのみ表示されます。   日本語化する方法 現在英語の画面になっている場合、Slackの「Account Settings」画面を開きます。（Slackのメッセージ画面では、自分のアカウントの歯車マークから移動できます。URLは「~~~~/accout/settings」になります。） 開くと以下の画像のようにメールアドレスやパスワードなどが変更できる画面に遷移し、「Language」というタブで言語を変更することができます。 「日本語」を選択するとSlackの言語を日本語化することができます。   応用編 プロフィールとアイコン画像を変更する プロフィールを変更する場合は左メニュー一番上の自分の名前の部分をクリックし、「Profile＆account」を選択します。 「Edit Profile」からは名前・名字とアイコン画像、「Account Settings」からはSlackで表示されるユーザー名を変更することができます。   ピン機能で大事なメッセージをすぐ見れるようにする Slackでは大事な情報やお気に入りのメッセージをピン留めしてすぐ見れるようにしておくことができます。 ピン留めしたいメッセージの右メニューから以下の項目を選択します。 ピン留めしたメッセージは以下の手順で確認することができます。   外部サービスと連携する 左メニュー一番上の自分の名前の部分をクリックし「Apps＆Integrations」を選択します。 連携できるサービスの一覧が表示されます。 使用したいサービスを選択します。 「Visit site to install」をクリックします。 「Add to Slack」をクリックします。 使用するチャンネルを設定し、「Authorize」ボタンをクリックすれば完了です。   Slackのショートカット ショートカットはSlack内でいつでも確認することができます。 メッセージを入力する欄に「/shortcuts」と入力し送信します。 使用できるショートカットの一覧が表示されます。 普段利用しやすいショートカットの例です。「Ctrl＋u」を入力するとその場でファイルのアップロード画面を表示させることができます。   連携できるアプリを一部紹介 社内のコミュニケーションツールを選定する上でSlackを導入している企業は、この連携できるアプリの多さで決めているところもおおいでしょう。 Slackの大きな特徴でもある外部アプリとの連携ですが、どんなアプリと連携できるのか、どんな使い方ができるのか一部紹介していきます。 Googleカレンダー（スケジュール管理） 自分が入っている予定については10分前や15分前にSlackのチャンネル上や自分へのDMで知らせることができます。   Trello（タスク管理） Trelloに登録されているタスクの進捗確認や完了したことの共有をすることができます。   Wrike（タスク管理） Trello同様、タスクの共有や終わったかどうかの通知などを行うことができます。ここは社内でどのサービスを利用しているかによって連携するアプリを使い分けるのが良いでしょう。   Github（開発） Githubのアカウントを紐付けておけば全ての通知を受け取ることができます。 issueの登録、プルリクの通知、コメント文の共有など多くの企業が開発する上でGithubを使っていると思うので、ぜひ連携しておきたいアプリケーションの1つでしょう。   Googleハングアウト（ビデオチャット） SlackからすぐGoogleハングアウトへのビデオチャットに遷移できるものです。 社内でGoogleハングアウトを利用していれば入れておいた方が便利でしょう。   appear in（ビデオチャット） Googleハングアウト同様、ビデオチャットにすぐ遷移できるものです。 社内でappear inを利用していれば入れておいた方が便利でしょう。   Twitter（SNS） Slackでは、SNSのアカウントと紐付けて通知などを受け取ることができます。 ユーザーの声などをいちいち追わなくてもSlack上に通知が届くので、社内全体でユーザーの反応を見て取れるでしょう。   このように今まではいろんなアプリを開いて別々に見ていたものが、Slackと連携することによって1つのアプリ上で確認することができます。 アメリカでは、Slackでタクシーを呼べたり、弁当の注文ができるなど様々なアプリとの連携が進んでいるので、これからが楽しみではあります。 効率よく仕事をするためにも便利なアプリはSlackと連携しておきましょう。   以上、Slackの使い方について解説しました。 Slack自体は海外のサービスですが、その使いやすさ故に日本でも導入している企業はどんどん増えてきています。特にエンジニアにとって作業効率が上がるGithubなどの他サービスとの連携が優れており、他のサービスと差別化しているものとなっているでしょう。 個人間での利用でも十分活用できるので、ぜひこれからSlackを使ってみてはいかがでしょうか。 [お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。Slackのようなサービスを作ってみたい方はぜひご覧ください。
ツール系

【ホリエモンチャンネルVol.1】プログラミングをこの時代に一から学ぶなら

この記事では、ホリエモンチャンネルの堀江貴文氏、寺田有希氏、TechAcademyを運営するキラメックス株式会社代表取締役社長の樋口隆広氏による対談の内容をまとめています。 第一弾では、堀江さん自身がプログラミングを学んだ環境やこれからの勉強法について話されているので、動画もぜひご覧ください。   プログラミングのおすすめの勉強法 質問：堀江さんは独学でプログラミングを始められたとおっしゃいます。ゼロからプログラミングを始めたいのですが、オススメの勉強法や参考書などあれば教えていただけないでしょうか。よろしくお願いいたします。 堀江：これ回答は、Progateをやればいいんじゃない。 寺田：まさかの競合を紹介している感じですけど。 樋口：意外と競合という感じでもなく、TechAcademyがプログラミング学習というコンテンツも出しているんですが、どちらかというとメンターと呼ばれる現役のエンジニアとかデザイナーが分からないところをすぐ質問で返してくれるのが特徴なんです。それこそうちを受けている人はProgateで勉強していて、もっと何かプロに聞きたいから受けてくれるケースもあるので、あまり競合というわけではないという感じですね。 堀江：競合的な部分もあるんですか。 樋口：多少入り口としては比較されている方もいるかもしれないですが、競合というよりはProgateのステップアップで使ってもらったりとか、うちをやっていてさらに補足でProgateを使ったりとか、相互で使えるような関係位置ではあります。 堀江：メンターがいる以外に何か違うところはありますか。 樋口：メンターが一番の違いですが、あとはゴールがオリジナルのアプリケーションを作ろうとかオリジナルのアウトプットを出そうというところです。 堀江：応用編ぽい感じですかね。 樋口：そうですね、ちょっと応用編ぽいところがあるかもしれないですね。 堀江：なるほどね。その違いなんだ。 樋口：分からないところがあったらチャットで質問するとSlackで現役のエンジニアが見ていて、質問に対して回答するという形です。コンテンツだけでずっとやれる人と、サポーターが必要な人がいるかなと思っているので。 堀江：これって常に誰かが答えてくれるんですか。 樋口：今は15時から23時の間ほぼ毎日なんですけど、基本的にはメンターがオンラインで控えていて回答してくれるという形ですね。 堀江：至れり尽くせりだなあ。「堀江さんが独学でプログラミングを始めたとおっしゃいますが」とかいうけど、俺の時代の勉強法とか役に立たないと思うわ。 寺田：そうですよね。毎回この話になると「俺の時代何もなかったから」というところからの話になるんですよね。   ホリエモン時代のプログラミング学習法とは 堀江：俺は本当にサンプルプログラムを入力して、ただ走らせる。そしてそのサンプルプログラムの変えられそうな部分、色を変えてみるとか。COLOR=1を2に変えてみると色が変わりますみたいな。 樋口：写経しながらどういうものがどうなのかという。 堀江：プログラムを自分で入力してみて、入力するとキータイピングの練習にもなるし。俺の頃はコピペとかなかったから。 寺田：そうか、コピペすらなかったんだ。 堀江：コピペもねぇしメモリもねぇし。 寺田：えー！やばい。 堀江：やばくないよ。スクリーンエディタがあるからまだマシな方だよ。画面に入力できるじゃん。その前は画面がなかった。画面がまずディスプレイで、もっと文字がでかくてジャギってたみたいな。ディスプレイの頃に俺はパソコンを始めたからまだマシな方で、それのちょっと前ってラインエディタというか一行とか二行しかなくて。電卓の画面みたいな。 寺田：見返せないじゃないですか。 堀江：ポケコンとかってそんな感じだったよね。電卓でプログラミングしてました。見返せないじゃん。 寺田：見返せない。書いちゃったら終わりですよね。 堀江：でもね、それはまだマシな方で。画面がないの最初は。 寺田：じゃあどうやってたんですか。 堀江：だから見比べてパチパチしていくという。それでもまだマシなんだよ、キーボードがあるから。昔はパンチカードというので、アポロ計画の頃に。 樋口：映画でしか見たことないですね。 堀江：紙に穴があいていて、穴をあけるパンチャーという人がいて。プログラムをタイプライターみたいなものでパチパチ入れていくとパンチ穴がパチパチあいて、それをコンピューターに入れるとギーッと読み取って答えがプリントアウトされてくるみたいな。 寺田：じゃあ、今なんかもう天国ですね。 堀江：天国だよ。 樋口：そうですね、だいぶ勉強しやすくはなってます。 堀江：コピペして直して、「あーなるほど、こんな感じなんだ」みたいな。 寺田：そして先生に直接質問もできて。 樋口：でも意外とオンラインのコンテンツってなかなか続かなかったりというところがあったりするので。サポートは結構大事じゃないかなというので、そこに力を入れてやっています。   [PR] Webデザインで挫折しない学習方法を動画で公開中今の時代の学習環境は恋愛と同じ 堀江：こんな至れり尽くせりの状況でやらないというのはだめだよ。恋愛とかも一緒。 寺田：恋愛と一緒？ 堀江：スマホでLINEやアドレスなんか誰だって教えてくれるじゃん。 寺田：そんなこともないと思いますけど。 堀江：教えてくれるでしょ。LINEぐらいだったらいいじゃんって言ったら教えてくれると思う。 寺田：そうかな。 堀江：面倒くさいからLINEくらい教えてやるわと。 寺田：確かにね。 樋口：僕今日これ終わったら寺田さんにそれ聞いてみます。 堀江：それでLINE交換するようになるじゃん、そしたらワンチャンあるでしょ。恋愛だって俺の頃なんか電話番号だからね。 寺田：まあそうですよね、家にかけて。お父さんが出るかもしれないし。 樋口：リスクが高いですよね。 堀江：超緊張してたよ。 寺田：いいのそんなドキドキ話。 堀江：やだよ、想像したくないもん。 寺田：え、やってました？ 堀江：やってたよ、やらないと始まらないもん。さすがに文通とかじゃないよ。 寺田：さすがに電話でしたか。でも待ち合わせとか大変なんでしょう。 堀江：待ち合わせは別にハチ公前とかそんな感じだよ。ハチ公前は凄く人がいるからモヤイ像の前とか。それで何時何分に待ち合わせって言って、仕事が遅れて、バイトが遅れて、電車が遅れてとか。 寺田：でもそれ連絡できないじゃないですか。どうするんですか。 堀江：いや待ちぼうけだよ。 寺田：うわーお。 堀江：一時間待ったのに来ない。 寺田：純粋！ 堀江：俺待たせた方が多いけどね。 寺田：何だ、この私のときめきを返してくれって今思いました。 堀江：バイトに超ハマってて、デートの約束をなんとか駅前で何時にしてたのを忘れちゃって。3時間後くらいに、「あっやべ今日だった」とか。それをきっかけに彼女がバイト先に来て、「私もバイトする」って言ったり。 樋口：きっかけを作ったわけですね。 堀江：そうそう。 寺田：それで諦めなかった女の子えらいですね。 堀江：「私がバイトすればいいじゃん」って。昔のそういうのを見ると、通信手段が微妙だからなかなか恋が成就しないみたいな設定が多い。 寺田：ハンカチに文字残してみたいなのありましたよね。東京ラブストーリー？なんだっけ。 堀江：幸せの黄色いハンカチとか。 寺田：まさかの恋愛話になりましたけどね。 堀江：だからもう凄いよ、これでやらないってアホだよ。誰だってできるよたぶん。 寺田：というわけでプログラミングに興味のある方、Progateももちろんですけれどもメンターが必要、欲しいという方ぜひTechAcademyを調べてみてください。 樋口：現役のエンジニアやデザイナーが学習をサポートしてくれる、オンラインのプログラミングスクールTechAcademyを運営しております。オンラインの無料体験等もございますので、これからプログラミングを勉強しようという方や一度挫折してしまった方も来てみていただければと思います。よろしくお願いします。   TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。未経験でもこれからプログラミングを習得したいと思っている方は特にご覧ください！ また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

【ホリエモンチャンネルVol.2】プログラミングは短期間で習得できる！

この記事では、ホリエモンチャンネルの堀江貴文氏、寺田有希氏、TechAcademyを運営するキラメックス株式会社代表取締役社長の樋口隆広氏による対談の内容をまとめています。 第二弾では、以前と比べどんどんプログラミングを習得するハードルが低くなっていることなど現代にあった学習について話しています。   エンジニアになる第一歩とは 質問：38歳、未経験ですがプログラマーになりたいです。Web系の第一線で活躍することを夢見ています。転職エージェントによると年収220万、それでも狭き門との話でした。堀江さんは寿司屋の話でよく例えられていますが、IT業界でも下積みは不要だと考えられますか。就職すると勉強などの時間が取れず遠回りになるのではないかと考えています。就職せず作りたいと思うものを作りながら学習していった方がよいのでしょうか。5年後ぐらいには500万円稼げるようになっていたいです。ご意見よろしくお願いします。 寺田：それでは今日のゲストをご紹介します。オンラインプログラミングスクールTechAcademyを運営しています、キラメックス株式会社の樋口隆広さんです。 樋口：よろしくお願いします。 堀江：なんでキラメックスなんですか。 樋口：僕らの会社のミッションが「自己実現の最大化」というもので、キラメキを最大化するという造語からキラメックスという名前になっています。サービス名はTechAcademyなのでちょっと違うんですが、そんな由来ですね。 寺田：輝かしいお名前です。 堀江：みんな色々考えちゃうんだよね。あんまり意味がないと思うんですけど。 寺田：いいの！ 堀江：よくないよ、サービス名と会社名は絶対一緒の方がいいと俺は思う派。最初みんな考えちゃうんだよ。俺も考えたんだよ最初。一生懸命考えたけど、途中で意味ねえなと思って。 寺田：候補あったんですか。 堀江：いや、今みたいな「こういう思いで社名をつけました」みたいなことを一番最初考えたんだけど、途中でこれ全然意味ねえと思ってやめたという。割とどストライクな名前しかつけなかった。 寺田：ライブドアがどストライクだったということですか。 堀江：あれは買収した会社の名前だから。オン・ザ・エッヂという会社だったんだけど、SEO的にもよくないし、ライブドアの方がずっと有名だった。有名な方がいいじゃんということでそっちに変えちゃったらみんな凄い唖然としてたという。なんだこいつ、身も蓋もないなと。分からないからね、みんなそんな思いとか言っても。すみませんねなんか全然違う話をしてますが、回答は、センス次第だけど普通にオンライン学習で1ヶ月ぐらいでできるようになるよと。早い人は楽勝じゃないですか。難しい要素何もないよね。 樋口：そうですね。短い人だとまさに4週間で集中して勉強してしまえば、それこそ未経験でもエンジニアになれるというのは今も普通な選択肢としてあるかなと思っています。まさに考えているのであればやった方がいいというところではあるかなと思いますね。オンラインなので、地方でコンビニでアルバイトやってましたみたいな人が1ヶ月集中して勉強して、東京に出てきてエンジニアになるみたいなのも結構あったりするので。 堀江：だから、頭がいい人が短期間でスキルをつけられるという意味では凄くいいですよね。 樋口：意外とみんな長期で1年間勉強しなきゃみたいに思ってるんですけど、むしろ今おっしゃったように詰めて4週間なら4週間、8週間なら8週間ガッと勉強するみたいなのは結構重要だと思います。   誰でもWebサービスが作れる時代に 堀江：難しいことはないんだよ。ほとんどの人たちがやってる作業は、今は何でも難しくないかな。ごく一部の人たちが凄いことをやってるけど、その人たちはディープラーニングのライブラリ作ってますとか。そういう人は別として。 樋口：そういうテックベンチャーというか技術系のベンチャーはもちろん難しいと思うんですけど、まず基礎をちゃんと学べば実践に入っていけるというところまではきていますね。 堀江：Webサービスを作るぐらいだったら誰でもできるよね。 樋口：どんどんそういう時代になってるかなという気がしますね。 堀江：ライブラリとか作らなくていいからね。俺らの頃はフレームワークを自分で作っていたから。例えばビルを建てるときに、鉄筋コンクリートを使って作りますみたいな。鉄筋コンクリートをこのような形のトラス構造にして作ると効率的に付けれますねとか。基礎工事をこういう風にして穴を掘って下に杭を埋めてみたいな、これが一番耐震性能よさそうだよみたいな積み重ねなんだけど。 俺らはその積み重ねの一番基礎のところから作ってたから、これが本当にいいのかなって思ってた。データベースの設計もWebに特化した……だから最初の頃なんか、Webに使えるデータベースというとみんなRDBを思い出すわけ。つまりSQLサーバにいっちゃうんだけれども、よくよく考えたらWebサービスってめちゃくちゃアクセス集中するからSQLサーバだと当時のハードのスペックで全然処理できないと。だからもう超並列にSQLデータベースを並べないといけなくて、ライセンス費用だけでいくらかかるのみたいな感じになってたんだよね。 でもよくよく考えたら使うデータベースってKVSでいいじゃんみたいな。今普通にKVSとかみんな使ってるじゃん、AWSとかKVSとかあるじゃん。Webサービスって単純なデータ構造でできるよねみたいな。複雑な処理ってバックグラウンドでバッヂで走らせたらいいじゃんみたいな感じになっていたりするのが最初は分からないんだよね。「KVSでいいじゃんこれってなって。KVSで超高速処理、軽いしそんなに並列化しなくてもいいし」みたいなことをひとつひとつこれが正解なんだってやってた。 全部最初C言語とかで書いてたんだけど、デバッグの効率が悪すぎたんだよね。変更するのも面倒くさいし、ソースコードを修正してコンパイルして走らせてみたいなのをずっと繰り返すの大変だからスクリプト言語でやりたい。じゃあメモリにスクリプト言語の、まあオンメモリに置いておけば高速処理別にできるからみたいな話とかをひとつひとつみんなで積み上げていって。 樋口：まさに工事をほぼ手作業でやってましたみたいな。 堀江：そうそう、俺の頃はそうだったから。それを考えたら今なんてもう誰だって作れるよという。そういう難しいこととか、試行錯誤とかいらないから。 寺田：まだ内容が難しいと思っちゃってる人は多そうですよね。 樋口：そうですね。なのでまずは踏み出してやってみて、短期集中でしっかりやることが習得の一番最短距離だとは思います。 寺田：ぜひこの質問者の方もガッと集中してやっていただければと思います。なのでそんなときにはこのサービスということで告知をお願いします。 樋口：現役のエンジニアやデザイナーが学習をサポートする、TechAcademyというオンラインスクールを運営しております。これからプログラミングを勉強したい方、オンラインでも無料体験を受けられますのでぜひ見ていただければと思います。よろしくお願いいたします。   TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。未経験でもこれからプログラミングを習得したいと思っている方は特にご覧ください！ また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

【ホリエモンチャンネルVol.3】損をしないためにプログラミングの知識は必須！

この記事では、ホリエモンチャンネルの堀江貴文氏、寺田有希氏、TechAcademyを運営するキラメックス株式会社代表取締役社長の樋口隆広氏による対談の内容をまとめています。 第三弾では、経営者がプログラミングを学ぶ意味や中学生でもプログラミングを学ぶ時代になってきている事例など語ってもらっています。   経営者にとってのプログラミングの重要性とは 質問：士業事務所を経営している者です。プログラミングなどオンラインで勉強できる時代・環境になってきたこともあり、Excel感覚で使う時代もくる、そしてIT会社などと話す際にも便利かと思い、面白そうなので勉強しようと思っています。知識はゼロです。一方ホームページなどIT、システム関係は外注すればいいことであり、経営者の時間を割く必要もないかと心の中で考えてしまいます。堀江さんだったら自分のプログラミングなどの知識が今仮になければ、忙しい中でも興味を持ったらプログラミングを学びますか。それとも勉強せずすべて外注し、他のことをやる時間を作りますか。 堀江：回答です。触りぐらいはどっちにしてもやった方がいいです。 寺田：それはなんでですか。 堀江：発注するにしても何も分からないと、言われるがままお金を払うことになっちゃうので。 寺田：確かに知ってた方が「いやその値段おかしいよ」とか言えますもんね。 樋口：そうですね、外注のときもそうですし。あとは今サービスを出すとなったらWebなしで出すというのはなかなかないので。じゃあどういうプロダクトを作ってアウトプットするのかというのを考えるときに、その経営判断に全くテクノロジーの知識がなかったら結構的外れな意思決定をしてしまうかなというのはあるので。 堀江：相当そういうのしちゃうよね。 樋口：だと思いますね。 堀江：アプリ作んなきゃいけないのかなとか。   中学生でもプログラミングが当たり前に 樋口：テクノロジーについての理解なしでこれから事業をやっていくことのリスクがどんどん高まっていくと思うので、本当におっしゃる通り触りくらいは絶対やった方がいいかなと。うちは研修とかでも使ってもらっているんですけれども、経営者の人やマネージャーの人が受けるケースも増えていますね。 寺田：この方も経営者ですからね。 堀江：だから、半強制的にできる環境を企業とか団体が作るといいんだよね。 樋口：日本の企業ってあまりプラスで知識をつけることに対してそんなに積極的ではなかったりするので、しっかり専門知識をつけさせるとかこういったプラスアルファの勉強をさせるということに対して企業が本気で取り組むとだいぶ違うかなと思います。 堀江：それはいくらぐらいするのかな。 樋口：今は4週間で139,000円ぐらいからで4週間、8週間、12週間というように期間で選んでいただけます。 堀江：うちのゼロ高等学院とかに導入したいよね。 樋口：いいですね。ぜひ。高校で勉強して、そのまま起業するために自分でプロトタイプ作りましたというようなことが出てきたら会社としても面白いです。 寺田：今そういうやり方というか、そのぐらいの年齢で起業される方も多いし。 樋口：うちも子供向けの事業もやってるんですけども、本格的にプログラミングを勉強させるみたいなのをやっていて。簡単なプログラミングの教材も結構あるんですけど、ちゃんとプロダクトまで作るというところはあんまりないので。そういうのをやっていくと面白いかなと思います。 堀江：たぶん今中学生とかだったら作ってるもんね。中学も行かなくなって親より稼いでると思う。 寺田：本当にやってそう。 堀江：本当にやってると思うよ。 樋口：やってる子はやっぱりやってるんですよね。中学行きながら、高校行きながら自分でやったりとか。やるべきことになりつつあるかなという気はしていますね。 堀江：絶対そうだよ、寺田さんもやった方がいいよ。何回も言うけど仕事増えるよ。プログラマーなかなかいないもんね。 樋口：IT人材不足みたいなものもやっぱり国策レベルで課題なので。 寺田：まだまだ足りてないんですね。 樋口：これからもっと足りなくなりますね。   [PR] Webデザインで挫折しない学習方法を動画で公開中文系出身でも簡単に学べる時代に 寺田：作らなきゃいけないものもどんどん増えていますしね。 樋口：そうですね。理系の大学生数というのもそんなに増えてなかったりするので、こういうところで勉強することで人材の解消にも繋がるかと思います。 堀江：だけど普通にここでやってるような話だったら誰でもできるよね。 樋口：本当にそのハードルが下がっているので、まずはしっかりやってみるのが大事です。 堀江：下がりまくりだよ。 寺田：そのハードルの下がりまくりに気づけると、皆さんやる気も起きると思うので。 堀江：寺田さん部屋にこもって何かするの好きでしょ。 寺田：好き。PCだけはあります。 樋口：もう全然それだけで今はプログラミングが勉強できますし、分からないところがあったらうちのサービスではオンラインで質問ができるので。 堀江：ただ、逆に自分がやりたいことでプログラミングが必要なことってあまりなくなってるんだよね。俺もツールの組み合わせだけで事業をやっちゃうもん。すでにあるWebサービスを使った方が早いから。 樋口：そこの意思決定とかもプログラミングをしてどうやって作るかが分からないと、どっちがいいかみたいなところが分からないので。そういう判断ができるためにも経営者がプログラミングを理解するとか、企業で勉強するということを進めるといいと思いますね。 寺田：この質問者の方もぜひ、まずは触りぐらいでもプログラミングをやっていただければと思います。それでは最後に告知をお願いします。 樋口：現役のエンジニアやデザイナーが学習をサポートする、オンラインプログラミングスクールTechAcademyを運営しております。これからプログラミングをやる方、挫折してしまった方など、オンラインでも無料体験ができますのでぜひ来ていただければと思います。よろしくお願いいたします。     TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。未経験でもこれからプログラミングを習得したいと思っている方は特にご覧ください！ また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

WEEKLY RANKING

TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopでチャンネルミキサーを使う方法【初心者向け】