手がけたもの

My Work

映像ポートフィリオ

自主制作 | サイト

デザイン/コーディング/バックエンド構築

サイトURL

サイトはこちら

全体概要

Overview

デザインを見る

  • 概要

    既存映像用ポートフォリオサイトのリニューアルとして制作しました。

  • 制作期間

    2ヶ月

  • 制作担当

    企画・構成/デザイン/コーディング/バックエンド構築

情報設計

Information Architecture

  • 問題と課題

    既存サイトは表示が遅く、スマホ専用構成。
    デザインに一部動きがありそちらに目がいく。
    作品の詳細情報が少なく、ビジネス訴求が弱い。

  • 目的

    BtoB・BtoCの顧客獲得と新規案件受注。
    YouTube編集・イベント撮影・企業PR・モーショングラフィックスの受注を目指す。

  • ターゲット

    ・BtoB：中小企業（IT・建築など）の担当者・経営者
    ・BtoC：ビジネス系インフルエンサー、一般個人（ウェディング等）
    ・年齢層：20代〜40代前半
    ・普段SNSや動画コンテンツに接触頻度が高い層

  • コンセプト

    ①サイトコンセプト
    オリジナリティと差別化に加えて、訪問者（ユーザー）が疲れず飽きず、情報が整理されたサイト
    ②「ノート」をモチーフとして、真っ白なノートに「これから頑張って作品数を増やす」ことをコンセプトとする。全体的に明るく、視覚化し洗練されつつもどこか特徴を出しているような形。

  • 差別化ポイント

    ・専用ポートフォリオサイトを持つことで「プロフェッショナル感」を演出
    ・背景グリッド線 × 大小混在グリッドで視覚的に個性を出す
    ・ホバー時に動画が自動再生され、作品を直感的に体験できる
    ・YouTube編集からモーショングラフィックスまで幅広く対応
    ・デザイン力 × 技術力（AWS構築まで）を一人で完結

制作工程

Creation Steps

デザイン設計

Design

  • カラー

    ・メインカラー：＃014669
    ・ベースカラー：＃FAFAFA
    ・アクセントカラー：＃292929

  • レイアウト

    大小混在グリッド。重要作品は2×2、通常は1×1。
    背景グリッド線（50px）でノートモチーフを表現。ホバー時に動画自動再生。

  • フォント

    ・和文：M PLUS 1p（見出し SemiBold 600 / 本文 Regular 400）
    ・欧文：Poppins（見出し Medium 500 / 本文 Light 300）

プログラム設計

Program

  • 機能

    ・要素の動的アクセントを入れる。
    （動画や画像にカーソルを合わせると、ホバーアニメーションを表示される）
    ・画面の要素がふわっと上がる
    ・モーダルウィンドウを表示

  • 設計構築

    要件定義を行い、そこからデザインツールでデザインを作成。
    サイト構築として、astroを使用したサイト設計を行う。
    バックエンド側をAWSで構築を行い、サーバレースインフラアーキテクチャの環境設計及び構築を行サイトを公開。

レビュー

Reviews

  • 反省と改善

    ユーザビリティを重視してシンプルなデザインを目指したが、同時に「個性をどう出すか」という点で表現の落とし所を見つけるのにとても苦戦した。
    デザイン制作に想定以上の時間がかかってしまった反省から、事前の競合サイト分析が不十分だったと感じている。
    参考となる表現やレイアウトのパターンをあらかじめ多く収集しておくことで、制作スピードを上げられると考えた。
    映像用ポートフォリオという性質上、動画・画像といったメディアコンテンツの扱いは今回の制作における最大の課題だった。
    ユーザーに負担なく視聴してもらうための表示設計・パフォーマンス最適化は、今後も継続して向き合うべきテーマだと感じている。

デザインカンプ

Design Comp

  • SC版デザイン

  • PC版デザイン

戻る

6|6

次へ

最後までお読みいただき、
誠にありがとうございました。

ご感想やご依頼・ご相談などございましたら、お気軽に下記のフォームよりご連絡いただければ幸いです。

少しでもご興味を持っていただけましたら、
ぜひお気軽にお問い合わせください。

ご連絡はこちら