この記事を読めば、はじめてのphotoshopでも使い方を覚える事が簡単になります。
Photoshop使用歴8年の私が、初心者の方がはじめに抑えておいた方が良い事を書きました！
最初にPhotoshopの機能説明、後半で実際にPhotoshopを使った画像の加工について解説していきたいと思います。
「Photoshpを使いこなしたい！」と思っている方は、ぜひ読んでみて下さいね！

Photoshopについて初心者が抑えておきたい事

Photoshopは様々な機能があり大変便利なツールですが、少し難しい印象を抱いている人も多いのではないでしょうか。
初心者の方は、いきなりPhotoshopを使ってみるよりも、はじめに抑えるべき事を知る事で、その後の学習や習得がスムーズになります。
では、どんな事を抑えておくのが良いのでしょうか。
初心者の方が最初に知っておいた方が良い基本知識を以下にまとめました。

【Photoshopについて初心者が抑えておきたい事】

ここからは、それぞれの項目について、具体的に説明していきます。

登場キャラクター：

ねずみ先輩

ねずみ先輩：動物デザイン学校に通っている生徒。
Photoshopにとても詳しい頼れる先輩。

ねこ子さん

ねこ子さん：動物デザイン学校に入ったばかりの生徒。
Photoshop初心者。ねずみ先輩の後輩。

Photoshopとは何か

ねこ子さん

Photoshopって、そもそも何ですか？

Photoshopとは、Adobe社が提供している画像編集ソフトです。
写真の加工や合成等に使える、様々な機能が搭載されており、画像編集をする人には欠かせないソフトです。

Photoshopを使うには、Adobeのアカウントを取った後に、ソフトをPCへインストールする必要があります。
以前はAdobe Creative Suite（通称：CS)という買い切りの製品版がありましたが、現在はサブスクのAdobe Creative Cloud（通称：CC)に移行している為、ソフトを使うには、月額または年間のプランに入会する必要があります。

ねずみ先輩

その他、会社には法人向けのプラン、学生や教員には教育機関向けのプランもあるよ！

製品版とサブスク版の違いですが、サブスクはリリースごとに新機能がアップデートされていきます。
リリースの度に新しく購入する必要がないのは嬉しい点ですよね。

Illustratorとphotoshopの違い

ねこ子さん

Illustratorってソフトも良く聞きますけど…Photoshopとの違いは何ですか？

ねずみ先輩

IllustratorもPhotoshopと一緒に使われる事が多いソフトだよ。大きく異なるのは、それぞれのソフトで画像の表現の仕方が違う事

Illustratorがベクトル画像という、線や点をコンピュータが数値化して表現しているものに対して、Photoshopはビットマップ画像という、点描の様なドットの集まりで表現しています。
詳しく知りたい人は下の図も参考にしてみて下さい。

【ベクトル画像とビットマップ画像の違い】

ベクトル画像

Illustratorで使用されている画像表現方式。線と点をコンピュータが数値化している為、拡大してもぼやけない。

ビットマップ画像

Photoshopで使用されている画像表現方式。点の集まりで構成されている為、拡大するとぼやける。

Illustratorで出来る事、photoshopで出来る事

ねこ子さん

結局、自分が作りたいものはIllustratorとPhotoshop、どっちで作ればいいんでしょうか？

ねずみ先輩

ザックリ言うと、Photoshopが得意なのは画像の編集、Illustratorが得意なのは平面的な図形の配置だよ。以下で実際の制作物を参考に、それぞれのソフトが得意なものをみていこう。

それぞれのソフトが得意な制作物の例

【Illustratorが得意とする制作物の例】

【Photoshopが得意とする制作物の例】

実際の現場ではどう使っている？

ねずみ先輩

実際にはIllustratorでロゴを制作し、Photoshopでそのロゴをメタリック加工する等、2つのソフトを組み合わせて使うパターンもあるよ。

photoshop elementsと、photoshopとの違い

ねこ子さん

『Photoshop elements』っていうソフトも良く聞きますが、Photoshopとの違いは何ですか？

Photoshop elementsは、Photoshopの簡易バージョンのソフトです。
Photoshop elementsは比較的安価で購入出来、Photoshopよりも操作が簡単で使いやすいという違いがあります。
しかしPhotoshopに搭載されている一部の機能が使えない為、本格的に画像編集をしたい人はPhotoshopの購入を検討した方が良いでしょう。

おすすめ記事

【解説つき】photoshopエレメンツでできる写真加工と使い方

Photoshopは無料アプリでも使える？　Photoshop Expressの紹介

ねこ子さん

いきなりPhotoshopをインストールするのは勇気がいりますね……まずはお試しで無料で使えるソフトはないですか？

ねずみ先輩

そういう人向けに、スマホ用のPhotoshop Expressという無料アプリ＊があるよ！
＊一部アプリ内課金あり

Photoshop ExpressはApple AppやGoogle Playで無料ダウンロードが可能で、スマホ上でPhotoshopの一部機能を簡易的に体験する事が出来ます。

ねずみ先輩

ただ、もちろんPhotoshopより出来る事は少ないので、お試しで使用したい方向けだよ。

おすすめ記事

Adobe Photoshop Expressアプリの使い方！初期設定、ログイン方法と画像の調整、コラージュ作成などの機能を紹介！

photoshopの様々な機能一覧

ねずみ先輩

Photoshopには様々な機能があるよ。ここではその機能を一部だけ紹介していくよ。

レタッチ機能

人物の肌等を明るくしたり、そばかすを消したりする事が出来ます。

グラデーション機能

グラデーションを使って写真やデザインを彩る事が出来ます。

フィルター機能

あらかじめ搭載されている特殊効果（フィルター）を使って画像を絵画やモザイク画の様に加工出来ます。

ブラシ機能

様々な種類のブラシを使用して、ソフト上で絵画をペイント出来ます。

ねずみ先輩

ここで紹介したものは機能のほんの一部。画像編集に関するありとあらゆる事がPhotoshop1本で出来るよ！

photoshopを使った実際の活用方法

ねこ子さん

なるほど～Photoshopが便利な事は分かりましたけど、実際にはどんな方法で活用されてるんでしょうか？

ねずみ先輩

機能だけ説明されても実感がわかないよね。ここからは身近な制作事例を元に、Photoshopの実際の活用方法を紹介するよ！

【活用例１：イラストの制作・加工】

ブラシや鉛筆ツールを使いイラストを制作したり、イラストの加工を行う事が出来ます。

【活用例２：Youtubeのサムネイル】

Youtube用の目を引くサムネイルを作る事が出来ます。有名YoutuberもPhotoshopを使用してサムネイルを作っています。

【活用例３：コスプレ写真の加工】

キャラの雰囲気や、物語の世界観を表現する人物写真の加工がPhotoshopで出来ます。

photoshopの使い方１：初心者が覚えたい３つの基本操作

ねこ子さん

Photoshopの機能を知ったら、実際に使ってみたくなりました！

ねずみ先輩

それでは実際に操作について説明していくね。ここからはPhotoshopの3つの基本操作について解説していくよ！

【初心者が覚えたい３つの基本操作】

ねずみ先輩

次からそれぞれ、詳しく説明していくよ

①画像の明るさ調整

まず覚えたいのが「画像の明るさ調整機能」です。Photoshopでは様々な機能を使用し、明るさが調整出来ます。

ねずみ先輩

Photoshopで使う明るさ調整機能の、代表的なものを３つ紹介していくね。

【Photoshopの代表的な明るさ調整機能３つ】

①明るさ・コントラスト

明るさとコントラストの２つのスライダーを使って調整する機能。

②レベル補正

その写真のヒストグラム（ドットの諧調を集計したものをまとめたグラフ）を使用して調整する機能。

③トーンカーブ

ヒストグラム内で指定した部分だけを調整出来る機能。

②トリミング

ねこ子さん

そもそもトリミングって何ですか？

ねずみ先輩

トリミングとは、写真や画像の一部だけを切り出す加工の事。トリミングの方法について詳しく解説していくね。

トリミング：画像の一部分を切りぬく方法

①切り抜きツールを選択

②切り抜くサイズを調整

③○を押す

④完成

③画像保存

ねずみ先輩

画像の明るさ調整や、トリミングが終わったら、画像を保存していくよ。
Photoshopで出来る画像保存には複数の方法があるけれど、ここではその中の「別名保存」のやり方について解説していくよ。

別名保存の方法

①ファイルから「別名で保存…」を選択

②コンピューターに保存を選択

③拡張子を選ぶ（ここではJPEG）

④保存を押す

保存時の注意点！拡張子とは

ねずみ先輩

画像を保存する時には適切な形式の拡張子を選ぶ様にする事が大事だよ。

ねこ子さん

そもそも、拡張子って何ですか？　色んな種類があるけど、何を選べば良いんでしょうか？

ねずみ先輩

拡張子の種類は色々あって迷うよね。次から拡張子の概要について解説するよ！

【拡張子とは】

拡張子とは、コンピューターがファイルの種類を認識する為の文字列の事。拡張子を変える事でファイルの性質が色々変わる。

【画像の拡張子一覧】

• jpg（ジェイペグ）
  一般的に写真に用いられる。人物やグラデーション等の色数の多い画像表現向き。
• png（ピング）
  ロゴマークやアイコン等に用いられる。背景が透過される。
• gif(ジフ)
  動く（アニメーションする）画像に用いられる。色数が少ないので、グラデーション等には不向き。
