地球上のネットワークを3Dで可視化『3D Earth Connections V2』

プレゼンテーションやプロジェクトで地球上のコネクションを視覚的に表現したい時、『3D Earth Connections V2』After Effectsプロジェクトはその強力なツールとなります。

ビジネスプレゼンテーションや教育的なデモンストレーションで、世界中の拠点やポイントを視覚的に結びつけることが求められる場面があります。そんな時、『3D Earth Connections V2(3DアースコネクションズV2)』は画期的なソリューションを提供します。プリレンダされた制約から解放されたこのツールは、地球上を様々なラインで結ぶ3Dアニメーションを自由に編集することを可能にします。ロケーションファインダー機能を使えば、地名を入力して地球儀にピンを設定し、ピン同士をスタイル豊かなラインで結ぶことができます。さらに、Cinema 4Dのレンダリングエンジンを利用してラインを3D化したり、飛行機などの2Dオブジェクトをライン上で動かしたりすることも可能です。地球に沿った直線やドライブルートを描くこともできますし、様々なピンやラベル、地球儀のスタイルも選択できます。181カ国や米国の50州をハイライトする機能もあり、プレゼンテーションやデモンストレーションの可能性を広げます。

ゲームその他の映像作品のオープニング（ミサイルのラインが飛び交うコール・オブ・デューティ モダン・ウォーフェアIIのオープニングのような）やニュース、歴史や地政学、戦争解説系YouTubeなどにも利用可能

ちなみに、これらのエフェクトに固有の名前はついていませんが、類似のアニメーションやトランジションを探す場合「Map LINE ANIMATION」、「Line-Map Animation Effect」、「Map Route Animations」、「Animated Travel Line」などに、After EffectsやPremiere Proなどの単語を追加して検索してみると良いでしょう。

活用の可能性

地球上の任意のポイントを結ぶアニメーションは、プレゼンテーション、歴史番組、戦争解説、ゲームのオープニング、ニュース番組、地理教育コンテンツ、旅行紹介ビデオ、企業のグローバル展開紹介、科学番組（気象、地質学、天文学など）、国際会議やサミットの概要紹介、環境問題や気候変動に関するドキュメンタリー、スポーツイベントの開催地紹介、経済番組（国際取引、市場動向など）、航空・宇宙関連番組、国際関係や外交に関する解説番組など、様々な映像媒体で活用できます。

このアフターエフェクトプロジェクトファイルは、無料のプラグイン『ORB』が必要になります

『3D Earth Connections V2』の詳細はこちら(Videohive)

仕様

・After Effectsの新バージョンでテスト済み
・CC23.3では稀に不具合が発生する可能性あり。問題があれば23.3より前のバージョンで使用を推奨
・技術的な問題があればサポートが利用可能
・グラフィックカードメモリ: 1GB以上必要
・CPUはSSE4.1以降をサポートする必要あり
・対応OS: Windows 7 SP1以上、Mac 10.8.5以上
・Mac OSX MojaveのNVidia GPUは公式サポート外
・Apple M1対応
・VC ORBプラグインの動作確認は、無料プラグイン「Orb」をダウンロードしてテスト可能

『3D Earth Connections V2』の詳細はこちら(Videohive)

様々なラインが選択可能。

シネマ4Dを利用した3Dラインも。

ライン移動のアニメーションの速度調整。

ポイントの指定。地名等を入力します。

ピンの選択。オーソドックスなものからSF、サイバー系、ミリタリー系なども。

ラベルの選択。

地表に沿ったライン（直線と移動ルート）も表現可能。

181カ国、米国の50州をハイライト。

リアル系、ドット、モノトーン、レトロ（アンティーク地球儀）などの様々な3Dアースのスタイル。

飛行機などの2Dオブジェクトなどをラインに沿って移動可能。ミサイルやロケットなど、地政学系解説動画などにも。

【チュートリアル動画】

まとめ

地球上のつながりを3Dで表現する『3D Earth Connections V2』は、あなたのプレゼンテーションやプロジェクトを次のレベルへと引き上げるでしょう。

『3D Earth Connections V2』の詳細はこちら(Videohive)

投稿 地球上の任意の拠点間をラインで結ぶ3Dアニメーションジェネレーターの決定版。『3D Earth Connections V2』 は studioDoghands に最初に表示されました。

チュートリアル動画制作の革新 – 『Explainer Video Toolkit 4』

Explainer Video Toolkit 4は、キャラクターのリギングに関する数ヶ月の研究と、説明ビデオ制作の5年の経験を結集した結果生まれたツールキットです。このツールキットは、フリーランスのプロジェクトで個人的に使用したいと思うツールとして作成されました。そして今、誰でも利用できるようになりました。

ビデオコンテンツの需要が急速に高まる中、その制作は一層の効率化と高品質化が求められています。特に、人物が解説するシーンは、その表現力とリアリティが視聴者の印象に大きく影響します。しかし、その制作は時間と労力を大いに必要とします。そんな中、Explainer Video Toolkit 4は、誰でも簡単に、しかも高品質な人物パートを作成できる画期的なツールキットです。

