編集ロックされたPDFを解除する方法

 

クリエイターだけではなく、一般の方でもこんな経験ないですか?
先方からもらったPDFファイルからテキストを抽出したり、修正したりするために、編集画面を開いたら

これが出てきた瞬間、絶望しますね。

仕方なく、画面キャプチャしたりすることもありますが、PDFのまま編集したい場合はそんなわけにも行きません。

あーでもないこーでもない、と色々と探していたらすごいサービスを発見しました。

それが、編集保護されたPDFファイルを無料で、編集できるファイルに変換してくれるWebサービス。

Smallpdfのすごいところ

かなり使えるウェブサービスです。
クリエイター以外もPDFの編集が必要な場合がありますよね。
PDFのロック解除だけではなく編集などもできてしまうのがこのウェブサービス。

それでは早速すごいと思うポイントを上げていきます。

PDFのパスワードロック解除機能

ユーザ登録なし・無料で1日1ファイル、PDFのパスワードロック解除ができること。
しかも、特にそれ以外の制限はありません。

ブラウザキャッシュで回数を判断していると思われるので、キャッシュを消せば使い放題(になるかも!)

パスワードロック解除だけではない!多数の編集機能

それ以外にも、こんなにもたくさんPDFの編集や変換、圧縮などができる優れたサービスです。

これはAdobe Acrobat DC並みですね。

PDFをWordやExcelに変換はよく使いそうです。
どのくらいの精度で変換できるかは分かりませんが、変換後に微調整をするだけなら、1から入力し直すよりも断然ラクです。

 

月々激安で変換し放題

そして、最後に月々675円ほどで使い放題になるサブスクリプションサービスということ。

Adobe Acrobat Pro DCが年間18000円程度ということを考えるとかなりお得です。

早速使い方を見ていきましょう

誰でも簡単にできるんですが、使い方の説明をします。

まずはロックがかかったPDFファイルを用意してください。

保護のかかったファイルをドロップ

ロックのかかったファイルを画面のピンクの部分にドロップするか、「ファイルを選択」をクリックして、ロック解除したいファイルを選択します。

「アンロック」をクリック

ファイルを選択すると、下のような画面に変わります。

右側の「ファイルの暗号を解除し、編集する権利があることを確認する。」にチェックを入れると「PDFをアンロック!」に色がつきます。

「PDFをアンロック!」をクリックするとアップロードが始まります。

ロック解除完了!

解除が完了すると上のような画面になります。
ここもきめ細やかです。PDFをダウンロードできるほか、メール送信、DropboxやGoogleDriveへ直接保存などもできます。

こういった細かい気配りが大事ですね。

PDFをダウンロードを押すと、通常のファイルダウンロードと同じように保存先選択画面が出てきます。

ロック解除したPDFを確認!

お見事!
編集できるようになっています!!

 

]]>

Font Awesomeがうまく表示されない。

Font Awesomeでcontent指定してるのに、□になる・・・ そうです。 この四角!何でよ! 何しても直らない!

Font AwesomeをCSS内でcontent指定して使う手順

絶対にいろんなところでつまづいている人いると思う。

CSS内で指定するときは まず、headerでCDN読み込み

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

そんで、CSS内擬似要素(:after、:before)で指定

.fontawe:after{
    display:block;
    content:"\f061";
    font-family: "Font Awesome";
    width:20px;
    height:20px;

}
これだと□になります。

間違い要素をまとめていくと

擬似要素の使い方は自分で調べてもらうとして、 擬似要素内でどうしてFont Awesomeが□になってしまうのか、をまとめました。

(間違い要素1) font-familyは「Font Awesome 5 Free」

正しいフォント指定は
font-family: "Font Awesome 5 Free";
2018年8月現在で、Font Awesome のバージョン5フリー版を使う場合です。 古いブログだと「5 Free」がない記載があります。

(間違い要素2)contentは「\(バックスラッシュ)」付きのUnicode

正しいアイコン指定は
content:"\f061";
バックスラッシュがなかったり、半角¥マークになってたりしたら間違い。 よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。 content:”<i class=”fas~~~~~~~”> は違いますよ。 contentで指定するときは、ユニコードをコピーしてください。 バックスラッシュもお忘れなく。

font-weightの指定がないと表示されない

ワタクシ、これによって1時間も悩まされました。
font-weight:900;
いろんなページをまさぐりまくっていたら確かに書いてありましたよ。こんな表がこのページに。 こんなページ誰も見ないでしょ!使い方のページに書いといてくれ〜と叫んだ。 Free版を表示するときは、font-weightを「900」か「bold」で指定しないといけないようです。 確かにfont-weightを指定したら、表示されました。 ここまでの道のり長かったなぁ〜・・・・。

コピペ用

.fontawe:after{
    display:block;
    content:"\f061";
    width:20px;
    height:20px;
    font-family: "Font Awesome 5 Free";
    font-weight:900;
}
これをぶち込んだら、とりあえずいけるはずです。 [wpap service=”with” type=”detail” id=”4839960224″ title=”6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポ…”]]]>

