LV.7 デザインの基礎から学んだこと
本記事は、デザインの基礎を学んだ管理人が、その基礎を元に実際のサイトなど世にあふれているものから得た学びを記録していくものです🐧
初心者の方は一緒にいろんなサイトを見て自分でも考えてみて一緒に力をつけていきましょう！
サイトの役割とサイトデザインのコンセプトについて
世の中にある「デザイン」には役割があります。デザインにおける役割は問題を解決することであり、目的に沿ったデザインをする必要があります。
下記記事でも取り上げましたが、プロはすべてのことに理由を求められます。自分の好きなデザインをするのではなく、お客様の問題解決のためのデザインをすることが必須です。「この色にしたのには」「この配置にしたのには」と説明ができるようにならなければいけません。
kairi-video-editing.hatenablog.com
そこで、いくつかサイトをとりあげて、サイトから以下の4つを考えてみたいと思います。
- レイアウト
- 色彩
- 写真表現
- タイポグラフィ（フォント）
参考サイト①
公文式オフィシャルサイト KUMON（くもん） | 公文教育研究会
（2023/4/1確認）
レイアウト
- MVに大きくカルーセルを入れることで、情報を目立たせている
- MV直下に近くの教室の検索窓を入れることで、通いやすさを検討しやすくしている
- 年齢や教材別でどの年代のお子さんをお持ちのご家庭でも入りやすいようにしている
- 体験者の声やCMで、より生の声や企業イメージをつかんでもらえるようにしている
色彩
- ポップな色づかいで親しみやすさ・子どもといった印象
写真表現
- カルーセルに小学生くらいの女の子を入れることで、対象が子どもであることをわかりやすくしている
- 学年別の説明では、学年にあったモデルの写真を入れることで、自分事ととらえやすくしている
- 全体的にゴシック体を用いることで、あたたかみ、親しみを感じられる
参考サイト②
（2023/4/1確認）
レイアウト
- FVから全体的にコロナや予防接種についての記載が目立つ
- コンテンツのサイズがあまり変わらないため、同列の印象
色彩
- シンボルマークのカラーをベースとした緑のあしらいが目立つ
写真表現
- フォントは全体的にゴシック体で柔らかい印象
- バナーによって複数のフォントや色が使われていることになるので、見づらい印象も受ける
参考サイト③
（2023/4/1確認）
レイアウト
- カルーセルに今話題の侍ジャパンを起用したバナーと、4月の季節に合ったビジネス系のシャツなどを持ってくることで、この時期のユーザーの悩み解決ができることをアピールしている
- 1スクロールごとに特集にとまる仕様になっていて、ユーザーの目を引いている
色彩
- シンプルな色使い。服を目立たせる必要があるため、そのほかの要素は基本的に白を基調としている
写真表現
- 写真の明度はほとんど同じにしていて、スクロールしたときやカルーセルが切り替わってもさほど違和感がないようにしている
- 年齢、性別、人種の異なる人を起用することで誰でも着られるイメージを与えている
- 画像上のテキストには若干シャドウをかけることで視認性をあげている
- 見出しと説明のテキストを各スクロールごとに入れることで、統一されていてユーザー見やすいように調節している
デザインの4原則から学ぶ
続いてはデザインの4原則を、参考サイトを元に考えていきたいと思います。下記簡単な説明となります。
- 近接：同じものは近づける。違うものは遠ざける。これらを一定のルールで行うこと
- 整列：同じものはそろえる。フォントの種類や大きさ、色も基本的には一定のルールでそろえる。。角丸の大きさ、線の太さなど細かい部分にも気配りを。⚠人間の目は少しのずれでもわかる
- 反復：同じ種類の情報はグループ化してくりかえす。
- コントラスト：一通りそろえたうえで、差をつけたい場合に形、色などで最後にコントラストをつける
参考サイト
（2023/4/1確認）
考察：
いい点▽
ランキング形式のものは同じフォーマットで並べていて、ランキングであることがわかりやすい
トピックなどヘッダー付近のバナーが同じサイズのため、整理されている印象
改善案▽
MVの「新生活～」のピンクのバナーとその下二つのカルーセルがそれぞれ主張していて見づらいため、カルーセルを一つにまとめて上に配置して、ピンクのバナーの高さを抑えた画像を配置する
ご案内が中央揃えで見づらいため、見出し以外は左揃えにする
色の基本から学ぶ
ますは「色」の基本を押さえていきましょう。例えば赤とひとことで言っても、人によってとらえ方は異なります。ピンクに近い赤、黒に近い赤、明るい赤など、赤によってもとらえられる範囲も異なります。では色はどのように認識されるのでしょうか。
色はどうやって決まるのか
色をとらえる要素には以下の３つがあります。
- 物体
- 光
- 観察者
これらの要素のどれか一つでも変われば「色」は変わります。同じ色のものでも、野菜や果物など、物体によって若干色は変わりますし、照明の色によっても変わります。また、人によって色のとらえ方も異なります。よって、デザインをしていく上で、色は主観的なものであるということ意識しておくことが大切です🐧
どのように色を選べばよいのか
ではどのように色を選べばよいのかですが、色の三属性、色相環がポイントとなります。
色の三属性
- 色相：色の種類
- 明度：明るさ
- 彩度：鮮やかさ
色相をサークル上に表したもののことを色相環といいます。この色相環を元に配色を決めると、与えるイメージを意識することができます。
少し押さえるだけでも何となくで色を決めるのではなく根拠のある配色ができるので、おすすめです✨下記サイトがわかりやすかったので共有します。興味のある方はご自身でもぜひ調べてみてください🐧
クリスマスカラーやハロウィンカラーはいわゆる補色のカラーであるため、目立った強い印象を与えます。
参考サイト（クリスマス）
クリスマスといえばサンタの帽子をイメージする赤に、ツリーの緑、雪の白の配色の印象があると思います🎅世間的なイメージもかなり強いため、クリスマス以外でこの配色をする場合はクリスマスに寄らないようにする工夫が必要だったり、あえて使用しないなどの方向でデザインするのも考慮した方が良いかもしれません🎄⛄
（2023/4/2確認）
参考サイト（ハロウィン）
ハロウィンといえばオレンジや紫、黒のイメージがあると思いますが、実際にハロウィンのサイトを調べるとそのイメージに沿った色使いをしたサイトが多くありました🎃
（2023/4/2確認）
このように、私たちが何気なく見ている配色ひとつでも印象付けられています。日常生活では信号や点字ブロックなど、「色」が生活に根付いているものも多くありますね。みなさんも色のイメージや配色についてぜひ意識しながらデザインをしてみてください🐧
UI、UXやインタラクションについて学ぶ
みなさんはUI、UXという言葉を耳にしたことはありますか？似ていますが、実際は役割が異なります。
- UI：ユーザーが閲覧・操作しやすい見た目
- UX：ユーザーの体験全体のこと。サイト内外で体験することを想定し、問題なく体験してもらえるようにする
また、インタラクションという言葉もあります。PCでマウスを動かしてボタンを選択したときに色が変化したり、線が引かれたりすることがあると思います。このUIの動き自体のことをインタラクションといいます。参考サイトを元に考えていきます。
参考サイト
（2023/4/2確認）
- ヘッダー内でカーソルを合わせると、色が白⇒青に変化してわかりやすくしている。また、選択中の項目は常に青にすることで自分が今どの項目を選択しているのかわかりやすくなっている
- バナーにカーソルを合わせると白の透過のようなあしらいになり、カーソルがあっていることがわかりやすくなっている
- 検索窓に虫眼鏡のアイコンを入れることで、文字を入力して検索することを視覚的にわかりやすくしている
- チャットボットを導入することで、ユーザーの不明点の解消や、運営側の負担軽減に役立てている
- よくある質問を「▼」で閉じた状態にすることでサイト自体の長さを抑えつつ、気になるユーザーにはクリックすることで詳細が開くことを示している
以上が参考サイトから考えられることを一部取り上げてみましたが、それぞれのサイトを少し見るだけでもさまざまな工夫がされていることがわかると思います。みなさんも好きなサイトを見て、どんな工夫がされているか考えてみると力になると思います♪
まとめ
今回は簡単にデザインの基礎を紹介しつつ、実際のサイトを見ながら考察してみました🐧少し考えただけでは力になりません。ありがたいことに世の中にはすでにプロの良いデザインがたくさんあふれています。これをいかさない手はありません！少しでも自分の力として吸収できるように日ごろから「どうしてこういうデザインなのだろう」「このデザインひきつけられるなどうしてだろう」と興味と疑問を持つことを意識して、自分の中の引き出しを増やしていくとよいですね(*^-^*)
動画編集についても同じで、広告でもひきつけられる広告はあると思いますし、ただ面白いと思ってみている動画ひとつでもさまざまな工夫がされていると思います。ただ、デザインを学ぶことは編集にも生きてきますので基本的なことは押さえておいて損はないと思います✨
本日の学習部屋はここまで！お疲れさまでした<(_ _)>
次回はいよいよPrに入ります！きっとすべてのことは自分の力になると信じているのでここまで学んだことも動画編集だけ学習している人よりもレベルアップしていると思います！まだまだ頑張っていきましょう🔥
LV.6 【初心者】Illustratorで出来ることは何か
本記事は、初心者の管理人がIllustratorで「こんなことができる！」「こうやったらできる！」と学んだことをまとめたものです🐧
Webディレクターをしている私自身、Illustratorはデータの受け渡しや確認で使用する程度でほとんど使用したことはありませんでした。
基本操作は世に出回っていますのでこちらでは割愛します。
ちなみに私はこの本で学びましたが、基本中の基本が簡単に学べますのでおすすめです✨
![デザインの学校 これからはじめる Illustratorの本 [2020年最新版]](https://m.media-amazon.com/images/I/51Ag-c2dWXL._SL500_.jpg "デザインの学校 これからはじめる Illustratorの本 [2020年最新版]")
Illustratorの特徴
Adobeのアプリはさまざまな種類がありますが、Illustratorの得意とする分野や苦手な分野はどういったものか見てみましょう！
メリット
デメリット
- 画像の加工が苦手 ⇒ ビットマップ画像を得意とするPhotoshopで補いましょう
ベクター画像とビットマップ画像の違いについては下記記事を参考にしてください▽
kairi-video-editing.hatenablog.com
Photoshopはもともとある画像を加工することに向いているので、1⇒10に長けていますが、Illustratorはロゴを作成したり、イラストや地図を作成したりと、0⇒1を作り出すことに長けているアプリといえるでしょう。
印刷データで意識すること
先ほどもご紹介した通り、Illustratorはプロの印刷会社でも使用されていることが多いことやアプリの特徴から紙媒体に対して非常に強いです。ここでは印刷データを作成するにあたっての注意点についてまとめていきます🐧
裁ち落としについて
印刷後の断裁を想定して、各辺について3mmの「裁ち落とし」を設けてその範囲内でデザインをすることで、きれいに仕上げることができます。一般的に裁ち落としは0か3mmで、入稿をする際は3mmで覚えておくとよいですね！
トリムマークについて
トリムマークとは裁ち落としの目印となる枠をさします。印刷用のデザインをする際はトリムマークを意識できるとよいですが、最近アートボード基準でのやり方がとても増えています。アートボードのサイズをあらかじめ印刷したい既定のサイズに設定をし、裁ち落としの設定を3mmとします。こうすることで印刷会社にそのまま渡して印刷することもできます。ただ、どちらがよいかというのは制作者側ではなく、印刷所が判断することになるので、事前に確認しておくのがベストです。
パターンの登録について
スウォッチパネルに長方形を登録し、編集することでストライプのデザインを簡単に作成することができます。（こちらは冒頭で紹介した本に作り方が記載されているので気になる方はぜひ読んでみてください♪）
その他のデザインを作成する考え方として、元となるスウォッチのパターンそのものを編集することもできますし、幅や高さを見ながら調節することもできます。ちなみに真ん中のオブジェクトを編集したら周りも連動して変わります。図形を斜めにすることもできます。
オブジェクトそのものを変形したいときは図形をクリックして変形させます。こうすることで元のスウォッチに影響を与えずに変更することができます。このときパターンのチェックの有無に注意しましょう。
水玉模様
水玉模様を作成したいときは楕円形ツールで円を描いて、スウォッチパネルにドラッグして登録することで作ることができます。【タイルの種類】を調整することで、オブジェクトを互い違いに配置することもできるので、作りたいデザインに合わせて調整することをおすすめします！
パネルとオブジェクトが近くにあると作業効率が上がるのでパネルの位置にも気を付けるとよいと思います✨
効果について
旗やリボンのあしらいはデザインに使えるため、デザインのイメージをストックしておきつつ自分でも作成してみるといざ作るときに便利なのでおすすめです！
Webとの設定の違い
Webとの違いは主に下記です。初期設定からWebもしくは印刷を選択すれば特に問題はないので頭の片隅に入れておくくらいで大丈夫です。Webの特徴は下記です。
- 裁ち落としがない
- 単位がピクセル
- 解像度がある
書き出しについて
・スクリーン用に書き出し：Web用におすすめ。新しい書き出し形式。アートボード名を英字にすること。
・書き出し形式：印刷用におすすめ。
下記サイトは書き出しの種類について詳細に説明していてとても分かりやすいのでお勧めです！
画像の装飾について
サイズの変更
アートボードのサイズを変更したい場合はアートボードツールを選択します。
自由に変更したい場合は直観的に操作可能ですが、正確に数値を入れて指定したい場合は基準点に注意して指定します。※アートボードを広げる際、基準点が真ん中の場合は上下に枠が足されることになります。
画像の下部をギザギザのあしらいにしたいとき
- 直線を引く
- 効果⇒パスの変形
- ジグザク ※大きさと折り返しの数でジグザグ感がかわります
- 背景と線の色を同じにすることで境界線を変えることもできます
- 【アピアランスを分割】を選択⇒一本の線を示していたパスが実際のジグザグに沿った線に変わります ※見た目のことをアピアランスという＝見た目通りのパスに変えるためには分離する必要がある
- オブジェクト⇒パスのアウトライン ※線が塗りになります
- 背景とジグザグを【パスファインダー】でまとめる or グループ化します
ちなみに私はここを学習しているときにアウトライン化できなくていろいろ調べました(;^ω^)
わかったことは効果⇒パス⇒パスのアウトラインとオブジェクトからのアウトラインは違うということです。まだここについて深掘りできていないので実際に作業するときに勉強しなおしてみます。。ネットで調べてみてもやはりわかりづらいようですので、復習用に下記サイトを見つけましたので紹介します🐧初心者にはちょっと難しそうな予感・・・がんばります
画像のトレースについて
トレースをする際、いったんアートボードの外で作業をして、問題なければボードに戻すようにしましょう。まず【配置】から元にしたい画像を配置して、【画像の切り抜き】を選択します。これでAIによって画像を判別してくれます。※マスクではなく切り抜きのため、切り抜いたら戻すことはできません。
【画像トレース】のオプションから【プリセット】を選択します。いくつか例をご紹介しますが、元にする画像によって変動するので画像に合わせて試行錯誤することが大切です🐧
- デフォルト：線画におすすめ
- 写真（高精度）：よく見るとベクターの画像になりますが写真とほぼ区別がつきません
- 写真（低精度）：高精度よりは表現がゆるくなり、よりイラストに近い仕上がりに。
- 16色変換：写真や写真そのものにうつっているもの、写真の解像度によって仕上がりが変わる
トレースが完了したら【拡張】で不要な部分を削除します。【ダイレクト選択ツール】で不要な背景部分を選択し、バックスペースキーで削除します。不要なパスを削除したらアートボード内に配置しましょう！
トレースした画像を編集する
影をつける場合
- 【ウィンドウ】⇒【アピアランス】 ⇒fx ※【効果】⇒【スタイライズ】でもどちらでも同じ
- ドロップシャドウ（明るい画像に対して影をつけるなら）描画モードを【スクリーン】に変更。ぼかしのカラーを白にするのもよいでしょう
ドロップシャドウは強くかけると品がなくみえるので、ほどほどで抑えておくのがベターです。
色を変更する場合
- カラーパレットマーク ※コントロールパネルのカラーパレット
- 詳細
- 【指定】ではなく【編集】を選択
- カラーを編集
- オブジェクトを再配色
【編集】モードの【ハーモニーカラー】にチェックを入れると全体的にカラーを変えることができます。また、チェックを入れない場合は一色のみに対して色を変更することができます。
トレースをする際は背景が少ない画像や、Photoshopであらかじめ元画像の解像度を下げておくなどトレースを意識した準備をしておくことで時短につながります✨
シンボルについて
シンボルのメリットは一つ登録しておくとそのうちの一つを編集するだけで他のシンボルにも影響が及び、一気に編集することができる点です。同じ要素が複数出る場面で有利なため、Webサイトをデザインする際などのパーツなどにも使えます。
- 【ウィンドウ】⇒【シンボル】を開く
- シンボルを作成
- シンボルをパネルにドラックする
- 名前のみ登録でOK
【シンボルスプレーツール】をセットして使用することで任意のシンボルをドラッグしてスプレーのようにちりばめることも可能です！※ツールはセットしておく必要があります
オリジナルブラシの作成
シンボルとほぼ同じ手順で登録することができます。こちらはペンツールやブラシツールで操作することができ、パスに沿った線を作ることができます。スプレーだとパスに沿った線は作れないのでこの点で異なります。
また、ブラシは太さやバランスを調整することもできます！
その他覚えたいこと
整列
- 分布：整列の【・・・】の中に隠れている。等間隔に分布はよく使用する
- 基準：アートボードに整列はアートボードに合わせて寄せられる。基準点がどこになっているか確認する癖をつけておいた方がよい
ショートカット
ショートカットキーについては下記サイトがわかりやすかったので共有します！
時間があるときに見て実際に使えるように何度も実践しましょう！
角丸のつくりかた
長方形の図形を作成したときに四つ角にある〇の部分を内側にドラッグすることで角丸にすることができます。ダブルクリックすることで正確な数値を入力することもできるので大変便利です🐧
キラキラの光のあしらいのつくりかた
- 正方形を用意する
- 45度傾ける
- 効果⇒パスの変形
- パンク・膨張を選択してスライダーを調節する
┗収縮：キラキラ
┗膨張：花のような形
実際に試してみると感覚的にもわかりやすいのでぜひ試してみてください！
アピアランス
アピアランスを使用することで、1つのオブジェクトに複数の効果を設定することが可能になります。また、アピアランスは線の設定が保たれたまま修正することができるため、現場のデザイナーにもよく使われています。
Adobeの公式サイトにアピアランスの解説が詳細に記載されています。
下記サイトは基本の使い方を写真付きで説明しているので初心者にかなりわかりやすくおすすめです✨
【イラレの使い方】知らないと損するアピアランス！（基本編） |
アイコンを挿入するとき
アートボードの枠外にアイコンを配置し、すべて整列した状態でバウンディングボックスで調整することで、直観的にサイズを調整して配置することができます。こうすることで時短につながります！
Illustratorの拡張子
Illustratorには複数の拡張子があります。pdfはみなさんご存じかと思いますが.ait形式なんてものがあります。私は初めて聞きましたが、Illustratorのテンプレートとなるものです。仕事や自分でデザインをする際に決まった設定がある方は活用すると便利ですね！
よく使う設定を「テンプレート(ひな形)」として保存できる形式です。上書き保存や編集はできません。
引用：
【 Illustratorの保存形式 】 ai・eps・ait・pdf・svg・svgz ってどう使い分けるの？
アートボードぴったりに配置したい場合
X、Y軸の座標を0にすることで左上からそろえることができます。ほかにも【整列】パネルから【アートボードに整列】を選択してもOK！Webのときによく使えます。
企業のデザインをする場合
新規でなく既存のデータがあるときにはあらかじめどういったフォントやイラスト、画像が使われているのかを見ておくことが大切です。複数のフォントを用いたり、既存に合わないテイストのものを使用すると統一感がなくなってしまいます。
アウトライン化する際に気を付けたいこと
一度アウトライン化すると元に戻すことはできません。そのため、別名保存することはご存じかもしれませんが、そのほかにも万が一のことを考えて、ペーストボード（デザイン範囲外）に同じ文字をコピペしておいておくことを強くおすすめします🐧
そうすることでアウトライン化しても編集可能な同一文字が残っている状態なので文字の打ち直しや調整のし直しがなくなるので安心です。以下を徹底することでアウトライン化時のトラブルを防ぐことができますので少しでもトラブルによるロスタイムを減らせるようにみなさんも対策を実践していきましょう！
- 誤字脱字はないか
- フォントは問題ないか
- ペーストボードに同一文字をコピペしているか
- 別名保存する
一つのイラストで塗りと線が組み合わさっている場合
塗りと線の色を一緒に変更したくても選択したときに「？」の表示となってしまいます。そのため、オブジェクトの形が確定したら線を塗りに変更するとよいです。
【オブジェクト】⇒【パス】⇒【パスのアウトライン】で塗りに変更し、まとまったら【パスファインダー】で合体します。altを押しながら【合体】を押下することで【複合シェイプ】になり、後で修正することが可能です。合体した後に修正するのは大変なので複合にしておくと安心ですね✨
アートボードからはみ出した部分をカットしたいとき
適当な長方形をアートボードに沿うように作成し、はみ出ている部分と重ねて【パスファインダー】の2つ目にある【前面オブジェクトで型抜き】を選択することできれいにカットすることができます。これは現場でもよく使われる小技なので覚えておくとショートカットになります(^^)/
まとめ
今回はIllustratorの基礎や小技で学んだことを紹介しました！正直私個人としては0⇒1を作るのは今のところ苦手意識があるので飲み込み切れていない面がありますが、何事もやってみることが大事だと思うのでIllustratorで出来そうなことがあれば積極的に使って慣れていきたいと思います(*^-^*)
本日の学習部屋はここまで！お疲れさまでした🐧
次回はデザイン基礎です！軽くご紹介して本題の動画編集に行けるかなと思いますのでぜひよろしくお願いします✨
LV.5 【初心者】Photoshopで出来ることはなにか
本記事は、初心者の管理人がPhotoshopで「こんなことができる！」「こうやったらできる！」と学んだことをまとめたものです🐧
基本操作は世に出回っていますのでこちらでは割愛します。
ちなみに私はこの本で学びましたが、基本中の基本が簡単に学べますのでおすすめです✨
![デザインの学校 これからはじめるPhotoshopの本 [2020年最新版]](https://m.media-amazon.com/images/I/511N0mXrKHL._SL500_.jpg "デザインの学校 これからはじめるPhotoshopの本 [2020年最新版]")
🐧目次🐧
Photoshopで何ができる？
Photoshopでできること
Photoshopでできることはたくさんあります。Photoshopだけでなく、illustratorや別のアプリを使って制作をすることもありますが、会員数は600万人を超えているとのことなので、かなりのクリエイティブの現場でしようされていることがわかります。おおまかに下記のことができますが、組み合わせで様々なクリエイティブ制作ができるので可能性は無限大です∞
下記のようなこと以外にも、たくさんのことができますが一部をご紹介します。
- 写真の加工・補正
- 切り抜きや合成
- Webデザイン
- 漫画っぽい表現やいろんな技法の表現
まずはいろんなことに興味をもってやってみることが大切だと思います♪
基礎知識を入れておこう
Photoshopではビットマップ画像と呼ばれるデータを扱うことが得意です。特徴として、ピクセルで構成されていて、編集を加えると劣化しやすいことがあげられます。これは写真データなどが当てはまります。（写真を拡大したときに粒状のピクセルが見えますよね！あれのことです）
こちらの記事でも記載しているのでぜひご確認ください♪
kairi-video-editing.hatenablog.com
反対に、ベクター画像はillustratorが得意とします。ここでは詳細は割愛しますが、印刷物の制作をする際にもよく使われますね！
どちらも同じAdobe製品のため、Photoshopで作成した画像をillustratorに配置したり、それぞれをうまく組み合わせたりすることで最高のクリエイティブが作れること間違いなしです🐧✨
Photoshopのキホンツール
一からデザインする方はすでにご存じかもしれませんが、Photoshopは新規作成時にある程度カンバスサイズを基本テンプレから指定することができます。私はディレクターなので元あるデザインを流用することが多かったため、恥ずかしながら知らなかったです…。Web用だったり印刷向けだったりと最初から指定することで、デザインをよりイメージしやすいですね。
また、ワークスペースも目的に応じたセットにすると作業効率が変わります。【ウィンドウ】⇒【ワークスペース】からセットしてみましょう！
写真の補正について
写真の補正はレタッチとも呼ばれます。写真をなぜ補正するのか。それは商品や人物をより魅力的に魅せるためです。その写真が見る人にどういった印象を与えるのか、訴求したいことを伝えるためにはどうしたらよいかを考えてそれに見合った補正をすることがとても大切です。
補正のいろいろ
いくつか補正の特徴をご紹介します。
明るさを補正
色調補正パネルを操作します。レイヤーパネルに色調補正レイヤーが付き、何度も明るさ調整をし直すことができます。イメージメニューからも色調補正が可能ですが、これは後から編集しなおすことができないという特徴があります。
色見補正
室内照明によって料理がおいしくなさそうに見えちゃったりすることありますよね…そんなとき、【レンズフィルター】を活用すれば簡単に補正ができます！ちなみにこの照明の影響でおいしくなさそうに見えることを「色被り」しているといいます。この色被りは暖色系に色被りしているなら【寒色系】に。逆に寒色系に色被りしているなら【暖色系】を設定するとだいたい解消されます！もし【レンズフィルター】だけで解消しない場合は彩度や明るさなど、ほかの調整ツールも利用してみてください。
ほんのちょっと補正しただけでもこのような変化があります。まだ少しピンクがかっていますが、左の補正前と比較してもかなり見やすくなっているのがわかりますね🐧
彩度を補正
【彩度】はくすんだ写真を鮮やかにすることができます。彩度調整をすると不自然な鮮やかさになることがあるので、自然界のカラーは【自然な彩度】にすることがおすすめです✨
モノクロ変換
一言でモノクロといっても、ただ白黒に変換するだけではなく、特定の色味を暗くすることでより味のある写真にすることができます。【着色】はセピアにするなど白黒の中でも色付けをすることができます。
他にも多くの色調補正が、、！
- トーンカーブ：ポイントを移動させて色の調節を行う
- カラーバランス：諧調ごとに色の補正ができる
- カラールックアップ：あらかじめ用意されているテンプレから選べる
- 2諧調化：明るいところor暗いところのみの調整になる
- グラデーションマップ：明るいor暗いによってグラデーションをかけられる
Camera Rawフィルター
こちらは色被りや色調補正などの調整ができます。フィルター機能で補正するのでレイヤーはなく、後で編集することはできません。 一画面で、明るさ、コントラストやシャープやノイズの低減など様々な編集を行えるというのが大きな特徴となります。*1
露光量
露出量では、全体の明るさを調整するのではなく、特に明るい部分、中間部分、特に暗い部分に絞って明るさを調整することができます。*2
ポスタリゼーション
ポスタリゼーションについて、Adobe公式サイトがわかりやすく説明していたのでご紹介します。
ポスタリゼーションという用語は、かつてアーティストが写真を印刷ポスターにするために使った処理方法から由来しています。大量に印刷するには、色のバリエーションを少なくし、少ない色数で印刷する必要がありました。ポスタリゼーションを施すことで、色の数を少なくし、繊細なグラデーションを大まかな色合いにすることで、絵の具を塗ったような、またはエアブラシを使ったような効果を画像に加えることができます。
引用：ポスタリゼーションで写真にアートな効果を,ポスタリゼーションとは | 写真にアートな効果を追加 | Adobe, （2023年2月5日）
さまざまなフィルターで魅力を引き出そう
Photoshopの【フィルター】では、さまざまな効果をつけることができます。フィルターは一つの効果だけでなく重ねることもできますし、フィルター一つにとっても細かく調整することができるので、その写真にそって調整することができます。以下に少し例をご紹介します。皆さんもいろんなフィルターを触ってみてください！
- 水彩画 ：水彩で描いたようなタッチ。もともと手書きのイラストや水彩画を通すと奥深いタッチになる
- 粒上フィルター：レトロな雰囲気を出すことができる
- ライブラシ ：色数を少なく見せる。手書きに近いリアリズムなタッチを出せる
- スケッチ：ハーフトーンパターン：ドット上の効果を写真に持たせる（点や線）
- 二値（白黒） ：画像を白と黒の2色にすることができる。描画色と背景色が白と黒に影響する。色を変えることもできる
- モザイク、パッチワーク：背景のあしらいにも使用できる
- ストローク ：イラストチックにできる
フィルターごとの変化を確認できるサイトがありましたので共有します！自身の編集元の画像で試すのもよいですが、事前にイメージがわくと時短にもなるかと思います。どのフィルターがどういった効果をもたらすのか見ておくといいですね。
ちなみに、フィルターは順番によってかかる効果も変わるので入れ替えて調整してみるのもおすすめです🐧
参考：
以下は私が学習していて気になって調べたことを共有します！
シャープ
スマートシャープ：画面がくっきりと鮮明に見えるようにする
ただしピクセルの諧調表現を損なうこともあり、使用も一回までがよいでしょう。
他シャープの違いについては下記サイトがおすすめなのでシャープについてあまりわからないなという方はぜひ見てみてください🐧
参考：
ぼかし
個人的にぼかしは「ガウス」をよく使うイメージなのですが、それぞれどういった効果があるのか違いがわからなかったので調べました。やはり一般的にぼかしというの、ぼかし（ガウス）のことを指すようです。
適用範囲内のピクセルを平均化させることでぼかします。一般的に「ぼかし」と言えばこのフィルタのことを指し、最もよく使われるものです。
とのことで、下記のサイトはそれぞれのフィルターだけでなく、いろんなパターンでのぼかしが説明していてとてもわかりやすかったです！私もこれからぼかしを利用するときに見返して参考にしようと思います🐧
人物の肌補正
世の中に出回っている俳優さんの広告写真などは100％肌補正がされていると思ってよいでしょう。制作現場でも補正前との違いに驚く人もいるようです(;^ω^)【スポット修復ブラシ】を使ってニキビ跡や虫刺されを除いて、ファンデーションのような仕上がりにすることができます。
写真の合成で気にしたいこと
合成する前に考えるべきことは、合成する素材同士のコンディションをそろえてから合成するということです。切り抜きだけではなく、影など背景となじませることも考えるべきポイントとなります。
素材の切り抜き
どこまで細かく切り抜くかは背景や仕上がりの細かさによります。細かく切り抜くに越したことはないですが、仕上がりに応じて切り抜くことは意識した方がよいです。失敗談ですが私もデザイナーの切り抜きのフォローを担当していましたが、初めは程度がつかめず、アプリのクーポン画像に使用する小さいサイズかつ単色背景のものでも細かく切り抜いて時間がかかってしまっていました。拡大縮小をうまく活用しつつ、遠くから見たり近くから見て違和感がないように調節することが大切です。
選択とマスクとグローバル調整
ある程度選択繁栄を指定したら【選択とマスク】で調整しますが、境界線の調整に便利なのが【グローバル調整】です。ここでは選択範囲の境界線を調節することができます。
使用例については下記サイトが初心者にもわかりやすかったため、実際に切り抜きをする際に気になる方はぜひご確認ください！個人的には境界線は気持ち内側に入っていたの方がきれいに切り抜ける印象があるので、様子を見つつエッジをマイナスにして調整するのがおすすめです🐧
上級者向けにはPhotoshopのいろんな機能を利用して調節することも検討したいですね。下記はより自然に切り抜けるテクニックが画像付きでわかりやすく記載されていたので、グローバル調整でも切り抜きに違和感が出てしまう場合にはぜひ見てみてください！
複数のアプリを使い分けよう
Photoshopでも苦手とするものがあります。レスポンシブデザインを作成することや、余白部分の数値をとるといったデザインを作成するのは苦手です。パーツなどデザインが必要なものはPhotoshopで作成して、AdobeXDでLPをデザインするといった作成も現場では見てきました。特にXDは同時編集のしやすさというのもかなり魅力的なので、複数人で違うページの作業を進めたり、指示書の作成にも有効です。すべてをPhotoshopで作成しようとするのではなく、より効率が良いものを取り入れて作成をするとよいですね。
覚えておきたいショートカット
私が新たにPhotoshop内のショートカットで覚えたものを記載します。※Photoshop以外でもよく使うショートカットはPhotoshopでも使えることが多い（コピーなど）ので割愛します。
- Ctrl＋Alt＋R：選択とマスク
- Ctrl＋J ：レイヤーを複製
- Alt＋Delete ：描画色で塗りつぶし
- Ctrl＋Delete：背景色で塗りつぶし
覚えておきたい用語・検索したこと置き場
ここでは私が実際に作業するときに必要そうなものを収集したサイトや用語を残しますので、気になる方いらっしゃればぜひご覧くださいm(__)m
- 包括光源：レイヤー効果で影をつける際にチェックをつけるかどうか選択できます。Photoshopでは基本的に同じ方向から影が入るようになっているため、独立した影をつけたい場合は「包括光源」のチェックを外す必要があります。
■Photoshop 影のつけ方
Photoshopで切り抜き画像に影をつけてなじませる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
■人物の影のつけ方
影のつけ方のポイントがパターン別に記載しているので、簡単な影のつけ方からマネできそうです。
Photoshop 簡単な影の作り方３パターン ＋ リアルな影など – パソコン生活サポート Pasonal
■Photoshop合成 コツ
画像を合成するときのコツと、違和感なく合成するコツが例を用いて書いているのでとてもわかりやすいです
〈Photoshop 合成〉画像と画像を違和感なく合成するテクニック | DESIGN TREKKER
■再度「選択とマスク」を実行
選択範囲を作成して選択とマスク画面に遷移して、OKにしたけどもう一度調整したい！と思ったときに使えます。最初はどこにあるかわからなくて焦りました…(;^ω^)
レイヤーマスクを選択するなどしてメニューから「選択とマスク」を実行すると、再び「選択とマスク」の操作画面に入ります。
選択範囲を微調整して、出力先にレイヤーマスクを選んでＯＫをクリックすることで、現在のレイヤーマスクに調整を加えることができます。
引用：Photoshopの「選択とマスク」の使い方 境界が複雑なものを切り抜く時に使う | カラーマネジメント実践ブログ 〜フォトレタッチの現場から〜
■photoshop カラーピッカー 画面外
もし私と同じように初心者でこのやり方を知らない人がいたら、色を選ぶ時短になるので絶対覚えてほしいです！「カラーピッカーってPhotoshopの中でしか色を持ってこれないのかな？色が欲しいサイトがあるけど、一度キャプチャをとって保存して、Photoshopに入れてからとらないといけないのかな」と超初心者なので思いました。でもさすがPhotoshop。そんなことはもちろん対応済みでした。これで参考にしたい色があっても簡単にもってこれます🐧
Photoshop スポイトツールで画面外から色を選択 - 北の国ウェブ工房
■photoshop テキスト 一部 効果
テキストを入力したとき、一部だけに効果を充てたい。レイヤーを分けるのが面倒くさい。そう思ったのですがそこは分けるのがセオリーだそうで。どうしたら簡単になるのかなと思っていたところ、テキストを分解するプラグインがあるようです！作業効率化のためにぜひ検討したいですね！
【神ツール】テキストを一瞬で分割するPhotoshopスクリプト - マルクリ道場
■反対色 検索
カラーコードを入れるだけで簡単に反対色と補色を知ることができる便利なサイトです。
PhotoshopでWebデザインを作成するとしたら
考えたいこと
Webデザインを作成するときに大前提として考えたいのは、コーディングをして完成であるということです。ただ見た目がよいデザインをするのではなく、きちんとコーディングができる状態のデザインをする必要があります。一つのカラムがどれくらいなのか、余白がどれくらいなのかを頭に入れながら作業をしたり、計算がしやすい、キリがよい数値に設定することも大切です。
アートボードについて
アートボードはPC／SPでわかれていたり、バナーのデザインなど、複数のサイズのものを作成するときに便利です。高さを伸ばしたいときには【切り抜きツール】を用いて縦を伸ばすやり方が便利です。背景は【レイヤー】の背景をべた塗りするとよいでしょう。（背景に装飾をつける場合は例外です）
ガイドについて
一からWebデザインをしたことがないので簡単な上部と横から引っ張るガイドしか知らなかったのですが、Webデザインを作成するときには便利な【新規ガイドレイアウトを作成】というものがあります。これはマージンや幅を指定することができ、ガイドをロックすることで常に意識したデザインをすることができるので便利です🐧
スマートオブジェクトの特徴
スマートオブジェクトにはたくさんの利点があります。動画編集においても、サムネイルを作成する際に役立つことがあると思いますのでご紹介します。
- 非破壊編集：画像の縮小・拡大に便利。画像は通常、小さくして元の大きさに戻すとぼやけます。しかし、スマートオブジェクト化しておけば画像を縮小して元にもどしてもぼやけることがありません。画像を大きくしたり小さくしたりする場合はスマートオブジェクト化することをおすすめします。※ただし元の画像より大きくするとぼやけてしまうため、スマートオブジェクト化する際は元画像の状態（MAX）でかけるようにしましょう。
- リンク設置：リンクで埋め込んだ元のPSDを編集すると、編集した内容が反映されるようになります。※元のフォルダの階層構造が変わるとリンクが切れてしまうため、注意しましょう。元に戻すとリンクも戻ります！
- 複製：シェイプと文字の組み合わせ（シェイプで作った図形の上に文字を乗せたものを一つのオブジェクト化する）もスマートオブジェクト化できます。こちらも一つのレイヤーとして扱うため、複製やリンク設置のように一か所を修正したらすべて反映されるといったデザインもできます。複数同じ要素があり、変更する可能性があるようなものはあらかじめスマートオブジェクト化しておくと後々時短につながります
- スマートフィルター：フィルターを何重にもかけることができたり、解除したりすることができます。マスクにたいしてかかるので背景だけフィルターをかけてぼかしたり…などの使い方もできます。
活用しよう！レイヤー検索
私は実務で使用していなかったのですが、今回勉強してはじめて使い方を知りました。レイヤーの検索窓で該当のレイヤー名で検索して絞ると、ほしいレイヤーだけが表示されるようになり、すべてのレイヤーに対して同じレイヤー効果をつけたいといった場合に【レイヤースタイルをコピー】すると一気に同じ効果を与えることができます。これは時短につながりますね☆彡ただしこれには後から編集がしやすいように、レイヤー名のつけ方にも規則性を持たせることを意識しておく必要があります。いざ検索しても、検索で出てこなくて探すことになれば結局手間なのでそれは避けたいですね。
まとめ
今回はPhotoshopの裏技や便利なツール、いざというときに役立つサイトなどをご紹介しました。私もまだまだ勉強中ですが、活用できるものを取り入れながら本格的にサムネイルの作成などに生かせたらいいなと思っています！
本日の学習部屋はここまで！お疲れさまでした🐧
次回はillustratorです。Photoshopより触ったことがないので不安ですが頑張ります(*^-^*)
*1:hoconiwa
Photoshopの画像加工が楽になる！Camera Rawフィルターを使った色調補正の方法｜haconiwa｜「世の中のクリエイティブを見つける、届ける」WEBマガジン
2023年2月2日確認
*2:Photoshopで写真をレタッチする方法,Photoshopで写真をレタッチする方法 | UX MILK,（2023年2月5日）
*3:【photoshop】選択とマスクで選択範囲を仕上げる,【Photoshop】”選択とマスク”で選択範囲を仕上げる | すきまのスキマ（2023年2月5日）
Lv.4 Webにまつわる基礎知識
🐧目次🐧
本記事では、Webリテラシーを学習した管理人が、覚えておきたいと思った箇所についてピックアップしたものをご紹介していきます！
基礎的なものになりますのでよければ一緒に学びましょう♪
コンピュータについて
動画編集のおすすめPCスペック
PCスペックで意識したいことは以下の４点です。
SSDとは
内蔵型と外付け型があり、ストレージともよばれていて、ファイルを保存する場所のことです。カイリ調べによると、外付け型の容量は2TB以上はあるとよいようです！
Amazonのおすすめはこちら▽
- 超高速スピードで、高解像度の写真や動画を保存・編集・管理
- プロのクリエーターの大容量ニーズにも対応する大容量のポータブル SSD なら画像やビデオの編集、保存に余裕が持てます。
- 軽量 約52gでコンパクト。旅行やビジネス、どこにでもに持ち出せます。
- Windows とMac に対応
同商品でも500GB＝4TBまであるので必要な容量に応じて選べるのはうれしいですね！
CPUとは
CPUはパソコンの頭脳と呼ばれ、制御と演算を担当します。現在はIntel社のCPUが主流になっています。
グレードは、Core i9＞Core i7＞Core i5＞Core i3の順番で良いです。
引用：
【Intel CPU】Core i9, Core i7, Core i5, Core i3の世代の一覧・見分け方のまとめ
とのことで、最低でもCore i5、動画編集となるとCore i7はあった方が望ましく、予算次第ではCore i9を検討した方がよいでしょう。私もまだ十分なスペックのPCを検討できてないので、いざ本格的に活動するとなったら慎重に検討します💦
GPUとは
画像や映像の処理に特化した制御と演算を担当します。GPUが必要かどうかはどんなソフトを使用して主に動画編集を行うのかにもよって変わります。
「スムーズに動画編集を学び、実際に動画編集する」ことを考えると、やはりGPUを搭載したPCの仕様が好ましいです。
とのことで、予算によっては検討した方がよさそうです。
とても分かりやすい記事があったのでご紹介します！▽
メモリとは
コンピュータの記憶を担当していて、一般的にはRAMを指します。下記の例が具体的にわかりやすいため、共有しますね！
メモリとは、CPUが処理を実行するためのデータを一時的に記憶する場所です。
わかりやすく例えると机のような役割をします。
机は広ければ広いほど、書類や資料を並べたり、筆記用具や工具を置いたりと作業はしやすくなりますし捗ります。
狭い机では、一旦引き出しや棚にしまって、また出してという風に、作業スピードが遅くなります。
引用：
メモリの役割について【パソコンの話】｜NSK LOG｜日本ソフト開発株式会社
動画編集用のPCだと、16GBは欲しいといわれています。
上記の点を踏まえて、自分に合ったスペックのPCをぜひ検討してみてください！
文字コードってなに？
文字コードとは、アルファベットやひらがな等の文字をビット列(0と1の組み合わせ)に対応させた規格です。
引用：
【IT用語】 「文字コード」とは？実はコンピューターの基幹部分！ | Pikawaka
文字コードには複数の種類が存在しますが、WebではUTF‐8が主流となっています。文字コードは開発環境と本番環境で統一する必要があり、文字化けはテキストを作成した側と開く側の文字コード（ルール）が異なる場合に起きます。
文字化けを防ぐためには以下の2点を確認するとよいようです。
参考：
文字化けを防ぐ&解消する方法-独学!未経験からWebデザイナーになる!!
また、Windows10の場合になりますが、原因と対策についてわかりやすく記載されているためぜひご覧ください。
ネットワーク周りについて
LANとWAN
用語についておさらいです。
- LAN：社内や自宅などの小規模なネットワークのこと
例）近くの人とゲーム機で通信する場合
- WAN：電話回線など、通信事業者が提供する広域のネットワークのこと
LANのLは「Local」、WANのWは「Wide」なのでわかりやすいです。
IPアドレスについて
IPアドレスとはインターネット上の住所のことを指します。世界中で重複がないように設定されていて、例えば電源を切ったりするとIPアドレスが変わることがありますが、それはその時に空いているIPアドレスが割り当てられるからです。リモートワークが普及している昨今、IP制限（特定のIPからのみアクセスを可能にする）をかける会社も多いのではないでしょうか。私も開発環境やバックログなどのツールはIP制限がかけられていたため、特にルーターを使用していた際には毎日のようにIPアドレスが変わっていたためとても大変でした。（ルーターによるのかもしれませんが・・・(;^_^A）光回線だと安定することが多い印象です。
URL、ドメインについて
基本中の基本になりますが、URLとドメインについて改めて学びました。
ドメインとは下記の赤文字の箇所を指し、URLはドメインを含む全ての文字を指します。
https://kairi-video-editing.hatenablog.com/
┗ ドメイン ┛
┗ URL ┛
ドメインはドメイン事業者から購入することができ、取得は早いもの勝ちになります。安いものでは年間1000円ほどで契約できます。当ブログのドメインを決める際にも、被らないよう模索しました。SNSのIDなども被らないように早いもの勝ちなので利用している方はわかりやすいかと思います。
Webアプリケーションってアプリと何が違うの？
「Webアプリケーション」という単語は私は聞きなれなかったのですが、スマートフォンで目にするアプリと似ていて、違いはインストールが不要でブラウザから利用できるもののことを指します。さまざまなECサイトやteamsやzoom、チャットワーク等々の社内の情報共有で使用する業務ツール、PCやゲーム機で連動してできるゲームなどがあげられます。これらはIDとパスワードがあれば利用端末にかかわらずアクセスできることがメリットになります。Webが必要不可欠になっている私たちにとってなくてはならない技術になっていることがわかります。
SSLと証明書について
現場でたまに耳にしていたものの、恥ずかしながら説明できるほど十分に理解できていなかったため改めて学習しました。この証明書はどのようなページでもスタンダードになっていて、検索エンジンも推奨しています。
SSLサーバ証明書は、ウェブサイトの「運営者の実在性を確認」し、ブラウザとウェブサーバ間で「通信データの暗号化」を行うための電子証明書で、GMOグローバルサインなどの認証局から発行されます。 SSLサーバ証明書には、ウェブサイトの所有者の情報や、暗号化通信に必要な鍵、発行者の署名データが含まれています。SSLサーバ証明書が導入されたウェブサイトは、URLがHTTPSから始まり、先頭には鍵マークが表示されるようになります。
引用：
サーバー周りについて
よく目にするクラウドってなに？
クラウドとは下記の説明がわかりやすいため、共有しますね！
クラウドサービスとは、ソフトウェアのインストールが必要ないサービスです。
サービスには、Gmail、Yahoo!メールなどのWebメールやTwitter、InstagramなどのSNSなどがあります。たとえば、Webメールではデータがすべてインターネット上で保存され、送受信もインターネット上のアプリを経由します。
引用：
クラウドとは？意味・定義 | ITトレンド用語 | NTTコミュニケーションズ
メリットとしては下記3点があげられます。
- 導入までのスピードの速さ
- スペック調整のしやすさ（費用面でも◎）
- 利便性の高さ
それぞれの詳細です▽
1：数分で利用開始できます
2：例えば自分が経営している飲食店がテレビで取り上げられることになった場合、放送後にHPへのアクセスが集中してサーバがダウンすることが予想できます。このようにあらかじめ予想できるときに、スペックを上げておくことでアクセスが集中しても耐えられるようになります。ただ、放送からしばらくするとアクセスも落ち着いてくると考えられますよね。その場合はスペックを元に戻すこともできるので、コスト面でも運用しやすいです。
3：
利便性の高い様々なサービスがソフトウェアベンターやクラウド事業者から提供されており、これらを利用することで自社の業務効率の向上やアプリ、ITツールの開発、運用に強いられていた負担の軽減を実現してくれます。
こちらの記事がわかりやすくまとめていたのでご紹介します▽（3の引用元）
ローカル環境とは
Webアプリケーションを動作させるためにLAMP環境というものが必要です。
LAMP環境とは以下4つのことを指します。
私は開発経験はないのですべてはわかりませんが、事業会社のディレクターとして勤務していた際、サポートが切れるということでPHPのバージョンアップをする必要がありました。ページ数が少ないサイトの場合はスムーズに切り替えられる場合が多いですが、ページ数が膨大な量になると影響範囲が広いため、段階を踏んで切り替えるなど検討した方がよいでしょう。それぞれ詳しくは興味があればぜひ調べてみてください！
下記サイトは私が経験したことの詳細になりますので共有します！
また、上記のLAMP環境を構築できるアプリケーションとしてXAMPPやMAMPが人気のアプリケーションとなっています。プログラミング言語や何がしたいかによってどちらを選ぶか決めた方がよいよいです。こちらは専門外のため、閲覧したサイトご紹介します。
本番サーバにどうやって接続するのか
本番サーバへの接続方法はSFTP接続とSSH接続があります。よく聞くのはSFTP接続のFileZillaというものです。SFTP接続は単純なファイルのアップロードとダウンロードが可能です。
もう一方のSSH接続はサーバーの操作も可能という点が異なり、より上級者向けの接続方法となります。開発を専門で学習する方は個人でぜひ調べてみてください！
画像などのファイル・フォントについて
JPEGとかよく聞くけど違いって？
みなさん画像の保存形式の違いについて、それぞれ説明できますか？恥ずかしながら私は過去の画像の保存形式がこれだから、とかイラストだからPNG,画像だからJPEGかなというような感覚だったため、改めて学びました。
JPEG
- 主に写真や複雑なイラストに利用される
- いったん画像を荒くすると元に戻すことができない非可逆圧縮
- 圧縮率の設定が可能
- 圧縮すればするほどファイル容量を小さくできるがそれに伴って画質は落ちる
- 背景の透過は不可能
GIF
- アイコンやバナーとして利用される
- 静止画をパラパラ漫画のようにコマ送りにすることでアニメーションファイルを作成することができる
- 背景の透過が可能
PNG8
- アイコンやバナーに利用される
- アニメーションファイルは不可
- GIFよりもファイルサイズが軽い
- 背景の透過が可能
PNG24
- 写真や複雑なイラストに利用される
- 圧縮を元に戻せる可逆圧縮
- メリットは多いがファイルサイズが大きくなりやすい
WebP
- 画像サイズが軽くなる
- ページの表示速度が速くなる⇒SEO対策になる
その他比較についてこちらをご覧ください▽
WebPとは？メリットやその他の画像形式との違い、変換方法を紹介|企業で働くクリエイター向けウェブマガジン「CreatorZine（クリエイタージン）」
ビットマップ画像・ベクター画像・SVG画像について
ビットマップ画像は色の点が集まって構成された絵のことで、ベクター画像は点と点をつなぎ合わせて構成された絵のことです。
ビットマップ画像
- きめ細やかな色表現ができる
- 写真や絵画は基本的にこのビットマップ画像
- PhotoshopやIllustrator『ピクセル』という画像形式はこのビットマップに当てはまる
ベクター画像
- どれだけ拡大しても画像が荒くならない
- 無数の色が含まれる写真はベクトル画像では再現がむずかしい
- PhotoshopやIllustratorでの『シェイプ』『パス』はこのベクトル画像に当てはまる
参考：
SVG画像
ベクターデータの画像形式の一つで、テキストファイルで保存されているためテキストの一部を変更すると画像にも反映されてます。例えばグラフを作成しているときに数値が変動した場合テキストを変更するだけでグラフの割合も変わるようになります。
いずれも適した画像ファイルを選択するとともに、適切な画像サイズにリサイズしてから使用することを意識しましょう。ファイル容量が大きくなるとサイトの表示速度が遅くなり、ユーザーの離脱にもつながります。
Webフォントってなに？
Webフォントとはユーザーの環境に左右されずに同じフォントをすべてのユーザーに見せることができるフォントのことです。いろんな端末で検証をしたりサイトを閲覧すると経験するのですが、同じサイトでもフォントが異なる場合があります。これは端末やブラウザごとに持っているフォントが異なるために起こりますが、これを防ぐことができます。おすすめはGoogle Fontsの定番のNoto Sans JPです。サイト制作するときもこのフォントで制作を進めることが多いです。
アイコンフォントもある！
このブログにもあるコメントのアイコンだったり、リストのアイコンだったり、よく目にするアイコンはアイコンフォントとして存在します。これらは解像度に左右されないため、拡大や縮小をしても画質は落ちませんし、フォントなのでCSSを修正すれば簡単に色を付けることができます。いくつか気になるアイコンフォントのサイトをブックマークして、自分が使用したい箇所にあったデザインのフォントシリーズを使えるようになるといざというとき便利です！
音声・動画のファイル
音声と動画についてはこれまで扱ったことがなく、ファイル名などの基本の基本も知らなかったので備忘録でまとめました！
音声のファイル：mp3
動画の拡張子
- mov：Appleのファイル形式
- mp4：圧縮率が高く、データを軽くすることができるため多く使用されている
まとめ
今回はWebにまつわる基礎知識についてざっくり広い範囲でまとめました。ご存じのことも多かったかもしれませんがいかがでしたでしょうか。私はなんとなく知っているけど人に教えるほど理解ができていないなと痛感した部分も多かったので復習にもなりました。
本日の学習部屋はここまで！
次回からいよいよアプリを触りながら実戦に向けて学習します。
お疲れさまでした！
Lv.3 うまくプロジェクトを進めるための手順
🐧目次🐧
打ち合わせ～納品までの流れと考えたいこと
今回はWeb制作に特化した説明になりますが、動画編集や何か制作をする際に共通して言えることも多いのでぜひ参考にしていただけたら嬉しいです！
打ち合わせって何をするの！？
初回の打ち合わせはクライアントを知ることからはじめましょう。クライアントがどういったことにこだわっているのかだったり、業界での立ち位置なんかもわかるといいですね。
納期と予算はプロジェクトを遂行する上で最も重要です。例えば納期が現実的に難しい場合でも、予算があれば外注を検討して間に合わせることも可能かもしれません。また、逆に予算も難しい場合は、フェーズごとに分けてここまでをこの期日でといった交渉もできる場合があります。ただ、まずは現実的な納期を提示し、これくらいの納期だとクライアントの要望を叶えることができるといった話をするのがよいと思います！
役割分担はどうするのか！？
情報や素材（特に素材）はクライアントから支給いただくのか、制作側で用意するのかも事前に取り決めたいところ。制作側で用意する場合は準備分の工数も確保して見積もる必要があります。また、制作側で用意する場合は、有料素材を使用する場合はクライアントに購入いただく旨も話しておくとスムーズです。
打ち合わせの際はヒヤリングシートがあると便利！
リニューアルサイトの場合は事前に既存サイトを確認し、プロの視点から問題点を考えたり、競合他社のサイトを比較したりして改善点をこちらから提案できるようにしておくとよいでしょう。
プロジェクトチームで働くということ
チーム内での役割分担は明確にしておきましょう。言った言わなかったのようなトラブルを避けるためにも、文章に残すことも忘れないことが大事です。また、プロジェクトがうまく進んでいるか可視化できるよう、ガントチャートがあると便利です。バックログは適切にステータスや期限を指定していればわかりやすいのでいいツールですね！
また、チームで働く場合に意識したいことは、アラートは早めに出すということです。仕事が間に合わない、進捗が芳しくないときはぎりぎりまでどうにかなるかもしれないと思って一人で抱えるのは避け、その旨を早めに相談しておくことが必要です。最も大事なことはクライアントのため、プロジェクトを成功させることにあります。
タスクの要件定義、かなり重要！
発注するクライアントが必ずしもWebや動画に詳しいとは限りません。そのため、こちらから提案依頼書を用意すると双方にとって良いでしょう。クライアントは「あれをやりたい、これもやりたい」「あの会社がやっているようなことをしたい」と要望を出してくることがありますが、時間やお金が伴わないこともあります。
ターゲットについて
ターゲットについても、クライアントが叶えたいことに沿って考える必要があります。一見、より多くの人に見てもらえればよいと思うかもしれませんがそうではありません。例えば、ベビー用品を販売している会社のホームページのが、色は黒が基調で白や高級感のあるテキストカラー、さらにフォントも明朝体だったらどうでしょうか？
参考：
このテイストでベビー用品を販売する会社だったら、サイトを訪問するエンドユーザーもベビー用品だとわかりづらいですし、離脱にもつながります。そうなってしまうと本来の目的が達成できなくなってしまいます。
反対に、ベビー用品を取り扱うサイトを見てみると、全体的にパステルカラーや明るめの色づかいに、ポップなあしらいやゴシック体のフォントが使われていることがわかります。
参考：
つまり、届けたいターゲットを絞るということはクライアントにとっても、制作側にとっても重要なことなのです。
誰に何をどう見せるのか考えるために、ペルソナを決めるとよいでしょう。ペルソナとは、年齢や居住地、仕事など架空の人物像のことです。
仮に下記人物を想定して、基礎化粧品（オールインワンジェル）を販売したいとします。
名前：鈴木美里
年齢：35歳、既婚、3歳と1歳の子どもがいる
仕事：事務職
居住地：埼玉県
よく使用するSNS：インスタグラム
小さなお子さんがいるため、スキンケアの時間も短縮したいですが、年齢的にもモノは妥協したくないと想定します。このようなユーザーを対象にした場合、潤い感があったり少し高級感があるといいかもしれません。
こちらのLPを参考に考えてみましょう。
- LPに鈴木さんと同じ年代の女性の画像を入れることで、ターゲット像を自分に投影しやすくなる
⇒ここで10代の若い女性だったり、高齢の女性の画像があるとターゲットからずれていると感じて離脱する確率は高いでしょう
- ジェルのテクスチャーがわかるようなデザインをFVに入れることで、ジェルを探しているユーザーの離脱を防ぐことにつながる
⇒FVはかなり重要なポイントです。最初に目に入るところなので、一発でユーザーに伝わるようなデザインを心掛けましょう。
- 落ち着いたカラーで、ターゲット層と商品のイメージを結び付けている
⇒ピンクのかわいらしい色遣いだと30代の大人の女性には合わないかもしれませんね。また、ある程度高級感もあった方が「時短したいけど質は良いものを」と考えている鈴木さんにはピッタリでしょう。
若い女性向け化粧品のサイトを見てみましょう。
若い女性向けでかわいい・リーズナブル・高品質をベースにしているブランドのため、ピンクであしらいもかわいいデザインになっていますね。
また、鈴木さんはインスタグラムのユーザーであることから、インスタグラムの運用をすることで目に付く機会が多くなるでしょう。インスタグラム上で検索をかけて気になるものを調べる方も増えています。公式サイトへ誘導するURLもしっかり掲載して、誘導できるとよいでしょう。
このように、ターゲットをしっかり絞ってそのターゲットに沿ったモノづくりをすることは効果に結び付きやすく、有効であることがわかります。
無料のやり取りはない！
見積は単価計算と工数計算がありますが、一般的には工数計算が用いられています。なぜなら、単価計算だと案件の工程によってばらつきが発生するため、その案件に沿った見積を都度行った方が双方にとって乖離が少ないためです。
ついつい忘れがちなのが打ち合わせややり取りなどのコミュニケーションのコストです。制作物をただ作るだけではなく、ヒヤリングや修正、こちらで準備するものがあればその確認など、多くの工程でやり取りが発生する可能性があります。この部分の見積はあらかじめしっかり見積もっておきましょう。制作物に対しての工数ではないため、後からの請求になるとあまりいい印象を持たれません。
いざ制作！・・・の前に全体像をざっくり落とし込もう！
Webサイトの場合でまず考えてみると、いざ案件を進めるとなった場合に必要なのはサイトマップを作成することです。これによってサイト全体を把握することができます。
サイトマップを知らない方は下記をご覧ください！
続いてワイヤーフレームを作成します。これは枠と線だけのページの設計図で、本格的なデザインに入る前により完成形に近づけておき、クライアントとすり合わせることでデザインや全体の工数を削減します。量産ページ以外は全ページ用意しておくことをお勧めします。また、デザインは後から対応するため、工数削減のためにもデザイン要素をつけないことが大事です。
イメージについてはこちらをご覧ください！
ワイヤーフレームとは何か？webサイト制作に重要なページ設計図を理解しよう！ | なんでものびるWEB
おおまかな全体の構成を把握してすり合わせながら制作することで工数を削減できるということは動画編集にもつながることだと思います。
ヒューマンインタフェースの理解
サイトや動画を見るのは基本的に私たち人間です。そのため、ヒューマンインターフェースに基づいた基本ルールを徹底することはモノづくりの基本となります。
このサイトでは、立体感のつけ方やアニメーションの動きを確認することができます
・「Human Interface Guidelines」
このサイトではヒューマンインタフェースの基本を知ることができます。ヒューマンインタフェースを意識しているかどうかで比較しているので、いかに重要かということが簡単にわかります。
ユーザーインターフェイスのデザインのヒント - Apple Developer
デザインはある程度均一化の傾向があるため、ベースデザインから離れたものは避けた方がよいでしょう。SPサイズになるとヘッダーはハンバーガーメニューになり、フッターは追従したり、バーガー内に含まれたり、リンクがあるときは青色のテキストリンクにするとわかりやすかったり・・・例えばSPのデザインがPCとほぼ同じだった場合、文字が小さくて見づらい印象を受けます。テキストリンクが緑だと、遷移先があると気づいてもらえない可能性があるでしょう。このように、ある程度主流になっているベースのデザインは取り入れることが大切です。
また、予算が許す限りにはなりますが依頼内容によっては外注で頼んだ方がクオリティやスピードが速く済む場合があるので積極的に検討してみるのもよいでしょう。
損害は押さえておくに越したことはない！
デザインやコーディングへと工程が進むにつれて、修正ややり直しの損害は大きくなります。例えば、このデザインで通っていたけれどコーディングの段階で「やっぱりこういうデザインに変えてほしい」などの要望があると、バナーなどの修正ならまだ差し替えのみで済むため対応できる可能性がありますがレイアウトの変更となると大幅な修正になるため難しくなります。そのため、「デザインの変更をご希望の場合は〇日までにご連絡ください」など、細かく区切っておくとよいと思います。この日までに修正をしないと間に合わないといったように、スケジュール感のすり合わせはしっかり行いたいですね。これは動画編集にも言えることで、スケジュールの線を引いて対応していくことは、制作を進めるにあたって意識しておきたいところです。
※納期と工数の面で難しくなるため、どちらも延長するのであれば対応できる可能性は高くなります。
修正がないことはないと思え！
「必ず間違いはあると思って確認すること」
これは私がディレクターとして校正に入るときに言われた言葉です。実際、間違いは多く見られます。依頼書の時点で間違えているもの、デザインやコーディングで間違えているもの・・・間違いは起こるという前提のもの、可能であれば多くの目でチェックすることを意識するとよいでしょう。特にWebサイトだとブラウザや端末、（ブラウザはブラウザ幅の可変領域も含めて）実機での検証も重要です。目視でダラダラ確認するだけではきちんとしたチェックはできないので、抜け漏れを防ぐためにも事前に検収シートを用意しておくとよいです。
納品したら終わり、じゃない！
納品することは確かに一番の目標ですが、印刷物と違ってメディアは常に進化し続けます。ただ作って終わりではなく、今後の改修も見据えた制作をするということは常に考えたいものです。この部分を考慮して案件に取り組むことで、継続してお仕事をいただける場合もあるので信頼を築き上げるためにも意識したいですね。
サイト公開後や動画納品後もクライアントに相談ごとがないかヒヤリングしたり、さらなる改善点を提案したりと気に掛けておくと次につながる可能性も広がります！
本日の学習部屋はここまで！
今回は主にWebサイトの納品までの流れで考えたいことについて書いてみました。Webサイト制作で経験したことも、考え方として動画編集に生かせる部分も多くあるんじゃないかと思うので、実際の勉強や受注した際にも心掛けたいと思います。
お疲れさまでした！
Lv.2 IT・クリエイティブってどう考えたらいいの？
🐧目次🐧
IT・クリエイティブについて考える
突然ですが、IT・クリエイティブについてどれくらい理解していますか？
どんなものがあるか、どういうことが大切なのか・・・
当記事では簡単な例を取り上げながら、私が情報収集したことをシェアしますね★
クリエイティブで考えたいこと
まず一番初めにお伝えしたいことは、プロはすべてのことに理由を求められるということです。動画編集でもなんでもいえることですね。実際に制作会社で勤務していた時、デザイナーの上司がよく部下に言っているのを耳にしました。
「これなんでこの色にしたの？」
「なんでこのレイアウトにしたの？」
ただ感覚だけでなんとなくいいから、ではよくないんですよね・・・クライアントの目的をゴールに導くためのきちんとした根拠が必要です！
すなわち、自分の成果物に客観的視点とデザインの意図を言語ができるスキルが求められるというわけです。
Webディレクターの観点からだと、クライアントにデザインをお渡しするときに
「こういうことを意識したデザインを作成しました」とお伝えすることで、意図が伝わって戻しを少なくすることにもつながり、総工数を抑えられることもできます。
クライアントはデザインのプロではないことも多いので、クライアントに寄り添った提案をしているということを伝えられると信頼もされますよね！
考えたいZの法則、Fの法則って！？
私たちが文章やサイトをみるときの視線の流れを利用した法則がZの法則と、Fの法則。
下記のAmazonの事例がとてもわかりやすかったのでシェアします
・Zの法則
「読み手が文章などをおおまかに確認する」ときの視線の動きの法則が「Zの法則」
・Fの法則
上から順に、左上から右、少し下に視線を移動させ同じ動きをする、のを繰り返す、「F」を何度も書くような視線の動きで、「読み手が内容をしっかり確認しようとする」ときの視線の動きが「Fの法則」です。
引用：
Amazon公式サイトの構造でわかる！「Zの法則」「Fの法則」とは？ | C-room
これを見ると、大事な情報やキャッチーなものは左上に置いた方がいいということがわかります
このようなデザインの基礎知識があった上でセンスを上乗せするとより良いデザインになります
ただ、合わせて大事にしたいのは制作から納品までのデータの整頓性です。
サイトやデザインは一度作って終わりではなく、今後も更新する可能性を考慮することでクライアントや一緒に制作するチームから信頼される存在になり得ると思います。
Webディレクターの経験としては、更新の依頼が来た時にデザインデータが残っていないなんてのはもってのほか、PSDがごちゃごちゃだったり、イラレも編集可能なデータは残っていなかったり・・・・なんてもことも(;'∀')
必ずしも同じ作成者が今後も更新するとは限らない（そうじゃないことの方が多い）ですし、データを探す手間も、データを整理する時間も抑えるために最初から意識したいですね
トレンドへの興味
また、IT業界においてトレンドへの興味は持っておきたいところ。
たとえば、デザインにも流行がありますし、コードもどんどん新しいものがうまれています。
ここで、私が「IT業界 最新トレンド」で検索して気になったものを5つご紹介します！
みなさんも調べてみてください
- 5G
私が動画編集選んだきっかけの一つでもありますが、5Gがより普及することでより外でも動画を見ることが日常になり、広告動画も増えると予想されています。
5Gとは？ 意味や特徴などをわかりやすく解説 | Splunk
- スマートシティ
スマートシティとは
「都市が抱える諸問題に対して、ICT等の新技術を活用しつつ、マネジメント（計画・整備・管理・運営）が行われ、全体最適化が図られる持続可能な都市または地区」
と定義づけられていて、私たちのこれからの生活に大きく影響を与えることになります。
引用：
ちなみにICTとは
ICTとは「Information and Communication Technology」の略称で、日本語では「情報通信技術」と訳されます。
引用：
ICTとは？ITやIoTとの違いやICTの活用例を解説｜Microsoft Azureコラム｜東京エレクトロンデバイス
- ローコード・ノーコード
ノーコードとは
ソースコードのコーディングを行わず、プログラミングに関する専門知識がいっさい不要で開発を行うことが可能になる開発手法
ローコードとは
0からコーディングを行うよりも、少ないプログラムコードで開発ができるという開発手法
メリット・デメリットについても詳しく書いているので下記をご覧ください！
引用：
ノーコード・ローコードとはそもそもなに？｜5分でわかる基礎情報 | SBテクノロジー (SBT)
- IoT
IoTとは
IoTは「Internet of Things」の略称で、日本語では「モノのインターネット」と訳されます。
で、すでに身近な家電にも反映されています！
詳しくは
IoTとは何か？ 活用事例を交えて意味や仕組みをわかりやすく簡単に解説 - 株式会社モンスターラボ
をご覧ください！
- EC
ECとは
ECサイトとは、インターネット上で商品やサービスを販売するウェブサイトのこと
日用品から家具家電、衣類などなど私たちの生活に必要不可欠なものになっています
詳しくは
をご覧ください！
クリエイターはいろんなことに興味をもってみよう！
ツールや新しいことに興味を持つことで世間のニーズを知ることができます。
多数派に合わせるということは自分の制作物を見てもらいやすいということにもつながるので日々の積み重ねが大事です。
また、人気のSNSはUI・UXの勉強にも有効です。アプリによっては世界中のユーザーが利用しているわけなので、計算されつくしているものと思っていいでしょう。
日々の積み重ねが大事
IT業界は常に進化し続けているといっても過言ではありません。古い知識や経験のままいてはおいていかれてしまいます。そうならないためにも、いろんなサイトや街中のポスターを見て、なぜいいと思うのか、どこがよくないのかなど自分で考える癖をつけたり、書体・レイアウトについてもアンテナを張っておくといざというときに活用できるかもしれませんね
カイリ’sシンキングタイム🐧
人気ランキング上位の5つの動物園のサイトを比較してみました。詳細については割愛しますが、それぞれの特徴について考察してみると面白いですよ！
個人的にはアドベンチャーワールドがもっとも見やすくてまとまっている印象を受けました！
https://www.hama-midorinokyokai.or.jp/zoo/nogeyama/
情報発信してみよう！
学習において、アウトプットすることはとても大事です。よく勉強も人に教えることで自分の力になるとも言われますが、それは本当に自分が理解していないと人に教えるほど言語化ができないからです。完璧でなくてもいい。自分のためにアウトプットすることを意識するともっと高みを目指せると思います。
私も自分の勉強のために今このように執筆しているので、書く力もまだまだですが身に着けていきたいと思っています。何事も向上心は原動力につながります。一緒に頑張りましょう(^^♪
本日の学習部屋はここまで！
今回はITやクリエイティブについて書いてみました。動画編集オンリーで考えるのではなく、広い視野でとらえることは必ずつながっていくと思います。
お疲れさまでした！
Lv.1 動画編集を学ぶ前に
🐧目次🐧
”クリエイター”から考えてみる
言葉のイメージだけでとらえないことが大事
クリエイターやITと聞くとどんなイメージを持ちますか？
おしゃれで華があって・・・というイメージを持っている人も多いと思いますが
実際に一番大事なのはTPOをわきまえることです
私は制作会社、事業会社のWebディレクターを経験しましたが
どちらも基本的なおしゃれ自由度は高かったです
ただ、クライアントとの打ち合わせはしっかりとジャケットを着用して、それこそTPO最優先でした
打ち合わせ多いと夏冬に対応した服装持ってると安心です◎
ユニク〇さんとかG〇さんでも今安くで買えるのでいいですね
どんな求人があるの？
実際の求人を見ると、どんな人物が求められているかわかりますよね
- 企画力・分析力・コミュニケーション能力
- チームの中で仕事ができる協調性がある
- スキルアップを目指している
- 幅広い視野からの提案力
などなど・・・
必要なスキルがわかりやすいので、ぜひ少し検索してみてください♪
一番大事なのはクライアントのビジネスをゴールに導くためのプロであることです
カイリ'sシンキングタイム🐧
ネットショップを制作するとして、必要な工程を考えてみました
- どういうネットショッピングを想定しているか 参考の確認
- 希望納期
- 概算見積
- 具体的なイメージすり合わせ
- 見積
- 指示書作成
- 素材支給
- デザイン
- 確認してもらう・修正やりとり
- コーディング
- 開発反映
- 開発環境で問題ないかチェック・修正
- 依頼元に確認依頼・修正
- 本番反映
- 本番チェック・修正 （納品）
これまでの経験からWebディレクターの視点からですが動画編集となると異なる部分もあるのでしょうね・・・
これから勉強していきます📝
フリーランスを目指している方
私はフリーランスというより副業、派遣もしくは業務委託でお仕事できればなぁと夢見ていますが、会社員より大変なんてことも多いみたいです
フリーランスを目指す方は最初はアルバイトでもいいのでどこか組織で働くことがおすすめです！
私も今派遣社員として勤務していますが、正社員として働くよりも就業難易度が低いので飛び込みやすいですし、チャレンジにも向いています(`･ω･´)b
もし、最初からフリーランスを目指したい！という方は制作会社の下請けから始める道もあるようなので探してみてください◎
本日の学習部屋はここまで！
まだ動画編集本編までは時間がかかりますが地道に勉強を続けます
今日もお疲れさまでした！
