さくらVPNでの最新git2【centos7】再インストール手順

目次 [隠す]

前準備

まず、すでに古いgitが入ってたら削除します。(さくらのVPSの場合デフォルトで1.8)

$ git –version
git version 1.8.3.1
$ yum -y remove git

次にgit2系用のリポジトリであるiusをインストールします。(qiitaの記事だとこれが古いパターンが多い)

git2.x用のリポジトリをインストールする。

# sudo yum install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

実際にgit2系をインストール

前準備でインストールしたリポジトリ指定でgitをインストールする。

$ yum install git –enablerepo=ius –disablerepo=base,epel,extras,updates

ちなみにこれだとgit-2.24がインストールされるようです。2021/1現在git2.2系の最新は2.29なのでちょっと古いです。

が、マイナーバージョンアップなので多分問題ないです。

ちなみに他にもgit2.3系~git2.9系もありますがいずれも2017年くらいで更新が終わっているので、主流は2.2X系みたいです。

なので単純にバージョンだけ見て『git2.9が一番新しいじゃん!これにしよ!』と飛びつかないほうがよいです。

【参考】https://mirrors.edge.kernel.org/pub/software/scm/git/

このままだと依存関係のエラー発生

libsecret と pcre2 追加します。

$ yum -y install libsecret pcre2


$ yum install git –enablerepo=ius –disablerepo=base,epel,extras,updates

これでバッチリインストールできました。

まとめ

ポイントは不足しているパッケージを個別にインストールしてください。

2021.11.16現在ですが将来は、パッケージの組み合わせで異なってくるとはおもいますが、参考までに!

mac/windowsが影響を受けたはるかに古い無料OS:Unixの歴史

Unixの産声

Unixは1969年AT&Tベル研究所にて、ケン・トンプソンデニス・リッチーらが開発を開始した。当初はアセンブリ言語のみで開発されたが、1973年にほぼ全体をC言語で書き直した。C言語を開発した デニス・リッチー は私が最も尊敬する人物です

wikipediaよりリンク

※こちらの本は、ご本人が改版されたすばらしいバイブル本なのでぜひ手元に置いていただきたい本です。

独占禁止法でUnixがフリーとなった

しかし、AT&Tは通信会社です。Unixは素晴らしいものであり1企業では、独占禁止法に触れると訴えられたので。そこで世界の発展のため無料で公開を行ったことより大学や研究所などの教育機関で広範囲に採用されました。特にカリフォルニア大学バークレー校は改良を行いBSD系統が誕生しました。逆にAT&Tの流れを受け継ぐ UNIX System V は「伝統的なUNIX」(traditional Unix)とも呼ばれる。

現在では多く使われているUnixとしてはmacOSAIX(IBM)HP-UX(Hewlett-Packard)Solaris(SunMicroSystem)などがある(いずれも商用)。また認証を受けていないUnix系としてはLinux(派生OSにAndroid他)やMINIXBSDの派生OS(FreeBSDNetBSDOpenBSDDragonFly BSDなど)があります。

しかし、Unixは肥大化してしまいワークステーションなどの高価なマシンでしか動作しないOSとなっていったのが歴史があります。

パソコンでUnix動かしたいという思い!Linux誕生

そこで、1991年に、当時フィンランドヘルシンキ大学の学生であったリーナス・トーバルズは、当時 Intel 80386 CPU を搭載した32ビットPC/AT互換パーソナルコンピュータが登場していたため、Unixをこの非力なマシンで動作できないかカーネルと呼ばれるコアな部分の実装を行ったのです。

Linuxカーネル・メーリングリスト (LKML) が登場し、だれでもが開発に携われることとなっていき一気に非営利へのパソコンの利用ということで開発が加速されて行きます。

Linuxのフリーを守るためにGNUが発足

LinuxをUnixのように商用とならないようにリチャード・ストールマンは、GNUプロジェクトの最初の声明を1983年9月に行いました。“GNU”という名前は、いくつかの必要に適合するために選ばれました。第一に、それが“GNU’s Not Unix”の再帰頭字語であること。第二に、それが現実の言葉であること。第三に、それを言う(またはうたう)のがおもしろいこと、です。

“free software”(自由ソフトウェア)の“free”は自由に関連していて、値段には関連しません。GNUソフトウェアを入手するのに、代価を払うこともできますし、払わないこともできます。どちらにせよ、いったんあなたがソフトウェアを手に入れてしまえば、それを使う上で4つの特定の自由を享受できることになります。

(1)望むままプログラムを実行する自由。

(2)プログラムをコピーしそれを友だちや同僚にあげる自由。

(3)ソースコードへの完全なアクセスを持ち、プログラムを望むように変更する自由

(4)改良されたバージョンを配布し、それによってコミュニティを建設する自由。(ただでコピーを配ってもよいのです。)

GnuがOSSの普及へ貢献されたことは大きな出来事だったのです

現在のLinuxでの活躍

レンタルサーバでは無料であるLinuxサーバが活躍しております。

世間のインターネットで動いているサーバのOSはLinuxなのです。開発環境もDockerが多く使われます。こちらもLinxであり無料で勉強できますよ

プログラマーであれば、Linuxを使いこなせるスキルが必要ですので、身近に感じて取り組まれてくださいね

古くからある!オブジェクト指向の歴史【Javaが最初ではない!】

説明動画↓

ちなみに、「のらくろ」って気になった方はこちらをご覧ください

Photoshop使ってみよう

Photoshopの用途

Photoshopはどのようなシチュエーションで使用されるのでしょうか。

  • 写真の加工 撮影した画像を手直しできます。逆光を軽減したり、写り込んでしまった人や物を消したり、人の顔を整形したり、夜景をより綺麗に見せたりといった高度な加工ができます。
  • イラストを描く キャラクターなどのデザインをするツールとしてPhotoshopを使う人もいます。
  • Webデザイン WebページはHTMLとCSSというプログラミング言語で作りますが、そのコードを書く前の「下書き」のツールとしてPhotoshopは向いています。

様々な背景の受講者さんが集まっています。それでこのカリキュラムの内容はPhotoshopの使い方にフォーカスしています。 とはいえ、みなさんが学習するときはPhotoshopを使う目的を意識するようにしてください。将来Photoshopで何をしたいのか今からはっきりさせておくと、学習の効率やモチベーションに良い影響があるでしょう。

Adobeの公式ページには、Photoshopでできることが多く掲載されています。ぜひ覗いてみましょう。

PhotoshopとIllustratorの違い

それぞれ以下のことを得意としています。

PhotoshopIllustrator
altalt
写真の編集や加工ロゴや地図などの図形, 印刷物のレイアウトなど

PhotoshopとIllustratorの最大の違いは、画像を表現する方法です。

PhotoshopIllustrator
画像形式ビットマップ画像ベクター画像

ビットマップ画像 は、小さな色付きの四角形を敷き詰めて画を表現する方法です。画像を拡大すると小さい四角形が見て取れ、ギザギザしているのがわかります。写真や影の表現など、複雑な表現をするときはPhotoshopが向いています。

一方ベクター画像は、点と線で画を表現します。拡大・変形しても輪郭が粗くなったりはしません。拡大縮小が頻繁にされるロゴやイラスト等はおもにIllustratorで描きます。

alt

詳しくは、1-3 画像を表現する仕組み をご覧ください。

1章について

Photoshopを実際に触る前に、覚えておくと学習がスムーズになる知識がまとめられています。ぜひ一読しておきましょう。

1-1 RGBとCMYK

色を表現する方法は主に2つあります。

  • RGB 発光体で色を表現する方法です。ディスプレイはこの方法を使っています。赤と緑と青、3つのライトを同時に光らせることで様々な色を表現します。 混ぜれば混ぜるほど色が 明るく なり白色に近づいていきます。「加法混色」と呼ばれることもあります。 (RGB:Red(赤)Green(緑)Blue(青)の頭文字)
  • CMYK インクで色を表現する方法です。印刷物はこの方法を使っています。 混ぜれば混ぜるほど色が 暗く なります。「減法混色」と呼ばれることもあります。 (CMYK:Cyan(シアン)Magenta(マゼンタ)Yellow(イエロー)KeyPlate(黒)の頭文字)
alt

Photoshopでファイルを作成するとき、RGBとCMYKどちらにするか選択します。WebページやスマホアプリのデザインをするときはRGB、印刷物を作るときはCMYKを選択しましょう。

RGBとCMYKに気を配る理由

CMYKで表現できる色の範囲は、RGBより狭い という特徴があります。特に明るい黄緑などはCMYKで表現するのが難しい色です。 それでRGBで作成したデータをそのまま印刷すると、想定していた色と違う色が出てトラブルになることがあります。

レイヤー

レイヤーとは

レイヤーとは、 複数枚の画を重ね合わせて1つの画像のように見せる機能 です。日本語で「レイヤー」は「階層」や「重なり」といった意味があります。

alt

レイヤー機能には、例えば以下のような機能があります。

  • 重なり順を入れ替える
  • レイヤー1枚1枚の表示/非表示を切り替える
  • 特定のレイヤーだけに効果をかける

今後このレイヤーという機能をたくさん使っていきますので、ぜひこの概念を頭の片隅に入れてください。詳しくは3章で学習します。

1-3 画像を表現する仕組み

私たちが普段何気なく見ているコンピュータの画面ですが、実は画面を見せるのに2つの仕組みをコンピュータは使い分けています。

ビットマップ画像(Photoshopが得意)

画像を細かい点の集まりで表現する方法です。この点のことを ピクセル と言います。スマートフォンなど、デジタルカメラで撮った写真はこの手法で表現されます。 ビットマップ画像は、ひとつひとつのピクセルが色の情報を持っているので、細かな色彩などを表現するのに向いています。ただ、拡大するとギザギザが目立つという弱点があります。 Photoshopで主に扱うのは、このビットマップ画像です。

alt

ベクター画像(Illustratorが得意)

点と線の集まりで画を表現する方法です。主にIllustratorが得意としています。点のことを アンカーポイント 、点と線を組み合わせたものを パス と言います。 ベクトル画像は、拡大しても滑らかに表示できるという強みがあります。点と線の情報が主なので、データの容量も小さく済むというメリットもあります。ただ、細かな色の表現という面ではビットマップ画像に勝てません。

alt

まとめ

ビットマップ画像ベクター画像
概要画像を小さな点の集まりとして表現する方式画像を点と線の集まりで表現する方式
利点複雑な画を綺麗に表現できる拡大してもギザギザしない。データ容量が小さい
欠点データ容量が大きい。拡大するとギザギザする写真のような複雑な画は苦手

実際のデザインの現場ではPhotoshopとIllustratorの両ツールを適宜使い分けます。以下のWebページのサンプルで確認してみましょう。

alt

Photoshopはビットマップで画像を表現しますが、実はビットマップ画像とベクター画像の「いいとこ取り」をした機能もあります。これらの機能を使う方法は3章と4章で学習します。

Tips: ラスタライズ機能 「ラスタライズ」という機能を使うとベクター画像をビットマップ画像に変換できます。しかしその逆は難しく、完全に戻すことはできません。

