文字組みの基本

〇文字組を始める前に確認するポイント
・文章の量はどれくらいか
・文章の流し込みに使えるスペースはどれくらいか
・縦組みにするか、横組みにするか
・文章を入れることを考えたデザインレイアウトになっているか

〇基本のテキストのボックスを作る揃え方は3パターン
一般的には四角のテキストボックスを作っておき、文章を流し込みます。
・基本の揃え方は「右揃え・中央揃え・左揃え」
テキストエリアボックスを作り文章を入れ込んだ後に必ず、「行間」と「行長」、そして「文字サイズ」のバランスを確認
レイアウトと同じように、文章も基本的な揃え方は「右揃え・中央揃え・左揃え」の3パターンになります。
一般的には、横組みの場合は右揃え、縦組みの場合は左上から揃えていくのが一般的
illustratorなどの「文字組み機能」を使って、テキストエリアボックスを作り、文章を流し込む。

〇Webデザインで文章やテキストのレイアウトを考える注意点
・文字サイズやmarginなどで、大体の文字幅を考えておく
・改行タグを多く入れすぎない。一文を長くしすぎない。
・スマホとPCで文字サイズや行間の見え方が変わるので確認。

〇文章の揃え方も基本はレイアウトと同じ3パターン
原則として、縦書きと横書きは混同させない
文字サイズと行間、行長のバランスを必ず確認する
文章がうまく揃わないときは「禁則処理」の設定を見なす

PhotoshopとIllustratorの違い

Photoshop

写真加工や合成、イラストや描画に向いてます。
・写真加工
・立体感のあるグラフィック

Illustrator

ロゴ作成やレイアウト作成に向いてます。
・Webサイトやアプリのイメージ制作
・アイコン・ロゴ制
・平面的な図表やインフォグラフィック

IllustratorとPhotoshop両方を組み合わせて使うことも多い

Webデザインの基本レイアウト

Webデザインには5つの基本レイアウトがあります。
・シングルカラムレイアウト
・マルチカラムレイアウト
・グリッドレイアウト
・ブロークングリッドレイアウト
・ノングリッドデザイン

1.シングルカラムレイアウト

パーツをすべて1列で構成したレイアウトです。
「1カラム」とも呼ばれます。
ヘッダーからフッターまでが上から順番に並んでいるもっともシンプルなレイアウト
パソコンやスマホ色々な端末で見てもほとんど同じレイアウトで表示されるのが特徴

2.マルチカラムレイアウト

複数の列を使ったレイアウトパターン。
シングルカラムレイアウトよりも、コンテンツを一覧で多く配置する方法
一目で多くの情報を得られるため、ニュースメディアのような回遊性をユーザーに提供するようなサービスで多く使われるのが特徴

3.グリッドレイアウト

それぞれの要素をグリッド状(格子)に分割して並べることで、美しく整えられた印象のデザインを作る方法です。
グリッドデザインやグリッドシステムとも呼ばれます。
情報を整理して見せられるレスポンシブデザインとの相性が良く、更新性にも優れているなどの特徴から、Webサイトのレイアウトとしてもよく使われる。

4.ブロークングリッドレイアウト

規則性のある境界線をポイントであえて外したデザイン方法です。
通常のグリッドレイアウトは、一味違った印象的でオリジナリティーを出しやすいのが特徴
背景にあるブロックからはみ出したり、位置を外して配置していたりします。

5.ノングリッドデザイン

ブロークングリッドレイアウトよりもさらに崩したデザインが特徴です。
ブロークングリッドレイアウトがずらす・重ねる技法を使うのに対して、ノングリッドレイアウトはより開放感のあるデザインといえるでしょう。
写真やテキストが折り重なるように配置されていたり、不規則なサイズのテキストが配置されたりします。

動画ファイルの拡張子

MP4

拡張子 .mp4/.m4a
利用できる音声コーデック例 AAC/MP3/Voribis
利用できる映像コーデック例 H.264/MPEG-4/Xvid

MP4の特徴
最新の機器ならば殆ど対応しており、恐らく最も目にする動画ファイル形式です。
この形式を選べば間違いないと言えるほど普及しているため利便性に長けています。

MOV(Quick Time)

拡張子 .mov/.qt
利用できる音声コーデック例 AAC/MP3/LPCM
利用できる映像コーデック例 H.264/MPEG-4/MJEG

MOVの特徴
Apple社が開発した音楽や動画を再生する事が出来るソフトです。
主にMacなどで採用されていて、Apple系製品では標準動画形式になっている。

MPEG(PS)

拡張子 .mpeg .mpg .vob
利用できる音声コーデック例 AAC/MP3/LPCM
利用できる映像コーデック例 MPEG-2/MPEG-4/MPEG-1

MPEG2-PSの特徴
昔は三文字制限が合ったため.mpgが採用されていましたが、現在では.mpegといった拡張子も存在します。
MPEG2-PSというのはDVDやビデオキャプチャなどと言ったものにも採用されている有名な形式ですが、場合によってはうまく再生出来ない事もあるため目的がある時以外はお勧めしない。

AVI

拡張子 .avi
利用できる音声コーデック例 AAC/MP3/LPCM
利用できる映像コーデック例 H.264/MPEG-4/Xvid

AVIの特徴
Windowsにて標準対応しているので、互換性には定評があるものの低圧縮なので容量が大きいです。
MicrosoftがAPIを提供している為対応ソフトウェアが多数開発されているという利点があり、いざ変換する際に選択肢が多いのも特徴。

