TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】
icon
icon
CSS

圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】

初心者向けに圧縮されたCSSを元に戻すツール10選について解説しています。最初に、圧縮されたCSSの見分け方について説明します。次に圧縮されたCSSを元に戻すツールの例と、その中からCloud9を使った方法を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

圧縮されたCSSを元に戻すツール10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

圧縮されたCSSを元に戻すツール10選について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

圧縮されたCSSの見分け方と違いについて

圧縮されたCSS（カスケーディングスタイルシート）は、符号的な文字列として一行として列挙されるのみになってしまっています。なお、検索エンジンなどの入力装置にコードを貼り付けますと、自動的に圧縮されます。

 

 

圧縮されていないCSSのコード

.readmore a.button {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
  background-color: #eee;
  padding: 10px;
  line-height: 14px;
  font-size: 14px;
  width: 160px;
  margin: 0 auto;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 5px 0px #666;
}

 

圧縮されているCSSのコード

.readmore a.button { text-decoration: none; color: #333; display: block; text-align: center; background-color: #eee; padding: 10px; line-height: 14px; font-size: 14px; width: 160px; margin: 0 auto; border: 1px solid #aaa; border-radius: 10px; box-shadow: 0 5px 0px #666; }

 

[PR] Webデザインで副業する学習方法を動画で公開中

元に戻すツール10選

  1. AWS（Amazon Web Services）Cloud9
  2. CSS Minifier
  3. Sublime Text 2
  4. Visual Studio Codespaces
  5. YUI Compressor
  6. Visual Studio Code
  7. Adobe Dreamweaver
  8. Eclipse
  9. CSS Compressor
  10. vim

かつては、YUI(Yahoo User Interface) Compressorが、代表格でした。

 

ツールを使って圧縮を戻してみよう

AWS（Amazon Web Services）のCloud9を例に紹介します。

「Code Formatting」の「Apply Code Formatting」を選択することで、プログラム言語が特定されているソースコードの整形が可能になっています。

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CSSの疑似要素first-lineで要素をデザインする方法を現役エンジニアが解説【初心者向け】

CSSの疑似要素first-lineで要素の最初の行をデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

Chromeの新しいタブを開くだけでエディタに！「Web Maker」で作業効率が上がる！

「Web Maker」を使えば、わざわざエディタとブラウザ両方を開かなくて済みそうです。 拡張機能を追加した状態で、Google Chromeで新しいタブ...
Webデザイン

CSSで特定の要素を除外する方法を現役エンジニアが解説【初心者向け】

CSSで特定の要素を除外する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについ...
CSS

CSSでmarginが効かない原因と対処法【初心者向け】現役Webデザイナーが解説

CSSでmarginが効かない原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
CSS

CSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因を現役デザイナーが解説【初心者向け】

ここでは、外部にスタイルシートを作成する方法と、外部スタイルシートが適用されない場合の対処法を紹介します。 CSSについてそもそもよく分からないという方は...
CSS

【誰でも簡単に！】ドラッグ&ドロップでWebサイトが作れる「Weld」が便利すぎる！

Webサイト・スマホアプリ制作をする上で便利すぎるツール「Weld」が登場しました。 これまでも【プログラミング要らず！】スマホアプリが開発できるおすすめ...
Webデザイン

あわせてよく読まれている記事

Pythonでzipファイルを圧縮・解凍する方法【初心者向け】

Pythonでzipファイルを圧縮・解凍する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 zipファイルを圧縮・解凍する方法について詳しく説明していくね！ 大石ゆかり お願いします！   zipファイルとは zipファイルとは、zipというデータ圧縮のフォーマットで圧縮したファイルのことです。データ圧縮は、一定のルールに従いデータを短い形式で表現します。例えば「aaaaaaaaaa」を「a10」と表現すると7文字短く表現できます。zipはこのような圧縮・解凍のルールを共通化したもので、 Windows や Mac で OS の標準機能として取り入れられている他、Pythonでも標準ライブラリzipfileにより利用することができます。 zipでは、1つのファイルだけでなく、複数のファイルやフォルダを圧縮・解凍することができます。zipファイルとして圧縮することで、大きな容量のファイルを小さくして配布したり、複雑な構造のファイルやフォルダを、まとめて受け渡しすることが可能となります。 データ圧縮のフォーマットは、zipの他、 rar や tar.gz 、 7z などがありますが、 zip が最も多く用いられています。   圧縮・解凍する方法 Python のライブラリ zipfile で圧縮・解凍する方法は以下の通りです。 圧縮する方法 import zipfile with zipfile.ZipFile(zipファイル名, "w", zipfile.ZIP_DEFLATED) as zf:     zf.write( 圧縮するファイル名, zipファイルの中でのファイル名) importによりzipfileライブラリを利用できるようにします。withで始まる行は、zipfileを扱うことを示しています。圧縮する場合、第一引数に作成するzipファイル名、第二引数に “w” を指定します。第三引数はzipファイルの圧縮形式です。一般的なzipファイルを作成するには zipfile.ZIP_DEFLATED を指定します。省略すると、ZIP_STORED （圧縮しない）が指定されます。その他、以下の種類があります。 zipfile.ZIP_STORED: 圧縮しない。複数ファイルをまとめて1つにする（デフォルト） zipfile.ZIP_DEFLATED: 一般的なzip圧縮 zipfile.ZIP_BZIP2: BZIP2圧縮 zipfile.ZIP_LZMA: LZMA圧縮   解凍する方法 import zipfile with zipfile.ZipFile(zipファイル名) as zf: zf.extractall() 解凍の場合も同様に、importによりzipfileライブラリを利用できるようにし、withで始まる行で対象のzipファイル名を指定します。解凍には extractall メソッドを指定します。 その他、特定のファイルだけを解凍する extract メソッド、zipファイルを読み込んで内容を表示するopen メソッド、 read メソッドなどがあります。詳しくは公式ドキュメントを参考にしてください。 https://docs.python.jp/3/library/zipfile.html   [PR] Webデザインで副業する学習方法を動画で公開中実際にファイルを圧縮・解凍してみよう 今回のサンプルプログラムでは、日本語のテキストファイルを圧縮、解凍してzipfileの書き方を確認します。はじめに圧縮対象のファイルを作成します。 こんにちは.txt こんにちは！ Pythonの世界へようこそ！ それでは、圧縮するサンプルプログラムを書いてみましょう。 zip.py import zipfile with zipfile.ZipFile('hello.zip', "w", zipfile.ZIP_DEFLATED) as
Python

【メールで使える！】パワーポイントのファイルを圧縮する方法

Microsoftのパワーポイント(PowerPoint)はプレゼンテーション用のソフトとしてだけでなく、配布資料作成の用途でもよく使われています。 配布資料や企業間でのファイルのやりとりでパワーポイントを使う際は、ファイルの大きさは注意したい点のひとつです。 ファイルのサイズが大きいと、相手が受け取れない場合があったり、送れても相手のメールボックスを圧迫してしまい失礼な場合があります。 今回はその対処法として、パワーポイントのファイルのサイズの圧縮方法を紹介します。   なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。   目次 スライドの図や画像を圧縮する方法 スライドに埋め込まれた音楽や動画を圧縮する方法   スライドの図や画像を圧縮する方法 早速、スライド上の図や画像を圧縮してみましょう。   まずはじめに、圧縮したい画像を選択します。 選択後「図ツール」の「書式」タブから「図の圧縮」をクリックします。 「画像の圧縮」のウィンドウが表示されたら、圧縮オプションで「この画像だけに適用する」にチェックを入れます。 チェックを入れない場合、スライド内のすべての画像に適用されます。 「画像の圧縮」ウィンドウでは圧縮後の画像の解像度も選択できます。 どの程度画像を圧縮するかは「解像度の選択」で選びます。 ファイルのサイズを一番小さくしたい場合は「電子メール用」をお選びください。 それぞれ選び終わったらOKを押して完了です。   [PR] Webデザインで副業する学習方法を動画で公開中スライドに埋め込まれた音楽や動画を圧縮する方法 パワーポイントのファイル圧縮は、画像だけでなく音楽や動画でも行えます。 スライドに含まれる音楽や動画を圧縮するのは以下の操作で行います。   まずはじめに、左上のファイルタブを開きます。 ファイルタブを開いたら「情報」の、以下赤枠の「メディアの圧縮」をクリックします。 クリックすると圧縮後のクオリティについて3つの選択肢が与えられますので、クオリティを指定します。 以上でパワーポイント上の音楽や動画の圧縮が完了します。   今回は大きく「画像を圧縮する方法」と「音楽や動画を圧縮する方法」を紹介しました。 自分でプレゼンテーションするときは画像なども綺麗な方が好ましいですが、ビジネスパートナーにファイルを送付するときなどは、このような圧縮処理をしたり、いくつか気配りをしてみてください。
PowerPoint

EWWW Image Optimizerの使い方ーWordPressプラグイン【初心者向け】

WordPressで作ったサイトの表示速度が遅いといった方におすすめのプラグインを紹介する記事です。 WordPressのページ表示速度を高速化できるプラグインの1つであるEWWW Image Optimizerの使い方を紹介します。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのサイトをPageSpeed Insightsで速度計測したら、画像が大きいって言われたんですけど、どうしたらいいですか？ 田島悠介 それなら画像を圧縮する必要があるね。「EWWW Image Optimizer」を使うと圧縮してくれるよ♪ 大石ゆかり どうやって使うんですか？？？   EWWW Image Optimizerとは EWWW Image Optimizerは、自動的に画像サイズを圧縮したり、過去の画像を圧縮することでサイト全体の容量を削減できるプラグインです。 WordPressの表示が遅くなる原因の1つに、「画像サイズが大きい」ことも挙げられます。そこで、このプラグインを導入して画像を圧縮することで高速化を図ることができます。     プラグインのインストール このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、EWWW Image Optimizer公式サイトからダウンロードすることも可能です。 インストール方法がわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。   インストールが完了したら、有効化してください。   有効化すると、ダッシュボード＞設定＞EWWW Image Optimizer　に、プラグインの管理画面へのリンクが表示されます。     [PR] Webデザインで副業する学習方法を動画で公開中プラグインの設定 続いて、プラグインの管理画面を開いて設定していきます。   設定項目は、大きく分けてCloud Settings（有料サービス向け設定なので、必要なし）、General Settings、Optimization Settings、Conversion Settingsの４つです。 全て英語ですが、以下の3箇所のみ変更・確認すれば大丈夫です。   General Settings 下の方にある、disable pngoutのみにチェック（デフォルトで入っています）。   Optimization Settings 圧縮についての設定です。Remove metadataにチェックを入れてください。画像ファイルの不要なデータを削除するため、ファイルサイズ圧縮につながります。   Conversion Settings Hide Conversion Links にチェックを入れてください。圧縮時に、拡張子を変更することを防ぎます。 こうすることで、圧縮に寄る画像の劣化を抑えることができます。   以上3箇所で、設定は完了です。 あとは、アップロードしたファイルを自動的に圧縮してくれます。 今までにアップロードした画像を一括で圧縮したいときには、メディア＞Bulk Optimizeから操作可能です。   いかがでしたか？ ぜひ自分でも試してみてください。   他の方法で高速化したい場合は、WP Super Cacheの使い方も合わせてご覧ください。   大石ゆかり PageSpeed Insightsの結果がよくなりました！！！ 田島悠介 よかったね。過去の画像も一括して圧縮できるところがいいね♪ 大石ゆかり そうですね♪   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

PHPでファイルをZIPファイルに圧縮する方法【初心者向け】

PHPでファイルをZIPファイルに圧縮する方法について解説します。 ファイルを圧縮すると配布する場合などに転送量を節約することが出来ます。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでファイルをZIPファイルに圧縮する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ZIPファイルとは zipは元々pkware社が開発したpkzipで作られるアーカイブファイルの形式です。 アーカイバと呼ばれるツールによって複数のファイルを1ファイルにまとめます。古くは磁気テープに保存するための前処理などに使われていました。 通信機能によるデータの交換にも便利だったためよく利用されています。この時に大容量のデータを保存したり送信したりするのは大変なので圧縮するというアイデアが生まれてきました。 比較的圧縮率が高く利用しやすかったのでzip形式のファイルがネット上で多数交換されるようになり現在に至ります。 これとは別にgzipという形式もあります。名前は似ていますが別物ですので混同しないでください。 圧縮ファイル全般に言えることですが、テキストファイルは圧縮率が高く、バイナリファイルは低くなる傾向があります。また、jpegなどすでに圧縮済みのファイルはほとんど圧縮できず、逆に大きくなってしまう場合もあります。   ZIPファイルに圧縮する方法 コマンドやGUIのユーティリティで圧縮することが多いですが、PHPにもzipファイルを取り扱う機能があります。 php.net-zip php -m コマンドで zip が表示されれば組み込み済みになります。   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう <?php $zip = new ZipArchive; $zip->open(__DIR__.'/sample.zip', ZipArchive::CREATE|ZipArchive::OVERWRITE); $zip->addFile(__DIR__.'/hello.txt'); $zip->addFile(__DIR__.'/flower.jpg'); $zip->close(); ZipArchiveがzipをサポートするclassです。 $zip->open( ) 関数は指定したzipファイルをオープンするメソッドです。 ZipArchive::CREATE は指定したzipファイルが無かったら作るオプションです。 ZipArchive::OVERWRITEは指定したzipファイルが有っても新しいファイルで上書きするオプションです。 $zip->addFile( ) 関数でzipファイルにアーカイブするファイルを追加します。 この例では2つのファイルを追加しています。 最後に $zip->close( ) 関数で zip ファイルを閉じます。   この記事を監修してくれた方 大網 清和（おおあみきよかず ） 現在は派遣スタッフとして Laravel で大手ポータルサイトの開発業務をしています。 プログラム歴は長く中学生の頃から始めて35年くらいになります。古くは BASIC、C、COBOLなどを経験し SQL を集中的に使っていた時期もあります。 Web の開発はまだ2年位とあまり長くは無いですが、プログラミングの楽しさを伝えられたら良いなと思っています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

PHPでzipファイルを解凍する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでzipファイルを解凍する方法について解説します。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでzipファイルを解凍する方法について詳しく説明していくね！ 大石ゆかり お願いします！   zipファイルを解凍する方法 zipファイルというのは、zip形式で圧縮されたファイルを意味します。 圧縮すると、ファイルやフォルダ自体にパスワードを設定したり、容量を圧縮することが可能になります。圧縮されたファイルを元の状態に戻すことを解凍すると言います。   ZipArchiveクラスのextractTo関数とは 今回は、ZipArchiveクラスのextractTo関数を利用して、圧縮されたzipファイル全体や、指定ファイルのみを、指定した場所に解凍していきます。 クラスとは、関数などの処理が予めまとめてあるオブジェクトです。関数とは、よく利用する処理を予め作成しておいて、使いたいときに使えるようにするものです。オブジェクトとは、モノです。つまり、よく利用する処理をいろいろまとめたモノがクラスということです。 アーカイブの全体あるいは指定したファイルを、 指定した場所に展開します。ZipArchiveクラスのextractTo関数は、PHP5.2.0以降のPHP5系、 PHP7系で利用が可能です。 （ZipArchiveクラスのextractTo関数について） また、利用には、PHPの拡張モジュールである、PECLの1.1.0以降が必要です。 （PECLについて）   [PR] Webデザインで副業する学習方法を動画で公開中ZipArchiveクラスのextractTo関数の使い方 基本の書き方 extractTo ( 解凍する場所 )   解説 extractTo( )の括弧の中に引数として、展開する場所を記載することで、zipファイルの解凍が可能です。 引数とは、関数を利用する際に指定する値です。引数を変化させることで、柔軟に関数を操作することが可能です。   実際に書いてみよう サンプルコード <?php $zip = new ZipArchive; if ($zip->open('test.zip') === TRUE) { $zip->extractTo('/my/destination/dir/'); $zip->close(); echo '成功'; } else { echo '失敗'; } ?> 解説 1行目の、<?phpではPHPプログラムが開始されることを意味しています。 2行目の$zip = new ZipArchive;では、new演算子を利用してZipArchiveクラスを利用するための準備をして、変数$zipに格納しています。 3行目の if ($zip->open(‘test.zip’) === TRUE) {では、test.zipというファイルを開くことができる場合に4行目以降の処理をするという条件の指定しています。 4行目の$zip->extractTo(‘/my/destination/dir/’);では、解凍する場所を、/my/destination/dir/というフォルダに指定しています。 5行目の$zip->close();では、zipファイルを閉じて、解凍処理を終了しています。 解凍が成功した場合、6行目の成功が表示され、失敗した場合は8行目の失敗が表示されます。   今回は、PHPでzipファイルを解凍する方法について解説しました。   筆者プロフィール 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 地域の職業プログラマー育成活動では、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

写真と動画の良いとこ取り！Webデザインで話題の「シネマグラフ」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、 The Deep End Design社のクリエイティブディレクターであるWes McDowell氏によって投稿されました。   今年の初めに発行された無数のWebデザインのレポートを読んでいれば、今後が期待されるデザインとして取り上げられたシネマグラフについても、おそらく読んだことがあるでしょう。Webサイトのトップページを飾るシネマグラフのデザイン例も、数多くの記事で紹介されていました。 しかし、シネマグラフはどこへ消えたのでしょうか？ 現状としては、ファッション業界の一部の企業のWebサイトに使われている以外には、シネマグラフは記事の中で紹介されるか、Reddit（レディット：アメリカの掲示板サイト）で語られるだけの存在にほぼ追いやられています。 今こそ、シネマグラフの本来の価値を見直し、本来の「Webサイトにおけるヒーロー的存在」として活用すべき時です。   シネマグラフが効果的である理由 あるWebデザインが流行すると予測されたという理由だけで、ただそれに従うのは、個人的には退屈なことだと思います。 むしろ、もし自分でWebデザインの新たなトレンドを開拓できるとしたら、その方が面白いと思いませんか？あるいは、もし目的を持ってWebデザインを創造し、同時にそのデザインによって何らかの問題を解決できるとしたら…？ 人間の目は動くものを好みます。 シネマグラフは数々の記事で話題になったにもかかわらず、（しかもWebデザインのトレンドになると予測されていたにもかかわらず、）シネマグラフを活用しているWebサイトはごく少数であるのが現状です。そのため、まだ現実的な普及率は高くはないので、ほとんどのWebユーザーの目には新鮮なデザインに映るようです。 写真としての要素と、動画としての要素を併せ持つシネマグラフには、潜在的に人間の視線を引き付ける力があります。見る人が思わず二度見せずにはいられないようなシネマグラフのデザインには、人の目を上手く欺くような不思議なトリックがあります。 「ユーザーの注目を集めることができる」 従来、Webサイトでユーザーの注目を集める方法として特に有効だったのは、「動画」です。人間の目は動くものを好みます。 しかし、動画は再生時間が短いものであっても、容量が大きくなるというデメリットがあります。もちろん、動画を約1inch（約2.54cm）以下のサイズに圧縮することもできますが、小さなサイズの動画でしかありません。かといって、元の大きな容量のままにしておくと、Webページの読み込みが遅くなります。   しかし、シネマグラフを使えば、表現したいと思う動きを自由にデザインできます。 また、その目新しさを上手く利用できれば、ユーザーの注目を集める方法としても、シネマグラフは対費用効果が高いのです。多くのユーザーは、シネマグラフを見る機会があまりないため、見たときには思わず視線を奪われ「すごい！」と思う傾向にあります。 なぜシネマグラフをWebサイトの主役のデザインとして使うのが効果的なのかを説明するために、実例を1つ紹介したいと思います。 Glendevon Motors社のWebサイトのデザインでは、シネマグラフをトップページに大きく利用することで、商品の雰囲気を伝え、競合企業の中で「一流ブランド」として目立たせる効果を狙っています。   選択肢1：既製のCGを使う シネマグラフを作成するには、既製のCGを使える場合も多いと思います。私個人としては、もし思い描くイメージ通りのデザインが見つかり、かつ使用権の価格が予算の範囲内であれば、既製のCGを使う方法もいいと思います。問題はどこで入手するか？です。 幸いなことに、入手先の選択肢はたくさんあります。もちろん予算にもよりますが、リソースは豊富にあります。無料で提供されているCGもあります。もし予算として約80ドル（日本円で約8,300円）使えるとしたら、質の高い高精細度のCGが入手できるShutterstockがおすすめです。 （アドバイス：シネマグラフのカテゴリが設けられているとは限りません。入手先で探すときには、「シネマグラフ（cinemagraph）」という検索キーワードで探すか、または「動画素材（footage）」のカテゴリから任意の検索キーワードで探す必要があります。） イメージ通りのCGを入手できたら、次に行うべきはファイルの圧縮作業です。これについては、後で述べます。   選択肢2：CGを自作する CGが動画より優れているのは視覚的なトリック効果で、それがCGを使う意味です。 思い描くイメージ通りのシネマグラフが既製のCGに見つからない場合、あるいはあなたがCGの自作を得意とする強者であれば（そうであれば私はあなたを尊敬しますが。）、シネマグラフをゼロから自作するという選択もあります。 短い動画撮影ができるカメラ 三脚 被写体となるモデル・小道具 コンピュータ 動画編集用のソフトウェア（※これは任意です。） Adobe Photoshop、またはflixelなどのシネマグラフ編集専用のソフトウェア 上のリストが、シネマグラフを作成するのに必要なアイテムです。ただし、効果の高いシネマグラフを作成するには、もちろん良いアイデアが必要であることもお忘れなく。   質の高いシネマグラフを作るには？ 個々のCGのテーマとして何を表現するかは、それを利用するWebサイトのニッチ市場における需要によって大体決まると思いますが、CGの作成全般において必ず押さえておくべきポイントがあります。 微かなデザイン：CGが動画より優れているのは視覚的なトリック効果で、それがCGを使う意味です。最も優れたCGのデザイン作品の中には、ほとんど静止画像に近いデザインでありながら、その中のほんの微かな動きが見る人に驚きを与えるようなものもあります。デザインの全体的な構成についても、こうしたコントラストは重要です。もしCGの上に、テキストやCTA（Call To Action：ユーザーの注意を引きアクションを誘導するための要素）を、レイヤーとして重ねるとしたら、全体のデザインが乱雑すぎたり、色が強くなりすぎたりすることがないように注意が必要です。CGは、あくまでこれらの重要な要素を引き立てるために使うのです。かえって注意を逸らすことになっては逆効果です。 重要な要素を引き立てる：見出し、サブヘッダ、CTAのボタンなど要素が、シネマグラフと上手く調和するようなデザインを考えましょう。デザインの全体的な構図の中で、どの要素を引き立てるかよく考えることが重要です。 動く部分以外は静止させる：もちろんCGには動きが含まれますが、CGの中で動く部分以外の背景は、その動きを引き立てるために静止させます。動画撮影時には、三脚を使ってカメラを安定させるといいでしょう。もしモデルの人物の目だけが横に動くようなシネマグラフを作成するとしたら、人物の頭などがなるべく動かないように注意します。 ループ可能なCGにする：ファイルの容量を小さくするには、短い動きを繰り返しループさせ、かつその継ぎ目がなるべく不自然にならないようにするのが効果的です。撮影現場のセッティングをするときにも、工夫します。自然なループの継ぎ目を作るためには、被写体の最初の位置と最後の位置を、ほぼ一致させることが理想的です。 もし可能なら、被写体に人物を使う：人物を含む画像の方が、そうでない画像よりも、人の注意を引きやすいことが数々の研究結果によって明らかにされています。この結果をCGにも応用しましょう。モデルとなる人物の視線が、CTAの方向を向くようにデザインすればさらに効果的です。ユーザーの視線も同じようにCTAへ誘導しやすいことが、研究で示されています。 被写体の配置を整えたら、次は撮影です。シネマグラフの中で表現したい動きを数回ほど繰り返しながら、約20～30秒の動画を撮影します。また、全ての被写体を静止させた約5秒動画も撮影します。 こうして撮影できた動画が、人目を引くようなシネマグラフを作成する土台となります。   動画からシネマグラフを作成する ここでは、動画からシネマグラフを作成する詳細なステップは省略し、主な作成ツールについてのみ紹介します。 シネマグラフ用の高性能なデザインソフトウェアは約299ドル（日本円で約31,000円）で購入できますが、Photoshopを使ってCGを組み合わせてシネマグラフを作ることも可能です。   ファイルを圧縮する CGをゼロから自作するとしても、既製のCGを利用するとしても、ファイルの読み込みが速いことが重要です。また、CGの出力ファイル形式を、GIF形式にするとしても、その他の動画ファイルの形式にするとしても、ファイルの圧縮において重要になるのは次の2点です。 画質 長さ 私は、動画やシネマグラフなど容量の大きいファイルを圧縮するときには、なるべく画質が損なわれないように努めています。視覚的な効果を得るのために、ファイルの画質を犠牲にすることは、悪だと考えています。このバランスを図るために、シネマグラフ作成においては、ループを可能な限り短くしているのです。 シネマグラフのループをどのくらい短くできるかは、撮影する被写体の動きにも左右されます――例えば、被写体が「走っている列車」である方が、「ゆったりと動く人間の目」である場合よりも、短いループを作成しやすいのです。 「ゆったりと動く人間の目」のような被写体の動きを、短いループで繰り返すとしたら、途切れて不自然な感じになってしまいます。   例として、私がThe Deep End社でデザインした次のシネマグラフを見てください。「走っている列車」を表現するためにループさせている動画は、1秒前後まで短くすることができました。こうして、このシネマグラフでは自然な動きを作ることができましたが、ファイルの読み込みを速くするには、ファイルをさらに圧縮する必要がありました。 そこで、私は最終的に、ClipChampという無料のファイル縮小用ソフトウェアを利用し、このファイルを数MBから約319KBまで圧縮しました。 ぜひ覚えておいてほしいことは、ユーザーは読み込み時間に「3秒」もかかれば、Webサイトを離れてしまうということです。だからこそ、ファイルの読み込みを速くすることには、労力をかける価値があるのです。 もし圧縮をしすぎた結果、最終的なファイルの仕上がりに不自然な部分が生まれた場合には、不完全な動画を上手く隠すための常套のテクニックがあります。――半透明のパタン（模様）入りオーバーレイで、覆ってしまいましょう！ シネマグラフによるデザインの実例は数が少ないこともあり、多くを紹介できないのは残念ですが、ぜひあなた自身に今回の記事で述べたプランを実行に移して、Webデザインのトレンドとなるような前衛的なシネマグラフを生み出してほしいと、期待しています。 Gilt Taste（補足：このサイトは現在閉鎖中です。） The Nature Conservancy   最後に シネマグラフは、それなしでは退屈になるようなWebサイトのプロジェクトを楽しいものとするだけではなく、プロジェクトを成功に導く力もあります。 最高にクールな見出し、優れたCTAなどを、シネマグラフと組み合わせれば、ユーザーの関心を引けることも間違いありません。その後は、ユーザーの関心を思いのままに導くことができます。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインのスキルを身につけたい方はぜひご覧ください！
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】