モバイルファーストインデックスについて

ウェブ = モバイル となるわけです。 わかりやすく説明します。

今後はモバイルサイトの内容が検索順位にかかわってくる

Googleは公式のサイトでこう発表しています。
将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。もちろん、Google のインデックスがモバイル版のコンテンツで形成されるようになっても、デスクトップ端末かモバイル端末かに関わらず、すべてのユーザーに素晴らしい検索体験を提供し続ける点は変わりません。
検索結果に反映する際に、モバイル版のコンテンツを主に使用するようになる。 モバイル版のウェブサイトのコンテンツが如何に、ユーザのことを考え作られているかが重要になります。 もっと簡単に言うと、スマホで使いやすいサイト作れよ!ってことです。

すでにレスポンシブデザインのサイトは特に何もしなくてよい

レスポンシブデザイン動的な配信を行っているサイトで、主要なコンテンツやマークアップがモバイル版とデスクトップ版で同一である場合は、何も変更する必要はありません。
レスポンシブデザインの場合は何もせずにそのほかのSEO対策をしていきましょう。

スマホ・PCがそれぞれ独立している場合

スマホサイト・PCサイトが独立している場合、以下の対応が必須になります。
  • 構造化データ マークアップがデスクトップ版とモバイル版の両方で配信されるようにします。構造化データ マークアップの同一性を確認するには、構造化データ テストツールにデスクトップ版とモバイル版の両方の URL を入力し、出力結果を比較します。モバイルサイトへ構造化データを追加する際は、それぞれのドキュメント特有の情報に関係のないマークアップを大量に追加するのは控えます。
  • robots.txt テスターを使用してモバイル版のコンテンツに Googlebot がアクセス可能であることを確認します。
  • rel=”canonical” リンク要素を変更する必要はありません。デスクトップとモバイルのそれぞれの検索ユーザーにとって適切な結果を表示するために、Google はそれらのリンク要素を引き続き使用します。
 

PC版しかない場合はどうすりゃいいのさ

では、PC版のウェブサイトしかない場合、どうすればいいのか。 新たにスマホサイトを作るべきなのか、無理やりレスポンシブ対応したほうがいいのか、 それともPC版だけでいいのか。 Googleさんはこう言っています。
デスクトップ版のサイトしか存在しない場合、Google は引き続きデスクトップ版のサイトをインデックスします。モバイルユーザーエージェントを使用してアクセスする際も問題ありません。 デスクトップ ユーザーにとって使いやすいサイトは、壊れたり不完全なモバイルサイトよりも、モバイルユーザーにとって好ましい場合があります。モバイルサイトを作成する際は、サイトが完成し準備が整ってから公開することをおすすめします。
つまり、変なスマホサイト作るくらいなら、ちゃんとしたPCサイト”だけ”の方がいいよということです。

読み込みスピードも評価対象

この ”Speed Update” (と私たちは呼んでいます)は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。
PHPによる動的なサイトでも、htmlによる静的なサイトでも、一緒くたに評価されるようですね。 ただし、次の文言が気になる。
検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。
つまり、ユーザが検索したワードによっては、読み込み速度にかかわらず上位表示されるということ? となると、そもそも「上位表示」に対する対策が難しくなりますね。(これも検索エンジンのあるべき姿かもしれませんが。)

そのほか、追加があれば追記します。

ほかに追加があれば随時追記していきます!]]>

【AEでSVGアニメーション! 002】制作フローと注意事項

インストール後にちょっとだけ設定 Bodymovinをインストールしたら、ちょっとだけ設定をします。 メニューから 環境設定 > 「一般設定」タブ > 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます 読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。 ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。

さっそく、SVGファイルを作りましょう

それでは、無事、インストールも設定も完了したということで、 アニメーションを作っていきましょう。

もう一度、できることできないことの確認

第1回の記事の復習ですが、BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。なので、パスデータ以外は画像(PNG)に変換されます。 これを念頭におき、再度確認しましょう。

エフェクトや3D、ビデオ、オーディオは非対応

  • 画像ファイルの書き出し
  • エフェクト類
  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー
ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません。 ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)
 

まずは、パスを用意

+Life Studioのロゴをすべてパスデータで起こしました。 と言っても、Adobe Illustratorで制作している場合は、コピペで対応できるので、楽です。

アニメーションをつける

通常、After Effectsでモーショングラフィックスを制作している方なら、難しいことではないですね。 キーフレームやパスを使って、素材に動きをつけていきます。 こんな感じで、動きをつけ終えたら、書き出していきましょう。

書き出すコンポと書き出し先のフォルダを指定

メニューで ウィンドウ > 拡張機能 > Bodymovin を開くと書き出し用の画面が出てきます 書き出すコンポにチェックをいれ、書き出すフォルダを指定します(フォルダが表示されていない場合はをクリックして指定)

書き出しのセッティングをする

書き出すコンポ名の左にある「Settingsギアマーク」をクリックすると、プロパティ画面が開きます。 書き出し形式は「Glyphs」を選択し、「Save」をクリック