1-4 ショートカットを覚えよう

仕事をスピードアップするコツ

いよいよ2章からPhotoshopを実際に触ります。このとき、ぜひ ショートカットキーも一緒に覚える ようにしましょう。

Photoshopは普通、たくさんの機能を頻繁に切り替えながら操作します。マウス操作でも切り替えられますが、ショートカットキーを使うと作業効率がぐっと上がります。

両手の使い方

左手がキーボードの上 、 右手がマウス になるように意識しましょう。最初のうちはキーボードを見ながらでも構いません。

左手右手
キーボードの上。 Aに小指 を置くマウスの上

2-1 新規作成・ファイルを開く

前章で触れた通り、 ショートカットキーで操作 することをおすすめします。今からショートカットキーに慣れておくと、これからの作業効率にぐっと差が出てきます!

また、うまくいかない場合は講師のレッスンを遠慮せずに受けてください。

新規ファイル作成

ファイルを作成してみましょう。色々な設定項目が出てきますが、 プリセット と呼ばれる、いわゆる初期設定のテンプレートを活用しましょう。プリセットを使用すると自動で適切なドキュメントのサイズ、カラーモード、解像度が提案されます。

  1. Windows Ctrl + N
    Mac command + N
    マウス操作 [ファイル]→[新規…]
    以下のような画面が出ていれば成功です。 alt
  2. 目的に合わせてプリセットを選ぶ 例:Webページのデザインを新規作成するには、「Web」タブをクリック→「Web一般」をクリック alt
  3. Windows,Mac Enterキー マウス操作 作成ボタン

ファイルを開く

2つ方法があります。

  • Photoshopの「開く」機能を使う
  1. Windows Ctrl + O
    Mac command + O
    マウス操作 [ファイル]→[開く]
  2. 開きたいファイルを選択して、開く ボタンを押す
  • ドラッグ&ドロップ
  1. Windows エクスプローラー
    Mac Finder
    から、Photoshopの画面上にファイルをドラッグ&ドロップする

ファイルを閉じる

  1. Windows Ctrl + W
    Mac command + W
    マウス操作 [ファイル]→[閉じる]

開いている全てのファイルを閉じる

  1. Windows Ctrl + Alt + W
    Mac command + option + W
    マウス操作 [ファイル]→[すべてを閉じる]

解像度とは

alt

解像度 とはピクセルの密度のことです。画像のきめ細やかさと言い換えても良いでしょう。ppiという単位があります。これは、1inch(25.4mm)の間にいくつピクセルが並んでいるかという意味です。(ppi:pixel per inch)

alt

PhotoshopやIllustratorでファイルを新規作成するとき、この画像解像度を設定する項目が出てきます。用途に応じて設定しましょう。

Tips: 解像度の目安

  • スマホアプリやWebページ:72ppi
  • 印刷物:300ppi
  • 印刷物(A1サイズ以上):350ppi

像解像度が高すぎると、Photoshopの動作が重くなることがあります。逆に低すぎる設定にしてしまうと、例えば印刷結果が荒くなってしまいます。

alt

画面左下のステータスバーを長押しすると、画像解像度やチャンネル数・カラーモード・bit数などを確認できます。

Tips: 複数のファイルを開く

Windows Ctrl
Mac command キー やShiftキーを押しながらファイルをクリックすると、複数のファイルを一気に指定できます。

Tips: 複数のファイルを並べる

  1. [ウィンドウ]→[アレンジ]→[並べて表示]
alt

ファイルの操作をしてみましょう

  1. 2つのファイルを開く
  2. ファイルを1つ新規作成する
  3. ↑で開いている3つのファイルをすべて閉じる(保存する必要はありません)

2-2 画面構成

Photoshopで画像を開くか、ファイルを作成すると以下のような画面になります。(まったく同じような画面になっていなくても問題ありません)

Windowsの場合

alt

Macの場合

alt

画面の各部分の名前

以下のような名前が付いています。でも実はこの名前はうろ覚えでも問題ありません。Photoshopの使い方について 他の人と会話するとき や ネットで操作方法を調べる 必要が出たとき、それぞれの名前がどこを指しているのかが分かれば今は問題ないでしょう。

alt
名前役割
メニューバーPhotoshopの機能が集約されている場所
オプションバー選択中の機能の細かい設定をする場所
ツールパネルPhotoshopでよく使う基本的なツールが集まる場所
パネル編集を効率的に行うための画面

アートボード

Photoshopには、アートボードという機能があります。アートボードはキャンパスのようなもので、1つのファイルの中に複数持つことができます。

複数のデザイン案をひとつのファイルの中に入れておきたいときなどに便利です。

alt

2-3 パネルの操作

Photoshopで効率よく作業するコツのひとつは、パネルを自分の作業しやすいようカスタマイズすることです。言い換えると、人によってパネルの揃え方は違います。まずはその違いを体感してみましょう。

  1. 画面右上の、赤く囲っている部分をクリック
    alt
  2. 好きな項目をクリック
    alt

画面の構成が変わったでしょうか。同じPhotoshopを使う人でも、写真を主に編集する人、Webデザイナー、絵描きさんと用途は様々です。それぞれが自分の使いやすい「画面の構成」にして作業しています。この「画面の構成」のことを ワークスペース と言います。ワークスペースは自分専用にカスタマイズしたり、保存したりできます。

パネルの基本操作

ウェブブラウザのタブを操作する感覚で、各パネルをまとめたり、閉じたり、小さく格納したりできます。

主な操作は以下の通りです。

alt

使いたいパネルが表示されていない場合は、メニューバーの[ウィンドウ]から必要なパネルをクリックしましょう。

alt

ツールパネルの操作

ツールパネル はさまざまな機能をもったツールが格納されていて、今後特に多用するパネルです。それぞれの具体的な使い方はこの先の章で紹介されていますので、今はツールパネルとはどんなものなのか大まかに理解することを目標にしてください。

  • ツールパネルの最上部の矢印マークを押すことで、1列、2列表示を切り替えることができます。
    alt
  • ツールアイコンにカーソルを合わせると、ツール名が表示されます。慣れないうちは使用前に確認しましょう。
    alt
  • アイコンの右下に三角がついているものは、長押しすると関連するツールが表示されます。目的のツール名の上にカーソルを移動して切り替えましょう。
    alt

大きく分けると、ツールパネルには以下のようなツールが入っています。

  1. 選択・切り抜き系
    選択範囲を作成したり、画像を切り抜くのに使用します。
  2. ペイント系
    色を塗ったり、レタッチ(修正)するために使用します。
  3. 描画系
    パスやシェイプを描画・選択したり、文字を入力するためにします。

ちなみにツールパネルは 常に何らかのツールがONに なる仕様です。Photoshopを使っているときは、今どのツールがONになっているかを意識しながら操作しましょう。

2-4 画面の拡大・移動

この節では、画面を拡大したり移動したりする方法を紹介します。なるべく使用せずに ショートカットキーを使用 するようにしましょう。ツールパネルの「手のひらツール」でも同じことができますが、ショートカットキーを覚えた方が楽です。

実際に動かして 、どのような動きをするか体で覚えることを目標にしましょう。

移動

スペースキーを押しながらドラッグ します。

拡大・縮小

Windows Ctrl + スペース
Mac command + スペース
を押しながら、 左右にドラッグ します。

その他の操作

拡大・縮小しすぎたら

Windows Ctrl + 0
Mac command + 0

アートボードが画面中央に、Photoshopの画面いっぱいに表示されます。

等倍で表示したいとき

Windows Ctrl + 1
Mac command + 1

Webデザインなどの作業中は画面を拡大しながら作業することが多いので、本番ではどんなサイズ感で表示されるのか確かめるときに重宝します。

やってみよう

  1. 好きな画像をPhotoshopで開く
  2. 目一杯拡大する
  3. Windows Ctrl + 0
    Mac command + 0 を押す
  4. 等倍で表示する

2-5 作業の取り消し・やり直し

Photoshopにも直前の作業を取り消す機能があります。積極的に使用しましょう。

直前の作業の取り消し

Windows Ctrl + Z
Mac command + Z

やり直し(「取り消し」の取り消し)

Windows Ctrl + Shift + Z
Mac command + Shift + Z

「ヒストリー」機能

Photoshopは、ファイルを開いてからの操作の履歴を連続で記録しています。履歴は ヒストリー という機能で操作できます。この機能を使うと、例えば「10回前の操作まで戻る」といったことができます。

  1. メニューバー[ウィンドウ]→[ヒストリー]
alt

3-1 レイヤーとは

この章では、 レイヤー について学びます。

「1-2 レイヤー」で見た通り、レイヤーとは 複数枚の画を重ね合わせて1つの画像のように見せる機能 です。

alt

Photoshopでは、画像はもちろん1つの図形や1つの文字列にも1つのレイヤーを割り当てます。

レイヤーの重なり順

レイヤーは 上にあるほど前面 にあります。重なり順の入れ替え方法などは次の節で学習しましょう。

alt

レイヤーのメリット

  • 画像を編集しやすい
    後から「この部分だけ変更したい」という要望があったとき、該当するレイヤーを編集するだけで対応できます。
  • 特殊な効果をかけることができる
    レイヤーごとに影をつけたり、光らせたり、半透明にしたりといった特殊な効果をかけることができます。例えばこの説の最初の画像で言えば「猫だけに影をつける」といった具合です。もしレイヤーという概念がなかったら、そのようなことをするのがとても難しくなってしまいます。
    ※特殊な効果のかけ方は「第11章 レイヤースタイル」で扱われています。

この章では、レイヤーの入れ替え、レイヤーの追加や削除など、基本的な操作を学びます。

3-2 レイヤーの基本操作

この節では、レイヤーについて主に以下のことを学びます。

  • 入れ替え
  • 追加
  • 削除
  • コピー
  • 名前の変更
  • ロック
  • 表示・非表示の切り替え
  • レイヤーをグループ化する

レイヤーパネルを出す

レイヤーパネルが表示されていない場合は、メニューバー[ウィンドウ]→[レイヤー]でレイヤーパネルを表示しましょう。

alt

レイヤーの入れ替え

入れ替えたいレイヤーをドラッグ&ドロップします。

レイヤーの追加

右下にあるボタンのうち、右から2番目の 紙の角が折れているアイコンをクリックします。

レイヤーの削除

削除したいレイヤーを選択して、右下のゴミ箱のアイコンをクリックします。

alt

レイヤーのコピー

コピーしたいレイヤーを右から2番目の 紙の角が折れているアイコンの上にドラッグ&ドロップします。

alt

レイヤーの名前の変更

レイヤーの名前をダブルクリックします。
alt

レイヤーのロック

ロックしたいレイヤーを選択して、カギのアイコンをクリックします。もう一度クリックすると解除できます。レイヤーをロックすると、そのレイヤーは編集できなくなります。余計な変更をして欲しくない、位置を変更したくないレイヤーはロックすると作業しやすくなります。

レイヤーの表示・非表示の切り替え

各レイヤーの左側に付いている目のマークをクリックします。

alt

レイヤーをグループ化する

