LUNA DESIGN(ポートフォリオサイト)

制作区分
自主制作
担当範囲
情報設計 / UIデザイン / レスポンシブデザイン / コーディング
制作期間
約1か月
使用ツール
Figma / VS Code / HTML / SCSS / JavaScript
サイトタイプ
ポートフォリオサイト
ターゲット
個人事業主・店舗オーナー

架空案件概要

クライアント

LUNA DESIGN

事業内容

Webサイト制作・コーディング・バナー制作

ご依頼背景

Web制作サービスを提供しているものの、SNSだけではサービス内容や制作実績が十分に伝わっていない状況でした。

初めて依頼を検討するお客様から「どんな制作ができるのか分からない」「依頼の流れが分からない」「料金や対応範囲が分からない」という不安の声がありました。

サイトの目的

メイン

サービスやブランドの魅力をわかりやすく伝え、閲覧者の興味・行動につなげること。

サブ

情報を整理し、回遊しやすい導線を設計する
PC/SPどちらでも世界観を崩さず表示する
お問い合わせ・購入・閲覧など次の行動へつなげる

ターゲット

メインターゲット

個人事業主・店舗オーナー

ペルソナ

デザインの雰囲気や使いやすさを重視し、スマートフォンからもスムーズに情報を確認したいユーザー。

制作意図

架空の依頼背景Webデザイン・コーディングの制作実績をまとめたポートフォリオサイトとして制作。制作実績だけでなく、制作の流れや対応範囲まで直感的に伝わる構成を目指しました。制作意図“伝わるカタチで、想いを届ける。”というコンセプトを軸に、余白・写真・タイポグラフィを活かした上質でシンプルなデザインを設計しました。

デザインのポイント

01

世界観を優先した余白設計

写真・文字・余白のバランスを整え、作品ごとの雰囲気が伝わるように構成しました。

02

ファーストビューで印象を訴求

制作物の特徴が最初に伝わるよう、メインビジュアルと導線を整理しています。

03

情報を見やすく整理

目的・ターゲット・担当範囲を管理画面から更新できる情報設計にしました。

04

制作実績への導線を強化

05

CTAを複数配置しお問い合わせへ誘導

デザインコンセプト

余白・写真・タイポグラフィを活かし、既存の世界観を壊さず上質で見やすいデザインに整えました。

制作担当

情報設計
ワイヤーフレーム設計
UIデザイン
レスポンシブデザイン
コーディング(HTML / SCSS)
アニメーション設計
一覧に戻る