『Explainer Video Toolkit 4』紹介動画

1. ビデオ制作の課題を解決

ビデオ制作は、アイデアを視覚的に表現するための強力なツールですが、その制作過程は複雑で時間がかかるものです。特に、人物の動きを自然に表現することは、高度な技術と経験を必要とします。しかし、Explainer Video Toolkit 4を使用すれば、これらの課題を簡単に解決できます。YouTubeチュートリアル動画の制作、顔出しNGの配信、Vtuber配信はハードルが高い…そんなあなたにピッタリのツールがここにあります。

2. 初心者でもプロフェッショナルなビデオ制作が可能

Explainer Video Toolkit 4は、初心者でもプロフェッショナルなビデオを制作できるように設計されています。12のビデオチュートリアルが付属しており、インストールからシーンの構成、キャラクターのカスタマイズ、アニメーションの作成まで、一連の流れを丁寧に説明しています。

3. 自分だけのオリジナルキャラクターを作成

顔出しをしたくない、またはできない理由はさまざまです。しかし、それがコンテンツ制作の障壁になる必要はありません。Explainer Video Toolkit 4を使用すれば、自分自身のアバターを作成し、それを使ってビデオを制作することが可能です。これにより、視覚的なコンテンツを提供しながら、プライバシーを保つことができます。

4. あらゆるビデオ制作に対応

Vtuberとして活動することは、技術的なハードルが高いと感じるかもしれません。しかし、Explainer Video Toolkit 4を使用すれば、簡単に自分だけのキャラクターを作成し、それをアニメーション化することができます。これにより、Vtuberとしての活動を始める障壁を大幅に下げることができます。さらに、YouTubeのチュートリアル動画から、企業のプロモーションビデオ、教育用ビデオまで、あらゆるビデオ制作に対応しています。

これらの特徴から、Explainer Video Toolkit 4は、あらゆるビデオ制作における強力なパートナーとなることでしょう。あなたのビデオ制作を効率化し、品質を向上させるために、今すぐここから購入してみてください。

『Explainer Video Toolkit 4』（$39ドル)をENVATO MARKETで今すぐ確認

『Explainer Video Toolkit 4』ツールキットの特徴

1 シンプルさと低システム要件

このテンプレートの最優先事項はシンプルさ、低システム要件、そして柔軟性であり、これらの目標は達成されました。Explainer video toolkit 4は、低スペックのコンピュータでも非常に良好に動作する唯一のテンプレートです。

2 キャラクターのカスタマイズ

キャラクターのカスタマイズは可能な限りシンプルになっています。専用のテクスチャコンポジションに好きなテクスチャをドラッグアンドドロップするだけです。また、自分でテクスチャを作成し、何度でも再利用することも可能です。

3 キャラクターリグの柔軟性

リグの柔軟性は驚くほどで、非常に背が高い、短い、細い、太い、またはどのような誇張したキャラクターでも簡単に作成できます。上級ユーザーにとって、このテンプレートはすべてのキャラクターアニメーションの基盤として機能します。

『Explainer Video Toolkit 4』のメリットトップ10

これらの特徴の多くは、数ヶ月の研究の結果であり、アニメーターが効果的に仕事をするために必要なものです。

1. カスタムEVT4パネルからの要素の読み込み

: このパネルでは、必要な要素だけを読み込むことができます。大きなファイルを読み込んでコンピュータを遅くすることはもうありません。検索バーとHTMLカタログを使って、数百の要素を簡単にナビゲートできます。

2. 高速カスタマイズ

: カスタマイズは今や、特別なものを求めるならテクスチャをドロップしてスライダーを少し動かすだけの問題です。あなたのキャラクターをとても太ったり、とても背が高くしたいですか？問題ありません。数クリック後に、あなたは終わります。すべては一箇所から制御されます。

3. 最小のシステム要件

: 他のツールキットでの経験から、制作者は最小のシステム要件を最優先事項とし、低スペックのコンピュータでも動作するテンプレートを作成する方法を見つけました。6-8GBのRAMで十分です。16GB以上あれば快適に動作します。

4. 再利用可能なキャラクターテクスチャ: キャラクターテクスチャは一度作成すれば何度でも使用できます。同じパラメーターを何度もコピーペーストすることはありません。キャラクターテクスチャは、ビデオゲームと同じように動作します。

5. 高速キャラクターリグ

: キャラクターリグの経験を5年間積んだ後、制作者はこのリグを作りました。これは楽しく使え、非常に柔軟性があり、レイテンシが最小限です。キャラクターの任意の部分をアニメーション化できるので、クライアントが複雑なアニメーションを要求しても、このリグがサポートします。

6. マーカードリブンアニメーションプリセット

: EVT4には便利なアニメーションプリセットが付属しており、オブジェクトやテキストをアニメーション化するのに使用できます。すべてのプリセットには数個のスライダーがあり、アニメーションのパラメーターを制御できます。アニメーションを実行するために必要なことは、レイヤーにマーカーを配置することだけです。

7. 高品質な要素