レイヤーをまとめるフォルダを作るようなイメージです。

  1. グループ化したいレイヤーを選択して、
  2. Windows Ctrl + G
    Mac command + G

グループ化するメリット

レイヤーをグループでまとめると、グループ単位でロックをかけたり重なり順を変更できるので、レイヤーの管理が楽になります。

デザインが複雑になってくると、たくさんのレイヤーが生まれて管理が大変になります。ひとまとまりの部品ができたら、こまめにグループ化して後々管理しやすいようにしましょう。

とはいえどれくらいのくくりでグループ化するかは自由なので、そこに困るかもしれません。どんなときグループ化機能のお世話になってきたのか、講師からさらに情報を得てください。

やってみよう

練習用のファイルを開いて、レイヤー操作の練習をしましょう。

レイヤー操作の練習用ファイル

  1. レイヤーを入れ替える
  2. レイヤーの表示・非表示の切り替え
  3. レイヤーの追加・削除
  4. レイヤーをコピーする
  5. レイヤーの名前の変更
  6. レイヤーをグループ化する
alt

3-3 不透明度

不透明度を操作すると、レイヤーを半透明にすることができます。不透明度の調整は、レイヤーパネル上部の不透明度の数値を調整します。

alt
不透明度の値動作
0透明(見えない)
100一切透かさない

透明感を出すことで、重なり合う下のレイヤーを透けて見せる表現ができます。

alt

3-4 レイヤーの種類

レイヤーにはいくつか種類があります。今後のために頭の片隅に入れておきましょう。

  • 通常のレイヤー
  • シェイプレイヤー 図形のレイヤーです。点と線の情報を持っており、形を自由に変えることができます。レイヤーパネルのサムネイルの 右下に小さな四角形が表示される のが特徴です。詳しくは「第5章 パスとシェイプ」で学習します。
  • テキストレイヤー 文字のレイヤーです。Photoshopでは、文字もひとつのレイヤーとして表現します。サムネイルに Tと表示される のが特徴です。詳しくは「第6章 文字」で学習します。
  • 調整レイヤー このレイヤーは少し特殊です。このレイヤーの下にあるレイヤーたちの色などに影響を与えます。このレイヤーの場合 サムネイルの左隣に円形のマーク が表示されます。詳しくは「8-2 調整レイヤーとは」で学習します。
alt

このように、様々なレイヤーが重なることで1枚の画像を表現します。

alt

3-5 レイヤーカンプ

レイヤーカンプという機能を紹介します。頻繁に使う機能ではないかもしれませんが、機能の存在だけでも覚えておくと後々役立つかもしれません。

レイヤーカンプとは

指定した 複数のレイヤーの表示・非表示を一気に切り替える 機能です。

レイヤーカンプの使い方・使用例

例えば、複数のデザイン案の仕上がりイメージを瞬時に切り替えたいとき使用できます。使用例と一緒に使い方を学びましょう。

例:2つのデザイン案の表示を楽に切り替える

例えば、Webページのボタン部分を英語にするか日本語にするか迷っているとします。他の人の意見を聞くために2つの案両方をPhotoshopにデザインすることにしました。レイヤーカンプ機能を使って、 英語のデザインと日本語のデザインを簡単に切り替えられるように したいと思います。

  1. 英語と日本語、2種類デザインを重ねて作る
    alt
  2. メニューバー[ウィンドウ]→[レイヤーカンプ]でレイヤーカンプパネルを表示する
  3. レイヤーパネルでレイヤーの表示・非表示を手動で切り替え、英語のデザイン案の表示状態を作る
    alt
  4. レイヤーカンプパネルの右下、右から2番目のボタンを押して、レイヤーカンプを作成する
    alt
  5. 同じように日本語のデザインの表示状態も、レイヤーパネルを手動で操作して作る
    alt
  6. 日本語のデザイン用のレイヤーカンプを作る
    alt

これで、楽にデザイン案を切り替えることができるようになりました。レイヤーカンプパネルの、レイヤーカンプの名前の左側にある白いアイコンをクリックするとデザイン案を切り替えることができます。

このように、レイヤーカンプは複数のデザイン案を素早く切り替えたいときに便利な機能です。最初は手間こそかかりますが、作っておけば後が楽です。使えそうなシチュエーションがあったら試してみましょう。

alt
alt

カンプとは

カンプ は印刷業界の専門用語で、 仕上がり見本 のことです。印刷ミスで意図したデザインと違う仕上がりにならないために作成します。デザインや印刷業界には、印刷用のデータと一緒に この「カンプ(大抵はjpgかPDFファイル)」を一緒に印刷所に渡すという習慣があります。

やってみよう

練習用のファイルを操作して、レイヤーカンプを作成してみましょう。

レイヤーカンプ作成の練習用ファイル

  1. 英語のデザインと日本語のデザインをすぐに切り替えられるよう、レイヤーカンプを作成しましょう
alt

4-1 パスとシェイプの描画

「1-3 画像を表現する仕組み」で学んだように、コンピュータはビットマップ画像とベクター画像という表現を使い分けています。

ビットマップ画像ベクター画像
概要画像を小さな点の集まりとして表現する方式画像を点と線の集まりで表現する方式

Photoshopは主にビットマップ画像を扱うソフトウェアですが、時々ベクター画像を扱うIllustratorのような機能が欲しいときもあります。

ベクター画像が欲しい場面

例えばPhotoshopでWebデザインをしていて、 ブラシツールで ナビゲーションバーを描いたとしましょう。

alt

「できた!」と思ったとき、 「ナビゲーションバーの形と色を変えたい」 と注文が入りました。これはもう悲劇です。ブラシツールを使っているということは キャンパスに直接筆で絵を描いたようなもの なので、その変更は簡単ではないからです。

alt

この不都合は、 シェイプツール で解決できます。

シェイプとは

頂点と線で構成された図形です。外側の枠や、線で囲まれた面に色をつけることができます。後から頂点を動かしたり、頂点を追加することができます。Webデザインのような分野では特に重宝します。

シェイプの操作

シェイプを作る

シェイプツール や ペンツール で作ることができます。

シェイプツールは、シェイプを描画するツールの総称です。 長方形ツール や 楕円形ツール など、基本的な図形を描画するツールがあります。

  1. シェイプツールを選択する
    alt
  2. オプションバー左側にあるプルダウンを「シェイプ」にする
    alt
  3. ドラッグ&ドロップ

だけで描画できます。ペンツールは、自由な形にシェイプを作る機能です。複雑な形状や曲線を描きたいときに使用します。こちらも基本的には

  1. ペンツールを選択する
    alt
  2. オプションバー左側にあるプルダウンを「シェイプ」にする
    alt
  3. クリック(頂点を作る) ドラッグ&ドロップ(曲線を作る)

で描画できます。でも、これを思い通りに操作するには ある程度の経験が必要 です。最初のうちはシェイプツールを使えれば問題ありません。興味がある方はペンツールの使い方を画面共有で講師に見せてもらうのも良いでしょう。

シェイプを変形する

  • 自由変形 機能を使う方法
    1. Windows Ctrl + T
      Mac command + T
      マウス操作 メニューバー[編集]→[自由変形]
    2. 四隅などをドラッグ&ドロップして拡大縮小する
      alt
  • パス選択ツール alt を使う方法
    1. パス選択ツール alt を選択する
    2. シェイプの頂点や線を選択する
    3. 頂点や線をドラッグ&ドロップ
      alt

シェイプの色を変える

いくつか方法があります。

  • シェイプツールを選択した状態で、オプションバーから変更する
    alt
  • レイヤーパネルのサムネイルをダブルクリックする(塗りの色の変更)
    alt
  • ライブシェイプを選択して、[属性]パネルで変更する
    alt
    ※ ライブシェイプ は後から角の形などを変えられる特殊なシェイプで、長方形、角丸長方形、楕円形ツールで作った図形はライブシェイプとして生成されます。上記のパス選択ツールで長方形や円の 形を崩すと自動で通常のシェイプになり 、この方法は使用できなくなります。

パス

頂点や線だけで構成された図形のことを パス と言います。「色の情報がないシェイプ」というイメージです。作り方や変形の方法はシェイプと変わりませんが、作るときはオプションバー左側にあるプルダウンが「パス」になっている必要があります。

alt

パスは画像をくり抜くときの型として使われることがあります。

Tips

頂点は アンカーポイント 、 線は セグメント とも呼びます。

5-1 ブラシ

この節では、筆やスプレー缶で絵を描くような ブラシ ツール、指定した範囲などを塗りつぶす 塗りつぶし ツールについて学びます。

これらのツールの使う前に必要な知識として、描画色と背景色という概念があります。まずおさえておきましょう。

描画色と背景色

alt

描画色とは

ブラシや塗りつぶしで使用される色 です。刷毛や筆に付けるインクの色とイメージすると良いでしょう。

alt

背景色とは

少し難しいですが、 消しゴムの色 というイメージです。

alt

描画色と背景色は他の機能でも使用されることがありますが、現段階では描画色の概念がわかっていれば大丈夫です。

ブラシツール

では早速、ブラシツールで色を塗ってみましょう。

  1. 描画色に好きな色を設定する
    ツールバーの描画色をクリックすると、 カラーピッカー という色を選択するダイアログが表示されます。
    alt
  2. ツールパネルから、alt ブラシツール を 選択する
  3. アートボードの上でクリックやドラッグする

ブラシプリセットピッカー

ブラシツールを選択すると、オプションバーにブラシをカスタマイズするボタンや設定項目が表示されます。

alt
  • ブラシの形
  • 直径
  • 硬さ(ぼけ感)

などを指定することができます。

Tips: 直線の描画
Shiftキーを押しながらドラッグすると、まっすぐペイントできます。

塗りつぶしツール

  1. 描画色に好きな色を設定します。
  2. ツールパネルから、alt 塗りつぶしツール を選択する
  3. オプションバー左上のプルダウンが「描画色」になっていることを確認する
  4. 塗りつぶしたいレイヤーや選択範囲の上でクリックする

カラーパネル

カラーピッカーの他にも、 カラーパネル で色を作る方法があります。

  1. メニューバー[ウィンドウ]→[カラー]で、カラーパネルを表示する
  2. カラーパネル右上のボタンを押して、 RGBスライダー と RGBスペクトル が選択されていることを確認する
    ※印刷物をデザインしているときは、CMYKスライダー と CMYKスペクトル を選択しましょう。
  3. 色のついているスライダーを自由に動かして、色を決める

「もう少し赤みが欲しい」「青色をおさえたい」というときに便利です。
alt

作った色を保存する

スウォッチ という機能を使うと、作った色をいくつも保存できます。

  1. 描画色に保存したい色を作る
  2. メニューバー[ウィンドウ]→[スウォッチ]で、スウォッチパネルを表示する
  3. スウォッチパネルの「描画色から新規スウォッチを作成」をクリック
    alt

スウォッチパネルで保存した色は、ワンクリックで描画色や背景色に割り当てることができます。

5-2 グラデーション

グラデーションツール を使うと、滑らかな色の変化を表現できます。