JSONファイルを書き出す

Bodymovin画面の左上にある「Render」ボタンを押すと、JSONファイルの書き出しが始まります。 Renders Finishedと表示されたら、レンダリング完了です。 書き出したフォルダを見てみると、JSONファイルが出来上がっていると思います。 これで、書き出し完了です!

htmlファイルで書き出してくれるDemoモード

実際にブラウザでどのように動作するかを確認できるDemoモードという書き出し方法がSettingsの中にあります。 「Demo」で書きだすと、htmlファイルが生成され、それをブラウザで開けば動作を確認できます。

次回は、書き出したJSONの設置方法を掲載します♪

次回は、書き出したJSONをどのようにサイトに配置するか、をまとめます。]]>

【AEでSVGアニメーション! 001】メリット説明〜インストール

After Effectsを使ってSVGアニメを作る ウェブデザイナーでAfter Effectsを触れる人、または映像制作をしている人でウェブ案件に関わっている人、 そういう人には今回の方法は簡単で、かつ分かりやすく 複雑なSVGアニメーションを作りやすいです。 筆者はウェブデザイナーの出身で、後に映像制作に手を出し今に至るわけですが、 映像の中でもモーショングラフィックスを得意としており、 モーショングラフィックスの作成にはAfter Effectsを使っています。 だから、この方法はドンピシャでした。 ウェブ案件でちょっとしたアニメーションが使われることも 最近ではあたりまえのようになりましたね。 ページローディング時のアニメーションもその一つですが、 これからもっと増えてくるのではないか、と予想します。 今回は数ある動画フォーマット(GIFアニメやmp4、Youtube利用など)のなかで 「なぜSVGアニメーションなのか」、そしてAeを利用したSVGアニメーション制作の下準備までを説明したいと思います。

SVGのメリット

SVGには他の画像ファイルにはないメリットがいくつかあります。 もちろん、それらはSVGアニメにも引き継がれています。
  • 画像ファイルに比べてファイルサイズが小さい
  • 拡大縮小してもジャギーが出ない
  • プラットフォーム依存が少ない

画像ファイルに比べてファイルサイズが小さい

SVGはXMLという言語がベース画像フォーマットで、 従来の画像フォーマットJPEGやPNGに比べファイルサイズが小さいです。 ファイルサイズの比較を行っている記事があります。 [blogcard url=”http://blog.asial.co.jp/1109″]

拡大縮小してもジャギーが出ない

SVG:Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス) つまり、伸縮できる、ヴェクターの、画像 ということです。 ヴェクターについての説明はこちらのサイトをご参照ください。 [blogcard url=”http://www.atmarkit.co.jp/ait/articles/0908/18/news099_3.html”] ヴェクターの特性として、曲線が滑らかなまま拡大縮小を可逆的に行えます。 そのため、ジャギーがないのが利点です。

プラットフォーム依存が少ない

拡大縮小ができることや、それによる画質の劣化などがないことから プラットフォーム依存がないことが利点です。

SVGのサポートブラウザ状況(2017)

SVG対応ブラウザの状況です。 2017年、ほとんどのブラウザが対応できており、シェアも高いのも魅力的。

BodymovinというAEのAdd-onを使う

今回紹介するSVGアニメーションの制作方法は、 BodymovinというAfter Effects Add-onを使う方法です。 jsをゴリゴリ書けなくても、After Effectsで作成したアニメーションを、jsonファイルでパパッとSVGアニメーションに変換してくれます。 今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。 GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、 HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。

Bodymovinでできること・できないこと

BodymovinでSVGアニメに変換する際に、できることできないことをまとめました。

エフェクトや3D、ビデオ、オーディオは非対応

  • 画像ファイルの書き出し
  • エフェクト類
  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー
ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません。 ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)

読み込んだイラレのレイヤーは画像ファイルとして書き出される

BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。 なので、パスデータ以外は画像(PNG)に変換されます。 After Effectsでモーショングラフィックスを作成する際、 素材をIllustratorで作成し、レイヤーを分けた状態でAeに読み込み、 アニメーションをつける作業をすることが多々あります。 この読み込んだIllustratorのレイヤは、パスデータではなく、 Illustratorのレイヤのリンクファイルなので、BodymovinでSVG化した際には PNG画像に変換されます。

BodymovinをAfter Effects 2017にインストールする手順

After Effects2017での拡張機能(Add-on)インストール方法をご説明します。

拡張機能インストールアプリ ZXPインストーラをダウンロードする

まずAdd-onインストールのために、ZXP Installerをダウンロード・解凍します。    

続いて、Bodymovinをgithubからダウンロード

こちらのBodymovin githubレポリトジページからBodymovinをダウンロードします。 右側の「Clone or download」をクリックしてダウンロードしましょう。

bodymovin.zxpをZXP Installerにドロップ

先にZXP Installer.appを起動します。 Bodymovin githubレポリトジページからダウンロードしたBodymovinのフォルダで build > extension と開いていってください。 extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。

