今回、もともと運営していたWordPressのポートフォリオサイトの中に、Design作品ページを追加しました。
その中で悩んだのが、「制作物をどう見せるか」ということです。
FigmaのURLをそのまま共有する方法もありますが、今回は一覧として見やすく整理したかったため、PDF形式で制作実績をまとめてみました。
まだ勉強中ではありますが、実際に作業する中で、
- ・横幅を揃える
- ・余白を統一する
- ・情報を整理する
だけでも、かなり見やすさが変わることを実感しました。
今回は、FigmaでPDFを作り、WordPressのポートフォリオに掲載するまでに意識したことを、初心者目線でまとめてみます。
Contents
今回の流れ
今回私は、
- 1．Figmaで作品画像と説明文をまとめたフレームを作成
- 2．5作品分のフレームを、1つのページ内に上から順番に配置
- 3．そのページ全体をPDFとして書き出し
- 4．WordPressのメディアにアップロード
- 5．Designページに掲載
という流れで制作実績ページを作りました。
今回は、作品画像だけでなく、
- ・簡単な説明
- ・制作時に意識したこと
- ・工夫した点
などもフレーム内に一緒にまとめています。
また、Figmaの共有リンクをそのまま送るのではなくPDF化することで、
「Figmaを開かなくても一覧で見やすい」
という点も便利でした。
WordPressでは、書き出したPDFをメディアにアップロードし、Designページから見られるようにしています。
FigmaでPDFを書き出す方法
PDFの書き出しは、Figma左上のメニューから行いました。
今回は、5作品分のフレームを1つのページ内に縦並びで配置し、そのページ全体をPDFとして書き出しています。
書き出し手順は、
- 1．PDF化したいページ（またはフレーム）を選択
- 2．Figma左上の「File」をクリック
- 3．「Export frames to PDF」を選択
という流れでした。
書き出したPDFは、WordPressの「メディア」にアップロードし、Designページから閲覧できるようにしています。
1. フレームサイズを揃える
今回まず意識したのは、「一番外側のフレームサイズ」を揃えることでした。
最初は作品ごとに大きさが少しバラバラになっていたのですが、PDFとして並べて見た時に、画面がガタガタ動いて見えてしまったため、なるべく同じサイズで統一するようにしました。
細かい設計まではまだできていませんが、
- ・横幅を揃える
- ・中央寄せにする
だけでも、かなり見やすくなったと感じています。
2. 余白をある程度統一する
今回は、上下の余白を40px程度で揃えることを意識しました。
最初は作品ごとに配置がバラバラになっていたのですが、余白をある程度統一するだけでも、ページ全体にまとまりが出ました。
また、
- ・画像
- ・タイトル
- ・説明文
を中央寄せにして配置したことで、自分の中でも整理しやすくなりました。
まだ細かい部分までは調整しきれていませんが、「見やすく揃える」という意識を持つだけでも大切なんだなと感じました。
3. 作品だけでなく、簡単な説明も入れる
今回は作品画像だけを並べるのではなく、簡単な説明文も一緒に掲載しました。
たとえば、
- ・どんな作品か
- ・制作時に意識したこと
- ・難しかった部分
などを少し添えるだけでも、「どう考えて作ったか」が伝わりやすくなる気がしています。
まだ本格的なケーススタディほど詳しくは書けていませんが、今後は、
- ・配色理由
- ・ファーストビューの工夫
- ・ターゲット設定
なども、少しずつ整理して載せられるようになりたいと思っています。
補足：PDF形式にした理由
もちろん、Figmaの共有リンクには、
- ・レイヤー構成
- ・Auto Layout
- ・コンポーネント設計
など、制作過程まで見てもらえる良さもあると思います。
一方で今回は、
「まずは作品を見やすく整理して一覧で見てもらうこと」
を優先して、PDF形式でまとめる方法を選びました。
見る人が迷わず内容を追えるようにすることも、デザインの大切な要素のひとつなのかもしれない、と今回の作業を通して感じています。
【まとめ】
今回、WordPressの既存ポートフォリオの中にDesignページを追加する中で、「作品をどう見せるか」をかなり試行錯誤しました。
まだ細かい部分まで作り込めているわけではありませんが、
- ・サイズを揃える
- ・余白を揃える
- ・情報を整理する
といった基本的な部分だけでも、見やすさがかなり変わることを実感しました。
今後も少しずつ改善しながら、「見る人に伝わりやすい見せ方」を意識して制作していきたいと思います。