大まかな流れ

  1. ツールパネルから、altグラデーションツールを選択する
  2. オプションバーの サンプルボックス (画像赤枠の部分)をクリックし グラデーションエディター を表示する
    alt
  3. グラデーションタイプ セクションで、好みのグラデーションを作る
  4. ドラッグ&ドロップで描画

グラデーションエディターの使い方

この画面で、 グラデーションの中で色が切り替わる部分 を設定していきます。この「色が切り替わる部分( 分岐点 )」は複数指定することができます。

alt
alt
分岐点を(の)…操作
移動する分岐点を左右にドラッグ
増やす増やしたい場所でクリック
削除する分岐点を真上か真下にドラッグ&ドロップ
色を変える分岐点をダブルクリック

色とは別に、 不透明度 も別で分岐点を作ることができます。不透明度は0に近いほど透明になります。

alt

グラデーションを保存する

  1. 好きな名前をつけて、「新規グラデーション」をクリック
    alt

グラデーションを作ってみよう

  1. 青〜オレンジのグラデーションを作ってみましょう
  2. 金色のグラデーションを作ってみましょう

もちろん調べたり、講師に相談したりしても大丈夫です。

5-3 パターン

パターンは模様のことです。Photoshopでは、好きな模様を作って敷き詰めることができます。漫画を描く方がスクリーントーンを貼るようなイメージです。Photoshopにはいくつかの模様が最初から入っていますので、まずはそれを使ってみましょう。

alt

Tips: 従来のパターン

Photoshopのバージョンが新しくなると元々入っていた従来のパターンが変更されることもあります。 教科書と同じパターンを使いたい場合は以下の方法で従来のパターンを入れてください。

[ウィンドウ]メニュー > パターン > [パターン]パネルのパネルメニュー(右上の ≡ マーク) > 従来のパターンとその他

alt

パターンスタンプツール

  1. ツールパネルから、alt パターンスタンプツール を選択する
  2. 必要に応じて、オプションバーで以下の項目を設定する
    • 使いたいパターン
    • ブラシの種類・サイズ
    • 硬さ(ぼけ感)
      alt
  3. ブラシを使う要領で、クリックしたりドラッグしたりする

塗りつぶしツール

塗りつぶしツールはパターンにも対応しています。

  1. ツールパネルから、alt 塗りつぶしツール を選択する
  2. オプションバー左上のプルダウンが「パターン」になっていることを確認する
  3. オプションバー左上で、好きなパターンを選択する
    alt
  4. 塗りつぶしたいレイヤーや選択範囲の上でクリックする

5-4 パターンの定義

シェイプを使って、パターン(模様)をつくることができます。作成したパターンは、画像の背景で使用したり、デザインに活用することができます。

※パターンの使い方については「4-3 パターン」をご覧ください。

オリジナルのパターンを作る

パターンを自分で作ることもできます。タイル1枚分をデザインしてPhotoshopに登録するイメージです。

  1. 新規ファイル作成 ここに、いわばタイル1枚分のデザインをします。大きさは100x100pxくらいで良いでしょう。
  2. 好きなデザインをする
  3. メニューバー[編集]→[パターンを定義]をクリックする
    alt
  4. 好きな名前をつけてOKをクリック
    alt

定義したパターンは、上記のパターンスタンプツールや塗りつぶしツールで活用することができます。

alt

Tips: パターンの活用

パターンはバナーやヘッダー、背景のアクセントとして使えます。いろんなパターンを試してみましょう。
alt

6-1 文字を入力する

この章では、文字を入力する方法を学習します。ここでは2種類紹介します。

横書き文字ツール

文字を入力する一番スタンダードな方法です。

  1. ツールパネルから 横書き文字ツール alt を選択する
  2. 入力したい場所でクリック
    alt
  3. 文字を入力する
    alt

段落テキスト

指定した範囲内に文字を入力する機能です。指定した範囲からはみ出る部分を自動で改行してくれるので、長文を入力するときに向いています。

  1. ツールパネルから 横書き文字ツール alt を選択する
  2. 入力したい範囲をドラッグ&ドロップで指定
    alt
  3. 文字を入力する
    alt
    テキストを打ち直したいときは、テキストやテキストレイヤーのサムネイルをダブルクリックしましょう。
  4. テキストの入力が終わったら、 移動ツール alt を選択することで確定できます。

Tips: 文字入力を確定する方法

移動ツールに持ち替える以外にも方法があります。

  • オプションバーに表示される alt をクリックする
  • Windows Ctrl + Enter
    Mac command + Enter

Tips: Lorem Ipsumとは

ダミーテキスト の一種です。デザイン中、「ここに文章が入るけど、具体的な文章が決まっていない」ときに入れる意味のない文章のことです。Lorem Ipsumはその代表的なもので、世界中で愛用されています。興味のある方はさらに調べてみてください。

6-2 書体を変える

書体の設定は見た目に大きな影響を与えます。ここでその方法を学習しましょう。

  1. メニューバー[ウィンドウ]→[文字]で文字パネルを表示する
    alt
  2. 書体を変えたいテキストレイヤーを選択する ※テキストの一部分の書体を変えたい場合、テキストをダブルクリックして文字を打てる状態にしたあと、書体を変更したい文字列をドラッグして選択
  3. 文字パネルを操作する

文字パネルの設定項目

今は以下の設定項目をおさえておけば十分でしょう。

alt

書体の設定を確定する

「6-1 文字を入力する」で紹介したのと同じ方法で確定できます。

  • 移動ツール alt に持ち替える
  • オプションバーに表示される alt をクリックする
  • Windows Ctrl + Enter
    Mac command + Enter

Tips: 文字の間隔

文字の間隔を広くすると、ゆったりしたイメージを伝えたり、文字を目立たせることができます。でも広げすぎると読みにくくなります。それで、文字の間隔を大きく広げた文字は長文に向きません。文字の間隔を大きく広げたい場合、見出しやキャッチコピーから始めるのがおすすめです。

Tips: 行の間隔

文字の間隔と同じく、行の間隔を広くするとゆったりした、リッチなイメージを伝えられます。でもやはり、広げすぎると読みにくくなります。横書きの場合、長文で読みやすい行間隔は 文字サイズの1.5~2倍 です。

例:文字サイズ30px → 行の間隔45〜60px

Tips: 文字の変形

文字を引き伸ばしたり、縮めることはしないようにしましょう。フォントは大抵デフォルトの状態で一番映えるようにデザインされているので、比率を変えるとダサくなってしまいます。

紙面が足りないときや余白を埋めたいときは、 フォントサイズ や 文字の間隔 で調整するようにしましょう。

alt

Tips: Adobe Fonts

2019年2月現在、Illustrator CCやPhotoshop CCを使っているみなさんは Adobe Fonts というサービスを使用できます。公式サイト上に掲載されている好きなフォントを使えるサービスです。気になる方はさらに調べて使ってみましょう。

やってみよう

練習用のファイルを開いて、「お知らせ」の部分を完成させましょう。書体は自由に設定して構いません。

テキストレイヤー操作の練習用ファイル

alt

7-1 選択範囲とは

特定の範囲を切り出したり、色を補正したりするときがありますが、その「特定の範囲」をPhotoshopに伝える機能が 選択範囲 です。Photoshopの使用用途によっては多用しますので、必要と感じる方はよく練習して慣れるようにしましょう。

選択範囲の使用例:リボンの色だけを変えたい場合

リボンを選択する
alt

色の調整をする
alt

7-2 長方形・楕円形で選択する

長方形選択ツール

長方形選択ツール alt を使ってドラッグすると、長方形の選択範囲を作成できます。

楕円形選択ツール

楕円形選択ツール alt を使ってドラッグすると、円形の選択範囲を作成できます。

Tips

  • Shiftキーを押しながらドラッグすると、正方形(または正円)になります
  • Windows Alt
    Mac option
    を押しながらドラッグすると、クリックした場所を中心にして範囲選択できます

7-3 フリーハンドで選択する

ここでは、3つの選択機能を紹介します。どれも 一度触ってみて 、どんなツールなのか体感するようにしましょう。

  • なげなわツール
  • 多角形選択ツール
  • マグネット選択ツール

なげなわツール

alt なげなわツール は、ドラッグ&ドロップで自由に選択範囲を作成できます。

なげなわツールだけで選択範囲を作ることはあまりないかもしれません。他の選択ツール(「7-4 自動で選択する」など)で大まかに選択した後、なげなわツールで細かく選択するという使い方が多いでしょう。

alt

多角形選択ツール

alt 多角形選択ツール は、選択範囲の頂点をクリックで決めていく選択ツールです。額縁や机の角、窓や建造物など、直線的なものを選択するのに向いています。

一周して始点まで戻りカーソルアイコンの右下に○が出たら、クリックして囲むと選択範囲になります。

alt

マグネット選択ツール

alt マグネット選択ツール は、ある程度自動で選択範囲を決めてくれるツールです。なげなわツールのように選択したい範囲の境界をゆっくりなぞると、色の境目を基準に選択範囲を決めてくれます。このツールも慣れが必要です。

一周して始点まで戻りカーソルアイコンの右下に○が出たら、クリックして囲むと選択範囲になります。

alt

Tips

  • Shift を押しながら選択すると、選択範囲を足し算することができます。
  • Windows Alt
    Mac option
    を押しながら選択すると、選択範囲を引き算することができます。
alt

Tips: 選択範囲をぼかす

オプションバーの ぼかし を操作することで、選択範囲の境界をぼかすことができます。0pxに設定するとぼかしは無効になります。

alt

選択範囲を作った後でぼかしを加えることもできます。詳しくは「7-5 「選択とマスク」」をご覧ください。

7-4 自動で選択する

自動選択ツールは、選択ツールの醍醐味とも言えるでしょう。大きく分けてPhotoshopは2つの自動選択機能があります。

  • 近い色で選択する
  • 人工知能で選択する

色による選択

alt クイック選択ツール は、クリックした場所周辺の近い色を選択してくれます。例えば、以下の画像の 空の部分 だけを選択したい場面を考えます。

alt

クイック選択ツールを選択した状態で、空の一部分をドラッグ&ドロップします。

alt

すると…

alt

空の部分が選択されました。正確には ドラッグした周辺の近い色が選択 されました。この写真の場合は天気に恵まれているので連続して青いピクセルが並んでいます。Photoshopが隣り合うピクセルを見て、青に近いピクセルを自動で選択したことになります。

許容値

「近い色」の幅を調整するのが 許容値 です。この数値が小さいと、同じ青でも厳密に近い青でないと選択されなくなります。

操作方法

  1. ツールバーの alt 自動選択ツール をクリック
  2. オプションバーの 許容値 を操作

許容値30
alt

許容値150
alt

許容値が150の選択は上手くいっているとは言えないですね。許容値が大きすぎるので、空の青だけでなくビルの青っぽい部分まで選択してしまっています。

許容値の設定は画像によって異なりますが、まずは30くらいに設定するのがおすすめです。それで不都合が出たら許容値を調整しましょう。

人工知能で選択する