Macのユーザ情報を入力してインストールを許可したら終了

ドロップすると「Updating…」という表示に変わります。 その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。 ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。

インストールが完了するとこんな画面がでます

「The extension was successfully installed!」が表示されたら、インストール完了です。

After Effectsで「拡張機能」を確認

アフターエフェクトのメニューから ウィンドウ > 拡張機能 を開いたときに「Bodymovin」が表示されていればインストール完了!  

次回は、実際の制作フローと制作の注意点をご紹介します

次回は具体的な制作について触れていきます♪  ]]>

ドメインの選び方

ドメインってなに? このウェブサイトでいうと「http://plife.studio/」の「plife.studio」がドメインのこと。 ドメインの末尾「.studio」「.com」「.net」「.co.jp」などなどはトップレベルドメインと呼ばれます。

ドメインとは、屋号のようなもの

よく、「ドメインとはインターネット上の住所のこと」と比喩されます。 これ、正しいようで正しくない気がします。 どちらかというと、屋号という表現が適正。 このサイトは「.studio」という村の「plife」さん。 「.com」という村や「.net」という村にも同じ「plife」さんがいることもあるのです。鈴木さんが隣町にもいる感じです。

ネット上の住所である「IPアドレス」では分かりにくい

インターネット上での「住所」を、IPアドレスといいます。 IPアドレスは数字のみで構成されており、その数字を全て覚えておくのは難しいです。 あのサイトは「192.168.xxx.xxx」、このサイトは「192.168.yyy.yyy」なんて覚えていられないので、覚えやすいように「ドメイン」を使うのです。

屋号から住所への変換はDNSがする

「plife.studio」という屋号を、インターネット上の住所である「IPアドレス」に変換する通訳がいます。 それがDNS(ドメイン・ネーム・サーバ)です。 インターネットという大きな街の中では、「あそこの村の鈴木さん」と言われても見つけられないので、 DNSが正式な住所に通訳します。 「あそこの村の鈴木さん(ドメイン)」=「日本のソーダ村のメロン地区30−2の鈴木さん(IPアドレス)」に変換する、みたいな感じです。

ドメインの決め方・選び方

ここまでの説明を読んだら、どういうドメインを取得すればいいか、よくわかると思います。 ドメインとは「屋号」です。 少なからず、サイトの中身や名称が想像できるものが適しています。 +Life Studioだから「plife.studio」なのです。 そこを「ohashikyosen.studio」にはしないわけです。 それを踏まえた上で、よくある決め方を書いていきます。

店や企業の名前をそのまま使う

世の中のドメインでもっとも多いパターンです。 名前をそのまま使うので、覚えやすいし入力しやすい。
  • 東京ディズニーリゾート http://www.tokyodisneyresort.jp/
  • SONY http://www.sony.jp/
  • PIXAR https://www.pixar.com/
ただ、日本語の場合ローマ字表記に揺らぎがあるので、ややこしい場合もあります。 例えば、「大阪」は「osaka」「oosaka」「ohsaka」などの想定がされるため、逆にややこしいです。

商品名やキーワードを使う

  • アイスマン福留(コンビニアイス評論家) http://www.conveniice.com/
  • 寝具のこだま http://www.anmin-ne.com/
 

ポイントは覚えやすくて入力しやすいこと

ドメインのポイントは、覚えやすくて入力しやすいことだと考えます。 入力しやすい、とは、「文字数が少ない」ということです。

トップレベルドメイン(TLD)の決め方

トップレベルドメインとは「.com」「.net」「.co」などなど、ドメインの一番最後に付いているもの。

主たるTLDと使用用途

TLD 概要 主たる用途
.com 「commerce」の略 企業や商用サービスを表す
.net 「network」の略 ネットワークサービスを提供する者を表す
.org 「organization」の略 非営利団体を表す
.biz 「business」の略 ビジネスを表す
.info 「information」の略 情報を提供する者を表す
.co 「company」の略 企業や商用サービスを表す

属性jpドメイン

属性jpドメインとは、TLD「jp」の前に、セカンドレベルドメイン(SLD)として別の文字が入るドメインのこと。
TLD 概要 主たる用途
.co.jp 「company」の略 日本国内で登記を行っている会社・企業が登録可能
  • 株式会社、有限会社、合同会社、合名会社、合資会社、相互会社など信用金庫、信用組合、外国会社(日本で登記していること)
.or.jp 「organization」の略 特定の法人組織が登録可能  
.ne.jp 「network」の略 ネットワークサービスごとに登録可能 サービスごとに一つのドメイン名を登録できます。 (同一組織でもサービスごとに異なるNE.JPドメイン名を登録できます)
.ac.jp 「academic」の略 高等教育機関、学術研究機関などが登録可能
  • 大学、大学校、高等専門学校、大学共同利用機関などの学術研究機関学校法人、職業訓練校、職業訓練法人