: テンプレートが多くの要素を持つことは重要ですが、それらは良い品質でなければならず、お客様が結果に満足できるようにしなければなりません。このテンプレートは、モーショングラフィックデザインとフラットイラストの最新のトレンドに追いつくために作られています。

8. EVT4と他のイラストの組み合わせ

: 現在のトレンドに可能な限り近いデザインを作るようにしました。結果？あなたは任意のマーケットプレイスの任意の主要な作者からさらに多くのイラストを取得し、誰もあなたが複数のプロジェクトを組み合わせたことに気づかないでしょう。

9. アフターエフェクトのみ

: このテンプレートは100％アフターエフェクトを使用して作成されたので、異なるソフトウェア間で切り替える必要はありません。これは、要素の制御オプションがより多くなり、ワークフローも加速することを意味します。

10. HTMLカタログ

: HTMLカタログは、クライアント向けのストーリーボードを作成する際や、パッケージの中身を知りたいだけの場合に便利です。パックから最大限に活用できるように、カタログを無料でダウンロードできます。

『Explainer Video Toolkit 4』テクニカルディテール

• 1000以上の要素
• 最も柔軟なキャラクターリグ
• 低レイテンシーキャラクターリグ
• 100% After Effects！すべてがカスタマイズ可能
• 12のビデオチュートリアル（チュートリアルごとの平均時間は約3分）
• 100%ベクターグラフィックス（1080pまたはそれ以上の解像度が可能）
• After Effects CC, CC 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021の互換性をテスト済み

詳細マニュアル（96MB）
https://drive.google.com/file/d/1TqIoVQ2d1Kk91aX7lD-CYP3xEST439iv/view

まとめ

Explainer Video Toolkit 4は、説明ビデオ制作に必要なすべてを提供します。シンプルさ、低システム要件、そして柔軟性を備えたこのツールキットは、あなたのビデオ制作を次のレベルに引き上げるでしょう。

『Explainer Video Toolkit 4』（$39ドル)をENVATO MARKETで今すぐ確認

投稿 人物アニメーションを簡単に。チュートリアル動画制作の革新 – 『Explainer Video Toolkit 4』 は studioDoghands に最初に表示されました。

写真画像からローポリ風の画像を生成するフォトショップ用プラグイン。顔のパーツやアクセサリー、アイテムなど、ディテールを潰したくない場所は予めパスを配置しておくことで、小さなポリゴンが配置されます。パスの形とポリゴンの形は無関係なので、とにかくここは細かくしたい、という場所に適当にパスを引いておく、という感じです。

ゲームや映像作品のポスターや宣伝・企画資料、ローポリキャラクターのコンセプトアート等に。

投稿 フォトショップで手軽にローポリ風画像を生成【Low Poly Generator】 は studioDoghands に最初に表示されました。

簡単に3Dモデルを利用した広告用画像や商品パッケージのデザインモックアップが作れる3Dレンダリングソフト「Adobe Dimension」。
この「Adobe Dimension」で利用可能なリアルな昆虫モデルが20点、素材サイトAdobe Stockから無料で提供されています。
「Adobe Stock 3D昆虫アート」

ロンドン自然史博物館のデジタルコレクションを元に作成されたこの昆虫モデルは触覚や羽、毛の表現など、かなりの高クオリティです。

昆虫モデルの種類

昆虫モデルは下記の種類20点です。
ググってみましたが殆ど和名が出てきません！私も昆虫に詳しくないのでかなり曖昧です。
「20種類の昆虫モデルを作ろう！」という考えで出てくる汎用的なラインナップ（例えばピクサーのバグズ・ライフ的な）では無く、かなり個性的なメンバーなのが面白いです。

Pachyteria equestris（カミキリムシ）

Oodera gracilis（ハチの仲間？）

https://twitter.com/Vannie_Bugg/status/1202635821511323656?s=20

Ornithoptera alexandrae（アレクサンドラトリバネアゲハ）

Haaniella grayii（ナナフシの仲間っぽい）

Euglossa decorata（ユーグロサデコラタ）

Polyzosteria fulgens（多分ゴキブリの一種）

Lucilia caesar（ハエ）

Polygonia c-album（シータテハ）

Hierodula atrocoxata（カマキリ）

Palpares fulvus（トンボ？）

Strachia paradalis（カメムシ？）

Pepsis Terminata1（ベッコウバチ？）

Inachis io（クジャクチョウ）

Heterostylus nabab（ゾウムシっぽい）

Paryphes gloriosus（カメムシっぽい）

Cyclommatinus bicolor（クワガタムシ）

Chrysis chrysoviolacea（スズメバチかジガバチの仲間？）

Deilephila elpenor（ベニスズメ）

Aethria pyroproctis(ヒトリガ科のなにか)

Enicospilus Myricae1（ハチの仲間？）

昆虫モデルを「Adobe Dimension」で使ってみる

使い方は簡単です。

まずはモデルをダウンロードします。

モデルをダウンロードした上で、「Adobe Dimension」を起動、プラス（＋）ボタンから「コンテンツを読み込み」をクリック。

「3Dモデル」をクリックして、ダウンロードしたファイルを選択します。

