デジタルカメラ

WEBサイト制作、公開運用に必要な主なもの

  • パーソナルコンピューター
  • ブラウザ
  • テキストエディタ
  • FTPクライアント
  • デジタル/ビデオカメラ
  • 画像編集ソフト
  • 動画編集ソフト
  • WEBサーバー
  • ドメイン

    • ⇒今回はデジタル/ビデオカメラ、画像編集ソフト、動画編集ソフトについて解説します。

    デジタルカメラ、ビデオカメラ

    写真や動画をのせる場合に、デジカメやビデオカメラで撮ったものを載せたりする場合は、必要になります。

    WEBサイト制作にはどんなデジカメやビデオカメラが必要か？

    WEBサイトの目的や用途によっては一眼レフなどのデジカメや専用のビデオカメラ、付属の機材を用意すべきですが、最近のスマートフォンをお持ちでしたら高機能なカメラ、録画機能付きですのでそれで十分だと思います。
    WEBサイトは設計するときに、横幅の最大サイズを何ピクセルにするかを決めます。その最大サイズに合わせて画像や動画が必要になってきますのでまずはWEBサイトの最大横幅サイズを決めましょう。決まっていない方の場合は、WEBサイトを閲覧するユーザーがどんなディスプレイや端末からアクセスが多いのかといったシェア率の調査や、他のWEBサイトの最大横幅サイズはどうしているのかを参考に、横幅のサイズを決めましょう。

    ディスプレイのシェア率

    ノートパソコン、タブレット、携帯のディスプレイ

    WEBサイトを閲覧するユーザーがどんなディスプレイや端末からアクセスが多いのか？2020年1月現在の、ディスプレイモニター解像度（画面解像度）のシェア率は下記のとおりです。

    出典：https://gs.statcounter.com/screen-resolution-stats

    <調査：gs.statcounter.com、2020年1月現在　Worldwide、All Platformでの調査>

    順位 サイズ シェア率
    1 360x640 13.82%
    2 1366x768 8.3%
    3 1920x1080 7.63%
    4 375x667 4.62%
    5 360x720 3.14%
    6 360x760 3.12%
    (参考)ピクセルとは？

    画面サイズをピクセル(px=pixcel)単位で解説しますのでその説明を致します。

    1ピクセル×1ピクセルの図
    1ピクセル×1ピクセル(ディスプレイの最小単位)

    ピクセルというのは、画面の”細かさ”を表し、縦横の画面のサイズを、それぞれドット数（解像度）で表す単位です。パソコンやテレビのディスプレイの最大サイズ、デジカメで撮った写真、ビデオカメラで撮った動画などはこのピクセルで表します。例えば500ピクセル×300ピクセルというのであれば、横が500ドット分、縦が300ドット分ある画面サイズということです。ピクセルはディスプレイにおける最小単位です。ピクセルは色情報も入りますが、ドットは色情報は入らないので厳密には違う意味です。

    WEBサイトの最大横幅サイズを決めるには？

    決め方①WEBサイトを閲覧するユーザーの観点から考えてみる

    WEBサイトを閲覧するユーザーがどんなディスプレイが多いのかという”シェア率”から決めてみる考え方です。シェア率はgs.statcounter.comから調査した結果、上の表のようになります。

    上の表から読み取ると、まず。1366x768や1920x1080という、1000pxを超えたものがあります。これはパソコンなど、スマートフォンや携帯電話に比べて大きなディスプレイによるアクセスです。逆に360×〇〇、375×〇〇はスマートフォンなど小さなディスプレイによるアクセスです。この結果から、1920×1080px(ピクセル)もあれば十分と判断できます。ということは、デジカメは200万画素以上あればよいということです(1920×1080≒200万画素という計算から)。同様にビデオカメラではフルHD対応(1920×1080ピクセル)以上のものがあればよいでしょう。

    一昔前のカメラ付きの携帯電話で言うところの、200万画素というのはちょうど私が開発に携わっていた2004年6月発売のFOMAの携帯電話では記憶画素数が200万画素でした。これは15年以上前のだいぶ昔の携帯（ガラパゴス）ですのでそれ以降の携帯電話や、スマートフォンをお持ちでしたらカメラの性能(画素数)は上がっているので十分だと思います。

    もっと厳密に調査を行うのであれば、下記の3点を参考にしてみてはいかがでしょうか。

  • worldwide上位6位以下のものも考慮する。
  • 範囲をworldwideでなく日本の調査結果を重視する
  • サイト運用後の自分のWEBサイトのGoogleアナリティクスの分析結果からどのディスプレイのアクセスが多いものから判断する

    • 決め方②他の有名なWEBサイトから考えてみる

    他の人は結局どうしているかなという考えです。実際に開いてみたり、フリーのテンプレートをスタイルシートごとダウンロードするとわかります。

    パソコンなど大きなディスプレイでWEBサイトを見る場合はだいたいウィンドウ表示にして横幅を縮めて閲覧することが多いなどの理由からだと思いますが、多くのWEBサイトが1000px前後で制作しています。

    (参考)私の場合

    WEBサイトの最大ピクセル数デスクトップ版とモバイル版

    私の場合は、1200pxを最大にしているのが多いです。若干違うのもありますが大体これ前後です。4Kなどのディスプレイも出ていますが、パソコンのディスプレイとしてはまだまだ普及していないため、このサイズを最大にしています。スマートフォンの場合は768pxとしています。これは、パソコンもスマートフォンも同じファイルで制作するいわゆるレスポンシブデザインで作っていて、そのブレイクポイント（切り分け）を768pxにしている為です。このブレイクポイントは他のWEBサイトは様々ですが768pxに設定するサイトが多いです。

    (参考)規格と一般的なサイズ

    ビデオカメラやテレビ、携帯電話で画面や撮る画像・映像サイズのことを”4Kテレビ”といったり”フルHD”といったりします。こういったものは規格化されています。一般的なサイズと規格を下記に示します。

    規格名称 サイズ
    HD 1280 x 720
    FHD(フルHD) 1920 x 1080
    QHD 2560 x 1440
    2.7K 2704 x 1520
    UHD 2880 x 2160
    4K QFHD 3840 x 2160

    動画で知っておいた方が良い単位「fps」

    ビデオカメラで撮ったり、編集したりする場合に知っておいた方が良い単位です。

    動画はfpsという単位で画面の”滑らかさ”を表します。fpsはFrame per Secondの略で、フレームレートと言ったりします。

    fps=1秒間当たりのコマ数(停止画数)

    例えば、60fpsだと1秒間に60コマだということになります。fpsは値が大きいほどヌルヌルで滑らかな動画になりますがデータ量も多くなります。逆にfpsが少ないほどカクカクした動画になりますがデータ量は少なく済みます。Youtubeの貼り付け動画ではなくHTMLのvideoタグでは動画データをWEBサーバー上へ保存することになりますが、その際、サーバーの容量を大きく消費しますので容量は注意しておきましょう。

    画像、動画の編集・撮影の注意点

    注意点①画像や動画は大きめのサイズで撮影する

    当たり前のことですが、デジカメやビデオカメラで撮る場合は必要サイズ以上で撮ることをおススメします。理由は必要サイズ以上で撮った場合、大きいサイズは小さいサイズへの加工は問題なくできます。その逆で小さなサイズで撮った場合、サイズを大きくすると画像や動画が荒くなり、ぼやけてしまう問題があるからです。

    注意点②動画や画像をリサイズすべき2つの理由

    ビデオカメラやデジカメで撮ったデータは適切なサイズにする編集作業（リサイズ）が必要になってきます。 そのまま載せることもできますが、なぜ適切なサイズへ編集しなければならないのか？その理由を説明いたします。

    理由①ロード時間の問題

    まず、WEBサイトの表示画面サイズ以上の動画や画像データは、無駄なデータとなります。 この無駄な量のデータはWEBサイトが開くまでの時間を遅くさせる原因になります。

    WEBサイトは開くまで時間がかかるとユーザーをイラつかせ、ストレスを与える原因になりかねません。また「あれ、このサイト開くの遅いな」と思ったユーザーは別のサイトに行ってしまいかねません。また、Googleはサイトが開くまでの時間を評価しています。検索エンジンのランキングに影響を与え、開くのが遅いと低評価されてしまいます。

    ロード時間については、GoogleのSerch Consoleなどで、トライアル版ですが速度を測定することが出来ます。

    理由②ユーザビリティーの問題

    逆にWEBサイトの表示画面サイズ以下の動画や画像データをそのまま載せた場合は、画面サイズに合わせて引き伸ばす為画像や映像が”ぼやけて”見えます。

    画像に文字がある場合※などは、その文字が読みづらかったり、読めなかったりするのは問題です。この場合もユーザビリティーに影響がある為、同様にGoogleから低評価されてしまう可能性があります。

    Googleから低評価を受ければ、検索エンジンのランキング下がるので検索エンジンで自分のWEBを検索しても見つからない、見つかりづらいということになります。つまり適切なサイズにする編集作業が必須になるわけです。

    ※この文字は例えばバナー広告などでユーザーに意図的に読ませたいと考えている場合です。

    ユーザービリティについては、GoogleのSerch Consoleのモバイルユーザビリティという項目でチェックすることが出来ます。ここで文字が見えづらい場合はエラーとなり、検索エンジンのランキングに影響します。

    ファイル形式

    HTMLで対応する代表的な画像、動画形式を下記に示します。デジカメやスマートフォンのカメラで撮影した画像はJPEG形式が、スマートフォンやデジタルビデオカメラで撮ったものはMP4、AVCHD、MTS、M2TS形式など様々です。WEBサイトやブラウザが対応していないファイル形式については、大概、ビデオカメラのメーカが出しているツールや、画像、動画編集ソフト等で形式を変更することで対応できます。

    代表的な画像形式

  • JPEG (じぇいぺぐ)
  • PNG (ぴんぐ)
  • GIF (じぶ)
  • BMP (びっとまっぷ)
  • TIFF (てぃふ)

    • 代表的な動画形式

  • MP4形式
  • WebM形式

    • その他代表的な動画形式については下記を参考ください。
    ＜参考：wikipedia、video要素＞
    wikipedia、video要素

    WEBサイト用の対応可能な動画形式については、非常に複雑です。というのは動画形式は様々あり、その形式がブラウザにより対応/非対応のものがある為と、動画形式は形式内部の3つの要素がある為です。3つの要素とは、「コンテナ」と呼ばれる大枠のフォーマットと「動画コーデック」と呼ばれる動画データと「音声コーデック」と呼ばれる音声データのことです。この3つの要素を考慮しなければなりません。

    動画ファイルの形式でお勧めするのは、mp4形式とWebM形式です。 理由は2つあります。1つはWEBサイトにYoutubeの動画を埋め込みする場合に、YoutubeではMP4とWebMの両形式に対応しているためです。もう1つは動画ファイルをvideoタグで埋め込む場合に、この2つの形式はかなりのブラウザで対応しているためです。詳細はwikipedia、video要素のビデオコーデックを参考ください。

    画像編集ソフト

    (おすすめ)画像編集ソフト

    PhotoScape編集画面
    PhotoScape編集画面

    個人的には有料版ならPhotoshop一択、無料版ならPhotoScapeかJTrimがおすすめです。

    私の場合、無料版のPhotoScapeは様々な種類のテキストを入れられるのでYoutubeではサムネに使ったり、WEBサイト内のバナーの作成など文字＋写真の画像作成として便利で重宝しています。MicrosoftのOffice(有料)でも同様なことが出来るので、ExcelやPowerPointを使ったりします。切り取り、リサイズだけの場合は、様々なファイル形式に対応でき、日本語版もある為Ifanview(シェアウェア)を使ったりします。

    無料版

    名前 PhotoScape
    概要・機能 テキスト追加、色調整、切り取り、サイズ変更、印刷、GIFアニメーションなど
    対応OS NT/2000/XP/Vista/7/8/macOS
    その他 デジカメ写真を扱う上で便利
    名前 JTrim
    概要・機能 明るさ／コントラスト調整、ガンマ補正、フェードイン／フェードアウト、セピア、モノクロ、モザイクなど
    対応OS Windows 95/98/Me/NT/2000/XP
    その他 初心者にも簡単に操作が出来るフォトレタッチソフト、個人利用・商用利用OK
    名前 GIMP
    概要・機能 レイヤー、トーンカーブ、ヒストグラム、画像の形状からの切り抜き、ブラシエディタ、パスの編集、多種多様なプラグインなどに加え、モザイク編集や、アニメーション合成（GIFアニメーション）を行うなどといったフィルタ機能もある
    対応OS NT/2000/XP/Vista/7/8/macOS
    その他 有料のグラフィック編集ソフトウェアと比べても遜色のないレベルの機能

    有料版

    名前 Adobe Photoshop
    概要・機能 写真編集（フォトレタッチ）としての役割を担うソフトウェアとして代表的存在
    対応OS macOS, Windows
    価格 (例)Adobe Photoshop単体プラン、デスクトップ＆iPad版が月額2,480円（税別)など。
    その他 写真編集（フォトレタッチ）としての役割を担うソフトウェアとして、画像加工、イラストレーション、印刷業界などあらゆる画像分野で使用されている。
    名前 Adobe Photoshop Elements
    概要・機能 見応えのある写真が驚くほど簡単に完成する、 Photoshop の機能制限版、個人向けソフト。
    対応OS macOS, Windows
    価格 (例)Photoshop Elements 2020　17,800円(税別)など。
    その他 Photoshop の機能制限版、個人向けソフト

    シェアウェア(個人利用は無料、商用利用は有料)

    名前 Ifanview
    概要・機能 数多くの画像・その他のファイル形式に対応。画像のリサイズや回転・反転、明るさ・コントラストの調整などが容易にできる
    対応OS Microsoft Windows
    価格 個人利用はフリー、商用利用は4,614円(税抜き)
    その他 世界的に有名なフリーウェア(個人利用)。

    動画編集ソフト

    (おすすめ)動画編集ソフト

    Corel VideoStudio編集画面
    Corel VideoStudio編集画面

    ソフトを選ぶポイントとしては、機能、スペック、操作性の3点です。

    無料版でもタイトル、音楽、テキストテロップ、効果音の挿入等一通りの機能がそろっています。WindowsやMacをここ最近で新品で購入されたのならMicrosoft フォト、Apple iMovieが搭載されているのでそちらで十分かどうか試してみるのが良いと思います。

    動画編集ソフトは操作が難しいものが多く、使い慣れるのに時間がかかります。有料版を検討している方は、まず無料版で操作を練習してから有料版にチャレンジした方が良いと思います。
    また動画編集ソフトはワークメモリを消費するので、パソコンのスペックに自信のない方は、慎重に選ぶことを勧めます。推奨スペック内でもカクついたり、ファイル生成に時間がかかったりします。その為、実際に使用した方のレビューを参考に購入することをおススメします。

    無料版

    名前 Microsoft フォト
    概要・機能 簡易的なカット編集、BGM音楽、テキストテロップ、フィルタ、書き出しなどを行える。
    対応OS Windows10
    その他 Windowsムービーメーカーの後継ソフト、Windows10搭載のMicrosoft社製の簡易動画編集ソフト、基本機能がそろっている。
    名前 Apple iMovie
    概要・機能 動画の切り貼り・文字の挿入・トランジションなどのエフェクトをはじめ、動画編集基本ソフト。
    対応OS macOS
    その他 Mac搭載のApple社製の簡易動画編集ソフト、基本機能がそろっている。
    名前 Blender
    概要・機能 3Dアニメ、2Dアニメを作る動画制作ソフト。かなり難しいですが無料で3Dアニメが作れてしまう驚異のソフトです。
    対応OS Windows、macOS、Linux、FreeBSD
    その他 統合型3DCGソフトウェア、2Dアニメーション制作ソフトウェア、スカルプトモデリングソフトウェア、VFXソフトウェア、動画編集ソフトウェア

    有料版

    名前 VideoPad
    概要・機能 初心者でも本格的な動画編集ができる使いやすい動画編集ソフト
    対応OS Windows 7 SP1以降、OS X El Capitan以降
    価格 39.95＄(Home edition)
    その他 DVD、HD、360、YouTubeなどのビデオを作成できる
    名前 Adobe Premiere Pro
    概要・機能 Adobeの中でも最上位にあたる動画編集ソフト、操作が難しいが高機能
    対応OS Windows7以上（64bit）・MacOS X v10.10、v10.11 または v10.12
    対応スペック メモリ16GB
    価格 年版 |月額版|定期購入、月額は 2,480円（税別）
    その他 なんでもできる反面、操作が難しいので初心者は難しく感じると思います
    名前 VideoStudio 2019
    概要・機能 様々な動画（DV-AVIやMPEG-2、MPEG-4、ハイビジョン、4K、360度カメラなど）の作成ができる
    対応OS Windows
    価格 ¥18,144(税抜き)
    その他 様々な画像、音声ファイルに対応。、Blue-ray、YouTube、ニコニコ動画など対応可能

    まとめ

  • デジカメやビデオカメラは、スマホで十分だが目的・用途に合わせて専用のものを用意する
  • WEBサイトは作るときに最大横幅のサイズを決める必要があり、それに合わせて画像・映像をリサイズ、編集する
  • 画像編集、動画編集ソフトは、それぞれ有料、無料版があり、自分のスキル・経費・PCのスペックに合わせて選ぶ

    • 次回予告

    制作に必要なものは？(WEBサーバー、ドメイン編)

    次回はWEBサーバーやドメインについて説明いたします。

    「無理ならコピペでWebサイト自作入門 ～制作に必要なものは？(WEBサーバー、ドメイン編)～」

    次回はこちら