RM DESIGNのポートフォリオサイト

WORKS

pcのモックアップ画像
RMポートフォリオサイトのキャプチャ画像
spのモックアップ画像
RMポートフォリオサイトのキャプチャ画像

SCROLL

RM DESIGN Portfolio

概要
自身のポートフォリオサイトを制作しました。
女性向けデザインを得意とするWebデザイナーの世界観や強みが伝わるとよう、 構成・デザイン・実装まで一貫して制作しました。 やさしく洗練された雰囲気と、ユーザーが心地よく閲覧できる操作性のバランスに配慮しています。
目的
自身のスキルや制作実績を視覚的に伝え、Webデザイン業務の受託や業務委託に繋げる
ターゲット
美容やライフスタイル分野など、女性向けデザインに力を入れている企業や制作会社
情報設計
ユーザーが迷わず必要な情報にアクセスできるよう、シンプルで直線的な導線を設計しました。 TOP→CONCEPT→ABOUT→WORKS→CONTACTまで読み進められる構成にし、 WORKSではカテゴリごとに作品を切り替えられる絞り込み機能を設置。 またヘッダーを追従表示にすることで、常に必要な情報にアクセスしやすいよう配慮しています。 見やすさと操作性のバランスを意識し、快適に閲覧できる構成を心がけて制作しました。
デザイン意図
上品でやわらかな雰囲気を大切にした女性向けデザインにしました。 「花束」をモチーフに、制作物一つ一つが ”想いのこもった贈りもの” のように伝わる構成に。 全ページにはサブモチーフとしてラッピングテープをあしらい、世界観にさりげない個性と統一感を持たせています。 ベースカラーはホワイト、アクセントカラーに落ち着いたネイビーを用いることで、 やさしさの中に芯のある印象を演出し、信頼感を高めています。 シンプルで可読性の高いフォントを使用し、余白や文字サイズにも配慮することで、洗練された印象に仕上げています。
制作範囲
サイト設計
デザイン(ワイヤーフレーム / デザインカンプ / モチーフ設計)
コーディング(HTML / CSS , JavaScript / レスポンシブ対応)
公開設定(GitHub)
使用ツール
Photoshop(画像補正)
Figma(ワイヤーフレーム / デザインカンプ)
HTML / CSS 、Javascript
VS code
GitHub(公開設定)
Google Chrome(表示確認・レスポンシブ調整)
制作期間
約2ヶ月
spのモックアップ画像
RMポートフォリオサイトのキャプチャ画像

SCROLL