.go.jp 「government」の略 日本の政府機関や各省庁所管の研究所、特殊法人、独立行政法人が登録できます。政府機関は、一つの組織で複数のGO.JPドメイン名を登録できます。
.ed.jp 「education」の略 初等中等教育機関および18歳未満を対象とした教育機関が登録可能
  • 保育所、幼稚園、小学校、中学校、中等教育学校、高等学校
  • 盲学校、聾学校、養護学校、専修学校
  • 各種学校のうち、主に18歳未満を対象とするもの
 

属性jpドメインのメリットは、安心安全アピール

jpドメインのメリットは何と言っても「日本の企業や個人しか取得できない」という点 これは、世界レベルで見たときに「安心・安全」をアピールする材料に成りうるのです。 「日本の企業だから安心」という日本安心説は、世界ではまだまだあります。

しかし、日本国内ではあまり関係ない

しかしながら、日本国内向けであればあまり関係ないのです。 そもそもTLDを一般ユーザは見てないことが多いです。

で、TLDは結局何がいいか

分かりやすい「.com」か「.net」 日本らしさを押し出していくのであれば「.jp」をおすすめしています。 jpは運用費用が他に比べ高めなので、予算とにらめっこです。

新ドメインと日本語ドメイン

最近では「.com」などの定番のTLDだけでなく、このサイトのように「.studio」や「.today」などの新しいドメインも増えてきました。 さらにドメインに日本語を使う「にほんご.com」のようなものも増えてきました。 個人的にはかなり面白い方向性だな、と思います。

新ドメイン

新ドメインはこんなにたくさんあります。 本サイト「.studio」も新ドメインです。

メリットは「話題性」「関連付け」

  • 話題性
  • 地域、業種などとの関連付け
「.actor」「.finance」「.art」「.repair」「.global」…アピールするにはもってこいの単語が並びます。 「.actor」なんて、俳優しか使えませんが、俳優が使えば誰がどう見ても俳優のサイトのURL。

デメリットは「長いTLDがある」「登録できないサービスがある」

新しいから信頼性が…という説明のサイトもありますが、 先述の通り、ユーザはドメインと安全性を紐付けて判断していません。 ですので、デメリットは
  • 長いTLDは覚えにくい!
  • 新ドメインのメールアドレスが、ウェブサービス登録に使えないときがある
「.construction」「.restaurant」こんなの覚えられない!というか、打ち間違える! そして、一部のウェブサービスを登録する際に、 新ドメインのメールアドレスでは、メールアドレスとは認識されず登録できない場合があります。

日本語ドメイン

最近流行り?の日本語ドメイン。 日本人にしか通用しませんが、メリットもあります。

メリットは「日本人なら覚えやすい」

  • 日本人にとっては覚えやすい
  • URL自体が検索対策になる
  • ドメインの選択肢が増える
URLに日本語が含まれる = 日本語検索の検索対象になる というのが最大のメリット。 「ドメインの選択肢が増える」とは、 日本語には、「ひらがな」「カタカナ」「漢字」があるためです。 「プラスライフ」「ぷらすらいふ」「富羅須雷不」すべてが別の扱いです。

デメリットは「海外不向き」

言わずもがなです。

まとめ

無難に、運用コストも安く決めるなら
  • 企業名(お店)のローマ字 + .comまたは.net
面白く攻めたいなら、新ドメインを使うのもいいかも! です。  ]]>

PremiereでMAするときに押さえておきたいポイント

MA:Multi Audio/音調整作業 音声調整のことをMA(Multi Audio)と言います。 このMA作業、映像制作においてかなり重要なポストだと筆者は認識しています。 学生時代、音響の勉強をしていた筆者がポイントを絞って 明日から使えるMA講座〜!

聞かせたい音の音量をあげるのではなく、他を下げる

これがMAの基本です。 音声の調整は、足し算ではなく、引き算。 これを意識するだけでごちゃごちゃした音声たちがスッキリきれいにまとまります。 MA作業というのは、様々な音を一つの箱に納めるイメージと思ってください。 聞かせたい音の音量をあげると、箱からあふれてしまいます。 箱から溢れると、ミキサーのメーターにピーク(赤いランプ)がつきます。 これがつかないのが理想です。

音量でバランスをとるのではなく、音域でバランスをとる

音域のバランスについては詳しくは後述します。 音量の大小を調整すればある程度のバランスは取れます。 しかし、ナレーションを聞かせるためにBGMを下げたら、BGMがほとんど聞こえない なんてことになります。 だから、多くの場合は小さい音を基準に考えて足し算してしまうんですね。 ポイントは、聞かせたい音を中心に、他の音は音域をズラす、ということです。

項目別音声の調整

ナレーション(NA)について

ナレーションは「適正に聞こえる」ことに重点を置いて調整するのがポイントです。

余分な部分はカットする

言葉と言葉の間はノイズが目立ちやすくなるのでカットします。 その際、「ブレス(息継ぎ)」の部分は残しておく方が自然かもしれません。

ノイズリダクションする