ASF

拡張子 .asf .wmv
利用できる音声コーデック例 MP3/AAC/FLAC
利用できる映像コーデック例 H.264/MPEG-4/Xvid

ASFの特徴
AVIの後継であるファイル形式で、Microsoftにより開発されましたが、AVIに比べると互換性も低いため普及率ではAVIの方が上になっています。
高画質でありながらファイルサイズを小さく出来るという特徴がありストリーミング配信や、インターネットなどを使ったビデオ配信にも利用されている。

WMV

拡張子 .wmv .asf
利用できる音声コーデック例 WMA/MP3/AAC
利用できる映像コーデック例 WMV9

WMVの特徴
Windowsにて標準対応しているので、再生できる環境が多いことから普及率が高い事が特徴です。
公式曰く、DVD(MPEG-2)の約半分のビットレートで同等の画質を得られるとされている上、ビットレートが低くても映像のほころびが少ないことからインターネットでのネット配信に適している。

WEBM

拡張子 .webm
利用できる音声コーデック例 Vorbis/Opus
利用できる映像コーデック例 VP8/VP9

WEBMの特徴
Googleが次世代だと謳って開発した拡張子で、インターネット配信での利用がメインになっています。
この形式であれば対応しているブラウザ(Chrome等)に放り込む事で簡単に再生出来るなど、環境に問わられず手軽に再生する事が出来る。

VOB

拡張子 .wmv
利用できる音声コーデック例 PCM/AC3/MP2
利用できる映像コーデック例 MPEG-1/MPEG-2

VOBの特徴
DVDに書き込まれたファイルはこちらの形式になります。
MPEG2-PSがDVDに用いられているという記述をしましたが、厳密にはMPEG2-PSで書き込んだ際ファイル形式はVOBに置き換わっています。
ですので、この形式に限り拡張子を書き換えるだけでそのまま再生出来る事がある。

FLV

拡張子 .flv
利用できる音声コーデック例 MP3/AAC/ADPCM
利用できる映像コーデック例 H.263/H.264(例外有)/VP6

FLVの特徴
ストリーミング配信でフラッシュプレイヤーさえ導入されていればどのブラウザでも再生出来るというのが大きな特徴で、Adobe Flash Playerが導入されている動画投稿サイトなどが良く採用していました。
このファイル単体では標準規格で再生が出来ないため、専用のプレイヤーを導入する必要。

MKV

拡張子 .mkv
利用できる音声コーデック例 MP3/Vorvis/LPCM
利用できる映像コーデック例 H.264/MPEG-4/Xvid

MKVの特徴
他の拡張子に比べると映像と音声だけではなく、複数の音声入力や字幕のオンオフなど機能性に優れています、様々な拡張機能も備わっており実に柔軟な拡張子と言える。
またファイルが一部欠けていてもその他の部分を再生出来るなど、他にも優れている部分が多々見受けられます。最近Windows 10にて標準で対応する形式になったため、今後躍進していくと言われている。

おすすめの無料で使える動画編集ソフト

おすすめの無料で使える動画編集ソフトを紹介します。

DaVinci Resolve

https://www.blackmagicdesign.com/jp/products/davinciresolve/
編集からVFX、モーショングラフィックスなどを、ひとつのソフトで完結することが可能。

Lightworks Free

https://lwks.com/
会員登録をすると無料で動画編集機能を使えます。
シンプルな表示のタイムラインが見やすく、ドラッグ&ドロップで簡単に動画の追加・編集などが可能。

VSDC Free Video Editor

http://www.videosoftdev.com/jp
充実したVFXや効果音を適用して、さまざまなスタイルの演出ができるツールです。Instagramのように、多様なフィルターをワンクリックで適用できます。すべての動画・画像・オーディオ形式とコーデックに対応しているため、ファイル形式の変換ツールなどは必要ありません。

HitFilm Express

http://www.videosoftdev.com/jp
無料のチュートリアル動画が充実しているため、専門知識がなくても、学びながら動画編集が可能です。

AviUtl

http://spring-fragrance.mints.ne.jp/aviutl/
AVIファイルの動画にさまざまなフィルターを適用することができるソフトです。
プラグインすることによって、各種フィルター処理機能や出力機能を必要に応じて追加できるのが魅力。シンプルな編集機能がそろっているので、初心者でも使いやすいです。

動画ファイルサイズ

動画は画像に比べるとファイルサイズが大きくなりがちです。
動画のファイルサイズを下げたくても、わざわざ専用ソフト・フリーソフト入れるのもという場合もあるかと思います。
そこで、フリーソフト不要でできる動画ファイルサイズをオンラインで軽くするサイトを紹介します。

VideoSmaller

https://www.videosmaller.com/jp/

Online converter

https://www.online-convert.com/

Photoshop シェイプ・ピクセル・パスとの違い

ピクセル

解像度の限界をむかえるとぼやける。縮小と拡大を繰り返すと劣化する(一度縮小して落ちた画質が戻らない)。

シェイプ

「線」+「塗り」。縮小・拡大しても荒くならないぼやけない。

パス

「線」だけ。

図形を作るときは基本的にシェイプ
「後からでも簡単に色を変えられる」「縮小・拡大してもぼけない」という点から図形を作るときは[シェイプ]を選んでおくのが良い。