• psd（ピーエスディー）
  Photoshopのファイル形式。画像を再度編集したい際にはpsdで保存する。

Photoshopのワークスペースの名称をざっくり紹介

ねこ子さん

ワークスペースって何ですか？

ねずみ先輩

ワークスペースはPhotoshopの作業画面の事。ここからは、Photoshopのワークスペースについて説明していくよ！

【Photoshopのワークスペース】

おすすめ記事

【Photoshop入門】ワークスペースとは？基本的なパネルや設定方法を解説！

photoshopのツールの名称一覧

ねこ子さん

ツールって何ですか？

ねずみ先輩

ツールは、Photoshopのデザインや画像加工で使う様々な道具の事。
Photoshopのツールバーには、様々なツールが入ってるよ。
ここからはよく使われるツールを一覧で紹介していくよ。

最初は全部覚えなくてOK!

ねずみ先輩

ちなみに、ここで紹介しているのはまだツールの一部分。実際にはもっとたくさんの機能があるよ。

ねこ子さん

ツールの種類が多くて覚えるのが不安かもしれません……

ねずみ先輩

はじめに全部覚えなくても大丈夫！　Photoshopを使っていくうちに自然と覚えていけるようになるよ。

おすすめ記事

【保存版】Photoshopツールバーの使い方：全ツールの説明付

新規作成とカラーモード

ねずみ先輩

Photoshopで作業する時は、最初にまず「新規ファイルの作成」を行うよ。ここからは新規ファイルの作成の仕方を見ていこう。

【ファイルの新規作成】

①Photoshopを立ち上げる（アイコンをWクリック）

②ファイル→新規

③各種設定をしてから→作成を押す

【各種設定】について

【カラーモードについて】

ねこ子さん

カラーモードって何ですか？

ねずみ先輩

そのファイルで使用する色の表現方法の事だよ。

ねこ子さん

なるほど。カラーモードは何を選べばいいんですか？

ねずみ先輩

カラーモードは、出力する媒体に応じて選択するよ。具体的には、印刷物の場合CMYK、Web用画像の場合RGBに設定するよ。

RGBとCMYKの違い

RGB：Webで使用されるカラーの基準。R（レッド）G（グリーン）B（ブルー）の光の三原色で構成されている。
CMYK：印刷で使用されるカラーの基準。C（シアン）M（マゼンタ）Y（イエロー）の色料の三原色に、K（黒）を足したもので構成されている。

photoshopの使い方２：人物を切り抜きする方法

ねずみ先輩

次は人物の切り抜きについて説明するよ。こんな感じで、人物のみを切り抜きたい時に使う方法は２つあるよ。

人物のみを切り抜きたい

【人物のみを切り抜く方法2つ】

①選択ツールで選択する

背景が1色の場合「選択ツール」を使用して背景のみを選択した後デリートすれば、簡単に人物の切り抜きが可能です。

選択ツールの機能一覧

ねこ子さん

選択ツールって何ですか？

ねずみ先輩

選択ツールとは、人物や背景を選択する為のツールの事。Photoshopには様々な選択ツールが用意されているよ。それぞれ見ていこう。

おすすめ動画

れっくぷらす / Rec Plus

②ペンツールで選択する

ねこ子さん

この写真の様に複雑な背景の場合、選択ツールで一括で背景を選択する事が出来ないのですが……。

ねずみ先輩

複雑な背景の場合、選択ツールを使用せず「ペンツール」を使用して切り抜きを行うよ。やり方を詳しく解説していくね。

①ペンツールを選ぶ

②人物の輪郭線に沿ってなぞる様に、ペンツールで囲う

③選択範囲を作成する

【選択範囲の作成方法】

①パスパネルから、作成したパスを選択

②選択範囲を作成

③選択範囲が作成された

応用：髪の毛等細かい切り抜きがうまくいかない時に……選択とマスク

ねこ子さん

髪の毛とか、ペンツールで囲うのが難しい細かい部分はどうすればいいんですか？

ねずみ先輩

そんな時は『選択とマスク』という機能を使うよ。

【選択とマスクとは】

髪の毛等の境界線が曖昧な箇所を識別して細かく切り抜く機能。

選択とマスクの使い方

①選択範囲→選択とマスクを選ぶ

②境界線ブラシツールを選択

髪の毛等の細かい部分を選択する

おすすめ参考サイト

使わざるをえない！正確に、すばやく画像を切り抜ける最適なテクニック「選択とマスク」

④選択範囲を反転する

ねこ子さん

うまく人物の形に選択できました！　でも、この後はどうすれば……？

ねずみ先輩

選択範囲を反転して、背景のみを選択している状態にしていくよ。

【選択範囲の反転】

①人物が選択された状態

②選択範囲→選択範囲の反転

③選択範囲が反転された

⑤背景の削除

ねずみ先輩

背景のみが選択されている状態になったら、デリートキーを押して背景を削除してみよう。

【背景の削除】

①デリートキーを押す→背景が消える

②選択範囲→選択を解除

③選択が解除された

応用：合成の方法

ねずみ先輩

背景が消えている状態で、後ろのレイヤーに画像を配置すると「合成」ができるよ。

【合成の方法】

①背景に合成する画像を読み込む

②読み込まれたら「〇」を押す

③レイヤーの順番を変更する

④背景が合成された

レイヤーとは

ねこ子さん

ちなみにレイヤーって何ですか？

ねずみ先輩

Photoshopでレイヤーは、重ねられたシートの事を指すよ。透明な部分は透過されて、下のレイヤーが透けて見える様になるよ。

【レイヤーとは】

重ねたシートの様なもの。透明部分は下のレイヤーが透けて見える。

おすすめ記事

Photoshopのレイヤーとは？初心者でも分かる使い方

photoshopの使い方３：Youtubeのサムネを作る方法

ねずみ先輩

Youtubeでよく見るサムネイルも、Photoshopで簡単に作る事が出来るよ。ここからはサムネイルの作り方を説明していくね。

完成図

①文字を打つ

まず、文字を打ちます。

【文字の打ち方】

①ツールパネルから、横書き文字ツールを選ぶ

②写真の上に文字を打ち込む

②文字サイズ、フォント、カラーを調整する

次に、文字サイズとフォント、カラーを調整していきます。

【文字サイズ、フォント、カラー調整】

①打った文字を選択し、文字パネルで任意の文字サイズを入れる

②文字パネルで、任意のフォントを選択する

③文字を選択した状態でカラーを変更する

③フォントにエフェクトを加える

ねずみ先輩

最後に、フォントに加工を加えればサムネイルの完成だよ。

【フォントに加工を加える】

①レイヤーパネルで、フォントのレイヤーをWクリックする

②レイヤースタイルのパネルが表示されるので「境界線」にチェックを入れ、任意の境界線のサイズやカラーを入れてOKを押す

③境界線が足され、サムネが完成した

ねずみ先輩

Photoshopをマスターすれば、もっとクオリティの高いサムネイルを作る事も可能だよ！

おすすめ動画

かふたろう / Cuff Style

Photoshopのおすすめ勉強方法

ねずみ先輩

ここまで駆け足で、Photoshopの基本操作について説明してきたけど、どう？

ねこ子さん

う～ん。楽しそうだけど、いきなり制作物を作るのはやっぱり難しそうです……

ねずみ先輩

そんな時は、まず書籍や動画のチュートリアルで勉強すると良いよ。

【Photoshopのおすすめ勉強方法】

①書籍で使い方を勉強する
②動画で使い方を勉強する

ねずみ先輩

それぞれの勉強方法について、詳しく説明していくね。

Photoshopのおすすめ勉強方法１：書籍で使い方を勉強する

ねずみ先輩

おすすめの勉強方法１つめは、書籍で基本的な操作の方法を学ぶ事。

操作を１から解説している書籍を選べば、初心者の方も段階的にステップアップしていく事が可能です。
また書籍の中にはチュートリアル素材がセットになっている事も多いので、実際にソフトを使いながら勉強する事もできます。

おすすめ書籍の紹介

おすすめの書籍は「Photoshop®クイックマスターCC」です。
この書籍は基本的な操作を学べる他、「Photoshop®クリエイター能力認定試験」という資格試験の対策もできる構造になっています。基本操作を学びながら、試験の勉強も出来るので資格が欲しい方に特におすすめです。

ねずみ先輩

資格を取る事を目標にすると、早くスキルアップ出来るのでおすすめ！

おすすめ書籍

Photoshop® クイックマスターCC

Photoshopのおすすめ勉強方法２：動画で使い方を勉強する

ねずみ先輩

おすすめの勉強方法２つめは、動画で操作方法を勉強する事。

Photoshopの操作は複雑な部分も多いので、解説動画で流れを見ながら勉強するのが効率的です。

今はYoutube等にも初心者向けから上級者向けまで、多くのチュートリアル動画が上がっているので、ぜひ学習に役立ててみて下さい。

おすすめYoutube動画

Mappy Photo

おすすめの動画サイトの紹介

おすすめの動画サイトはAdobeの「Photoshop チュートリアル」です。
Adobeの公式サイトなので、見やすくて分かりやすくい、高クオリティの動画が多いです。
高いクオリティにも関わらず、無料で閲覧する事が出来ます。

おすすめ動画学習サイト

Photoshop チュートリアル

まとめ：Photoshopを使いこなそう！

Photoshopの使い方について、初心者の方が知っておきたい事を、ざっくりと解説してきました。

ねずみ先輩

