【重要】年末年始営業日のお知らせ

  • 12月27日(水) 年内 最終営業
  • 12月28日(木) パーっとする(休業)
  • 12月29日(金) パーっとする(休業)
  • 12月30日(土) ボーッとする(休業)
  • 12月31日(日) 鐘をつく(休業)
  • 1月1日(月) 餅食う(休業)
  • 1月2日(火) 寝る(休業)
  • 1月3日(水) 寝る(休業)
  • 1月4日(木) 営業開始
  • 12月29日〜1月3日まで、パーっとします。 (ふだんから開店休業ってことはツッコまないでください。) なお、その間のメールやお問い合わせにつきましては 営業開始後、随時対応していく形となります。 何卒。]]>

    【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」が表示されていればインストール完了!  

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

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

    iPhone8/X搭載Qiのおすすめ充電器

    Qi(ワイヤレス)充電器購入基準 筆者が考えるQi充電器の購入基準を簡単にまとめました。

    コイルの数が多いor定位置が分かるスタンド型

    Qiは充電器側のコイルの中心に、携帯端末側の受信機が来ると充電できます。 充電器に端末を乗せた際に、コイルからのズレが大きくなると、うまく充電できません。 そのため、複数のコイルが使用されている充電器の方が、 ストライクゾーンが増えるため、充電時の位置決めに煩わしさがありません。

    おしゃれかどうか

    ワイヤレス充電器は、常にどこかに設置したままです。 従来のケーブル充電の場合、ケーブル不使用時はどこかにしまっておくこともありますが、ワイヤレスの場合はあまりしまうこともなく、 インテリアの一部と化します。 なので、オシャレかどうか、というポイントは非常に重要です。 オシャレというのは、人によって様々な感覚ですが、 この充電器の場合は、以下かなと思います。
    • 他のインテリアや部屋の雰囲気との調和性
    • 充電器のデザイン性
    木目がオシャレなものもあります。  

    おしゃれor実用性の天秤

    3コイルをとるのか、シングルコイルでもオシャレなものをとるのかは 個人の判断だと思うので、 今回は両者バランスよく集めてみました。

    おすすめQi充電器

    ということで、おすすめQi充電器をご紹介します!

    3コイル搭載で充電範囲が広い!

    コイルの数 3コイル
    実用性 ★★★★☆
    おしゃれ ★☆☆☆☆
    大きさ 120x70mm
    実用性を重視するモデル。 3コイル搭載でコンパクトにまとめられたベース。 ベースに対して縦横関係なく置けるのも利便性Good

    とにかくおしゃれ!木目調でインテリアにも最適

     
    コイルの数 シングルコイル
    実用性 ★★☆☆☆
    おしゃれ ★★★★☆
    大きさ 直径67mmと95mmの2種展開
    数ある木目調のQiベースの中でも、深みのある木目とセンターに配置されたワイヤレスマークのオシャレさは抜群に良いです。 ただ、すこし分厚いため、端末を乗せた際に安定しないこともあり。 他の木目調は以下の製品 Qi 対応 ワイヤレス 充電 パッド 木目 竹 調 置くだけ 充電 簡単 チャージ ケーブル コネクタ 破損 防止 ◇ISM-WXD-008 (バンブー)Qi ワイヤレス充電器 5V / 9V急速充電 非接触充電 無接点充電パッド 木製環境に優しい材料 Wireless Charger Galaxy S6 / S7 / S6 Edge / S7 Edge,Nexus 4 / 5 / 6 / 7 (マホガニー・カラー)ワイヤレス充電器 無線充電器 丸型 表面に置くだけで充電可能 木製 無線充電対応Qi (カリンの色)

    置き型/スタンド 変形可能でシーンに適応

    コイルの数 シングルコイル
    実用性 ★★★☆☆
    おしゃれ ★★★☆☆
    大きさ 216x138mm
    置き型とスタンド変形可能で、利用シーンを選ばないモデル。 充電時にブルーLEDが光るギミックも近代的でオシャレです。

    牛革の高級感

    コイルの数 シングルコイル
    実用性 ★★★☆☆
    おしゃれ ★★★★☆
    大きさ 216x138mm
    牛革を使用した高級感あふれる見た目で、ラグジュアリーな部屋にはぴったりです。

    薄型シンプルが良い

    コイルの数 シングルコイル
    実用性 ★★★☆☆
    おしゃれ ★★★☆☆
    大きさ
    6mmの超薄型モデルで、余計な飾りもなくシンプルなモデル。 どんな部屋にでも似合うQiベースです。

    オシャレさ実用性を兼ね備えたアルミモデル

    コイルの数 3コイル
    実用性 ★★★★★
    おしゃれ ★★★★☆
    大きさ  150x147mm
    アルミボディのオシャレな見た目に加え、3コイル搭載で縦横どちらの置き方にも対応している、スタンド型の決定版。  

    iPhone8じゃなくてもワイヤレスになる!

    Lightning端子さえあれば、iPhone6、6s、plus、iPhone7でもワイヤレス充電になります。 それがこの製品。   これはLightningの端子対応レシーバーで、超薄型(たぶん1mmくらい)。 iPhoneケースの中に忍ばせるタイプの受信機です。 しかも、かなり厚めのケースでも使えます。 私は革製のケースを使っていましたが、それでもしっかりと充電できました。 他にもケースに内蔵されているものもあります。   ]]>

    iPhone8/X搭載Qi(ワイヤレス)充電で変わること。

    Qi(ワイヤレス)充電で変わること 従来のケーブル充電とQiの置き型充電で何が変わるか、そしていいところ悪いところをご紹介します。

    「充電する」という感覚の排除

    「充電をする」為にケーブルに繋ぐ。 ケーブルに繋いで充電しているから、移動できない。 そんな不便さを感じたことがあると思います。 ケーブルは、カバンの中ではぐちゃぐちゃになるし、 短いケーブルやとっても長いケーブルをシチュエーションによって揃えたり面倒がたくさんあります。 筆者が使う短いケーブルは10cm 主にモバイルバッテリー用です。   長いケーブルは3m ワイヤレス充電の環境を整えると、 「バッテリーが減ってきたから充電する」という感覚ではなく「常に充電器の上に置く」という習慣に変わります。 言い換えれば、「持ち運ぶ時だけ充電されていない」という 今までと逆の発想になります。 実際に筆者がQi生活をしていた時も、そのような状態でした。 iPhoneの充電は基本的にいつもMAXです。 ケーブルのことも考えなくていいし、カバンの中でぐちゃぐちゃに絡まるケーブルにうんざりすることもない。 (それでも辞めた理由は後述)

    どこでも充電できる

    スターバックスやマクドナルドの席にもQiベースが設置され、 図書館や公共施設にも設置されたら? わざわざ充電ケーブルやモバイルバッテリーを持ち歩く必要もない。 休憩ついでに充電。 サービス提供側も、ケーブルの取り回しが雑なユーザによってケーブルが断線したり ケーブル端子の規格を気にする必要がなくなります。

    充電器そのものがインテリアになる

    充電していないときの充電ケーブル(USBやLightning)は、だらしなさすぎますね。 いちいち片付けるのも面倒だし、片付ける為に束ねる行為がケーブル劣化を早めることになる。 そんな状況から、 玄関やリビング、寝室など、自分の行動範囲には常にQi対応の充電器が置かれるように変化していくと思います。 充電器が部屋のインテリアになるのなら、デザイン性にもこだわりたいところ。 Qiにはこんなおしゃれな製品もあります。

    Qiの欠点、置き位置がシビアで充電できてない時も…

    そうなんです。 iPhone8ではここがどう改善されているかどうか分かりませんが、 Qi製品は置き位置がかなりシビアな印象があります。 コイルの真ん中におかないとうまく充電できず、 そのため、少しずれたら充電できない、なんてことも多々ありました。 これ、最初は「真ん中におくことを気をつけてればいいだけ」と思っていても だんだんとストレスになってきます。 ケーブル充電の場合は充電できないなんてことはほとんどなく、 充電したはずができていないというストレスのことすら考えなかったからです。 しかし、Qiはそれがあり得る。 寝ている時に手が当たって少しずれたら充電できなかったり、 テキトーにパッと置いて「ポーン」とiPhoneの充電開始アラートが鳴ったにもかかわらず、 センサーとしては反応してるが、充電できる位置になかった、など いろいろと充電できていないことがありました。 最終的にこのストレスが積もりに積もって、Qi生活を辞めた理由の一つになりました。 しかし、あれから1年。精度が上がっていることに期待して、再チャレンジしようかと思います。

    iPhone8じゃなくてもワイヤレスになる!

    Lightning端子さえあれば、iPhone6、6s、plus、iPhone7でもワイヤレス充電になります。 それがこの製品。   これはLightningの端子対応レシーバーで、超薄型(1mmくらい)。 iPhoneケースの中に忍ばせるタイプの受信機です。 しかも、かなり厚めのケースでも使えます。 私は革製のケースを使っていましたが、それでもしっかりと充電できました。 他に、ケースにQiが内蔵されているものもあります。   ぜひお試しあれ!

    iPhoneがQiを採用したことでもっと普及するかも

    今まで、Qi(ワイヤレス)充電を採用したスマートフォンは数えるほどしかありませんでした。 また、それが故にQiベースを導入するお店も広まらなかった印象です。 ローソンやファミマが実験的に行ってはいたものの、あまり知られていないですね。 今回iPhoneがQiを採用したことで、他のスマートフォンへの採用も Qi充電器の設置場所も、少しずつ広まっていくのではないか、 そうやって普及していけば技術も上がっていき、単価も下がり、 もっと使いやすいようにアップデートが行われていく と期待しています。]]>

    新型iPhone X / 8 何が変わった?

    アップデートをざっくりまとめた iPhone8やXの他、AppleTV 4KやAppleWatchも発表されました。 それらの発売日などをざっくりまとめてみました。

    製品 予約開始 発売・提供 その他
    iPhone8 / 8plus 9月15日 9月22日
    •  iPhone7の後継機的ポジション
    • ワイヤレス充電対応
    iPhoneX(テン) 10月27日 11月3日
    •  ハードに関してはメジャーアップデート機
    • ワイヤレス充電対応
    • 全画面
    • 顔認証
    Apple Watch series3 9月15日 9月22日
    • セルラー対応
    • エルメスモデル
    • Nike+マイナーアップデート
    • Editionマイナーアップデート
    AppleTV 4K  9月15日  9月22日
    •  4K対応
     iOS11  – 9月19日
    •  App Store刷新
    • コントロールセンター刷新
    • 「Files」アプリ提供
    • ドライブモード追加
    • マップの改善
     

    iPhone8/8plusは7/7plusの後継機

    あんまり機械に詳しくない人のために、とっても分かりやすく違いをまとめました。

    色数減った

    (iPhone7)ローズゴールドなどを含む5色 (iPhone8)今のところゴールド、シルバー、スペースグレイのみ。

    充電はやくてバッテリー長持ち、ワイヤレス充電対応

    (iPhone8)30分で最大50%まで充電するそうです。またワイヤレス充電規格Qi(チー)に対応  

    iPhoneXは、7plusの進化系

    つづいてiPhoneXについてまとめます。

    画面が大きい

    (iPhoneX)5.8インチ前面すべてが画面 iPhone7Plusは、5.5インチ画面。それよりも大きいことに加え、前面の全てが画面。 本体のサイズはPlusシリーズよりも小さいものの、画面は大きくなりました。

    画面が高精細

    (iPhoneX)Super Retina HD採用 Retinaディスプレイでもかなり綺麗な印象ですが、それを上回る高精細。 高精細になればなるほど、目が疲れにくいのがメリットです。

    指紋認証ではなく顔認証

    (iPhoneX)3D顔認証という新たな認証方式でロック解除 3Dで認証するため、化粧をしていても認識するそうで、顔の形が変わるレベルで変化しない限りはロック解除できるそうです。これにより、

    plusより少し小さく少し軽い

    7plusと比べ、大きさは一回り小さく、重さも若干軽くなっています。 7との比較では少し大きいため、もともと所有している機種によって感じる印象が変わると思います。 個人的には、もうそろそろスマフォの巨大化が終わってくれればいいのにな、と感じています。

    LTE対応AppleWatch

    まさかのセルラーモデルが出るとは。 AppleWatchがついに単体でも使えるようになりました。 今まではiPhoneとセットじゃないとただの高級時計でしかなかったのですが、 単体でも電波を受信するようになり、通話などができます。

    サイズはSeries2と同じ

    サイズはSeries2と同じのまま、画面全体をアンテナにすることでセルラーモデルを実現しているようです。

    アクセサリ流用可能

    これはうれしい、前世代のアクセサリを流用できるので、買い直しの必要なし。

    バッテリーは1日中もつ

    これは嬉しい。セルラーモデルで気になるのはバッテリーの持ちですが、 アップルの発表では1日使える、とのこと。

    AppleTV 4K

    AppleTVの4K対応に関しては、その事実よりも、提供ソフトのメリットがかなり大きいです。 本体やアクセサリ自体は、4Kモデルとそうでないモデルで実感できるような大差はないと思います。

    4KソフトがHDと同価格で提供

    なんと、4Kの映像ソフトがHDと同価格で提供されるらしい! もちろん4Kテレビがなければメリットはないが、 今までであれば、4KとHDのコンテンツで料金が違うのは常識でした。それを覆したAppleは素晴らしい。

    ゲームも増えていく?

    どうやらゲームなどのコンテンツも増やしていくような流れになってるらしいです。 Nintendoなどのテレビゲームに食ってかかるのでしょう。 数年後にAppleTVでNintendoゲームができるようになってるかも。

    まとめ

    正直、目立ったアップデートはなかったように思います。 iPhoneXに関しても、常識を覆すようなものではなかったです。 個人的には完全にフリーク向けのアップデートまたは新しいもの好きが手にするモデルかな、と。 僕自身は欲しいです(フリークなので) Androidに比べてありえないくらい高額な本体価格がどうにかならないのか…。 ブランド価格と言えばそれまでか。。 お財布とにらめっこしながら、ポチってしまう自分がいそうで怖い。]]>

    ドメインの選び方

    ドメインってなに? このウェブサイトでいうと「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利用者が評価。 評価は投票で決まり、投票するユーザも評価によりランクが別れるため適当な評価ではないところがいい。

    勉強は不可欠

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