【Motion Array】ポートフォリオサイトも作れる！？手順を解説！

制作実績をまとめた自分のポートフォリオサイトが欲しいと思っていても「どうやって作ればいいの？」と悩む人が多いのではないでしょうか？

ウェブサイトはHTMLやCSSといったマークアップ言語といわれるもので作られています。本記事は、これらを覚えてサイトを作りましょう！という話ではありません。

現在では、HTMLやCSSの知識がなくても、積み木を組み立てるように直感的にサイトを構築できるようなサービスがあります。

Motion Arrayでは、「テキストを書き換える」「動画や写真をアップロードする」だけで自分だけのウェブサイトを作ることができます。

HTMLやCSSを使いゼロから作り上げる場合と比べて、サイト構築の自由度は低いですが、十分活用できるものが作れます。

参考までに僕がMotion Arrayで作ったポートフォリオサイトを記載します。本記事を読むことで、簡単に自分のサイトを作ることができます。

以下の記事でMotion Arrayの基本情報を解説しているので、まだ契約していない方は合わせてご覧ください。

本記事は、すでにMotion Arrayを契約している方に向けて手順を解説していますので、登録方法などは省略させていだだきます。

step
1Motion Arrayにログインする

画面右上のアカウントアイコンから「Portfolio」をクリックします。

step
2テンプレートを複製する

テンプレートから気に入ったものを探し「Duplicate（複製）」をクリックします。

複製したら画面下の「Custom Themes」という項目にテンプレートが追加されています。「MAKE ACTIVE」になっている場合は、クリックして「ACTIVE」にします。そうすると「Open Editor」という項目が出現し、テンプレートを編集できるようになります。

step
3テンプレートを編集する

制作実績としてサイトに載せたい動画をアップロードしましょう。

動画をアップロードするには以下の画像の「Upload」から行います。「PORTFOLIO VIDEOS」ではアップロードした動画を一覧で見ることができます。

画面左側にある「Settings」で、ポートフォリオサイトに含めるコンテンツやレイアウトの詳細を変更できます。

step
4ポートフォリオサイトを公開する

ポートフォリオサイトに動画やテキストの追加を行ったら、「PREVIEW」で内容を確認してみましょう。問題がなければ「SAVE」→「PUBLISH」でサイトを公開します。

公開したポートフォリオのURLは以下の「PORTFOLIO SETTINGS」で確認できます。

以上、Motion Arrayでポートフォリオサイトを作る手順でした。

Motion Arrayは動画素材やモーショングラフィックスなどのテンプレートをダウンロードできるだけでなく、今回解説したようにポートフォリオサイトも作れます。そのほかにも様々なことができるので、また別の記事でMotion Arrayを最大限活用する方法をご紹介します。