今回ご紹介してきた内容は、あなたが実際にPhotoshopを使用する際に、きっと役に立つと思います！

難しいと思われがちなPhotoshopですが、写真加工やデザインで使える機能の種類の豊富さは随一で、使い始めれば様々な創作の可能性が広がります。
ぜひPhotoshopを使いこなし、あなたの創作ライフにお役立てください！

ねこ子さん

最後までお付き合い頂き、ありがとうございました！

ねずみ先輩

応援しています！

関連リンク：
Photoshopの使い方記事一覧

実は、POPやチラシを作るツールとしても優秀なポテンシャルを発揮してくれます。

今回は始めてPOPやチラシを作ってみようと考えた方に、作る際に使える

• • 簡単な文字加工（フチ付け・アーチ変形）の方法
  • 文字を書き換えるだけでそのまま使えるテンプレート

等をまとめました。

パワーポイントで文字を加工する

まずは、よく使う簡単にできる、文字にフチを付けたデザイン加工や文字をアーチ状にする方法をご紹介します。

文字に縁取り文字（袋文字）を付ける

文字の色と背景の色が同じで見辛い！または文字を目立たせたい場合

1. 1. フチを付けたい文字を選択する
   2. リボン内の書式タブの「文字の輪郭」をクリック
   3. 文字の枠の色、太さ（1～2pt）を選択する

もっとフチを太くしたい場合

先ほどのやり方でフチを太くすると、文字自体にフチが侵食してくるため、本来の色がフチの色で埋まってしまい、文字がつぶれてしまうため、注意が必要です。

文字を複製して重ねるやり方で回避することができます。

1. 1. 太くしたい文字列を複製する
      
   2. 複製元の文字に縁取りをつける
      
   3. 文字を重ねる
      

文字をアーチ状にする

1. 1. 変形したいテキストボックスを選択する
   2. リボン内の書式タブの「文字の効果」をクリック
   3. 「変形」を選択、「枠に合わせて配置」から「アーチ」を選択する
      

※同様に他のパターンを選択することで「波状」や「円状」に文字を変形・配置することが出来ます。

テンプレート

テンプレートとは

無料のテンプレートサイト「パワポン」

https://ppon.askul.co.jp/

実はパワーポイントには、テンプレートという文字だけ変えれば素敵なPOPやおしゃれなチラシを作れる雛形が存在しています。

テンプレートをダウンロードして、文字の部分をパワーポイントで変更するだけなので、とっても簡単です。

早さ重視の場合は、一から作るよりテンプレートを使うほうがより効率的です。

さらに文字加工と合わせて使えば、他とはちょっと違うオリジナルなデザインになると思うのでぜひ挑戦してみてください！

テンプレートの詳しい説明、使い方、おすすめなテンプレートをダウンロードできるサイトを厳選してまとめた記事があったので「テンプレートって具体的にどういうもの何かな？」「使ってみたい！」という方はこちらをお勧めいたします。

パワーポイントでチラシを作る6ステップ！テンプレートサイトも紹介

https://deal-always.com/flyer-powerpoint

まとめ

• • パワーポイントの文字は色々な加工（袋文字・アーチなど）ができる。
  • パワーポイントではテンプレートという雛形を使って、簡単に高速でチラシや広告・案内が作成できる。

世の中のデジタル化が進む昨今、IT業界の市場規模は年々拡大し今後も成長が期待されています。

また、2019年から猛威を振るっている新型コロナウイルスの影響を受けリモートワーク化が叫ばれている中注目が集まる職種の1つがWebデザイナーです。

場所に縛られずに仕事ができるWebデザイナーにあこがれを持った人も少なくないのではないでしょうか。そこで今回は未経験からWebデザイナーへ転職を考えている方向けにおすすめな学習サイトをご紹介します。

Webデザインを学習サイトを使って独学で学ぶメリット

Webデザインを学習サイトを使って独学で学ぶ上で費用、時間、労力などの面をスクールに通った場合と比較してストレスを少なく学べるポイントをご紹介します。

Webデザインを学習サイトで勉強するメリットの一つに圧倒的なコスパの良さが挙げられコストがほとんどかからない分、精神的・経済的なストレスが少なく済みます。
また、通学の手間を考えると時間や労力の節約にもなり学習を続けるモチベーションを保てる大きなポイントといえます。

webデザイン学習サイトを使ってすきま時間を有効に活用してキャリアチェンジを目指せる

在職中での転職活動は思った以上に時間が足りないもの。貴重な休日を出来れば有効に使いたいものですよね。

学習サイトを利用することにより通勤時間や就寝前の15分など、ちょっとしたすきま時間を有効に活用して転職に向けて地道に準備できるメリットがあります。

利用するサイトによっては動画の視聴だけで学べるサイトや、ゲーム感覚で気軽に学習できるサイトもあるので忙しい社会人にはぜひ活用していただきたいです！

学習サイトの利用で自分のペースで無理なく続けられる

スクールに通うというのは時間的にもコスト的にもなかなかハードルが高い為始めるまでに思い切りが必要ですよね。

また、少し学んでみて本当にやりたいことと違った、学校の雰囲気が自分には合わないなど問題が発生してからでは取り返しがつかないことも…

そんなリスクを最低限に抑えることができるのが、まずは学習サイトを使って自分のペースで無理なく続けられる独学から始めてみることではないでしょうか？

スクールに通うのは、ある程度独学で学んでからでも遅くはありません。

学習サイトでの独学はスクールに通うよりコストが抑えられる

スクールに通う場合、期間やカリキュラムにもよりますが安くて20万前後～とかなり高額になり、通いの場合は交通費もプラスしてかかることを考えたらとても大きな投資です。

それに比べて多くの学習サイトは基本的に無料で始められ、学習レベルが上がってくると有料版に移行できるというパターンが多いです。

探せば多くの良質なWebデザイン学習サイトがある為選択肢も幅広く、経済的負担も最小限に抑えられるので初めてWebデザインを学ぶには本当にお勧めな方法です。

Webデザインを学習サイトを使って独学で学ぶデメリット

メリットがあればデメリットはつきもの。Webデザインを学習サイトを使って独学で学ぶデメリットも理解したうえで始めることで上手くカバーすることも可能です。

勉強のスタイルとして自分に合っているか否かを判断してから勉強に取り組んでみましょう。

独学のモチベーションを保つのが難しい

これは独学全体に言えることですが一人で淡々と勉強を続けるのは本当に集中力や根気が必要になります。

仲間とワイワイ勉強したい人には不向きかもしれません。ですが利用する学習サイトによっては動画を使ったものや実際にコーディングをしてサイト構築していくものなど飽きさせない工夫を凝らしたものもたくさんあります。

自分に合った学習サイトをいち早く見つけることがモチベーションを保つカギになるかもしれません。

実践的なテクニックを養いにくい

独学でWebデザインの知識を身に着けても実際に働くとなると独学で身に着けた知識だけではなかなか難しく実践的なスキルも必要になります。

スクールに通えば現場で働いている講師の方の話が聞けたりといったメリットも。

しかし、最初はだれでも初心者です。Webデザインを学習サイトを使って学んでいき、最終的に企業に提出するポートフォリオまで完成させられれば未経験から採用を検討している企業もあるのでチャンスは十分にあります。

～Webデザインを学ぶ初心者向け～
独学におすすめの無料学習サイト

まずはWebデザインを独学で学ぶ初心者の方に向け、Webデザインの基礎を無料で学べるおすすめの学習サイトをご紹介します。

転職を考えている方はもちろん、おうち時間が増えた今、副業に興味のある方も多いはず。

自宅にいながら無料でWebデザインを学べて転職や副業に役立てられるならこんなにコスパのいい話はありません！目標に向けてぜひお役立てください。

超初心者向けWeb教材
”Progate”

出典：https://prog-8.com/

超初心者向けのおすすめWeb教材と名高いProgateは無料版から始められる学習サイトです。

どこまでが無料で学べるかというと、各コースの初級レベル（18レッスン）が無料で受けられます。

学べるコースもHTML＆CSS,JavaScript,jQuery,PHP,JavaなどWebデザイナーを目指す初心者には十分な内容を網羅しており、イラストを多用したスライド形式での丁寧な解説により、視覚的にも分かりやすく楽しみながら学習することができるため使いやすいです。

そして、スライドで学んだ知識を実際にコードを書くことによってアウトプットができる仕組みになっています。

また、Progateを超初心者にお勧めする一番の理由はHTMLやCSSを書くのに欠かせないテキストエディタを用意する必要がなく、初めてコーディングをする人にも優しい内容となっている点です。

思い立ったらすぐに始められるという点で初学習者の独学にはハードルが低い為多くのWebデザイン学習者が最初に利用する学習サイトです。

最低限のパソコン知識がある方向け動画教材
”ドットインストール”

出典：https://dotinstall.com/

ドットインストールは動画を観ながら自分のパソコンで実際にテキストエディターを使ってHTMLやCSSのコーディングを学習できる初心者向けの動画教材です。

1本あたり約3分の短い動画なのでちょっとしたすきま時間にサクッと学べるのがありがたいです！

ドットインストールもProgate同様、無料で利用できる範囲に制限があり、無料版で視聴できるのは導入偏となる初級動画までとなりますがHTMLの基本的なタグについてやCSSの簡単な使い方については一通り学ぶことができ内容も理解しやすいのでおすすめの教材です。

Progateが超初心者向けであるのに対してドットインストールは自分でエディターをインストールするとこから始めるため、少しだけ難易度が上がります。

