これは何？
こういう画像を作るための方法をまとめました。
背景
オープンデータスゴイというオープンデータの可視化ハッカソンを運営しており、その応募作品を一覧としてまとめたかったので、色々ググった末、chrome-extensionとfigmaを使えば結構簡単にできるということがわかった。その方法を備忘録も兼ねてまとめておきます。
まずは画像ファイルを用意する
オープンデータスゴイに寄せられた作品は自分のQiita記事にまとめていたので、chrome-extensionを使ってそこから画像ファイルを抽出しました。
使ったchrome-extensionは「Image Downloader」というもの。
使い方は簡単。
- まずはこちらのまとめ記事を開いて、Image Downloderを起動。
- するとページ内の画像の一覧が表示されるのでダウンロードしたい画像を選択
- 保存するフォルダの名前やファイル名を指定してDownloadをクリック
フォルダ名とファイル名は設定した方が良いです。でないとデフォルトのダウンロードフォルダに全ての画像がファイルサーバー状のファイル名で保存されるのでどれがどれかわからなくなります。
ファイル名を指定すると「指定して文字列」＋「数字2桁」で保存してくれます。
＃ つぎにfigmaでタイル状に敷き詰める
こちらの記事を参考にしています。
まずは貼りたい画像の分だけ四角形を並べます。
上記のように綺麗に６ｘ６=36個なら楽ですが例えば35個並べたい場合は、以下の様に何らかの調整が必要です（一番下の段だけ横５列にしています）。
そしたらMacだと「Cｍｄ＋Shift+K」、Windowsだと多分「Ctrl+Alt+K」を押すとファイルを選ぶ画面になります。ここで入れたい画像を全部選択します。
すると以下の動画のように四角形のボックスを順番にクリックすることで画像を埋め込むことができます。
完成したらフレームを選択して、右のメニュー下部にあるエクスポートボタンから画像に吐き出すことができます。
最後に
最初はパワポでやれるんじゃ...と思ってこちらの動画の内容をやろうとしたのですが、私のMacに入ってるPowerPointには当該メニューがなかったので上記の方法で実現しました。
他にもいいやり方があれば是非教えてください！