2018年に 被写体を選択 という機能が追加されました。最も目立つ被写体を自動で選択してくれます。

  1. 好きな画像を開く
  2. メニューバー [選択範囲]→[被写体を選択]

被写体を選択 を実行した例

alt

なげなわツールの出番

自動選択ツールは選択の作業を大幅に削減する素晴らしいツールですが、一発で自分の望む選択ができることは稀です。

例えば先述の空の選択では楽に空を選択できました。でもビルの先端部分など細かい部分は手直しが必要そうです。自動選択ツールで選択してもらったら、なげなわツールなどで細かな部分を仕上げましょう。

alt

Tips: Adobe Sensei

Adobeの人工知能の技術全体は「Adobe Sensei」と名付けられています。日本語の「先生」からとられたようです。「被写体を選択」はその技術の一つです。

やってみよう

練習用ファイルをダウンロードして、自動選択の練習をしましょう。

自動選択練習用ファイル

  1. クイック選択ツールとなげなわツールで、空を選択しましょう
  2. 練習用ファイルを開いて、被写体を選択機能を使ってみましょう
  3. 自分で撮った写真を開いて、被写体を選択機能を使ってみましょう

7-5 「選択とマスク」

Photoshopにはさらに高度な選択機能があります。

「選択とマスク」機能

  1. 何らかの選択ツール(長方形選択ツール、なげなわツールなど)で選択範囲を作成する
  2. Windows Ctrl + Alt + R
    Mac command + option + R
    マウス操作 オプションバーの「選択とマスク…」をクリック
alt

この機能は大きく分けると2つのことができます。

  • 選択範囲をわかりやすく表示する
  • より細かく選択する

選択範囲をわかりやすく表示する

上記の画像を見ると選択されていない範囲が赤くなっていますね。複雑な選択範囲を作るとき、この機能は重宝します。赤以外にするなどの設定は下記の赤く囲った部分でできます。

alt

より細かく選択する

選択範囲の形などを変えることができます。

alt

例えば「滑らかに」や「ぼかし」のスライダーを操作すると以下のような変化があります。

alt
alt

また、ブラシツールの感覚で選択範囲を広げたり狭めたりすることもできます。左上の3つのボタンです。

alt
  • alt クイック選択ツール 周辺の似た色を自動で選択する。
  • alt 境界線調整ブラシツール
    周辺の色に応じて、境目の部分を選択するツール。髪の毛の選択などに向いている。
  • alt ブラシツール ブラシツールの感覚で選択範囲を広げたり狭めたりする。

Tips: 講師に見せてもらおう

選択範囲に限った話ではありませんが、Photoshopの機能は実際に動かしているのを見ると理解が深まります。興味がある方はレッスンで下記の点を扱ってもらいましょう。

  • 選択ツールの使い方を画面共有で見せてもらいましょう
  • どんなシチュエーションで選択ツールを使ってきたか聞いてみましょう

7-6 選択範囲の解除・保存

選択範囲の解除

選択範囲を解除するときは以下のように操作します。

  1. Windows Ctrl + D
    Mac command + D
    マウス操作 メニューバー[選択範囲]→[選択を解除]

選択範囲の保存

同じ選択範囲を何度も使いまわしたい場合、選択範囲の保存が便利です。

  1. メニューバー[選択範囲]→[選択範囲を保存]
  2. 好きな名前をつけて「OK」
alt

保存した選択範囲の読み込み

  1. メニューバー[選択範囲]→[選択範囲を読み込む]
  2. 任意の選択範囲を選んで「OK」
alt

Tips: 選択範囲の反転

選択されている部分とされていない部分を入れ替えたい(選択範囲を反転させたい)ときは以下のように操作します。

  1. Windows Ctrl + Shift + I
    Mac command + Shift + I
    マウス操作 メニューバー[選択範囲]→[選択範囲を反転]

7-7 パスを選択範囲にする

「第4章 パスとシェイプ」で学習したとおり、頂点や線だけで構成された図形のことを パス と言います。そのパスをもとに選択範囲を作ることができます。

  1. ペンツールなどでパスを作成する
  2. メニューバー[ウィンドウ]→[パス]で パスパネル を開く
  3. 選択範囲にしたいパスを選択して、「パスを選択範囲として読み込む」をクリック
alt

やってみよう

練習用ファイルをダウンロードして、自動選択の練習をしましょう。

パス練習用ファイル

  1. 練習用ファイルにあるパス「葉っぱ」を選択範囲にしましょう
  2. 好きな被写体の形にパスを作り、選択範囲にしましょう(練習用ファイルでも自分の好きな画像でも構いません)

8-1 色調補正とは

色調補正は主に写真などの色を調整することです。高価なカメラやレンズでなくても、後から綺麗な写真に加工することができます。

この章を学習するにあたって

これから色を変えるいくつかの方法が出てきます。主に画面に出てくるスライダーを左右に動かすことで調整をしていきますが、その スライダーは自由に動かして ください。

また、 自分で撮った画像を どんどん色調補正の材料として使ってください。目の前で色が変わっていく体験をすると学習も楽しくなるでしょう。撮った画像を講師と一緒に色調補正するのもおすすめです。

alt
alt

8-2 調整レイヤーとは

下にあるレイヤーの色を変化させるレイヤーです。何枚でも重ねることができます。

alt

調整レイヤーを作ってみよう

自分のスマホなどで撮った画像を用意して、調整レイヤーの練習をしましょう。

  1. 画像を開く
  2. メニューバー[ウィンドウ]→[色調補正]で 色調補正パネル を出す
  3. 色調補正パネル左上「色相・彩度」をクリック
alt

レイヤーパネルが以下のようになっていれば成功です。

alt

この状態で次の「8-3 鮮やかさの調整」に進みましょう。

Tips: 真下のレイヤーにだけ調整レイヤーを適用する

調整レイヤーは通常 下にある全てのレイヤー の色を変化させます。こうなって都合が悪いときは、調整レイヤーの真下のレイヤーにだけ調整を適用させることもできます。

  1. 調整レイヤーとその下のレイヤーの間にマウスを持っていく
  2. Windows Alt
    Mac option
    を押しながらマウスをクリック
alt

以下のような表示になればうまくいっています。

alt

8-3 鮮やかさの調整

彩度 とは、画像の鮮やかさのことです。色調補正パネルで「色相・彩度」をクリックして調整レイヤーを作ったら、出てきた 属性 パネルの 彩度 のスライダーを調整してみましょう。

右に行くほど鮮やかになり、左に行くほど無機質な色になっていきます。

alt
alt
alt

自然な彩度

色調補正パネルには 自然な彩度 alt もあります。これは彩度の低い部分に特に影響を与える機能です。海や空がメインのような画像に向いています。

例えば以下の画像の場合、土の部分(彩度が高い)の色は大きく変化していませんが、空や水の部分(彩度が低い)部分は大きく変化しています。

alt

8-4 明るさの調整

明るさ・コントラスト

画像の明るさを調整するには、 明るさ・コントラスト alt を使用します。

alt
alt

レベル補正(上級者向け)

レベル補正 alt は ヒストグラム と呼ばれる、明るさの分布を表すグラフを使った補正方法です。「明るすぎる部分だけを調整したい」という要望に応える機能です。高度な方法なので、難しく感じたり使いこなせなかったりしても問題ありません。

alt

例えば以下のように明るさだけを調整した場合と比べて、プラットホームを明るくさせ過ぎないようにしながら全体を明るくすることができます。

alt

横軸は明るさのレベルを表しています。「左側が高い=暗いピクセルが多い」「右側が高い=明るいピクセルが多い」というイメージです。

alt

この補正は、ヒストグラムの下にある3つの三角を動かして 理想のヒストグラムを作るイメージです。三角に合わせてヒストグラムが引き伸ばされる様子を想像してください。

alt

最初のうちはヒストグラムの下にある3つの三角について、

  • 右に動かすと明るくなる
  • 左に動かすと暗くなる

と覚えておくと良いでしょう。この機能に慣れるためには、何度も自由にスライダーを動かして画像がどのように変化するか観察するのもおすすめです。

alt

トーンカーブ(上級者向け)

トーンカーブ alt もヒストグラムを使った補正方法です。 真ん中を走る斜めの線を操作する ことで色に変化を与えます。

この機能も上級者向けです。思い通りに操作できるようになるには時間がかかるかもしれませんが、マスターすると大変便利な機能です。

alt

トーンカーブは 入力(変化前の画像)の色が 斜めの線の影響 を受けて 出力 (変化後の画像)されるイメージです。

斜めの線の上の好きな位置でドラッグ&ドロップすると、この斜めの線を変化させることができます。間違って点を打ってしまった場合はグラフの外側にドラッグ&ドロップで追い出すと削除できます。

alt

斜め45度の線が引いてある状態がデフォルトで、色の変化はありません。

alt

トーンカーブの使用例

以下の操作は RGB の場合です。 CMYK の場合は斜めの線をを上下に反転させると同じ効果が得られます。

線を上に膨らませると明るくなります。

alt

線を押し下げると暗くなります。

alt

ゆるいS字のような形にすると、明るい部分をより明るく、暗い部分をより暗くすることになります。 コントラストが強くなる という言い方をします。

alt

以下の画像のような形にすると、明るい部分を暗く、明るい部分を暗くすることになります。 コントラストが弱くなる という言い方をします。

alt

数学に強い方は「シグモイド関数やtanθのような形」とイメージして覚えるのも手かもしれません。

Tips: レベル補正とトーンカーブについて

どちらも経験が必要なツールのため、すぐに使いこなせなくても問題ありません。スマホなどで撮った写真をどんどんPhotoshopで読み込んで、練習の題材にしましょう。

8-5 白黒にする

彩度を大きく落とす と白黒画像にできます。

alt

やってみよう

自分で撮った好きな画像をいくつか選んで、以下の操作をしましょう。もちろん講師と一緒でも問題ありません。

  • 暗い画像を明るくする
  • 画像をより鮮やかにする
  • 逆光を軽減する

9-1 切り抜き

9章では 切り抜きツール alt を学習します。このツールは主に3つの使い道があります。

  • 画像を長方形でくり抜く( トリミング とも言います)
  • アートボードを広げる
  • 角度補正(「9-2 角度の補正」で扱います)

画像を長方形でくり抜く

  1. ツールバー 切り抜きツール alt を選択する
  2. 四隅をドラッグ&ドロップしてくり抜きたい形にする
  3. Enterキーで確定

実は「第7章 選択範囲」で登場した写真はこのパノラマ画像を切り抜きツールでくり抜いた画像でした。

alt
alt
alt

速く移動している被写体をとりあえず収めた画像を 適切な画にするのにも使うことができます。

アートボードを広げる

「切り抜き」ツールという名前ではありますが、アートボードを手っ取り早く広げることにも活用できます。

  1. ツールバー 切り抜きツール alt を選択する
  2. 四隅をアートボードの外側にドラッグ&ドロップする
  3. Enterキーで確定
alt
alt

新しくできた領域を青く塗って空を大きくした例

alt

切り抜くサイズを指定する

切り抜きツールを選択すると、オプションバーが下記のように変化します。四隅をドラッグ&ドロップするだけでなく、ここに切り抜きたいサイズを入力することでも切り抜くサイズを調整できます。