Progateの無料版で一通り学んだ方や、ある程度Webの知識がある方はドットインストールの無料動画で勉強することをお勧めします。

～より実践的な知識を学びたい方向け～
独学におすすめ有料サイト

デザインについて無料学習サイトで一通り学習を終えて基礎的な知識がついてきたと感じたら、より詳しく実践的な知識を学んで理解を深める段階でしょう。

ご紹介するのはWebデザインを独学で学べる有料学習サイトです。今回お勧めするのは基本オンライン動画で受講できるものなので、
スマホで好きな時にサクッと勉強できてしまうのがうれしいですね。

どちらも有料ではありますが低額で利用できるので始めるハードルが高くないのもポイントです。

アメリカ発・受講者数世界4,000万人以上のオンライン学習プラットフォーム
”Udemy”

出典：https://www.udemy.com/ja/

Udemyは世界最大級のオンライン動画学習サービスで、学べる講座の種類は様々ですが特にWebデザインを学ぶ人には人気があります。

買い切りのため何度も視聴できるので一度で理解しきれない部分は理解できるまで何度も繰り返し見ることで理解を深めるのに役立ちます。

セールも頻繁に行っており過去には最大95％オフで購入できるものもありましたので常にチェックしておくことをお勧めします。

コースやボリュームが豊富でどれを選べばよいのか迷ってしまうことも。。そんな時にはベストセラーと表示されている講座が多くの受講者から高く評価されているものになるので目安として覚えておくとよいでしょう。

ちなみに現在Webデザインのコースでは「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース」がベストセラーとなっておりHTML・CSSはもちろん、Photoshopでバナー作成ができるようになるといった内容も含まれています。

また、購入してから30日間の返金保証があるので安心して利用出来るのもUdemyをお勧めする理由の一つです。

参加型の生放送授業が魅力
”Schoo”

出典：https://schoo.jp/

Schooは参加型のオンライン動画サービスで、毎日生放送授業を配信しており生放送のものに関してはすべて無料視聴できます。

ただ有料登録により録画授業も見放題なので、いつでも見たい授業を好きな時に視聴できる有料登録をお勧めします。月額980円(税込)と、参考書一冊購入するよりも安価な料金設定ですべての録画授業が視聴できるのは大変コスパが良いですね！

また、講師を務めるのが企業のCEOやビジネス書の著者といった有名人も数多く、好きな講師の授業を視聴するといった選び方ができるのも魅力です。

そして生放送授業ならではの最大の特徴は生放送中チャット機能をつかって講師に直接質問できるという点ではないでしょうか。

授業に参加しているという意識を持つことで集中力もあがり独学のモチベーションを保つのにかなり有効だと思います。

まとめ

いかがでしたでしょうか。今回はWebデザインを超初心者から独学で学び始めるのにおすすめの学習サイトをご紹介しました。

Webデザインと聞くと「むずかしそう」、「何から始めればいいのか分からない」といったイメージを持たれることもあると思いますが、
意外と自分一人でも勉強できるということが想像できたのではないでしょうか。

ご紹介した以外にもWebデザインを学べる方法はたくさんありますがまずは勉強を始めるとっかかりとしてWebデザインの学習サイトを利用してみてください！

目的を明確にしてどの学習サイトが自分に合っているのかを見極めて勉強を進めていけば、いつしかなりたい自分になれるはず！

ホームページを作成する際は、なるべく時間も費用も抑えたいものですよね。
制作会社へ依頼できれば安心ですが、料金もかなり高額になってしまいます。

最近は、優秀なウェブデザイナーが独立や副業を始めたことにより、ホームページ制作を格安で依頼することも簡単になってきました。
フリーランスであれば、制作会社に依頼するより料金を安く抑えることが可能です。

この記事では、個人に依頼するときに気を付けるポイントや、相場など、失敗しないホームページを作るためのヒントをまとめました。

ホームページを作成する費用の相場はどのくらい？

皆さんがよく目にするホームページの作成には、いったいどのくらいの費用がかかるのでしょうか。
相場をご存じですか？

結論からいうと、相場はあってないようなものです。
ホームページ作成の目的は、人によって違います。
作りたいホームページに必要な工程や依頼先によって、費用は大きく変わるのです。

一般的に制作会社へ発注した場合

小規模な企業サイトは、40万円から60万円
飲食店サイトは、50万円から100万円
スクールサイトは、50万円から150万円
ランディングページ作成には、25万円から60万円程度の費用がかかると言われています。

費用を抑えたいなら、フリーランスという選択肢も

いかがでしょうか。
まだ事業を始めたばかり、事業が軌道にのるか不安な段階では、かなり高額な投資だと感じるかもしれません。
しかし、最近は経験豊富で高いスキルを持ったウェブデザイナーが、独立や副業をして
フリーランスとしてホームページ制作を請け負う事例も増えています。
次に、フリーランス・個人に依頼する場合と、制作会社に依頼する場合の違いについてご説明します。

ホームページ制作に必要な流れとは

ホームページ制作は５つの工程で進めます。

1. 打合せをする
2. サイトの企画と設計
3. デザインを作成
4. 内容を考案
5. 完成したサイトの表示テスト

制作会社の場合、５つの工程を、デザイナー、コーダー、ライターなど、多くの専門家で分担して作り上げていきます。
制作会社では、人件費やバックオフィスを含んだ費用が上乗せされるため、見積もりも高額になります。

フリーランスでホームページ制作を請け負う場合、一般的に、すべての工程を１人で受けます。
そのため、ホームページの制作コストを抑え、安く発注することが出来るというわけです。

制作会社とフリーランスを比較すると

フリーランスにホームページ制作を依頼した場合、簡単な10ページ程度のサイトで10万円～程度が相場だと言われています。

請け負う個人のスキルや経験によって製作費は異なりますが、フリーランスに依頼すれば、制作会社よりも半額以下にコスト抑えられると言えるでしょう。

ホームページ公開後にかかる費用

ホームページを作成すれば、それで終わりではありません。
公開した後も様々な費用がかかります。

• • 維持費

ドメイン代とサーバー代がかかります。
（制作会社によっては、管理費に含んでいることがあります）

• • 管理費

簡単な修正や、文章・画像の差し替えの際、発生する費用です。
（一般的に、月額料金と都度料金があります）

• • 運用費

SEO対策など、集客の手助けをしてもらうために必要な費用です。
（成果報酬型や月額料金など契約形態によって異なります）

ホームページ公開後も、営業時間の変更やサービスの変更があった場合、細々とした変更が必要になります。
制作会社に依頼すると、管理やサポート費用も高額になってしまいます。

フリーランスであれば、必要な時だけ細かく対応してくれる場合が多く、
ホームページ公開後にかかる費用も低く抑えることが出来るのです。

フリーランスに依頼するときに気を付けたいこと

それでは、フリーランスに依頼するデメリットは、どうでしょうか。
制作会社であれば、高いスキルを持った人材が、デザイン、ライティング、コーディングを担当しています。
制作会社へ依頼すれば、制作コストをかけた分、品質の高いホームページが期日通りに納品されるのは、当然ともいえます。

裏を返せば制作会社のメリットが、フリーランスのデメリットになります。

ホームページ作成をフリーランスに依頼するデメリットとは

フリーランスは、すべての工程を一人で作業することが多いため、不得意な工程も自分で作業する必要があります。
また、価格を安く設定しているフリーランスは、経験が浅く、スキルが低いために格安にしている可能性が高いでしょう。
フリーランスは、まさに玉石混合なのです。

ホームページ作成コストを抑えるためには、依頼する前の段階で、目的を明確にしておくことが必要です。
制作会社へ依頼する場合と違って、丸投げが出来ないこともデメリットになります。

メリットとデメリットを一覧にすると

フリーランスのメリットとデメリットをわかりやすく一覧にしました。

優秀なフリーランスはどこで見つけるの？

ジンドゥーのようなサービスを使って、自分でホームページを作ることも可能ですが、
業務の合間にホームページを作成したり更新するのは大変な労力がかかります。

ホームページ作成を、プロに任せられれば一番安心ですよね。

これからフリーランスにホームページを依頼しようとしている方は、
ツイッターなどのSNSで直接依頼する方法もありますが、
信頼できるフリーランスを見つけるのは、なかなか大変な作業です。

現在は、クラウドソーシングサイトに、多くのフリーランスが登録しています。
サイト上で自身の作品を公開している場合もあるので、イメージに近いデザインがきっと見つかるはずです。

フリーランスは、クラウドソーシングサイトで探せます！

それでは、代表的なクラウドソーシングサイトをご紹介します。

クラウドワークス

どんな依頼にも応えられる、さまざまなクラウドワーカーがそろっています。
クラウドワークスの会員登録者数は、日本最大級。
エンジニア、デザイナー、ライターなど各分野のハイレベルなプロフェッショナルから、簡単な作業をやりたい方まで。
法人・フリーランスから、学生・主婦・シニアまで。
多様なスキルと実績を持ったクラウドワーカーに、仕事を依頼することができます。

（引用元：クラウドワークス　https://crowdworks.jp/for-employer）

ランサーズ

ランサーズは仕事を依頼したい企業と仕事を受注したい個人をオンラインでマッチングする、日本最大級のフリーランスタレントプラットフォームです。

（引用元：ランサーズ　https://www.lancers.co.jp）

ココナラ