モデル配置、マテリアルやテクスチャーの設定、カメラ、照明、背景などを適当に決めてレンダリングして完成です。

昆虫のテクスチャを変えてみる

昆虫がリアルなので、さすがに食品のパッケージのモックアップにはそぐわない感じもします。
そんな時はマテリアルをガラス細工にしたり、シルバーアクセサリーなどにしてみるといろいろなクリエイティブに利用がききそうです。

ガラス。レンダリング時間は長いです。

シルバー。

子供も遊べる

新型コロナウイルス感染症の影響で、うちの子供も休園で暇を持て余しています。
動画配信サービスでディズニーやピクサーの映画をよく見ていますが、こういった軽めの3Dソフトを見せてあげると、映像がどのように作られているのか考えるきっかけになるかもしれません。
「Adobe Dimension」はモデリングの工程が無いので、3Dモデルを配置して構図を決め、レンダリングするという概念を感じるのにうってつけだと思います。

ライセンスについて

ライセンスは利用前に確認してください。
ライセンスについて
現在は全て「強化ライセンス」となっています。

広告画像や放送番組での利用が可能です。
ただし「販売や配布を目的として商品でアセットを大々的に使用することはできません」と記載があるので、Unity等で作成したゲーム内のキャラクターやアイテムとして使うのは注意が必要です。
※例えば子供向け図鑑アプリ等で利用、しかしバナー広告がある、等の状況で議論はあるのですが、弊社はこういった場合（ゲームやアプリ）は利用不可と考えています。

投稿 Adobe Dimension用のリアルな昆虫モデル20点が無料！ジオラマ感覚で子供も遊べます。 は studioDoghands に最初に表示されました。

AdobeXDから、マインドマップや付箋、カスタマージャーニーマップなど多くのテンプレートやエレメントを備えたリアルタイム共同編集機能プラグインがリリースされました。
新型コロナウィルス感染症(COVID-19)にて在宅勤務を強いられたAdobeデザインチーム（International Designチーム）が会議やディスカッションを円滑に行うために開発したとのことです。

AdobeXD「Whiteboard」プラグインのインストール

XDを起動し、プラグインから「Whiteboard」を検索してクリックします。

ポップアップが表示されるので、「インストール」をクリックします。

AdobeXD「Whiteboard」プラグインを使ってみる

左サイドバーのプラグインアイコンをクリックして「Whiteboard」をクリックします。

「Whiteboard」が起動し、サイドバーに「テンプレート」「オブジェクト」「スケッチ」が表示されます。

ファイルは適当な名前をつけてクラウドドキュメントとして保存します。

ドキュメントを共有して作業する場合はチームメンバーのIDかメールアドレスを入力して「共同編集を有効にする」をクリックします。

豊富なテンプレートが揃っています。
オンライン作図ツール「CACOO」のようなイメージです。

ブレーンストーミング、デバイスモックアップ用のワイヤーフレームスケッチ、マインドマップ含めたフローチャート図などが用意されています。

ポストイットや感情アイコン、ノートブック、フローチャートのコネクターやボックスなどのオブジェクトが使えます。もちろんライブラリからオリジナルのオブジェクトを持ってくることも可能です。

マウスやペンタブ、iPadのSidecar等を利用してスケッチや注釈を書き込むことができます。
スケッチタブを押し、アートボードを選択します。

「書き始めて下さい」をクリックすると指定したアートボードがポップアップします。

書き込んだ先はベジェ曲線に変換される様子です。

リアルタイムで利用する場合はZoomやTeams、Slack等のコミュニケーションツールの補助としても活躍すると思います。

投稿 AdobeXD:テレワーク同士のホワイトボードプラグインリリース-一人でも便利！ は studioDoghands に最初に表示されました。

モックアップやプロトタイピング制作に使える、AIを利用した顔写真ジェネレーターです。
制作物に利用する場合、個人はリンクバック、商用の場合はAPI利用料またはバルクダウンロード料金を支払う必要があります。
商用ライセンスについては「FAQ」「terms-and-conditions」を参照してください。

商用の利用イメージとしては、チャットボット、広告、ゲームなどがあります。

関連記事
Adobe XD:モックアップ作成時に秒速で顔写真を用意しよう！

【Generated photos】で顔写真を生成してみる

https://generated.photos/facesにアクセスします。

顔のタイプ（ナチュラル〜綺麗）、性別、年齢層、人種、目の色、髪の色、髪の長さ、感情などをチェックし、「Apply」をクリックすると生成された画像が表示されます。

個人利用の場合は「Download for free personal use」からダウンロード。利用箇所にはリンクバックを反映する必要があります。

広告等、商用利用の場合は必要に応じたライセンス、料金を確認します。

一覧では、背景色や表示の順序を変更することも可能です。

現状、リアルタイムで顔写真を生成しているのでは無く、事前にAIで作成した画像を表示するタイプです。
細かく要素が選択できるのでバナー広告素材に向いていると思います。
モックアップやプロトタイプ作成でとにかく顔写真を並べたい（SNSやマッチング系のメインビジュアル等）場合は以前紹介した「thispersondoesnotexist」も使いやすいでしょう。

