PORTFOLIO SITE
自主制作
INORI MIE
ポートフォリオサイト
制作会社の担当者に、実績だけでなく設計への姿勢や人柄まで伝わるポートフォリオサイトを目指して制作しました。
Basic Info
制作種別
自主制作
制作物
ポートフォリオサイト全9ページ（PC / SP）
担当範囲
情報設計 / デザイン / STUDIO構築
制作期間
3ヶ月
使用ツール
Figma・STUDIO
01
プロジェクト概要
Project Overview
背景
制作会社の方に、自身のスキルや実績、仕事への姿勢を伝え、信頼につなげるためのポートフォリオサイトを制作。
課題
実績やスキルだけでなく、なぜそのデザインにしたのか、制作の意図や考えを分かりやすく伝えること。
目的
制作会社の方に信頼を届け、業務委託契約や案件相談につなげる。
想定ユーザー
制作会社のディレクターや、外注デザイナーを探している担当者
前提条件
限られた閲覧時間の中でも、実績・スキル・人柄・仕事への姿勢が直感的に伝わる、情報を整理した信頼感のある設計。
02
デザインコンセプト
Design Concept
1
コンセプト
意図を整理し、安心して任せられるデザインへの姿勢を伝えるポートフォリオ
2
イメージキーワード
「信頼」 「安心感」 「凛とした」 「洗練」
3
情報設計
制作会社の担当者が短時間で必要な情報を把握できるよう、「実績」「できること」「私について」 の順に情報を整理しました。
最初に実績を見せることで制作スキルや対応領域を直感的に伝え、その後に人柄や仕事への姿勢を紹介することで、安心して任せられると感じてもらえる流れを意識しました。
4
デザイン方針
全体の方向性
過度な装飾を避け、実績を主役としたシンプルな構成とすることで、制作物や設計力が伝わるデザインを目指しました。
また、余白を広く確保し、秩序あるレイアウトで情報を整理することで、安心感と洗練された印象を表現しています。
配色設計
白と淡いピンクベージュをベースカラーに採用し、清潔感とやわらかな印象を演出しました。
アクセントには落ち着いたグリーンを使用することで、信頼感や安心感を与えながら、全体を引き締めています。
Base 1
#FAFAFA
Base 2
#ECE0DD
Base 3
#F9F6F5
Accent
#3F7A63
Text 1
#2F2F2F
Text 2
#555555
フォント選定
和文には Noto Sans JP、欧文には Inter を採用しました。
どちらも視認性が高く、情報量の多いポートフォリオでも読みやすさを確保できるフォントです。
シンプルで無駄のない書体を選ぶことで、信頼感や洗練された印象を表現しています。
和文フォント
Noto Sans JP
欧文・数字フォント
Inter
03
デザイン意図
Design Intent
姿勢を伝えるキャッチコピー
キャッチコピーでは自身の強みを端的に表現し、強調部分にアクセントカラーを使用することで、提供できる価値を視覚的に印象づけています。
コンセプトを補強する背景表現
設計や情報整理を想起させる構造的なモチーフを採用し、コンセプトを視覚的に補強しました。
統一感を高めるカラー調整
サイト全体との統一感を高めるため、イラストにはサイトで使用しているカラーを反映しました。
対応範囲が伝わるカード設計
情報を統一したレイアウトで配置することで、対応範囲を直感的に把握できる構成としました。
制作プロセスが伝わる情報設計
背景・課題・目的からデザインコンセプトまでを段階的に整理することで、成果物だけでなく制作過程や考え方も伝わる構成としました。
情報を整理したレイアウト
情報をカードごとに整理し、情報量の多いページでも内容を把握しやすいよう、適切な文字量と余白を意識しました。
04
全体像
Design Overview
PC
SP
04
全体像
Design Overview
PC
SP
Page
Top