まずはノイズリダクションします。 「ノイズリダクション」というエフェクトを使って、数値をいじりながらノイズを減らします。 ポイントは以下の通り
  • ホワイトノイズ(サーっというノイズ)を弱めることを意識
  • ノイズを完全に消そうとは思わない
  • 高音のみ

80Hz以下はイコライザーでカット

80Hz以下をカットする理由は以下の通り
  • 80Hz以下を人間は認知しにくい
  • モコモコした音域で、あまり心地よくない
  • BGMの音域と被りやすく、ピークがつきやすい

クリップごとに音量調整をして、全体の音量をあわせる

コンプレッサー(Dynamicsエフェクト)を使って一括で音量を合わせる方法もありますが、 音の潰れ方が不自然になって、気になる場合があります。 そういう時は、クリップごとに波形を見ながら、音量を調整します。 MA もちろん、何度もプレビューして音を聴き比べます。 ポイントは
  • 音量メーターで−6dbくらいになるように合わせる
  • 破裂音や摩擦音(ba・pa・saなど)は波形の飛び出たところ(母音)のみを下げる
  • 最終判断は自分の耳

BGMについて

BGMのつなぎ目は丁寧に

BGMを映像尺に合わせて編集した時に、つなぎ目が粗いとかなり気になります。

BGMの音の帯域をナレーションとズラす

編集していて、ナレーションが聞こえにくい時があると思います。 そういう時はナレーションの音量をあげるのではなく、音全体のバランスを整えてみましょう。 一般的に、声の周波数帯域は
  • 男声:120Hz〜200Hz
  • 女声:200Hz〜300Hz
と言われています。 これを考慮して、BGMにEQ(イコライザー)をかけます。 イコライザーをかける際も引き算を意識します。 つまり、男声ナレーションの場合は、BGMの120Hz〜300Hzを下げます。 女声ナレーションの場合は、BGMの200Hz〜300Hzを下げます。 もちろん、ナレーターによって声の周波数帯域は微妙に変わるので、実際は音を聞きながらまとめます。

効果音について

音選びとタイミングが重要

効果音に置いて重要なポイントは、音選びと発音タイミングです。 動きに合った音選び、またそれを鳴らすタイミングがピッタリかどうか、 そういった細かい部分まで気をつける必要があります。

音量は少し小さいと感じるくらいにする

効果音については付加情報でしかなく、それがなくても映像自体は成立します。 なので、そんなに激しく主張しなくていいのです。 ポイントは「少し小さいかな?」と感じるくらいの音量でまとめること。

終わり。

さあ、どうでしたでしょうか。 音声調整について、ここに書いたことだけが正解ではありません。 一つの参考になればいいと思います。]]>

ウェブデザインの参考にしているサイト(2017年)

ポイントは、見易さと検索のしやすさ ピックアップするときにポイントを絞りました。

  • アーカイブサイト自体の見易さ
  • 参考を探す時の検索のしやすさ
この2点です。 それでは早速紹介します。

良質すぎる MUUUUU.ORG

http://muuuuu.org/

クオリティが高く、国内外問わず取り扱い

取り扱ってるサイトがかなり良質です。 国内外問わず扱っており、数も豊富で更新頻度も高め。

検索は業種・デザイン・タイプのカテゴリーごと

かなり細かくカテゴリ分けしてあります。

シャッフル機能が面白い I/O3000

http://io3000.com/

更新頻度、扱い件数が多い

毎月20〜40件の更新です。 MUUUUUがビジュアルを前面に出したデザイン性の高いサイトを取り扱っているのに対し、 こちらは、それ以外にも日本のウェブサイトでよくある情報量の多いサイトも取り扱っています。

キーワード検索が強み

カテゴリーだけでなく、キーワードで検索できるのがいいですね。 また、「Shuffle」をクリックすると、更新日に関係なくランダムに並ぶようになります。 予期せず出会ういいデザインがあるのが魅力です。

WordPressサイトのアーカイブ WP Design Gallery

http://wpgallery.kachibito.net/

ワードプレスに特化したサイト

Wordpressのテンプレートに特化したアーカイブなので、Wordpress案件にはかなり参考になります。

レイアウトでも分けられている

カテゴリ分けは最小限。カラムで分けられているのはいいですね。

更新されていない…

もう長らく更新されていないようですね。残念です。

評価性を取り入れている Awwwwards

https://www.awwwards.com/

投票で決まるポイント

DESIGN(デザイン性)、USABILITY(使い勝手)、CREATIVITY(創造性)、CONTENT(内容)と4つの評価軸で、Awwwwards利用者が評価。 評価は投票で決まり、投票するユーザも評価によりランクが別れるため適当な評価ではないところがいい。

勉強は不可欠

いかがでしたでしょうか。 やっぱり、流行りのデザインを勉強すること、世界のデザインを勉強することはとても重要です。 デザインを勉強したり、迷ってしまったりしたら、今日ご紹介したアーカイブサイトを見てみるのもいいかもしれません。]]>

【Adobeで映像を作る】004 大まかな手順 最後のPremiere編

