こんにちは、クリエイターのにこです。
転職のときや、個人で仕事を受ける時に「ポートフォリオ」があると便利ですよね。
自分でポートフォリオサイトを作るのはハードルが高いと感じる方も多いと思います。
そんなときにおすすめなのが、Notionです。
Notionでは画像ギャラリーを作ることができるので、簡単なポートフォリオページならNotionで作ることができるんです！
今回は、自身の制作物をまとめた「作品集」としてのポートフォリオをNotionで作っていきます。
例として私のポートフォリオを作ります。
完成URLはこちらです。
ポートフォリオに必要な項目として今回は、
- 自己紹介(プロフィール)
- 作品集
- スキルレベル
- リンク・連絡先
を載せていきたいと思います。
はじめに
まずはこの部分を作っていきましょう！
アイコンとカバー画面を設定する
アイコンとカバー画面で印象が大きく変わります。
自分を表現できる場所でもあるので、こだわりポイントです。
変更の仕方は簡単、タイトルにカーソルをもっていくと「アイコンを追加」と、「カバー画像を追加」というボタンが表示されるので、それらを押して変更します。
カバー画面は表示位置の変更もできるので、自分の好きな表示位置にしましょう。
両方設定することが、自分の世界観とは違うなと思ったら、アイコンなし、カバー画像なしなど、組み合わせてみてもいいですね。わたしはアイコンだけにしました。
こちらは両方表示した場合の見え方です。これはこれでかわいいです。
タイトルをつける
次に、「無題」と書いている部分を押してタイトルを決めましょう。
今回は私の屋号「Nicopi Factory」とします。
これだけでは何のページかわからないのでタイトルの下に補足のテキストを追加します。
内容が分かりやすいように「にこのポートフォリオ」としました。
自己紹介(プロフィール)
タイトルの下にテキストを追加して自己紹介を書いていきましょう！
今回は右にテキスト、左に似顔絵の画像を表示していきます。
まず右と左で、２列にしていきます。
テキスト左の＋ボタンを押します。
この中から２列を探します。かなり下にあります。
２列を押すと、その名の通り２列のブロックが作成されます。
さっそく左に画像、右にテキストを追加していきましょう！
先ほどと同じく、左の＋を押して、その中から「画像」という選択肢を探します。
選択して画像を貼り付けてみましょう。画像の大きさも変えれます。
あとは右にテキストを入れるだけです。テキストは右のブロックをクリックして入力します。
こんな感じになります。
これでひとまずタイトルと自己紹介文が完成しました。
応用編
見出しをつけるのもかわいいですね。
見出しはテキスト左の＋ボタンを押すと選択できます。
見出しを付けるとこんな感じの印象になります。
テキスト（見出し）を選択して色を黄色に変更しています。
制作実績
次に制作実績を作っていきます。
この部分です。
ギャラリービューを選択します。
選択すると簡単にギャラリーが作れました！
ここからギャラリーを作り込んでいきます。
長くなるので詳しくは前回の記事で紹介しています！ぜひご覧ください。
【Notion】ギャラリーにタグをつけて、タブ切り替えをつくろう！
https://clip77.com/blog/notion-tab-gallery/
スキル
＋ボタンから、２列を選択します。そうすると左右２ブロックできます。
今回は２列を２段作って上段に２つ、下段に１つ、合計３つのスキルを記入していきます。
スキルを記載していきます。
わたしはAbodeソフトのスキルを記載することにしました。
まずはPhotoshop。見出しにしたいので見出し３にしています。
その下はリストを使用しています。
＋ボタンから「箇条書きリスト」を選択してください。するとリストが作れます。
これでスキルは書き終わりました。こんな感じになりました。
スキルの上に細い線が入っていることに気づきましたか？これは区切り線です。＋ボタンから選択できます。
区切り線を入れることによって、より見やすくなっています。
リンクと連絡先
最後にリンク集と連絡先を記載していきます。
リンクは3つ、ポートフォリオサイト、Instagram、Xです。
それに加えてメールアドレスを記載します。
まずはこの部分。サイトの埋め込みです。
＋ボタンから「Webブックマーク」を選択してください。
リンクを入力するとサイトの埋め込みができます。
次にSNSリンク、これは文字を選択してリンクを追加を押すだけです。
文字がリンクになってもこのままでは文字だけです。周りを線で囲って目立たせましょう。
コールアウトを使います。
初期はグレーの背景になります。これを変更して線だけにします。
＋の横の6つの点をクリックします。その中のカラーを押して変更しましょう。
今回は、背景色なしにします。
これにさっきの文字を入れたら完成です！
いかがでしたでしょうか？
これでポートフォリオが完成しました。
いろいろな機能を使ったので、ぜひ参考にしてみてください！