alt

Tips: 「切り抜き」

このカリキュラムでは切り抜きツールで 長方形にトリミングする ことを「切り抜き」と表現していますが、一般的に印刷業界やデザイン業界で「切り抜き」と言うと、 被写体などをくり抜く ことを指します。余力がある方は頭の片隅に置いてください。

alt
alt

9-2 角度の補正

水平を狙って撮った画像が傾いていたというときや、あえて画像を傾けたいときにも切り抜きツールを使用できます。

  1. ツールバー 切り抜きツール alt を選択する
  2. オプションバーの [角度補正] をクリック
  3. 四隅をドラッグ&ドロップで回転
  4. Enterキーで確定
alt
alt

Tips

角度補正をすると上記の画像のように切り抜ける領域が小さくなります。後から角度補正することを前提で写真をとる場合、いつもより引いた画にすると良いでしょう。

10-1 マスク

マスクとは 画像の一部を隠す機能 です。

クリッピングマスク

テキストやシェイプで画像をマスクしたいときに使用できます。

alt
alt

クリッピングマスクの作り方

マスクしたい形がシェイプであっても操作は同じです。

  1. マスクしたいレイヤー(この場合は風景)の 下に テキストやシェイプレイヤーを置く
  2. マスクしたいレイヤー(この場合は風景)とテキストやシェイプレイヤーの 間を
    Windows Alt
    Mac option を押しながらクリック
alt
alt
alt

別の方法

  1. [レイヤーパネルの右上のボタン]→[クリッピングマスクを作成]
alt

レイヤーマスク

グラデーションでマスクをかけることもできます。その場合は レイヤーマスク を使用します。

  1. マスクをかけたいレイヤーを選択する
  2. 「レイヤーマスクを追加」をクリック
    alt
    alt
  3. レイヤーマスクをクリックして、グラデーションツールで 白と黒 のグラデーションを描く
    alt
  4. うまくいかなかった場合、もう一度グラデーションを描く

選択範囲をレイヤーマスクとして使う

以下の方法でもレイヤーマスクを作成できます。

  1. 選択範囲を作る
  2. 「選択とマスク」を開く(詳しくは「7-5 「選択とマスク」」を参照)
  3. 右下の「出力先」を「レイヤーマスク」にする
  4. 「OK」をクリック
alt
alt

レイヤーマスクの仕組み

レイヤーマスクに描いた色に応じて、画像を隠すか表示するかを決定しています。レイヤーマスクで使われる色は 白と黒 です。

動作
画像を見せる
画像を隠す

白と黒の間(灰色)の場合、その濃さに応じて半透明になります。

alt

10-2 フィルター

フィルターとは特殊効果のことです。メニューバーの[フィルター]で様々な特殊効果をかけることができます。

alt

特殊効果を使うと、画像をぼかしたり水彩画のようなテイストにすることができます。

フィルターの適用例

元画像

alt

フィルターギャラリー「カットアウト + こする」

alt

アンシャープマスク

わかりにくいかもしれませんが、色の境界部分のコントラストが上がることで画像がよりくっきりと見えるようになります。

alt

ぼかし

alt

Tips: スマートオブジェクト

レイヤーを右クリックして スマートオブジェクトに変換 をクリックしてみましょう。見た目は変わらないですが、この状態でフィルターをかけるとレイヤーパネルに変化があります。

画像に直接フィルターの演算結果を適用するのではなく、 スマートフィルター というフィルターがつきます。調整レイヤーのように 後から フィルターを外したりつけたり、フィルターの設定値を微調整できるようになります。

alt

10-3 描画モード

描画モードとは、重なり合うレイヤーの合成方法です。

alt

描画モードの切り替え方

  1. 描画モードを切り替えたいレイヤーを選択する
  2. レイヤーパネル上部のリストから目的の描画モードを選択する

描画モードが 通常 の場合、合成されていないことを指します。同じ画像でも、描画モードを切り替えることで、さまざまな表現ができます。

例えば上記画像のように スクリーン というモードにすると、黒以外の色を下のレイヤーに足すことができます。

alt

描画モードの種類はとても多いのでここで紹介することはできませんが、気になる方はさらに調べるか講師にお尋ねください。

11-1 レイヤースタイルとは

レイヤースタイル はレイヤーに影をつけたり、光らせたりといった効果を手軽にかけられる機能です。手軽に見た目を大きく変化させられるパワフルな機能です。表現の幅が大きく広がりますので、何度も触って慣れていきましょう。

このカリキュラムで目指すところは レイヤースタイルの基本的な操作を覚える ことです。Photoshopで「○○な質感を表現したい」「ワンランク上のデザインをしたい」というとき、またはPhotoshopを使ったデザインの文献を読むとき、レイヤースタイルは欠かせません。

11-2 レイヤースタイルの使用例

Webデザイン

「4-1 パスとシェイプの描画」で出てきたナビゲーションバーのデザインは、 パターンオーバーレイ と ドロップシャドウ という効果を使っています。

alt

ロゴデザイン

「第7章 選択範囲」課題解答例の「Manhattan」のテキストレイヤーには、 光彩(内側) と ドロップシャドウ という効果がかかっていました。

alt

以下のような装飾もレイヤースタイルで実現できます。

レイヤースタイルの設定方法

  1. レイヤーパネルを開く
  2. レイヤースタイルを適用したいレイヤーをダブルクリック
    ※レイヤー名の右側をダブルクリックしてください。
  3. 適用したいスタイルを左の欄から選び、それぞれ設定する
alt

各スタイルは チェックが入っていると有効 です。

alt

やってみよう

練習用にファイルを作り、以下のような見た目に仕上げましょう。うまくいかない場合はご遠慮なく講師のレッスンを受けてください。

※まったく同じ見た目やレイヤースタイルの設定にする必要はありません。レイヤースタイルに慣れることを目指してください。

下準備

  1. ファイルを新規作成する。大きさは1800×1300ピクセルくらい
  2. 背景を黒か深い灰色で塗りつぶす
  3. 以下のようにテキストレイヤーを作る。「あいうえお」の字は230pxくらいに設定する

フォントは自由に設定して構いません。

ネオン風の文字を作る

文字自体が青く光っているような装飾をしましょう。

まず、文字の色を薄い青にします。

テキストレイヤーをダブルクリックしてレイヤーパネルを開き、 光彩(外側) を設定します。色は明る目の濃い青にしましょう。

alt

光彩(内側) を設定します。同じく色は明るくて濃い青にします。

alt

以下のような見た目になったでしょうか。

上記の操作の意味

  • 文字の色を薄い青にする
    文字そのものが明るく光っているので、文字そのものは青というより白っぽくします。
  • 光彩(外側)
    文字の外側をぼんやり濃い青にすることで、文字から出た青い光が周囲に映っている様子を表現します。
  • 光彩(内側)
    文字の内側も少しだけぼんやり濃い青にすることで、文字が内側から外側にかけて白から青へ自然に変化するようにします。

金色の文字を作る

テキストレイヤーをダブルクリックしてレイヤーパネルを開き、 グラデーションオーバーレイ を有効にします。

alt

グラデーションの設定をします。以下のように設定しましょう。濃い茶色と明る目の黄色だけでもOKです。

alt

シャドウ(内側) を設定します。色は明るくて濃い黄色が良いでしょう。

alt

光彩(内側) を設定します。色は薄目の黄色にします。

alt

ベベルとエンボス を設定します。

「光沢輪郭」を設定するときは、三角のボタンを押して細かく波打っているような項目を選択します。

alt

以下のような見た目になったでしょうか。

上記の操作の意味

  • グラデーションオーバーレイ
    文字を単色で塗る代わりに、金色っぽいグラデーションで塗ります。これだけでも雰囲気は出ます。
  • シャドウ(内側)
    文字の内側の上部を明るくすることで、金属が光を反射しているように見せます。
  • 光彩(内側)
    文字全体に明るさを与えることで、文字が光っているように見えます。
  • ベベルとエンボス
    文字を立体的に見せ、光沢感を出す操作です。

おすすめのスタイル「ドロップシャドウ」

最初からすべてを覚えるのは大変です。まず1つ扱えるようになりましょう。

おすすめは ドロップシャドウ という 影をつける スタイルです。このスタイルをWebデザインで上手に使うコツは さりげなく使う ことです。

良い使い方

  • 影の不透明度を落とす(目安:10~50%)
  • 影の色を濃くしすぎない
  • 影の距離は適切な理由がない限り小さくする
alt

避けたい使い方

  • 影が濃すぎる
  • 影の距離が大きすぎる

※写真の上に文字を乗せたいときなど、濃い影などが用途によっては適切な使い方になることもあります。

alt

Tips: とりあえず動かしてみる

レイヤースタイルの使い方を覚える良い方法は とりあえず設定のスライダーを動かしてみる ことです。例えばドロップシャドウを使えるようになりたいのであれば、「距離」や「スプレッド」などの項目を自由に動かしてみましょう。

「何をどのように動かすと、どんな変化があるのか」を目で見ると覚えやすいでしょう。

Photoshopの使用例

学習のモチベーションを高めることを目的に、資料BはPhotoshopの使用例の一部を紹介しています。余力がある方はご自分の写真を題材に真似してみてください。

この資料ではツールの使い方に細かく触れることはありませんが、気になる方は講師にお尋ねいただくかさらに調べてみましょう。

B-1 インスタ映えする画像にする(風景)

スマホで撮った画像を補正して、画像の雰囲気を変えてみたり逆光を補正したりしてみましょう。

「Camera Raw フィルター」を使う

以下の例は Camera Raw フィルター という機能を使っています。簡単に写真の雰囲気を変えることができる便利な機能です。

alt
alt

手順

  1. 画像をPhotoshopで開く
  2. メニューバー[フィルター]→[Camera Raw フィルター]をクリック
    ※Camera Raw フィルターを使用する場合、RGB画像である必要があります。
  3. 右側のスライダーを操作する
alt
alt

使いこなすコツ

それぞれのスライダーを 好み の位置にすることです。個人の写真の場合、補正に絶対の正解はありません。スライダーを自由に動かして、 自分が 「きれい」「かっこいい」と思う位置で止めましょう。

スライダーを自由に触って、「このスライダーを動かすとこんな感じに変化するのか」という経験を重ねると覚えも早いです。最初のうちは以下のスライダーを操作すると良いでしょう。

  1. 露光量
    明るさです。
  2. 明瞭度
    右に動かすほど画像がくっきりします。
  3. かすみの除去
    上記の富士山の画像のように逆光になっていたり霧がかかっている画像に効果を発揮します。
  4. 彩度、自然な彩度

下記の赤く囲っている部分のボタンを押すと、補正前と補正後のプレビューを切り替えることができます。

alt

やってみよう

イマイチな写りの画像を1枚選んで、自分が思う「かっこいい」「きれい」な画像に仕上げましょう。

B-2 インスタ映えする画像にする(料理)

左のパスタの画像を右のようにする手順を紹介します。

alt

1. 赤みを増やす