【Adobeで映像を作る】001 大まかな手順 Prelude編」 「【Adobeで映像を作る】002 大まかな手順 Premiere編」 「【Adobeで映像を作る】003 大まかな手順 After Effects編」 に続く第4弾です。 一通りの編集を終えたあと、Premiereに戻して最終の仕上げをするって話です。

編集の大きな流れ(Pl→Pr→Ae)

adobeMovie_102_Pl→Pr→Ae 僕が映像の編集業務で使っているソフトは3つ。
  • Adobe Prelude(Pl)
  • Adobe Premiere(Pr)
  • Adobe After Effects(Ae)
 

そして、最後にPrに戻します

adobeMovie_107_Pl→Pr→Ae→Pr

(手順1)Prelude(プレリュード)で素材の整理

このPreludeというソフト、映像をやってる人でも使ったことがないことが多いです。 詳しくは後述しますが、使った方がいいです。 「【Adobeで映像を作る】001 大まかな手順 Prelude編

(手順2)Premiere(プレミア)で編集

素材のカラコレから、カット割り、BGMやSEなどの音付けまで行います。 「【Adobeで映像を作る】002 大まかな手順 Premiere編

(手順3)After Effects(アフターエフェクツ)で上モノ追加

特殊効果的なものや、アニメーション素材など追加を行います。 「【Adobeで映像を作る】003 大まかな手順 After Effects編

(おまけ)Premiereに戻して最終仕上げ ←これ

After Effectsで処理したモノを、もう一度Premiereに読み込んで、 音声の調整などを行います。 これが大きな流れです。 ではさっそく説明してきます。

音声や映像微調整はPremiere

adobeMovie_106_とは言ってもPr

まずは、書き出した動画ファイルを並べる

最終的に書き出したいフォーマットのシーケンスを作成し、そこにAfter Effectsの処理まで終わって書き出した動画ファイルを置きます。 この時、オーディオミキサーorTL上で音量を小さめにしておきましょう。 第3回に書き出した映像の音声は、その後の作業の指標とするだけで、 最終的にはミュートすることになります。

音を並べる

第2回の記事で「ざっくり音調整する」という話をしました。 ざっくり音調整した音声のTLをごっそり全てコピーして、 最終書き出し用のシーケンスに貼り付けます。 具体的には
  • ナレーション
  • 効果音
  • BGM
などを貼り付けることになります。

音声を調整する

ナレーション、効果音、BGMをそれぞれ聞こえやすいようにバランスを整えます。 それぞれの調整方法についてはまた別の記事で書くとして、ポイントだけまとめます。

ナレーションはNR、ローカット

  • ノイズリダクション(ホワイトノイズ除去)
  • ローカット(80Hz以下)
  • 無音の部分はカット

BGMはナレーションの音域を下げる

BGMとナレーションのバランスは音量ではなく音域で調整するのがポイントです。 音量で調整するとBGMが大きくなるか、ナレーションが小さくなるか、ピークがつくかのどれかになります。 要件は下記2点
  • ナレーションが聞き取りやすい
  • BGMが鳴っていることが分かる
なので、それを意識してまとめましょう。

効果音は少し小さめ

効果音は、気持ち小さめに鳴らします。 常に鳴っているBGMに比べ、何発で鳴る効果音はインパクトが強く耳につきます。 なので、音量バランス的にはそんなに大きくする必要はありません。

そのほか、納品に必要なフォーマットに合わせる

テレビ納品の場合はカラーバーやノンモン、クレジットなど、本編映像の前後に様々な情報を入れなければなりません。そういったことを行うのもこの段階です。

これで完成!

最終の書き出しフォーマットで書き出しましょう!

]]>

【Adobeで映像を作る】003 大まかな手順 After Effects編

【Adobeで映像を作る】001 大まかな手順 Prelude編」 「【Adobeで映像を作る】002 大まかな手順 Premiere編」 に続く第3弾です。 編集をしたPremiereからファイルを引き継いで何をするか を話していきます。 今回は長めです。

編集の大きな流れ(Pl→Pr→Ae)

adobeMovie_102_Pl→Pr→Ae 僕が映像の編集業務で使っているソフトは3つ。
  • Adobe Prelude(Pl)
  • Adobe Premiere(Pr)
  • Adobe After Effects(Ae)
もちろん、素材作成の段階ではAdobe Illustrator(Ai)、Adobe Photoshop(Ps)なども使います。
Adobe Creative Cloud コンプリート 2017年版 | 12か月版 | オンラインコード版
アドビシステムズ (2013-10-01) 売り上げランキング: 128
ちなみに、カッコ内のソフトの略称ですが、ブログ内でも多用しますので 覚えといてください。

(手順1)Prelude(プレリュード)で素材の整理

このPreludeというソフト、映像をやってる人でも使ったことがないことが多いです。 詳しくは後述しますが、使った方がいいです。

(手順2)Premiere(プレミア)で編集

素材のカラコレから、カット割り、BGMやSEなどの音付けまで行います。

