
Notionで❕デザイナーの受注が増えるポートフォリオの作り方📖🫰
こんにちは、フルリモ大学生の りおんせです💐
(仕事も学校もフルリモート→フルリモ💻)
りおんせ(21)
UIUXデザインの専門学校を修了し、
現在はバリ島でさらにスキルを磨きながら
日本からデザインの仕事をオンラインで受けています🌴

おみくじが引けたり引けなかったりするようになりました
私は最近、バリ島でのプロジェクト参加に向けて、
チームメンバーと統一してNotionベースのポートフォリオを制作しました。
以前はFolioを使用していましたが、
今回の制作過程で得られた気づきや、実践的なポートフォリオ作成のコツをお伝えします❕
見た方が納得のいくポートフォリオを作れますように!ぜひ参考にしてくださいね~👍
↑参加しているバリ島プロジェクトの
ちょっと詳しい内容
ポートフォリオ制作プロセス
リサーチ
構造設計
独自性の追加
notionに実装
調べる~完成までの流れは他のクリエイティブ業務と変わらず、
リサーチからのスタートです。
👇こんなものができました!






リサーチ
noteとXで「ポートフォリオ」と調べて、印象的だったものを片っ端から見ました。
特に注目した要素
・実績の見せ方の工夫
・自己紹介の構成
・視覚的な情報の整理方法
・閲覧者の導線設計
ここでは、特に参考になったものだけピックアップ
&図々しい私のコメントを紹介します。
→最新の実績を「リリースノート」に載せていくのいいな
→制作する上でのモットーを載せているのがいい。
→個人的に業務を進めるにあたって気をつけていることを書こう
→ただ、行間が詰まっていて目が滑る。
→めちゃくちゃ見やすい。びっくり。載せている作品数は少ないが、バックグラウンドを言語化してくれているので信頼感が高い。
私のフリーランスお問い合わせフォーム、特に宣伝せずとも月2〜3件は案件依頼がくるのは、私がWebディレクターで外注先を探していた時に欲しかった情報を記載していたからだと思っている。
— こばやす🍟現場のデザイナー (@kobayas_s) June 24, 2024
❶やりたい仕事の内容
❷出来ないこと、受け付けていない案件内容
❸現在のリソース状況
これを毎月更新→
→こちらのツイートも参考にしていきます。
構造設計
さまざまなポートフォリオを見ていくと、だいたいこういう構成なんだなとわかりました。
・何者か?(自己紹介)
・実績の提示
・問い合わせ先
この基本構成に付属されるかたちで、
リリースノート、代表作のピックアップ、などの独自性を追加して工夫が行われていることが分かりました。
独自性の追加
基本構造を押さえたうえで、
私の場合は「駆け出しWeb制作者」としての特徴を活かすことに注力しました。
実績や作品を見せることはもちろん重要ですが、
それ以上に「一緒に仕事をしたい」と思ってもらえるような人となりの表現を心がけました。
自分が載せたい情報を載せるのではなく、
「これを見たクライアントが求めている(安心して任せたいと思ってもらえる)情報なのか?」という観点で情報の選択を行っています。
👇特にココ!

・出身地
・年齢
・小さい頃のエピソード
・価値観「『人がどう感じて、どう行動するのか』を考えることが好き」
・強み、ストレングスファインダー
・自分史年表
その他の工夫点
最初の画面に収まる範囲で「Hello! I'm Rion!」の自己紹介を完結。
冗長になりすぎず、テンポよく読み進められるように。
目次を設置し、全体像を把握しやすく。
大見出しの頭には絵文字をてけて、セクションの切り替わりを知らせる
大見出し→説明文→具体例という流れを意識
画像と文字情報のバランスを考慮
余白を効果的に使用して可読性を確保
プロジェクト実績をデータベースで管理
今後更新しやすく
タグ付けによる柔軟な分類
仕事先に合わせてみせる制作物を簡単に変えられる
このように、情報の重要度と閲覧者の関心の流れを考慮しながら、段階的に詳細な情報へと続く構成を心がけました。
特に、Notionの機能(データベース、トグル、インデント)を活用することで、情報を整理して視覚的にすっきりとした印象にしながらも
必要な情報にスムーズにアクセスできる構造にしています。
notionに実装
Notionでの実装では、情報の優先順位と閲覧者の導線を特に意識しました。
例えば、最初に目に入る部分には重要な情報を、詳細を知りたい人向けの情報は下層に配置する・トグルに隠すなどの工夫をしています。
導線を意識することで、単なる情報の羅列ではなく、「ストーリー」として読み進められるようになります。
作ってみてどうだった?
Notionはかなりカスタマイズ性が高くて、自分らしいポートフォリオをつくるのにぴったりだと感じました。
ポイントがあるとしたら、最初から細かいところまで作りこみすぎないということです。
Notionを使っていくにあたって、
さまざまな機能を知っていって「こういうデザインにしたい」というのが出てきたり、こうした方が便利だなというのが出てくると思います。
装飾加工を控えめにしておくとか、
基本だけを抑えて、完璧に時間をかけて作りすぎないようにするのがおすすめかなと思います。
folioとの違いは?
Folioに比べると、より作品以外を知ってもらいやすいようにカスタムできる点が特徴でした。
今回の私のポートフォリオのように情報を順番に見せたい方におススメ。
機能が多いので慣れるまで使いにくいかも。
お知らせ
5名以上からコメントやリプライ、DMでリクエストがありましたら、このポートフォリオをテンプレート化して販売する予定です!
興味のある方は、いつでもご連絡ください💌
📖今後の記事について
まだまだ書き足りない!!!!
📚今後さまざまなnoteを投稿予定です📚
・バリ島での暮らし(持って行ったもの)
・最近のお仕事
・独学でデザインを学んだ3つの方法✏️
・将来何したい?
SNSでも更新をシェアしますが、
公式LINEへの登録がおすすめです!📱💬
\ほぼ毎日積み上げ🚶➡️🚶➡️モチベを上げ合いませんか!/
#今日の積み上げ 再開!
— ㍿りおんせ🎨 #30日後にバリ島に行くデザイナー (@youandrion) August 28, 2024
・デジハリ録画授業 2.5h
・雑務3h
・読書30分
figmaでショッピングサイトのUIを組み立て中🛍️本格的になってきた!!
オートレイアウト、制約の機能に苦戦中。慣れるのに時間が要りそう。
自分を甘やかしてたから、月末くらいストイックにやる🔥#UIUXデザイナー #デジハリ pic.twitter.com/xkPsxscJ9u
\「30日後にバリ島に行く21歳」を更新中!/
最後までお読みくださりありがとうございました💐
いいなと思ったら応援しよう!