関連記事
Adobe XD:モックアップ作成時に秒速で顔写真を用意しよう！

ライセンスについては、商用の場合も当然ながら人物詐称やドキュメンタリーには利用できません。

私達は、AIで作成された製品が悪用される可能性があるという懸念があることは理解しています。
生成された画像を、ドキュメンタリー写真やビデオに提供することはありません。
ニュース映像、家族写真、犯罪現場からの写真、または他の保護された使用例は厳密に文書化されなければならないと信じています。
ジェネレーションメディアは、ドキュメンタリーメディアとは独立したものでなければなりません。
現在、複数の企業が真正性を証明する技術を構築していることを見て、私たちは励まされています。
公式FAQより意訳

投稿 人種・性別・年齢層の設定が可能。プロトタイピングに最適な顔写真ジェネレーター【Generated photos】 は studioDoghands に最初に表示されました。

在宅ワークでは、少し雑音があった方が集中できる人も多いと思います。
私もラジオや音楽だとどうしてもそちらに意識が行ってしまいがちで、無音か、自然環境やアンビエント系の音を流す方が仕事がはかどります。

I Miss The Officeはドイツとスイスにオフィスを持つデザイン会社「thekids」制作のユニークなアンビエント/環境音楽サイトです。

I Miss The Office

左下の再生ボタンでオフィスの雑音が流れます。

人数調整してみる

同僚の数は右下のボタンから1人から10人まで調節可能です。
グラフィックも人数に合わせて変化します。

2人。話し声もあまりしません。

10人。ガヤガヤとうるさいです。

いろいろクリックしてみる

人物やオフィス機器をクリックすると音が再生されます。

キーボード。かなり強めの打鍵でガチャガチャと作業している様子です。

コピー機。

ウォーターサーバー。

人物。とても不快な音をたててガムを噛みます（笑）

普段利用しているのとは別のブラウザで立ち上げておいて、たまにオフィス機器をクリック、のような感じで使えそうです。

投稿 人数調節も可能！オフィスの喧騒をあえて在宅ワークに持ち込むユニークな環境音楽サイト【I Miss The Office】 は studioDoghands に最初に表示されました。

スモールビジネスの事務処理に欠かせない、請求書や見積もりが簡単に作成できるサービスのひとつ「Misoca」。
このMisocaの検索機能に「取引先」フィルターが追加されました。

Misocaで取引先毎の文書一覧を表示

使い方は簡単です。見積書、納品書、請求書の一覧ページの検索フィールドから「詳細検索」をクリック。
「取引先」プルダウンから取引先を選択、検索ボタンをクリックして完了です。

そのままCSVデータの保存も可能です。
主要取引先毎のデータ管理がしやすくなりました。

Misocaの取引先ページから任意の文書一覧を表示

特定の取引先ページからも文書一覧が確認可能です。
取引先ページの右側「文書の表示」プルダウンから「見積書、納品書、請求書」の何れかを選択します。

投稿 請求書作成サービスMisocaで取引先毎の文書一覧を表示する は studioDoghands に最初に表示されました。

Adobe XDでページ内リンク(アンカーリンク)を設定してみます。
以前から要望の多かった機能のひとつで、2020年3月アップデートで実装されました。

アンカーリンクは主に縦長のサイトで、特定の位置にユーザーを導くためのリンクのひとつで、シングルページLPでよく見かけます。
殆どの場合、スムーススクロール（するすると上下に動くスクロール）効果と共に使われます。

Adobe XDでページ内リンクを設定

「デザインモード」の「レイヤー」タブで作業を行います。

適当に縦長のサンプルを作ります。

「予約する」ボタンから

同じページの「予約フォーム」までリンクしてみます。

Adobe XDでページ内リンクを設定

モードを「デザイン」から「プロトタイプ」に切り替えます。
「予約する」ボタンを選択すると青い矢印のハンドルが表示されます。XDではこのハンドルをドラッグして表示されるワイヤーで画面遷移の指定を行います。

ハンドルをドラッグしてワイヤーを引き出します。

そのまま下の「予約フォーム」に接続します。

これでページ内リンクが貼られました。

右上の「デスクトッププレビュー」ボタンを押して確認してみます。

「予約する」ボタンを押すと

「予約フォーム」までスクロールされます。

ページ内リンクの設定項目

ページ内スクロールにはいくつか設定可能な項目があります。

ワイヤーを選択した状態で右側の「プロパティインスペクター」を確認してみます。

トリガーの設定

「タップ」「キーとゲームパッド」「音声」が選択可能です。
通常は「タップ」のままで良いでしょう。

Y-オフセットの設定

固定ヘッダーにリンク先のテキストが隠れてしまう場合に利用します。
例えば-70とすると、リンク先テキストの70px上部でスクロールが停止します。

アニメーション設定

イージングと速度が設定できます。
「イーズアウト」がだんだん早く、「イーズイン」がだんだん遅く、です。

Adobe XDでページ内リンクを設定まとめ

LPサイトやカテゴリーの多いアーカイブページのモックアップ制作に便利な機能です。
操作は簡単なので、ぜひ使ってみましょう。