人間は暖色系を見ると食欲をそそられます。飲食店の店内に白熱球が使われていたり、飲食店のロゴに暖色系が使われていたりするのはそのような効果を狙っているのでしょう。

同じように、料理など食べ物の画像は 赤みを増やす(青みを取り除く) と美味しそうに見えます。まずはトーンカーブでR(赤色)を強くし、B(青)を弱くします。また、RGB(全体)を強くして少し明るさを持たせます。

alt

2. 葉っぱをみずみずしくする

赤を増やして青を減らすと、葉っぱは干からびたような色になってしまいます。そこで葉っぱだけを選択して、緑を強くしたり明るさを調節したりします。

alt
alt
alt

3. お皿を白くする

お皿が黄色っぽくくすんだ印象があるので、今度はお皿だけを選択して不自然にならない程度に明るくします。今回はパスタを選択した後、選択範囲を反転することでお皿を選択しています。

alt
alt

4. 全体を整える

これで完成でも良いのですが、パスタの右側の影が強く暗い印象があります。Camera Raw フィルターの シャドウ と 黒レベル 機能を使って暗い部分だけを明るくします。ついでに 露光量 もプラスにして明るく、 彩度 も少し上げて鮮やかにします。

alt

5. 完成

alt

やってみよう

自分で撮った料理の写真を題材にして、さらに美味しそうに見えるよう編集してみましょう。

B-3 細かい部分を選択する

以下の画像のような葉っぱが細かく入り組んだ部分を含む画像において、空の部分だけを選択する方法を紹介します。 髪の毛 などを選択するときにも応用できます。

alt

1. 大まかに選択する

自動選択ツールなどで、空の部分を大まかに選択します。

alt

2. 選択とマスク

選択とマスク を開いて、画面右の スマート半径 にチェックを入れ、すぐ上の 半径 を1~2pxに設定します。そのあと、画面左上のブラシのアイコンの上から2番目 境界線調整ブラシツール をクリックします。

alt

3. ひたすらドラッグする

空との境界部分 をドラッグします。Photoshopが色の違いを見て、細かい部分を自動で選択範囲に含めたり除外してくれます。

alt
alt

もっと細かい部分を選択したいときは、画面左上のブラシの設定でブラシの半径を小さくして対応しましょう。

alt
alt

4. 完成

選択とマスク機能を使うと、細かい部分も楽に選択できます。今回のような葉っぱや髪の毛などを選択したいときにぜひ活用しましょう。

alt

B-4 写真写りを良くする・人を若返らせる

筆者の顔写真を題材にして、Photoshopで写真写りを変える方法を紹介します。

「ゆがみ」機能

自動で顔を認識して、目鼻立ちなどを調整できる機能があります。

  1. メニューバー[フィルター]→[ゆがみ]

わかりやすくするためにかなり極端な設定にしていますが、さりげなく使えばバレることなく写真写りを良くすることができます。

ぼかしツール

ドラッグした部分だけがほける ぼかしツール を使うと、 シワを消す または 肌を滑らかにする ことができます。

  1. ツールバーの ぼかしツール alt をクリック
  2. オプションバーの 強さ を10~30%程度にする
    alt
  3. 滑らかにしたい部分を何度かドラッグする

顔全体をぼかしツールでドラッグして滑らかにしてみました。(わかりにくいかもしれませんが…)

オプションバーでぼかしが適用される 強さ を弱くし、繰り返しドラッグするのがコツです。強い設定で1回だけドラッグすると不自然になりがちです。Photoshopで加工をするときは、バレない程度にさりげなく行うことを目指しましょう。

さらにできること

顔が映った写真の印象を良くするために、以下のような操作も試してみましょう。

  • 画像を明るくする
  • 赤みを少し加える(血色を良くする)
  • 顔に落ちている影を薄くする
  • 歯の黄ばみを取る

B-5 不要な物体を消す

写真に写り込んだ不要な物体を消す操作を紹介します。

alt
alt

1. 大まかに選択する

消したい物体を大まかに選択します。なげなわツールが向いています。

消したい物体より 少し大きめに範囲選択する のがコツです。

alt

2. コンテンツに応じた塗りつぶし

「コンテンツに応じた塗りつぶし」機能を使うと、Photoshopが自動で周囲の画像を認識して、選択範囲を自然に塗りつぶしてくれます。

  1. メニューバー[編集]→[コンテンツに応じた塗りつぶし]
  2. そのままOKボタンをクリック
alt

今からプログラミングやるべき!IT業界求人率は右肩上がり。転職なら今だ!

まるでバブルがはじけたIT業界の向上と同じだようです。

こちらは転職サイトのDodaさんがまとめたものです

Sierのリストラも終盤へさしかかり、DX(デジタルトランスフォーメーション)やAIやデータサイエンスへ向かってあらたな時代を形成していく助走だと私は感じました。

この数値はIT業界の復活を示していると思います。【個人的見解】  2021.10.18

https://doda.jp/guide/kyujin_bairitsu/

LaravelでSNS認証を作ってみた

Laravelにソーシャル認証用のプラグインSocialiteをインストール

composer.jsonを編集して以下を追加します。

config/app.phpを編集して以下を追加します。

この後、composer updateします。

うまくいかない場合は、

conposer.lock と Venderフォルダーを削除し

conposer install

したほうが早いかもしれません。

Twitter、Facebook、Googleの管理画面から、クライアントIDとシークレットキーを取得

Googleの場合、https://console.developers.google.com/apis/library から、プロジェクトを作成します。

Spring boot 使ってみた

Spring Tool Suiteのダウンロード

Spring Tool Suiteは64bit版のJavaを使用している場合32bit版では動作しません。下記URLのページのトップのダウンロードでは、32bit版がダウンロードされるので、「See all version」から64bit版を探してダウンロードしましょう。

【Spring Tool Suite ダウンロード先】
URL : http://spring.io/tools

解凍すると「sts-bundle」というフォルダができるので、その中の「sts-*.*.*.RELEASE」⇒「STS.exe」を実行しましょう。

今回は空きのあるDドライブとしました。

早速起動しました

aws ec2 への vim インストール方法

dnf install vim-enhanced

root@ip-172-31-56-20 html]# dnf install vim-enhanced
Last metadata expiration check: 0:49:55 ago on Mon 08 Jun 2020 11:01:08 PM UTC.
Dependencies resolved.
================================================================================
 Package         Arch    Version              Repository                   Size
================================================================================
Installing:
 vim-enhanced    x86_64  2:8.0.1763-13.el8    rhel-8-appstream-rhui-rpms  1.4 M
Installing dependencies:
 gpm-libs        x86_64  1.20.7-15.el8        rhel-8-appstream-rhui-rpms   39 k
 vim-common      x86_64  2:8.0.1763-13.el8    rhel-8-appstream-rhui-rpms  6.3 M
 vim-filesystem  noarch  2:8.0.1763-13.el8    rhel-8-appstream-rhui-rpms   48 k

Transaction Summary
================================================================================
Install  4 Packages

Total download size: 7.8 M
Installed size: 30 M
Is this ok [y/N]: y
Downloading Packages:
(1/4): vim-filesystem-8.0.1763-13.el8.noarch.rp 352 kB/s |  48 kB     00:00
(2/4): vim-enhanced-8.0.1763-13.el8.x86_64.rpm  7.3 MB/s | 1.4 MB     00:00
(3/4): gpm-libs-1.20.7-15.el8.x86_64.rpm        349 kB/s |  39 kB     00:00
(4/4): vim-common-8.0.1763-13.el8.x86_64.rpm     22 MB/s | 6.3 MB     00:00
--------------------------------------------------------------------------------
Total                                            19 MB/s | 7.8 MB     00:00
Running transaction check
Transaction check succeeded.
Running transaction test
Transaction test succeeded.
Running transaction
  Preparing        :                                                        1/1
  Installing       : gpm-libs-1.20.7-15.el8.x86_64                          1/4
  Running scriptlet: gpm-libs-1.20.7-15.el8.x86_64                          1/4
  Installing       : vim-filesystem-2:8.0.1763-13.el8.noarch                2/4
  Installing       : vim-common-2:8.0.1763-13.el8.x86_64                    3/4
  Installing       : vim-enhanced-2:8.0.1763-13.el8.x86_64                  4/4
  Running scriptlet: vim-enhanced-2:8.0.1763-13.el8.x86_64                  4/4
  Running scriptlet: vim-common-2:8.0.1763-13.el8.x86_64                    4/4
  Verifying        : vim-filesystem-2:8.0.1763-13.el8.noarch                1/4
  Verifying        : vim-common-2:8.0.1763-13.el8.x86_64                    2/4
  Verifying        : vim-enhanced-2:8.0.1763-13.el8.x86_64                  3/4
  Verifying        : gpm-libs-1.20.7-15.el8.x86_64                          4/4

Installed:
  gpm-libs-1.20.7-15.el8.x86_64         vim-common-2:8.0.1763-13.el8.x86_64
  vim-enhanced-2:8.0.1763-13.el8.x86_64 vim-filesystem-2:8.0.1763-13.el8.noarch

Complete!
[root@ip-172-31-56-20 html]# 

プログラミング学習の講師になるには

はじめに

教育に携わりたいと思い、まずは関わることのできる企業を調査しました。

ちなみに、どこかと契約してしまうとそこを辞めても辞めた後3年間は競合他社と契約できなくなる可能性があります。契約書に含まれているかどうかよく見て慎重に決めた方が良さそうです。

調査方法としては下記です。

  • 募集サイトを見る
  • カンファレンス等で企業ブースで話しを伺う
  • 応募して面接時に詳しく聞く

注意事項

現在は常に新たな教育スクールが立ち上げっております。個人での調べですので情報が更新されている可能性もあります。現在の情報は公式の情報に当たってください。

自分がやる前提で情報収拾したため情報にバイアスがかかっていると思います。情報が少ない企業は、自分の勤務条件に合わなかったり、探すのをやめた後だったなどの理由によるもので、問題があったわけではありません。 念のため企業選びにおける自分の軸を書いておきます。

  • 副業としてやる (もしメインにするとしても、開発業務と兼務したい)
    • 仕事では 40年のキャリアがある
    • 理由: 教えることの取捨選択が大事だと思っていて、その取捨選択の判断軸の一つとして「実際の現場ではどうか」もある。”実際”というのは移り変わるものなので、現場から離れたら、自分の考える”実際の現場”の知識が、時代遅れであったり現実と離れた”想像の現場”となってしまいそうで怖い。
  • 企業としても生徒に真摯に向き合っていること
    • 本当にそのカリキュラムでその生徒の目的が達成できるのか
  • 本業に影響を及ぼさない (ただし、本業は完全フレックスなのである程度柔軟にスケジュールは組める)
    • シフト時間外の業務が(緊急時以外)発生しない (「質問が来たら数時間以内に返事する」といった要件がある企業もあるので)
  • やることに対して収入が低すぎない
    • オンラインプログラミングスクールの市場の給料としては 1600~2000円/時 が相場とのことでした

企業紹介

TechAcademy

プログラミング講師(メンター)募集 | TechAcademy テックアカデミー

