title.
mari design
ポートフォリオサイト
mari designポートフォリオサイト
(date)
(role)
design, writing
(tool)
Figma
overview
自身のポートフォリオサイトです。制作実績を主役に据えたデザインに仕上げました。「相手の手を空ける」をコンセプトに、余白を広めに設計しています。
#01 ターゲット
業務委託先を探している制作会社の担当者様や、デザイナーの協業パートナーを探している方。
#02 課題
実績だけでは円滑に業務を進められる相手か、人柄に問題がないかまでは伝わらない。制作会社の方が「この人になら頼める」と判断できるような構成が求められた。
#03 目的
実績だけでなく、課題解決の思考プロセスと人柄を伝え、業務委託先として選んでいただくことにつなげる。
#04 情報設計
TOPの制作実績セクションでは、一番見せたい実績を大きく表示しました。忙しい方でも、まず自信作だけは目に入るようにする狙いです。続けてサービス内容・フローの順に配置しました。何をどのくらいの費用感で頼めるのか、どんな流れで進むのかを、実績を見た直後に把握できるようにしています。実績詳細ページでは、実際のサイトへ飛べるボタンを、スクロールせずに押せる位置に固定しました。興味を持った瞬間に離脱させない設計です。モックアップも作品ごとの世界観が伝わるようにデザインし、実際の使用シーンを想起しやすくしています。
#05 ポイント
配色は制作物が引き立つようホワイトをメインに、アクセントにグリーンを選びました。ターゲットの方々も、多忙であったり何か悩みを抱えていることが多いと考え、穏やかさを感じさせる色を選んでいます。グラデーションとぼかしを加え、じんわりとにじみ出るような温かみも表現しました。また、余白を広めに設計しています。「手を空ける」というコンセプトを、開放感として空間そのものに表しています。人間的な接しやすさが表現できるように角も適度に丸め、柔らかい印象を出しました。アニメーションもゆっくりめの速度に統一し、「急かさない落ち着き」を表現しています。
contact コンタクト
「具体的な依頼ではない」「ちょっと話だけ聞いてみたい」そんな段階でも大歓迎です。
まずは気軽にご連絡ください。当日中にお返しします。
送信が完了しました
お問い合わせいただきありがとうございます。
今しばらくお待ちください。