ココナラは、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。
豊富なサービスを簡単に比較検討でき、細やかな提供方法から評価まであらゆる情報をもとに、オンライン上でお得に利用できます。
（参照元：ココナラ　https://coconala.com/pages/about）

まとめ

フリーランスに依頼する場合、目的を明確にして、メリット・デメリットをよく検討した上で作成を依頼をすることが重要になります。
オリジナルでなくても、とりあえず自社や商品を宣伝するサイトが欲しいという目的であれば、フリーランスに依頼する意義は大きいでしょう。

制作者の過去の作品や実績を見てから発注すれば、イメージ通りに仕上がらないなんて失敗も少なくなります。
後悔しない投資をするために、この記事がお役に立てることを願っています！

コロナ禍の2020年、近年、人気が高まっていた在宅ワークや副業は、より注目度が高まる働き方となりました。

在宅Webデザイナーの仕事に憧れ、副業で始めてみたい20代～30代の子育て世代の女性や主婦の方、自由な働き方をしたいと未経験からWebデザイナーを目指そうと考える方も多いと思います。

けれど「未経験の初心者だけに何から始めるのか難しい」「本当にできる？Webデザイナーとして稼げるの？」

今回の記事では、そんな疑問を元に解説をご紹介いたします。

未経験から在宅Webデザイナーになることは本当に可能なのか？

先に結論をお伝えしますと、実際に未経験からWebデザインの仕事を始める人やWebデザイン業界に転職する人は多く、必要なポイントを押さえればWebデザインで副業・フリーランスの在宅WEBデザイナーを目指す事も不可能ではありません。

では、何が必要になるか取り上げてみたいと思います。

Webデザイナーになるには何が必要?

まず大切なのが、WEBデザイナーになる為に必要な環境を整えて最低限必要なスキルを身に着けることです。

1. 安定した通信環境
2. Webデザインに適したスペックのパソコン、スマートフォン
3. illustrator/Photoshopの操作方法を学ぶ
4. HTML/CSSの知識
5. テキストエディタで4.のコーディングを習得する
6. デザイン、配色の基礎知識を学ぶ

全般的にWebデザインの仕事は、Webサイトを構成させる為のコーディング（HTML/CSS）と、使用する画像を編集したり作成する為（illustrator/Photoshop）のスキルが必要となります。

Webデザインを独学する場合、書籍や動画で学ぶ方法がありますが、基礎も含めて身につくのには半年～1年とも言われ、やはり時間をかけずに学ぶにはスクール通学もおすすめです。

在宅Webデザイナー（Webデザイン）の仕事内容とは？

webデザイナー（Webデザイン）の仕事内容は様々です。

スキルによって選択できる仕事に幅があることも事実です。

始めやすい

• 既存のWebサイトの更新、修正
• バナー作成
• WordPressを使用したWebサイト・ブログサイト作成
• ヘッダー作成（Webサイト上部）
• ロゴデザイン

Webデザインの高い知識と経験が必要

• Webサイト・ランディングページ作成
• Webサイト設計、Webサイトのデザイン提案
• SEOを意識したWebサイト制作

上記で挙げた例の報酬単価は、難易度・量・納期によっても変わります。

未経験者は、始めやすい仕事から経験とスキルを積みながら、できる仕事の幅を広げてゆくのも良いでしょう。

在宅Webデザイナーの収入相場は？

在宅WEBデザイナーの収入と必要スキルの例についてご説明します。

バナー作成

• Photoshop
• illustrator
• HTML/CSS（場合により必要）
• デザイン、配色の基礎知識

1ヶ月に１件2000円～3000円の案件を1万円～5万円程（5件～25件）

Webサイト、ランディングページ作成（設計・デザインから作成）

• Photoshop
• illustrator
• HTML/CSS
• JavaScript/JQuery/PHP

Webサイトのデザインとレスポンシブ（スマホ用）の Webサイト制作は、１案件5万～30万程

ランディングページ（LP）は、簡単なデザインスキルや構成で済む場合は１案件１万円～10万円程

どちらもマーケティングやSEOの知識があれば単価は上がります。

※SEO（Search Engine Optimization）ネットの検索結果で順位向上を目指す為の対策のこと

在宅Webデザイナーとして安定して稼ぐには？

在宅Webデザイナーで安定して稼ぐ為の可能性を高めるには、やはりスキルは重要です。

しかし、最初から高いレベルでないと始められないわけではありません。

確かな情報と方法を元に、徐々にスキルを磨いてレベルアップをしてゆくこと

で未経験でも始めることができるのがWebデザイナーです。

スキルアップのための学習と情報収集を欠かさない

未経験から副業・フリーランスのWebデザイナーとして仕事の幅を広げて稼ぐ可能性を高くする為には、スキルアップが必要不可欠です。

Webデザイナーとしての自分の価値を上げることで、報酬の単価も上がり仕事が途切れない様にすることにもつながります。

例えば、WEBデザイン＋SEO関連の知識がある、WEBデザイン＋プログラミング言語（PHPやJava）の知識がある等です。

また、Web業界のトレンドは目まぐるしく変化します。

書籍で知る事もできるのですが、情報の更新が速い為、Web制作に便利なツールやトレンドを紹介する情報サイト、Twitter等SNSで発信されているWeb業界の知識を探して定期的にチェックするのもおすすめです。

スキルをアピールするにはポートフォリオや資格

自分の実力や実績をアピールするのに、ポートフォリオは欠かせません。

得意とする内容の作品や、様々なニーズに合わせたポートフォリオを複数制作しておく事も実力のアピールとなります。

最近は、SNSでの求人情報探しも珍しくなく、自身でも発信することで仕事の案件受注につながることもあります。

自分を紹介する為のWebサイト（WordPress等）やSNS、クラウドソージングのアカウントを用意してポートフォリオをアピールする等もおすすめです。

また、クライアントや雇用主によっては、未経験WEBデザイナーの実力レベルの判断が難しく資格がアピールとなる場合もあります。

Webクリエイター能力認定、Photoshop®クリエイター能力認定、illustrator®クリエイター能力認定、色彩検定等、他にも様々ある為、興味のある資格の取得を考えてみるのも良いでしょう。

Webデザイナーの在宅ワークと求人事情

在宅Webデザイナーの求人の種類は様々です。

とくに最近は、Web制作会社や自社（インハウスのWebデザイナー）で在宅ワークOKの会社が増えていますが、社員、派遣、パートも、実務経験者が優遇される傾向にあります。

その為、クラウドソージングや業務委託等の仕事は、在宅や副業・フリーランスで働きたい未経験Webデザイナーにとって挑戦しやすい内容の案件も少なくなく、始めやすい働き方と言われています。

在宅Webデザイナーの求人はどこで見つけるのか

Webデザイナーの最低限必要なスキルと知識が身についてきたら、肝心なのが仕事の案件探しです。

未経験から始めるWebデザイナーの例を挙げると

1. 知人・友人の紹介
2. クラウドソージング（クラウドワークス、ランサーズ、ココナラ等）
3. エージェントの紹介サービスに登録する
4. SNS上で探す、Web上で発信する

クラウドソージング等は気軽に始められる反面、人気のある案件には応募者が多く、スキルや経験が成約率に影響するという場合もあります。

まずは、知人・友人の紹介、成約できそうな案件に応募したり、オファーからの受注で実績やポートフォリオを増やすことで、地道に実務の経験値を上げていくことも大切です。

自信がついてきたら、SNSやWeb上で自分の活動やスキルを発信してみるのも方法のひとつです。

在宅Webデザイナーとして働くメリット・デメリット

メリット

1. パソコンひとつでどこでも職場にできる
2. 家庭と仕事の両立をしやすい
3. 人間関係等のストレスが減る
4. スキルや案件次第で高い収入を得られる

デメリット

1. スケジュールやお金に関わる管理を自分でする
2. 何でも自分で調べる必要がある
3. 全て自分でクライアントとやり取りする必要がある
4. 収入が安定しない場合もある

在宅Webデザイナーの魅力は、自由な働き方でもありますが、反面、自己管理が必要となり、クライアントとの交渉や円滑なコミュニケーションが重要となる場合もあります。

まとめ

たとえ未経験でも、スキルと知識を習得することで在宅Webデザイナーになろうと挑戦することは難しくありません。

学び続け習得しようとする意欲があれば、稼げる可能性は高まります。

コロナ禍によって、ますます在宅ワークやリモートワークのWebデザイナー需要が高まることが予想され、今後、Webデザインに関するスキルは身に着けておいて損にならないスキルとも言えます。

働き方や場所に縛られない、在宅ワークや副業・フリーランスに興味がある人は、挑戦してみてはいかがでしょうか。

ＷＥＢ上にある画像やデザインには著作権がある

ネット上には様々な画像やイラスト,動画があふれています。画像やその他の作品にも著作権というものがあります。ネット上にある画像はどれでもダウンロードして使用して良いわけではありません。それでは著作権とはどういうものか解説していきます。

著作権ってなに？

著作権とは“知的な創造活動によって何かを作り出した人”に対して付与される「他人に無断で使用されない」といった権利、すなわち「知的財産権」の一つです。著作権は著作物を保護しています。著作物というのは「思想又は感情を創作的に表現したものであって， 文芸，学術，美術又は音楽の範囲に属するもの」（著作権法第2条第1項第1号）と定義されその著作権の定義を明確に示したものが下記の著作物の種類です。

ＷＥＢ上にはどんな著作権があるの？　