関連記事
Adobe XDの新機能『CSS書き出し』を使ってみよう

投稿 Adobe XDでページ内リンクを設定してみよう は studioDoghands に最初に表示されました。

この記事は「Slackどころかメールでのやり取りもままならない」くらいの、あまりITツールを活用していないビジネス環境が対象です。

新型コロナウイルスの影響で、一時的な「在宅ワーク」「リモートワーク」を取り入れる企業のニュースがちらほら流れています。
弊社のビジネスはほぼ在宅で完結（お客様のエリアが国内、海外含め限定されていないので、そもそも訪問ミーティングも無い状況）する状態が10年以上続いています。

当然様々なITツールやクラウドサービスの恩恵にあずかることで初めて維持できる体制です。
これらのツールやサービスはビジネスを「楽に」「正確に」「早く」行うために役立つものがほとんどですが、企業やチームによっては、慣れないツールは利用をためらうことも多いでしょう。
また、せっかくのツールも最低限の使い方を把握していなければ、仕事の面倒事がひとつ増えるだけになってしまいます。

今回は、ビジネスチャットソフトの定番「Slack」を使う際に、弊社がお客様に説明していることをまとめました。

弊社が社外とSlackを利用する際の前提

弊社は、Slackをプロジェクト（システムやウェブサイト、ゲーム制作などの、長短問わず単発的なプロジェクト）単位で利用しています。
ネット上には新しく「Slackのマナー」等が生まれていますが、上記の目的に合致しないものは無視しています。（大切なことはメールで、等）
私が重視しているのは「その情報が必要な人以外には@（メッセージの相手を指名するマーク）を付けない」です。

通知は可能な限り最低限

プロジェクトの失敗や遅延の原因のひとつに「誰かがやっていると思っていた」があります。
メールのCCで複数の相手に指示を出している場合によく発生します。
Slackではスレッドに属している時点でメッセージのやり取りを追うことはできます。
なのに、なんでもかんでも複数に@を付けてしまっては責任の所在も曖昧になり、通知も頻繁になり、いつしかメッセージを無視するメンバーも出てきます。

「必要なことを、必要な相手だけに送信する」

ことが、弊社がSlackを利用する上で最も重視している、ほぼ唯一のルールです。

これの最極端な例を上げると
・固有のプロジェクトのスレッドで偉い人が文脈に関係無く「会社のビジョン」や「決意」を全員に送信
などが有ります。企業によっては社員の団結やチーム力を増加させるコミュニケーションツールとしてこのような使い方もあるのかもしれませんが、弊社では行いません。

それでは、弊社がSlackをはじめて使う企業様に説明している資料を下記に記載します。

資料ここから

Slackを使う理由とその基本設定

目次
Slackの概要と利点
Slackの基本設定
Slack運用のルール

Slackの概要と利点

概要

「プロジェクトを楽に進める」為にSlackを利用します。メールを利用して進める場合に比べ、大幅に無駄を省けます。

Slackは主にIT系のプロジェクトで利用されるビジネスチャットツールです。
Slack公式サイト
メールや他のチャットツールに比べて下記の利点があります。

・メールのようにCCが飛び交い、状況がわからなくなる事が少ない
・メッセージの相手を明示的に指定するので、無駄な通知を受け取らなくて良い
・同時に、メールでの複数TOやCCのように「他の人が確認したと思っていた」という事が起こらない
・タスクや共有事項を「ピン留め」しておけるので、コミュニケーションのループが起きづらい
・直接メッセージを受け取っていなくても、メンバーであれば時系列で状況は簡単に確認可能

プロジェクトでメールを使うと起こる不具合の例

情報として意味のないCCが多く発生
関係者全員にCCや複数TOで進行すると、担当者以外にも常にメールが届きます。
その内容は「承知致しました」や「少し画像を上に移動できますか？」のような物が大半で、何時しかメンバーの大半が該当プロジェクトのCCメールを気にしなくなります。
そして、ある時点でプロジェクトの進行の確認に迫られた場合、過去のメールの確認や、関係者に再度状況を確認する等、多くの時間的なコストが発生します。
Slackを利用すると、メンバーは何時でもやり取りを確認できる状況を保持しつつ、通知はコントロール可能です。例えば、自分宛の直接のメッセージ以外は通知を表示しない、等です。

曖昧な宛先
複数TOで良くある、一つのメール内で複数の相手に連絡するパターンも情報伝達ロスが発生します。
文頭に「○○さん　スライドはインタビュー写真を使ってください」文末付近に「△△さん、上記スライドを準備して○○さんに渡しておいてください」のようなメールです。
この場合、△△さんは自分宛ての指示を見逃す場合も有り、送信者もそのことを知る事ができません。
その内、お互いが相手の作業完了を待っていた、という事が起こります。
Slackでは常にメッセージの相手を限定し、曖昧さを排除します。メッセージの相手を限定しても、プロジェクトメンバーはメッセージを閲覧できるので、状況がわからなくなることはありません。

