iA / Presenter / サポート / ビジュアル / 画像 / 画像 Mac

画像 Mac

画像はストーリーを伝える助けになります。Presenter では、画像の追加はドラッグ&ドロップするだけです。さらに、思いどおりに表示させるための細かな設定も用意されています。

画像を追加する

画像を追加するには、Editor に ドラッグ&ドロップ するか コピー&ペースト してください。Mac 版 Presenter では、ローカル画像だけでなく、インターネット上の画像リンクも追加できます。

Presenter は複数の画像フォーマットに対応しています。

形式 拡張子
PNG .apng, .png
GIF .gif
WebP .webp
JPEG .jpg, .jpeg
TIFF .tif, .tiff
SVG .svg
PDF .pdf

ヒント

ローカル画像を Editor にドラッグすると、その画像は Media Manager(下記参照)にも追加され、iA Presenter がファイルにアクセスできるようになります。

構文

Presenter は画像用の Markdown 構文に対応しており、次のように入力できます。

![](image-name.png)

ただ、もっと簡単なのは Content Blocks Syntax を使う方法です。ドラッグ&ドロップ、またはコピー&ペーストで画像のパスや URL を追加できます。たとえば次のようにします。

/assets/image-name.png

https://source.net/image-name.jpeg

.iapresenter ファイルは、Markdown のプレゼンファイルと、追加した画像をまとめた .zip です。そのため、画像をプレゼンとは別に保管する必要はありません。ただし、URL でリンクした画像は含まれません。リンク先から読み込まれるため、オンラインで公開されたままにしておく必要があります。画像は Inspector の Media Manager タブから管理できます(下記参照)。

ヒント

同じ画像を複数のプレゼンでよく使うなら、custom theme に入れておくと手間を減らせます。

Presenter では画像用に 2 つの仮想フォルダを使います。

  • assets: プレゼンに追加したグラフィック用。例 /assets/image-name.png
  • theme: テーマに同梱された参照グラフィック用。例 /Theme/image.jpg

プレゼン内でグラフィック(画像や動画)を扱うときは asset フォルダを使います。レイアウトテーマ側のグラフィックを差し替えるときは theme フォルダを使います。

Media Manager タブ

右側の Inspector の上部に Media Manager タブがあります。Inspector を閉じている場合は、次の方法で開けます。

  • Menu → View → Show/Hide Inspector
  • ショートカット ⌥⌘I
  • トラックパッドで右端から左へ 2 本指スワイプ

Presenter の Inspector にある Visuals タブ

Media Manager では次のことができます。

  • すべてのグラフィック(画像と動画)の一覧を見る
  • グラフィックを Editor にドラッグ&ドロップする
  • 使っていない画像を削除する
  • グラフィック名を変更する(末尾の拡張子、たとえば .png は消さないでください)
  • YouTube 動画リンクを追加する
  • Unsplash 経由で画像を追加する

ヒント

Unsplash を使えば、無料で高品質な写真をすばやく見つけてスライドに挿入できます。Presenter は元画像にあるキャプションやクレジットも自動で追加します。Unsplash integration の記事や video もご覧ください。

Unsplash 検索の連携機能

画像オプション

Content Blocks Syntax を使っている場合は、metadata を使って画像のいくつかの表示設定を調整できます(この方法は Markdown 構文では使えません)。

Editor で画像ブロックをクリックすると、上部にさまざまなオプションを含むフローティングメニューが表示されます。追加・削除した設定は、たとえば次のように Editor 上に表示されます。

/Theme/image1.jpg

size: contain

x: right

画像の上部に表示されるフローティングメニューから、画像の設定を変更できます。

キーボード操作を続けたい場合は、代わりに画像コマンドを直接入力することもできます。たとえば次のようにします。

  • size: contain
  • x: left
  • y: bottom
  • background: true
  • filter: lighten
  • opacity: 50%

サイズを設定する

画像サイズは Cover か Contain のどちらかに設定できます。

Cover: アスペクト比を保ったまま、利用可能な空間を画像で完全に埋めます。画像の比率がコンテナと合わない場合は、一部が切り取られます。

Contain: アスペクト比を保ちながら、利用可能な空間に収まるよう表示します。画像の比率がコンテナと合わない場合は、上下または左右に余白ができます。

画像における Cover と Contain の違い

配置を選ぶ

選べる配置は次のとおりです。

  • 横方向: Center(初期値)、Left、Right
  • 縦方向: Center(初期値)、Top、Bottom

Presenter では画像は container の中に配置されます。container はスライド全体の場合もあれば、カラムやグリッド内の 1 セルの場合もあります。実際の縦横の位置は、画像と container のアスペクト比によって変わります。

順序

画像の順序は Content(初期値)または Background から選べます。Content の場合、画像はタイトルなどほかの要素と同じ空間を共有します。Background にすると、タイトルやほかの要素がその上に表示されます。画像が明るすぎたり複雑すぎたりして文字が読みにくい場合は、フィルターや不透明度を調整すると改善しやすくなります。

スタイル

画像には Lighten、Darken、Grayscale、Sepia、Blur の各フィルターをかけられ、不透明度も変更できます。画像を background として使い、その上に別の要素を重ねるときに特に便利です。

コンテキストメニューのフィルターオプション

CSS Class

CSS に慣れている場合は、Custom Theme で CSS Class を定義し、画像などの任意の content block に適用できます。

Editor から Custom Theme の CSS Class を呼び出すときは、Class: your css class name という簡単な書式を使ってください。Custom Theme に CSS を追加して円形に表示した画像

ヒント

iA Presenter で画像をレスポンシブに表示する仕組みはかなり複雑です。画像位置を無理に固定するための CSS Class や追加調整は、視聴側のデバイスによって予期しない結果を招くことがあるため、基本的にはおすすめしません。

説明

アクセシビリティ向上のため、各画像にはタイトルと代替テキストを付けるのが望ましい方法です。

キャプションを追加する

キャプションを表示したい場合は、画像と一緒に #### を付けた H4 見出しとして入力します。

キャプションがどこに出るかは、画像とテキストをどの順で置くかによって決まります。どちらの順でも、文字サイズは変わりません。

H4 見出しを先に置く と、下の画像を紹介したり短く説明したりする形になります。逆に 画像を先に置く と、画像そのものが主役になり、その下のキャプションが補足説明になります。

画像

7日間無料トライアル

今すぐダウンロード。
クレジットカードは不要です。

Mac

クレジットカード不要

iPadとiPhone

iPhoneやiPadのカメラでQRコードを読み取り、App StoreでiA Presenterをダウンロードしてください。