ＷＥＢ上で使われているものには写真の他にイラストや文章、地図も著作物として当然認められていて著作権を保持しています。つまりは他人が作った作品には著作権で守られていてそれを勝手に自分のWEBページで使用するのは認められなく、当然違法ということになります。著作権の話でよく耳にするのが音楽関係ですが、数年前に学校の発表会で歌う曲にも著作権があるから使用料を取るとか、楽譜をコピーして配ることは著作権に反してるだとか議論されたことがありました。結局は営利を目的としなければ歌うことができ、楽譜は授業で必要な枚数の範囲なら配っても良いと法律で整備されました。他人の作品を勝手に使うという考えに必然的にシビアになってきた時代といえるでしょう。

著作権を持つ画像やWEBデザインを勝手に使うのは犯罪？！

法律で守られている著作権ですのでもちろん勝手に使ったら当然犯罪者になりかねません。

ネット上の画像を使った場合はどんな権利に反するのか？

ネット上にある画像を勝手にコピーやダウンロードした場合には「複製権」（無断で複製されない権利）（第21条）、さらにそれを著作者の許諾なく、テレビ、インターネット等公共の電波を通じて自分のサイトに掲載し閲覧できるようにすることは、「公衆送信権」（無断で公衆に送信されない権利）（第23条）の侵害となります。まり、自分のブログに勝手に他人の画像や記事をコピーし持ってきて、アップロードして公開したり、SNSなどに投稿する行為がもれなく”違法”ということになります。

もし他人の作品を使った場合罰則があるの？

もし勝手に画像など、著作権で護られているものを、使ってしまった場合どんな罰則があるかというと、損害賠償、差し止めなどの民事的責任があります。もしあなたが著作権侵害をしてしまった場合、著作権の権利者から当然訴えられる可能性があります。

損害賠償請求や既に使用した画像などが出回ってしまっていた場合は回収をしなければならない可能性があり、その場合の当然費用がかかります。さらに、著作権侵害は被害者に告訴されれば当然刑事罰の対象にもなり、「10年以下の懲役と1,000万円以下の罰金のいずれか、またはその両方」（著作権法119条１項）。法人の場合はさらに厳しく、「3億円以下の罰金」（著作権法124条）とかなり厳しい罰則があります。法人の場合はクライアントから渡された画像が著作権を承諾、譲渡されているかその出所を確認することが必須です。確認を怠ると会社を潰すのはあなたになるかもしれない。

使用可能なWEB上の画像とは

それならどのような画像なら使用可能なのか確認しましょう。

１、フリー素材のサイトの画像を使う

無料で画像をダウンロードして使っても良いサイトがあります。ただし、利用規約に反すると当然訴えられる可能性があるので事前にチェックしておいてから使う方が安全です。フリー素材のサイトは同時に有料の画像を取り扱っていることが多いのでそちらで購入することもできます。

２、自分で撮影する

これは著作権を保有するのが自分になるので一番安心です。ただし、勝手に人を写したものを掲載すると肖像権の侵害になるので注意が必要です。撮っているつもりがなくても背景に映り込んで人物の判定ができてしまうとNGです。

３、「権利者の了解」を得る。

権利者とは撮影者、作成者のことで著作権の権利を持っている人から了解を得る、承諾をもらうということです。その場合は法人は当然のこと個人であっても契約書があった方が安心でしょう

４、著作権が切れた画像やイラスト

著作権の保護期間は70年です。70年というのは「作品が公表された時」もしくは「作者が死亡した時」からとなります。その作品が一部で公表されただけのものか有名作品かによって起算の仕方がかわります。使う前に文化庁のホームページ等で確認しましょう。

ＷＥＢデザインにおける著作権

画像のことに触れてきましたがＷＥＢデザインについては画像も含んだものとなります。その扱いはどうでしょうか？

ＷＥＢデザインにおける著作権の考え方

ＷＥＢデザインも画像と同じように著作権を持っていることは先ほど確認しましたね。ＷＥＢデザインと一言で言ってしまいますがＷＥＢデザインはいくつかのコンテンツから成り立っていますよね。例えば、ベースとなるテンプレートがあってそこに動画や画像があり、文章がある。見えない部分にはソースコードがあったり、それぞれが著作権を持っていることが多いです。逆にそこが問題で各方面から素材を入手してＷＥＢページを制作した人はそれぞれの著作物を組み合わせただけの作業をしただけで創造的なものではないと判断されてしまう可能もあります。

ＷＥＢデザインは著作物と認められない場合がある

著作物の中にＷＥＢデザインは著作権が認められない場合があります。ＷＥＢデザイン上のレイアウトと配色はそれにあたり、ただのアイデアにすぎないという扱いになります。もう一度著作物とは何かを振り返ってみましょう。

（a）「思想又は感情」を

（b）「創作的」に

（c）「表現したもの」であって，

（d）「文芸，学術，美術又は音楽の範囲」に属する

著作物を定義するものとは上記のようなものでした。（b）の「創造的」については，他人の作品の「模倣品」など創作が加わっていないものが著作物から除かれます。また「ありふれたもの」すなわち、誰が表現しても同じようなものになるものも創作性があるとはいえません。さらに（c）「表現したもの」について，「アイデア」は表現することが難しいため著作物から除かれます。つまりＷＥＢデザインの配色やレイアウトはこれらの理由から「創造的に表現したもの」という主張は難しく著作権を得ることはできません。当然、他人のＷＥＢデザインを丸ごと使ってしまうのは犯罪になりますが、似たようなものであればそれが誰のものかの判別は難しくなり著作権を行使することはできないというです。

まとめ

ＷＥＢがメディアの中心になっている今、一昔前は著作権といえば音楽や映像がメインに取り上げられていた問題ですが、ＷＥＢ上のコンテンツや作品も著作権で守られているこということに注目していかなければなりません。

ホームページやブログの作成、ＳＮＳの投稿が日常化した今だからこそ知っておきたい当然の常識となります。今日の気軽に情報を公開できる時代だからこそ「世の中に公開する」という重大な責任があるという意識をもってＷＥＢ制作に関わっていってほしいです。

出典先

著作権｜文化庁：https://www.bunka.go.jp/seisaku/chosakuken/index.html

参考資料

文化庁｜著作権テキスト（令和2年度版）

92466701_01.pdf (bunka.go.jp)

ここでは、レスポンシブなサイトの作り方から制作する上で役立つ考え方、CSSやHTMLを書く段階から意識したいポイントをご紹介します。基本の考えを押さえるとレスポンシブデザインのコツを掴むのに役立ちます！

レスポンシブデザインとは

そもそもレスポンシブデザインとは、ユーザーが使用するデバイスが、PCやタブレット、スマホでも、それぞれの表示サイズに反応(responsice)して最適化されるデザインということです。

従来、PC版・モバイル版と分けてwebサイトを作っていたのが、レスポンシブデザインでは1つのHTML（URLとも）で表示し、CSSだけで切り替えられる点が大きなポイントです。

web制作側としてはあらゆる見せ方に対応するので大変にはなりますが、レスポンシブデザインのサイトは端末の違いによるエラーなどを避けられるため、ユーザビリティが高められます。Googleが推奨していることもあり、SEO的な観点も含めて今やレスポンシブ化することが必須となりつつあります。

レスポンシブなサイトの作り方

レスポンシブに対応したサイトの作り方を簡単に紹介していきます。
HTMLとCSSでレスポンシブ用の設定をするのは、レスポンシブデザインのweb制作において基本となる部分ですので、準備ができているか必ず確認しましょう。

合わせてコーディングの時点で注意したい点は、CSSをより有効にするため、CSSで調整できるものはHTMLで直書きしないようにすることです。

レスポンシブデザインを作るには、最初からレスポンシブ向けの設計や組み立てを目指すのが重要になるともいえますので、web制作時にはレスポンシブに対応した見せ方を常に意識することが大切です。

HTMLにViewportを設定する

まずは、HTMLの設定です。HTMLのヘッド部分に、viewport（ビューポート）というメタタグを入れます。レスポンシブ対応というとCSSのイメージがありますが、HTMLでも簡単な設定がありますので、うっかり忘れないように気を付けましょう。

<meta name="viewport" content="width=device-width">

こちらは基本的なビューポートの記述ですが、content=内で横幅や倍率、ズームの可否などを設定できます。倍率は指定しない場合、”initial-scale=1″の状態に設定されます。

CSSにメディアクエリを設定する

CSSでは、メディアクエリの設定をします。設定するCSSは、既に書いているCSSの下でも、各デバイス用やレスポンシブ用と別のCSSを用意しても大丈夫です。

さらに、メディアクエリでは「表示している画面の幅がいくつ以上(min-width)」あるいは「いくつ以下(max-width)の時」、という設定ができます。両方を合わせる(andで繋ぐ)ことで、幅がいくつ以上いくつ以下の時、という指定も可能です。