タスクの責任者が曖昧に
複数TOで「確認」をお願いしても、そのうちの一人に対してなのか、全員の確認を持って次のステップに行くのか曖昧になります。特に「確認」の作業に関しては、人数が多くなるほど精度が落ちる場合もあります。

トリプルチェックの弊害 #現場猫 pic.twitter.com/jVkujwrphV

— からあげの るつぼ (@karaage_rutsubo) August 2, 2019

過去の情報の再共有が面倒
メールでは「ここはどう決定してましたでしょうか？」のようなループが数多く発生します。
このような場合に、過去のメールを検索し「○月○日、○○のタイトルで送信した内容の通り・・・」のようなメールを作成するのは大変です。
Slackでは、後で参照しそうな決定事項やデータはすぐに確認できる場所に固定しておく事が可能です。

Slackの基本設定

Slackはブラウザ、デスクトップアプリ、モバイルアプリが存在します。
基本的にブラウザで問題ありませんが、プロジェクト担当者はデスクトップアプリやモバイルアプリが便利です。

Slackアカウントにログイン後、左上の自分の名前をクリックして「環境設定」をクリックします。
ブラウザ、デスクトップアプリ、モバイルアプリで多少の操作方法の違いはあります。

通知設定を行い、無用な通知を避ける

SlackはメールやLINE、Facebookメッセンジャーと同様、やり取りが発生するとバッジやサウンドなどの通知が発生します。
しかし、直接の担当者以外のスタッフにとっては、頻繁に通知を受けることは煩わしいです。

そこで、通知設定の変更を行います。
画面はデスクトップアプリの場合です。

環境設定から通知を選択し、「ダイレクトメッセージ&メンション&キーワード」を選択します。
これで、「自分宛て」のメッセージ以外で通知が行われることはなくなります。

見た目（テーマ）を変える

環境設定のテーマから設定できます。
<>

Slack運用のルール

メッセージの相手を明示する

メッセージの相手を明示するには＠を付けます。

逆に、@が付いていないメッセージは覚書や進捗メモのようなものなので、メンバーが反応する必要はありません。

通知設定とメッセージの相手の明示ルールにより、いわゆるグループチャット（誰かが発言すると全員が反応し、そのうち重要度やタスクが曖昧になる）のような状態を避けます。

重要なデータはピン留め

後から何度も参照しそうなメッセージは「ピン留め」することが可能です。
例えばプロジェクトの共有Google Driveやワードプレスのアカウント、タスクリスト等です。
この「ピン留め」により「共有フォルダを教えて下さい」「今お願いされている作業は何でしたでしょうか」のようなメッセージの繰り返しを避けます。

インフォメーションボタンをクリックすることで、ピン留めアイテムが確認できます。

資料ここまで

まとめ

如何でしたでしょうか？
バリバリと開発しているチーム内でのルールはまた異なる部分もあると思います。
しかし、ITリテラシーが異なる企業やチーム間での利用の場合は、上記のように大切なルールをひとつまたは少数設定し、それを強く守る、というのがプロジェクトの遅延を防ぐ助けになるかもしれません。
また、資料中ではSlackのメリットのひとつに情報の蓄積も上げていますが、これに関してはメールやメッセンジャーよりはまし、という程度で、ナレッジベースとしては他のシステムが適しているかもしれません。

投稿 在宅ワークの参考に。初めてSlackを使う企業に弊社が説明していること。 は studioDoghands に最初に表示されました。

先日紹介したダミー画像ジェネレーターサービス『Placeholder.com』のアドレスを生成、クリップボードにコピーするAlfredワークフローを紹介します。

関連記事:ダミー画像を秒速で生成！便利なジェネレーターサービスのご紹介。

Alfredワークフロー『Placeholder Images』を使ってみる

ワークフローのインストール

ワークフローはhttps://www.packal.org/workflow/placeholder-images-0からダウンロードします。

ダウンロードしたplaceholder_images.alfredworkflowをダブルクリックするとAlfred設定画面が起動するので、そのまま「Import」をクリックします。

『Placeholder Images』の使い方

Alfredを立ち上げ、サーチウィンドウに「phi」(Placeholder Imagesの略)キーワードを入力、続けてサイズやフォーマットを指定します。

リターンキーを押すと、指定の画像へのリンクがクリップボードにコピーされます。

リンク先のイメージ。ダウンロードしてモックアップ用に利用できます。

入力例

「phi 20,50,jpg,Hello」
結果:20x50px、JPG、Helloテキスト画像へのリンク

「phi 500」
結果:500x500pxのjpg画像へのリンク

「phi 500,800」
結果:500x800pxのjpg画像へのリンク

「phi 500,png」
500x500pxのpng画像へのリンク

「phi 500,png,Just a small test」
500x500px、PNG、「Just a small test」のテキスト画像へのリンク

『Placeholder.com』のアドレスで生成する場合、テキストの空白は「+」で表現する必要があるので、文字を頻繁に使う場合はAlfredワークフローを利用する方が楽ですね。

少し改造してみる

生成されるのはあくまで「画像へのリンク」なので、コーディング中に利用する場合は「img」タグが必要になります。
[code]https://via.placeholder.com/600×300.png[/code]
ではなく、
[code]<img src="https://via.placeholder.com/600×600.jpg?text=300.png">[/code]
としないと画像は表示されませんね。

