MAKING OF PORTFOLIO
shiori portfolio
コンセプト
Webデザイナーとしての活動をはじめるにあたり、自身のポートフォリオサイトを制作しました。実績がまだ少ない段階だからこそ、サイトそのものをいちばんの作品と考え、好きな配色や余白づかいがそのまま伝わる、やわらかくミニマルなデザイン設計を目指しました。
ターゲット
Web制作を依頼したい企業・お店のご担当者様。デザインの雰囲気が自分のイメージと合うかを重視される方。
課題
実績が少なく作品数でスキルを伝えられない。文章や経歴だけではデザインの好みや人柄が伝わりにくい。
目的
サイト自体を作品として、配色・余白・アニメーションの空気感を体験してもらう。作品が増えても足しやすい構成にする。
情報設計
迷わず最後まで見ていただけるよう、1ページ完結の構成にしました。ファーストビューのすぐ下に「作ったもの」を置き、いちばん知りたい情報へ最短でたどり着けるように。そのあと「私について」で人柄を補足し、最後の「お問い合わせ」へ自然につながる流れにしています。
ヒーロー
→
作ったもの
→
私について
→
お問い合わせ
デザインプロセス
淡いブルーを基調にしたトーン・オン・トーンの配色で、清潔感とかわいらしさの両立を目指しました。ヒーローにはふわふわ浮かぶ小さなハートをあしらい、サイト全体をひとつの世界観でまとめています。装飾は小さく・薄く・さりげなく。ゆっくりとしたフェードアニメーションで、やわらかい雰囲気を表現しました。スマホからの閲覧を想定し、画面幅に合わせて文字サイズがなめらかに変わるレスポンシブ設計にしています。
制作期間・使用ツール
1週間
企画・情報設計
2週間
デザイン
4週間
コーディング
TOOLS
HTML
CSS
JavaScript
WebStorm
Figma
Photoshop
Google Flow
ChatGPT
Claude
Claude Design