@media screen and (max-width:559px) { 
    /*　画面幅が559px以下の設定　*/
    a { color: #FFF }
}
@media screen and (min-width:560px) and ( max-width:1024px) {
    /*　画面幅が560px以上1024px以下はこの設定　*/
    a { color: #000 }
}
@media screen and (min-width:1025px) {
    /*　画面幅が1025px以上の設定　*/
    a { color: #111 }
}

このメディアクエリの下({}内)にいつも通り記述をすることで、画像幅の条件下でどのように表示するのか、切り替えポイントと内容を指定できます。
※メディアクエリで指定する値についてはここでは解説致しません。理由は後ほどご説明いたします。

レスポンシブデザインを実装する考え方のコツ３つ【画像・CSS・幅】

レスポンシブデザインを実装する上で必要な考え方は、Googleが推奨する理由にある通り、「ユーザーにとって使いやすいか」ということです。

ここで１番のポイントは、読み込み時間ともいえます。PCに比べるとスマホは通信速度が遅いため、PCに合わせてコーディングしてしまうと画像のサイズ等からもサイトが重くなり、サイトを開くのに時間がかかってしまいます。

見ようと思ってもなかなか開かないサイトは、入り口の時点でユーザーにとって使いづらいサイトとなってしまいます。つまり、サイトをいかに軽くするかを実装時に意識することが、レスポンシブデザインの最大のコツともいえます。

ここからの３つのポイントは、工夫することでユーザーにとってどのように良くなるのか、ということも一緒に考えながら読んで頂きたいです。

CSSでできる表現はCSSで実装する

とてもシンプルなことですが、CSSで表現できるフォントやアニメーションは、CSSで実装することを意識します。

例えば、特徴的なフォントを使いたい場合は表示したい文字を画像にして持ってくるのではなく、webフォントを使うと簡単ですし、無理に拡大縮小をしないためきれいに表示されます。また、CSS3では簡単な動きのあるページやロゴを表現することが出来るので、CSS3で出来ることを情報集しておくと表現の幅がひろがるのでいいかもしれません。何より、色や大きさの調整をほとんどCSSでできるのが便利ですので、実現できることも増えます。

ちなみに、ベタではありますが、webフォントに関してはGoogle Fontsがオススメです。web制作トレンドのフォントや、様々な文字の太さも使えます。アイコンでは、Font Awesomeを使うと、よく見るアイコンを選べますし、手軽にSNS等のロゴを表示できます。

積極的にCSSを使うことでサイト自体も軽くすることができ、よりレスポンシブになるともいえますので、制作中に思いついた表現はCSSで実現できるか、作れるものなのか、一旦考えてみるようにするといいと思います。

画像ファイルはサイズと幅指定で工夫する

サイトが重くなる理由の一つとして、PCサイズの画像が使われているということがあります。上記でも触れた様に、画像を使っていた特徴的なフォントはwebフォントを使ったり、画像を用意する時点で画像のサイズを減らしたりしておくことで、サイトを軽くすることができます。

最近は解像度の高いデバイスも多いので、画像サイズを減らす際は画質を落としすぎないように気を付けましょう。

また、画像を使う時には、HTMLに幅指定を直書きするのではなく、CSSで%指定すると細かい調整がしやすくなります。

/**HTML見本**/
<p class="example1" alt="画像例1">
<img src="aaa.jpg">
</p>
<p class="example2" alt="画像例2">
<img src="aaa.jpg">
</p>
<p class="example3" alt="画像例3">
<img src="aaa.jpg">
</p>

/**CSS見本**/
.example1 img {
	/*元の画像サイズ*/
	width: auto;
	height: auto;
}
.example2 img {
	/*横幅を画面いっぱいに表示*/
	width: 100%;
	height: auto;
}
.example3 img {
	/*ビューポートの幅に対して50%の幅で表示*/
	width: 50vw;
}

あらゆるデバイスに対応するためにも、画像の幅指定はCSSで％またはvhやvwといった可変的な単位を使うことを習慣づけるといいでしょう。

ウィンドウ幅に合わせて表示を切り替える

レスポンシブデザインで一番の肝になるともいえますが、最初に設定したCSSのメディアクエリを使って端末のウィンドウ幅に合わせて表示を切り替えます。

ウィンドウ幅で表示を切り替えるには、メディアクエリで切り替えるポイントを指定(ブレイクポイント)するのが一般的です。

ここでもやはり制作時のコツとしては、ブレイクポイントの条件下でコンテンツ幅を指定していくためにも、画像に限らずCSSで普段から可変的な単位を使うことで、柔軟に端末に対応することができるようになります。

@media screen and (max-width:559px) { 
    /*　この場合、559pxがブレイクポイント…559px以下の設定をここに書く　*/
    a { color: #FFF }
}

ブレイクポイントで指定する値は、スマホ・タブレット・PCで分ける場合も多いようですが、制作しているサイトのデザインによって変わりますし、例え同じ「スマホ」でも様々な幅のものがあったり新しい機種で幅が広がったりするので一概にどの値が良いとは言えません。

そのため、必ず最新版の端末サイズの情報や、ブレイクポイントのトレンドをチェックして知識をアップデートするようにしましょう。参考になるサイトを積極的に探しておくのも、ブレイクポイント以外のweb制作のトレンドを知ることができるのでオススメです。

結局のところ、制作中のデザインの見せ方やコンテンツに合ったブレイクポイントを自分で見つけるのがベストだと思います。ただし、ブレイクポイントが多くなるとメンテナンスが大変になるので１～２個が理想的です。

まとめ

レスポンシブデザインの基本的な考え方をご紹介しました。ユーザーにとって使いやすいか、見やすいかということを意識するだけで、よく分からないと感じていたレスポンシブのweb制作方法が少し分かったり、コツが掴みやすくなったりしたのではないでしょうか。

CSS3を使いこなすことはもちろん、ご紹介した以下の３点をweb制作では普段から意識していきたいですね。

1. CSS3で実現できるか考える
2. 画像のサイズや幅の指定方法を意識してみる
3. ブレイクポイントを工夫してみる

最後までお読みくださり、ありがとうございました。

近年スマホの普及とともに、スマートフォンレスポンシブ対応の需要性がだんだん上がってきました。 スマホ画面が小さい為、違和感のないスマホ対応のレスポンシブデザインがとても重要であります。 その中、重要ではないと思いがちなフォントサイズですが、実はSEOにも影響を及ぼします。では、今回はスマホデザインに適切なフォントサイズについてご紹介します。

WEBデザインにて推奨されるフォントサイズの基準は16px～14pxで、この基準はGoogleやAppleが推奨するフォントサイズです。 ユーザーのことを考えて読みやすい文字や重要な文字のフォントサイズを考えると日本語・英数字とも12px～18pxが基準・適切と言えるでしょう。webデザインにおける最小フォントサイズは10pxが最低ラインのようです。フォントサイズ10px以下で使用したい場合は、CSSを使って縮小が可能。またブラウザ毎に最小フォントサイズが違うようなので、ご参照くださいね。

Webデザインにて推奨されるフォントサイズ基準

webデザインの基準フォントは16px～14pxで、この基準はGoogleやAppleが推奨するフォントサイズです。ブラウザのデフォルトのフォントサイズが16pxが多いことも理由の一つと言えるでしょう。ユーザーのことを考えて読ませる文字や重要な文字のフォントサイズ基準は12px以上が理想です。

webサイトにおいて、最近はフォントサイズが小さなWEBサイトが数多く見られますが、フォントサイズの最小基準は10pxと心得えておきましょう。文字サイズが小さすぎると読めなくなってしまいます。モニターでは7pxあたりから文字が潰れてよく見えなくなってしまいます｡

ユーザビリティを高める為には、ある程度のフォントサイズは必要で12px以上が好ましいです。近年PCの標準スペックがグレードアップし、大容量の画像や写真が使用できるようになったことで、将来的にフォントサイズは下がる傾向にあるでしょう。

読みやすいフォントサイズがある

webデザイン制作時にユーザビリティを考えた、読みやすい・見やすい文字や重要な文字は12px～18pxが基準ととらえて良いでしょう。
日本語も英語もこのフォントサイズが適していると思います。 GoogleやAppleが推奨するフォントサイズも16px～14pxです。

今後フォントサイズ基準は変化していく？？

WEBデザインの役割は「多く情報を簡潔に伝える」事が重要であるが、これまではPCを検索してもらうユーザーに読んでもらうことが主流でしたが、近年PCの標準スペックがグレードアップし、大容量の画像や写真が使用できるようになり、文字を読まずして見て伝えることが可能となった為、必然的にベースとなるフォントサイズが下がる傾向にあるでしょう。しかしながら、読んでもらいたい文字や重要な文字のフォントサイズ基準は12px以上が理想です。

フォントサイズはSEOに影響する？

皆さんのWEBサイトのフォントサイズは適切ですか？
SEO（Search Engine Optimization：検索エンジン最適化）を考えるならば16px以上を目安にしましょう。フォントサイズが適切かどうかをGoogleはチェックしています。文字のサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されてしまうのです。 検索ランキングにおいての要因の一つで、マイナス評価となってしまいます。 Google Search Console（グーグル サーチ コンソール）Google検索エンジンの評価を下げてしまいます。Googleが推奨するフォントサイズは16pxです。

Webデザインの最小フォントサイズは？

Google Chromeの最小フォントサイズは10pxです。
webデザインにおいて最小フォントサイズは10pxが最低ラインで、スタイルシートで指定できるフォントサイズの最小値です。ユーザビリティを考えると、基本的にはフォントサイズは10px以上をおすすめします。GoogleChrome（PC版のみ）では9px以下の文字サイズを設定しても10pxに表示が切り替わります。

ユーザーが読みやすいように考えるとフォントサイズは12px以上が理想だと思います。日本語も英語も12px～18pxが基準・適切でしょう。webデザインサイトにおいて最近は、フォントサイズが小さなWEBサイトが数多く見られますが、文字サイズが小さすぎると読めなくなってしまいますので、フォントサイズの最小基準は10pxと心得えておきましょう。

最小フォントサイズは10px

Google Chromeは最小フォントサイズが10pxです。 webデザインにおいて最小フォントサイズは10pxが最低ラインで、スタイルシートで指定できるフォントサイズの最小値です。 ユーザビリティを考えると、基本的にはフォントサイズは10px以上をおすすめします。 GoogleChrome（PC版のみ）では9px以下の文字サイズを設定しても10pxに表示が切り替わります。 ユーザーが読みやすいように考えるとフォントサイズは12px以上が理想だと思います。 世界共通12px～18pxが基準・適切と言えるでしょう。

ブラウザ毎に最小のフォントサイズが違う？

ブラウザ毎の最小フォントサイズは様々のようですね。
PCでシェア率の高いブラウザ上位（↓以下）を見てみましょう。

1. 1. Google Chrome
   2. Firefox
   3. Internet Explorer
   4. Edge
   5. Safari

ブラウザ毎の最小フォントサイズは…Google Chromeは10pxで、その他は１pxでした。意外にも１pxまで表示できるとは…。
GoogleChromeのPC版のみ9px以下のフォントは10pxに置き換わります。

もしもフォントサイズを最小サイズ１０px以下にしたいなら方法はある

CSSにてtransform: scale(0.5);などで縮小は可能です。
しかしモニターでは７pxあたりから文字が潰れてよく見えなくなってしまいますので注意が必要です。
参考までに、あの小さいと感じるFacebookのいいねボタンですら１１pxみたいです。
小さくする方法はありますが、あくまで見やすい文字のフォントサイズは１２px以上で、webデザインのフォントサイズは、
GoogleやAppleが推奨する１６px～１４pxが適切な良いフォントサイズであることをお忘れなく。。。

【 ま と め 】

• webデザインの基本フォントは14px～16px。これは2015年からGoogleが推奨するフォントサイズ。
• 読ませる文字・重要な文字（日本語・英語）は12px～18pxを基準にしよう。
• webデザイン制作においての最小フォントサイズは10px。
• 最小フォントサイズはブラウザ毎にあった。PCでシェア率の高いブラウザ上位を確認すると、意外にもGoogle Chromeは10px。その他は１pxであった。
• フォントサイズ10px以下のフォントを使用したい場合は、CSSを使って縮小可能。

現在Webデザイナーを目指してスクールに通い、Webデザイン勉強中のNaoです。

この記事では35歳Webデザイン未経験の私がなぜ会社員を辞めてまでWebデザイナーへの転職を目指したのかきっかけを紹介します。

”Webデザイナーになりたい”

”好きなことを仕事にしたい”

でもどうやって？どんな勉強をすれば良いの？スクールに通った方が良い？年齢的に遅いんじゃ？興味はあるけど何から始めれば良いのか分からない、一歩踏み出す勇気がでないなど迷っている方々の参考になったら嬉しいです。

自己紹介

35歳5歳の男の子がいるシングルマザーです。

大学卒業後、3社ほど転々としましたが、ずっと事務職として働いてきました。

どの会社も特に事務の仕事がやりたくて入社した訳ではなく、営業は大変そうだなと思ったのとOLという響きって良いなぁという理由だけで仕事内容が好きなわけではありませんでした。

なぜ35歳からWebデザイナーになろうと思ったのか

なぜ35歳からWebデザイナーに転職したいと思ったのか。

私はシングルマザーのため、子供を保育園に預け週5フルタイムで働く忙しい日々を送っていました。

残業しなきゃ仕事が終わらないけど残業代は出ない。。

お迎えはいつも園で最後。。

朝も夕方も時間に追われイライラして怒ってばかりの日々。。

子供のためにも自分のためにも転職しようかな、、と考えていたころコロナが流行りはじめました。

私が働いていた会社ではテレワークの環境が整っていないためコロナ禍でも毎日会社に出勤していました。

緊急事態宣言で市から保育園の登園自粛をお願いされる中、朝から夕方まで子供を預ける日々。。

場所や時間を選ばず仕事がしたい

仕事と子育てを両立させたい

と思いこれをきっかけに転職を決意！

そんな時にWebデザイナーという職業を見つけました。

仕事を辞める。新しいことをはじめる。ということに不安な気持ちもありましたが、基本的にポジティブな性格なので思い切って退職！

Webデザイナーを目指すことを決めました。

Webデザイナーになろうと思った当時のパソコンスキルは？

Webデザイナーになろうと思った当時のパソコンスキルはというと。。

それまで仕事で事務をしていたので、Excel、Word、PowerPointが少し使えるくらい。。タイピングも得意といえるレベルではありませんでした。

パソコンも持っていましたがネットサーフィンの利用がメインでした。

Webデザイナーを目指す人へのおすすめ勉強法

webデザイナーを目指す人へのおすすめの勉強法をお伝えします。

Webデザイナーになるための勉強法は主に

1. 独学
2. 専門学校
3. スクール

があります。

独学

一つ目の独学ですが、Webデザイナーになるために必要なスキルの本は色々販売していて、学校やスクールに通わず独学で勉強をしている人も沢山います。

独学のメリットは、

• 自分のペースで勉強を続けることができる。
• 仕事や学生、子育てをしながら空いた時間を有効に使える。
• 費用が安く抑えられることです。

デメリットは

• 初心者だと本の解説を見ただけでは分かりづらい。
• 学ぶための環境を自分で作らなければならない。
• モチベーションを保つのが難しい。
• どうしても分からないことがあった時、解決策がない。

などがあげられます。

専門学校

二つ目は専門学校です。入学出来るのは年に1度で、通う期間は大体2年制が多いようです。

メリットは

• 長期間しっかり学べる。

デメリットは

• 金銭面での負担が大きい。

です。

スクール

三つ目はスクールです。

メリットは

• 必要な技術を効率良く短期間で学ぶことが出来る。
• 分からないことがあったらすぐに先生に質問可能で、その場で解決できる。
• 現役でデザイナーをしている講師がいるスクールに通えば最新の技術を学ぶことができる。
• 共に学べる仲間がいて楽しい。
• 制作した作品を仲間と見比べられる。

デメリットは

• 独学に比べるとお金がかかる。
• 通う時間、手間がかかる。

です。

私が選んだ勉強方法はスクール

勉強方法はスクールを選びました。

対面での学習が良かった事と、独学で学ぶ自信がなかった事、比較的近くにスクールがあったので通学に便利だという理由です。

スクールにもよると思いますが私は5か月間のWebクリエイターコースに入学しました。

Webデザインスクールで学んだこと

Webデザインスクールで学んだことはHTMLをはじめ、CSS、illustrator、Photoshopなど。

今まで事務職の経験しかない私にとってはコーディング、バナー制作、ポートフォリオ、SEO。。など知らない初めて聞く言葉だらけで最初は少し不安な気持ちもありました。

デザイナー、クリエイターになることは簡単なことではなく、努力が必要なことも知りました。

しかし逆に知らないことだらけで全てが新しい学びで毎日スクールに通い勉強できることがとても楽しい、嬉しい気持ちでした。

HTMLとCSS

HTMLとCSSはWeb制作に必須の知識になります！

HTMLは簡単に言えばホームページを作る上でコンピューターが理解できるようにマークアップすることです。

それぞれのタグに意味があり「この文章はタイトルです」「ここには表がはいります」などを表す言語になります。

それに対してCSSとはHTMLで作られた文章に色やデザインを加えて見栄えをよくするものです。

illustrator(イラストレーター)とPhotoshop(フォトショップ)

illustratorとPhotoshopはAdobeが提供しているデザインソフトで、デザインの制作現場で欠かせないソフトです。
どちらのソフトも多機能で出来る事が多い反面、豊富な機能の何から学べば良いか迷うことがあると思います。
その点でもスクールに通っていれば現場で必要とされる機能を中心に学べるので効率よく学ぶことができます。

私はどちらかといえばHTML、CSSよりillustratorとPhotoshopの方が好きで興味を持てました。

Webデザインスクールに通って実際に学んでみてどうだったか

思い切ってチャレンジしてみて良かったと思っています。

子育てしながらの勉強は大変なこともありましたが、

• 新しいことを学べる楽しさ
• 自分で考えたものが形になる達成感
• 好きなことを仕事に出来るかもしれないというワクワク感
• 努力することの喜び

どれも思い切って一歩踏み出していなければ味わえなかった事だと思います。

これからも挑戦したことを無駄にせず勉強を続けたいと思っています。

スクールに通うと自分と同じような境遇の人がたくさんいるので刺激をもらったり助け合ったり出来ることも良い点でした。

現在と今後の目標

現在と今後の目標！

ほとんどの受講は終了し、ポートフォリオの作成と就活のみとなりました。

まずは就職して私の職業はWebデザイナーです！と自信をもって言えるようになりたいです。

転職が上手くいかなかったとしてもデザインについて学べた経験はわたしの人生にとって、とても重大なことです。

今悩んでいる方へ。。

何歳になっても遅いことはありません！人生1度きりです！

35歳で新しいことに挑戦するってビックリするのか周りには応援してくれる人が多いです。笑

最後に

Web業界は常に進歩していますが、その一方でIT業界は人材不足。

Webデザイナーは副業としてもできるので勉強して損はありません。

また、今流行りのノマドワーカーフリーランスも夢じゃありません。

Webデザイナーに限らず何か挑戦したいことがある人はこの記事を読んで励みになったら嬉しいです！