コーディング中にペーストする頻度が高い場合は、最初から「img」タグを追加した上でクリップボードにコピーされるようにしてみましょう。

Alfredの設定画面を起動し、Workflow『Placeholder Images』をクリックすると、ワークフロー設定画面が開きます。
その中の「Copy to Clipboard」をクリックしましょう。

デフォルトでは{query}に画像リンクが反映され、クリップボードににコピーされます。

この{query}を<img src=”{query}”>と書き換えます。

使ってみます。

コードにペーストすると、imgタグ付きで反映されています。

投稿 Alfredでダミー画像を秒で生成！『Placeholder Images』ワークフロー は studioDoghands に最初に表示されました。

ウェブやアプリのモックアップやワイヤーフレーム制作に付き物の「ダミー画像」。
Adobe XDやIllustratorなどでカンプを作成する場合はまだ良いのですが、最近はいきなりコーディングしながらホームページのイメージを共有して進めるプロジェクトも多くなりました。
※Bootstrap等のCSSフレームワークの利用が前提、等

そんなときに特定のサイズのダミー画像を準備するのはとても面倒です。
良く使うサイズの画像を予め用意しておくことも対策にはなりますが、細かいサイズ調整には対応しきれません。
そんなときに便利なダミー画像生成サービスをご紹介します。

ダミー画像ジェネレーター『Placeholder.com』

Placeholder.comは無料で使えるダミー画像ジェネレーターサービスです。
下記の要素が調整可能です。

• サイズ
• フォーマット（WebPもサポート）
• 画像内テキスト
• 背景とテキストカラー

ダミー画像を生成してみよう

『Placeholder.com』の使い方は簡単です。
https://via.placeholder.com/の後に続けて生成したい画像の値を記入すると、リンク先に画像が作成されます。
例えば、300pxの正方形画像の場合は「https://via.placeholder.com/300」となります。

これをサイトに埋め込む場合は、通常のHTMLと同様
[code]<img https://via.placeholder.com/300>[/code]
となります。

下は生成された画像です。

サイズの指定

正方形以外のサイズも指定してみましょう。
下記は「600×200」のサイズ指定です。
[code]<img https://via.placeholder.com/600×200>[/code]

下は生成された画像です。

フォーマットの指定

画像フォーマットはGIF.JPG.JPEG.PNG.WebP（ウェッピー-Googleが開発した新しい軽量フォーマットです）が指定できます。
※デフォルトはGIFフォーマットと公式サイトに記述がありますが、現在PNGフォーマットがデフォルトの様子です。
ドット付きの画像フォーマットを、各オプションの最後に追加します。
例えば
[code]<img src="https://via.placeholder.com/600×200.png">[/code]
のような形です。

テキストの指定

テキストは英数字のみ利用可能です。
「?text=」に続けて画像に反映したいテキストを記入します。スペースは「+」です。
下記のように利用します。
[code]<img src="https://via.placeholder.com/728×90.png?text=AD+728×90">[/code]
生成された画像。

色の指定

背景とテキストのカラーを変更してみましょう。
色指定はいくつかのルールがあります。
・ウェブではおなじみのHEXカラーコード（16進数カラーコード。白ならFFFFFF）を利用。
・必ずサイズ指定の後に記載。(「直後」で無くてもOKなので、間にフォーマット指定が入っても可)
・最初が背景、次がテキストカラー。

下のように指定します。
[code]<img src="https://via.placeholder.com/728×90.png/FFFF00/000000?text=AD+728×90">[/code]

辞書登録してもっと楽にダミー画像を生成してみる

これだけでもダミー画像に関する手間はかなり低減されます。
しかし、毎回アドレスを入力するのは面倒なので、辞書に登録してしまいましょう。
私が利用している「Google日本語入力」では下記のような感じですが、皆さんの環境に合わせて登録してください。

例として、
[code]<img src=&quot;https://via.placeholder.com/◆◆.png">[/code]
を「だみーがぞう」として辞書に登録してみます。

コーディング中に「だみーがぞう」入力で上記コードが挿入されるので、◆◆にサイズを入力して完了です。

よく使うサイズが決まっている場合はサイズ指定済のアドレスを辞書に登録しても良いでしょう。

Dashに登録してみる

DashやAlfredのようなスニペット管理ツールを利用している場合は登録してみましょう。

関連記事:高速なドキュメント参照ツール『Dash』の検索対象を絞ってみよう！

下記はDashにプレースホルダー込で登録する例です。
「;phc;(placeholder.comの略)」で登録してみました。

コーディング中に「;phc;」入力でサイズ記入ポップアップが表示されるので、サイズ（600×200等）を記入してエンターでコード内にスニペットが挿入されます。

頻繁に使うのでスニペットが覚えられる→Dash
たまーに使うのでスニペットが曖昧になる→辞書ツール
のような感じで使い分けると良いかもしれません。

投稿 ダミー画像を秒速で生成！便利なジェネレーターサービスのご紹介。 は studioDoghands に最初に表示されました。