業務

業務としては 3 種類です。

  • メンター (1対1で) ビデオチャット
    • カリキュラムや教材が準備されている
    • 一人の生徒を一貫して一人のメンターが見る
  • Slack 上で質問対応
  • 課題をレビューする

動画が公開されています。

TechAcademy メンター業務オリエンテーション動画 – YouTube

ただし、 動画内容の中で一つ変更点があり、「時給については研修時給が廃止になり、プログラミング系は一律時給1600円スタートとなります。」とのこと。

稼働時間

  • 週 4 時間以上
  • シフト時間外での対応はない

給料

  • 時給: 1600 ~ 2500 円 (最初は一律 1600円)
    • 現在の講師の大部分は時給 1800~2000円
  • 年二回昇給
  • 稼ぎたいよりも教育事業をしたい人

侍アカデミー

生徒さんをサポート!プログラミングスクールのインストラクターWANTED! – 侍エンジニア塾のエンジニア中途・インターンシップ・契約・委託の求人 – Wantedly

メンターに任せる部分が多いので、教育者としてがっつりやりたい人は良いと思います。

業務

  • マンツーマン指導
  • ざっくりとしたカリキュラムはあるがメンターに任せる
    • 「カリキュラムはあるにはあるが、生徒に合わせてメンターが教えることを決める。宿題とかもメンターの裁量で適時だす」とのこと
    • 個人でプログラミング教室を開いている人と生徒とのマッチングサービスに近そう
  • 90分/週 (1回90分)
    • 期間: 1 ヶ月, 3 ヶ月, 6 ヶ月
  • オンラインか実際に会うかはメンターと生徒に任せる
  • 講義とは別に、質問を随時受け付ける
    • 数時間以内に回答
    • 回答に使った時間も時給は出る
  • 受け持つ生徒の決め方
    • 会社側で生徒と面談 (60~90分くらい手厚くやる)
    • 面談の結果、要望等をメンター陣に伝えて募集する

稼働時間

  • 1 人につき 90分/週 (1回90分)
  • 随時質問を受け付け、数時間以内に返答

給料

時給: 2000円

GEEK JOB

プログラミングの楽しさを伝える!空き時間に『教える』仕事やってみませんか? – グルーヴ・ギア株式会社のWeb エンジニア中途・インターンシップ・契約・委託の求人 – Wantedly

CodeCamp

プログラミング講師募集 | CodeCamp ネット上の情報のみ記載します。

業務

  • メンター (1対1で) ビデオチャットで講義
  • カリキュラム・教材が用意されている

給料

  • 時給: 2700 ~ 4200 円 (これは正社員も含めたものなので、副業のメンターとして契約する場合の実態は不明)
    • 2018/3月に見たときは 2000 ~ 5000 円だったような??

ジーズアカデミー

講師採用|採用情報|デジタルハリウッド株式会社

業務

  • 副業かつオンラインを希望する場合、卒業課題としてアプリを作る過程があり、そのときのメンターとして勤務できる
  • 土日だけ、夜だけなども可能

カサレアル

技術研修講師 | 募集要項 | 株式会社カサレアル 採用情報

副業としてやるのは想定してなさそうでしたが、ブースで直接話しを聞けたので書いておきます。
関わり方等、柔軟に対応していただけるようです!

業務

  • 企業向けの研修
  • カリキュラムの企画~実施、評価
    • 他の会社でのメンターだと用意されているカリキュラムに沿って授業することが多いので、企画からやりたい人とかは良さそう
  • 教育された講師が在籍している
    • Apple でのプログラミング教育者の認定

アイデミー

AIのプログラミング学習サービスでは業界最王手の会社でスキルアップを目指すなら、アイデミー!| 採用情報

業務

業務としては 3 種類です。

  • 受講者の方のSlack上での質問対応
  • 受講者の方に提出していただいたコードの添削
  • コンテンツの編集

稼働時間

週 1日からOK
基本となる曜日プラス希望の日にちに業務に入っていただく形になります。

給料

時給: 1200 ~ 3000 円 (基本時給プラス成果報酬)

サポーターズ CoLab

サポーターズCoLab – 若手エンジニアが「技術でつながる」仲間探しサービス

ほかのサービスと違い、プログラミング教育を一貫してやるのではなく単発の勉強会を開催しています。(実際は教育メインの会社ではなく、サービスの一環なのだと思います)

若手(20代とのこと) を対象とした勉強会の講師として 1, 2 時間話す仕事をもらえます。

勉強会やカンファレンスで発表しても賃金が発生しないことが多いので、講師として謝礼がもらえるのは珍しいと思い記載しました。

まとめ

「プログラミング メンター募集」と検索すると数社しか出ないのですが、意外とたくさんありました。

似てるように見えても授業方針や雰囲気が違うので、それぞれの会社に実際に聞きまわってみるのは大切ですね。

「IT企業にブラックが多い」は間違っている【ブラック企業のデマに恐れるな!】

はじめに私の所感

私は40年間ITの世界で飯を食っている人間です。現在はフリーランスでプログラミング開発が好きでたまらないのでいまだに現役です。会社勤めは数百名~10万人の大企業からスタートアップ企業とWeb開発企業まですべて経験してきました。役員経験も2社あります。実は本当のブラック企業を実体験してきております。しかし 2020年4月以降はブラック企業は存続できない点をご説明したいとおもいブログへ記載いたしました。

ブラック企業の定義は存在しない

ブラック企業の線引きは実は存在しません。労働者の感じ方で論じられることが多いことが実態です。プログラム初めて数か月で仕事などできるはずがない現実があります。しかしyoutubeやSNSなどでIT企業は人材不足で誰でも稼げると偽りの情報が出回っていることは皆さんもご存じのとおりです。ワーカー(考えなくても行える作業)作業をなくすためにプログラムを使って業務効率化を行っている業種にもかかわらず、新たな創造ができない労働者は必要であるはずがない世界である。私はプログラミングの世界で40年間頑張り続けているが、楽でない仕事は普段から身にしみて感じている。たくさんのゴールドラッシュのデマに載せられてこられた方たちがうまくいかなくなって「ブラック企業」だと逃げている部分の比率は多いと感じております。数年間修行を行ってからがIT人材不足カバーの適応者になるのです

IT業界は現在の仕事が行き詰ってから転職する業種ではない

プログラムを通じて人が豊かになることを生きがいにできるひとが、IT業界へ来てほしいと思っております。能力云々ではなく自分はプログラムが好きで生業にしたいという強い意志を持っている方が来るべき業種だと筆者は考える。プログラミング言語を最低3つは習得していないと仕事にならないという現実に目をそむてても仕方がないです。うまくいかない。面白くない現実から逃げてくる業種ではない点をまずは理解しましょう。

プログラミング作業は実は仕事の20%満たない点とSES契約が多い実態を知らない。【SES契約=ブラックではない】

SES契約はブラックだとよく話を聞くが、ではお客様からプログラムを作ってほしいと依頼を受けた際に、どのような企業風土がありどのようなシステムがお客様へあっているか調査が必要です。調査期間は一定の費用では見積れないためにお客様へのヒアリングから要件定義の整理はかかった時間は事前に見積もることはむつかしく、かかった時間で請求することが多いはずである。この調査期間は大きなシステムはSES契約となる。その後にシステムの規模が確定して後工程を見積提出となり、受託契約となります。またシステムが完成しお客様へ納品し運用を手伝う作業も見積れないのでSES契約です。この期間や設計やテストや納品後の運用フォローなどはコーディング作業ではありません。世の中のプログラミングスクールや学習サイトでは勉強できない工程が実は80%占めているのです。実際プログラミングはわずか20%満たないという現実をしらないままIT業界へ入ってくるかたが多いことのギャップも「この会社はプログラミングできないんだ。やりたいことができないじゃん」という結論へ結びつける方や修行する期間が我慢できない方もいるはずだと思います。

またWeb開発企業(ヤフーやメルカリなどの、商品ネット販売のためにプログラム開発を行う企業)は、社員以外はWeb企業内で集まってSES契約で作業を行っている実態があります。Web開発企業は、ブラックと言われていないのは筆者から見れば矛盾で仕方がないのです。

また自社開発(自社製品)企業も、お客様への導入作業はSES契約である点も矛盾なのです。これら誤解もブラック企業だー!としわ寄せされているのではないでしょうか。

労働省ブラック企業リストにはIT企業は少ない

IT企業は楽な仕事ではない点を説明してきたわけだが、根拠は「電通女性の過労死自殺」より過重労働を徹底的に労働省はマークしてきている。労働基準法も改定されて法的にも過重労働を取り締まれることになった。2020年4月に労働基準法の改正で残業時間の上限規制が義務付けられたのです。

法律で残業時間の上限は月45時間・年360時間に改正 されています

いずれにしても、1ヶ月の労働日数を約20日とすると、1日の残業時間の上限は約2時間程度です。以前は上限規制はなかったことは事実ですので、 2020年4月 以前のIT企業体質をブラック企業と言われてるはずです。私はいまはできないとみなさんへ説明しているのです。

実際に、「ブラック企業リスト」を確認していただきたい。

https://www.hwiroha.com/ihann.html

私の見た感じだとIT企業は皆無なのです

それでも「ブラック企業」は実在するといわれる方へ

確かに私の見えないところで実在するかもしれませんが、証拠がないことを理解してください。現在は労働基準監督署へ匿名でも申告できることを知らない方が多いことが原因かもしれませんが、ブラック企業と戦うことは放棄しないでほしい。ということが私の言いたいところです。IT業界は人材で成り立ってます風評被害をもっとも怖がっているのです。見かけたならば労働基準監督署へ申告するように助言してあげてください。過労によるうつ病や過労死や自殺のない世界としたいことも、私は願っているのです。

労働基準監督署はみなさんの味方です

平 成 3 1 年 4月 1 日に厚生労働省から「

裁量労働制の不適正な運用が複数の事業場で認められた企業の経営ト
ップに対する都道府県労働局長による指導の実施及び企業名の公表に
ついて」が提示されてます。徹底的に労働者を守る行動を行ってきているのです

https://www.mhlw.go.jp/content/000473538.pdf

みなさんへお願い

ブラック企業かどうかは見極めはむつかしいです。もしも入社後、過重労働やパワハラなどに遭遇しましたならば、記録をとってください。

毎日の残業時間。どの上司から何を言われたのか。きちんと記録をとることでブラック企業かどうかの判断ができます。その記録は未払い賃金として帰ってきます。また同じ思いをされる社員をなくすことができます。ブラック企業リストへ乗せてから再度転職しましょう。戦うことをお願いいたします。それまでの経験はきちんと業務経歴へ残せますのでより良い会社へ転職できます。下記の労働時間オーバーがブラック企業です。

繁忙期などのやむを得ない特別な理由があれば、例外として上限を超える残業が認められます。ただし、あくまで1年のうち6カ月に限ります。また、以下の範囲内と定められています。
・時間外労働 :年間720時間以内
・時間外労働+休日労働:月間100時間未満
・時間外労働+休日労働 :2カ月〜6カ月の複数月の平均80時間以内