(手順3)After Effects(アフターエフェクツ)で上モノ追加 ←これ

特殊効果的なものや、アニメーション素材など追加を行います。

(おまけ)Premiereに戻して最終仕上げ

After Effectsで処理したモノを、もう一度Premiereに読み込んで、 音声の調整などを行います。 これが大きな流れです。 ではさっそく説明してきます。 ※今回は、After Effects部分の説明のみ。

Premiereで編集したモノを読み込んで後処理

After Effectsで行うことのキーワードは「後処理」です。 例えば、映像の質感を変えたり、実写映像にアニメーションを合成したりします。 細かいテクニックはまたの機会に話すとして、筆者が業務としてAfter Effectsで行っていることを書いていきます。

 アニメーション

例えば、タイトルロゴで文字が筆順に描かれていくものや、 タイプライター風の現れ方 図版の棒グラフや円グラフなどが伸びたり、円心状に描かれながら現れる場合 その他、様々な実写以外のイラスト素材の動きをつけていきます。

Ai素材にアニメーションをつける

Ai(Adobe Illustrator)で作成したファイルはレイヤーを維持したままAeに読み込めます。 なので、アニメーション付けをする素材は、アニメーションの動きを想定してレイヤー分けを行いながら作成します。 この項目についてはまた別記事にしたいと思います。

飛び道具系のエフェクト追加

キラキラしたり、ぼかしたり、様々なエフェクト処理を必要に応じて行います。 ポイントは、いかにシンプルなエフェクトで最大限の効果を出すか。 マシーンスペックが高くても、メモリなどの使用領域の節約は大切だし、 たくさんエフェクトを使用すると、ファイル自体が重くなるのであまり良くないです。

映像の質感出し(カラグレ)

映像の最終仕上げと言ってもいいと思います。 カラーグレーディングです。 全体的な質感の統一が目的です。 世の中に出ている映像作品はほとんどカラグレされているといっても過言ではないです。 (ドキュメンタリーなどは違いますが。)

エフェクト掛けは調整レイヤで行う

上記のエフェクトは、映像レイヤの上に調整レイヤを作成し、そのレイヤで処理をします。 調整レイヤでエフェクト掛けをする利点がいくつかあります。

エフェクトの吟味ができる

同じ場面(TC)に複数の調整レイヤを配置することで、
  • 使用エフェクトの選択
  • エフェクトの組み合わせの変更
  • より複雑なエフェクト処理
などが簡単に行えます。 筆者がよくやるのは、コントラストや色味の微妙な違いを見比べたり、 エフェクトの重ね技を使う場合です。

組み合わせ変更がラク

例えば、 トーンカーブで赤みを強めた後にコントラストをあげた場合と、 コントラストをあげた後にトーンカーブで赤みを強める場合では 結果が変わります。 調整レイヤを2つ作り、それぞれにトーンカーブとコントラストを設定しておけば レイヤの上下を変更するだけで、簡単に効果の違いを見比べられます。

デメリットもある

この方法の最大のデメリットは、調整レイヤのイン点・アウト点を映像側ときっちり揃えて置かなければいけないという点。 よくあるのが、場面転換と調整レイヤのデュレーションが合っておらず、1フレーム前にエフェクトが切れてしまうこと。 しかし、このデメリットがあっても、様々な使い勝手を考えたら、この方法がいいと思っています。

AMEで書き出しだ!

書き出します。個人的にはAfter Effectsで書き出しするのではなく、Adobe Media Encoder(AME)で書き出します。 メリットは、書き出し中もAeで作業できることです。 そのほか、なんとなく動作も軽い気がします。

必要に応じて、再度Premiereへ

「必要」ってなんだ!と思いますが、 それについては次項で説明しますね。

《おまけ》ダイナミックリンク(DL)か、スタティックリンク(SL)か

前段、PremiereからAfter Effectsに編集した映像を引き継ぐ際にダイナミックリンクを使うのは自然の流れです。 ダイナミックリンクとは違い、書き出した映像を読み込むことをスタティックリンクとここでは呼びます。

DLは修正が多い案件には有用

まさしくその通り。修正がすぐさま反映されるのでダイナミックリンクを最大限に活かせます。 スタティックリンクの場合、修正のたびに書き出し作業が発生するため時間がかかります。

SLは動作が軽い

ダイナミックリンクは、リンク元のプロジェクトファイルが複雑になればなるほど動作が重くなる傾向があり、あまり大きなプロジェクトには向かないです。 もちろん、それらを軽くするいくつかの方法はありますが、面倒くさがりの筆者は何も考えたくないので、SLを多用します。 書き出し時間がムダ、という意見もありますが、 DL時のリンク不具合の方がストレス的には大きい気がしますね。

そもそも「修正が多い」を見直せないのか

DLは修正が多い案件には有用だけど、大きなプロジェクトには不向き ということで、「修正が多い」を見直せないかを考えることが重要です。 というか、これは制作云々というより、仕事の進め方にも大きく作用するし、 効率をあげてデメリットはないので、見直すべきところでもあります。]]>