手がけたもの

My Work

映像ポートフィリオ

自主制作 | サイト

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

サイトURL

サイトはこちら

全体概要

Overview

デザインを見る

  • 概要

    職業訓練先の卒業制作プロジェクトととして、映像制作用のMyポートフォリオを制作しました。

  • 制作期間

    2ヶ月

  • 制作担当

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

情報設計

Information Architecture

  • 問題と課題

    問題として、作品を載せるような独自のサイトがない。また、一般的なそのポートフォリと違い、ただ作品を記載するのではなく、作品をメインとしたサイトがあまり少ない。
    課題として,ユーザを楽しいや⾯⽩いなどの感情を引き出せるような⼯夫された仕掛けがオリジナルのサイトが必要。
    また⼀般的なポートフォリオとは違った、「何ができるか」ではなく、「コンテンツの価値」を⾒てもらうようにする必要がある

  • 目的

    ⾃⾝の作品を掲載できるオリジナルのポートフォリオが制作。制作した作品を通してユーザーに様々な感情を抱いて欲しい。
    (楽しいや⾯⽩いなどの喜怒哀楽的な感情を引き出す)

  • ターゲット

    ・年齢層は男⼥20代〜30代後半までの若者向け
    ・普段SNSやネットサーフィンをよくする⼈
    ・おしゃれな動画や写真をよく⾒る⼈
    ・カップル/⼩企業/学⽣/夫婦

  • コンセプト

    ①サイトコンセプト
    ユーザがサイトを⾒て感情的になるような構成や表現できるサイト。作品データなどの情報が整理され、視覚化されたコンテンツを表現する。
    ②デザインコンセプト①全体的にはスッキリとした特徴的なデザイン。また、作品データを「記録する」や「載せる」を意識し、そのモノの価値を引き出せる。

  • クライアントの想いや感情

    ※個人制作のため記載無し

  • ディレクション

    ※個人制作のため記載無し

企画書

Proposal

初めて制作するということもあり、企画書は見やすさ（可視化）とシンプルなレイアウトを目的として制作しました。

制作工程

Creation Steps

デザイン設計

Design

  • カラー

    ・メインカラー：＃FFF9EE
    ・ベースカラー：＃121212
    ・アクセントカラー：＃有彩色複数使用

  • レイアウト

    ・スマホ特化のレスポンシブデザイン

  • トンマナ

    ‧PCCS：トーン=ブライト or ストロング
    ‧フォント：【和⽂】Zen Kaku Gothic New、【英字】Montserrat

プログラム設計

Program

  • 機能

    ・要素の動的アクセントを入れる。
    （動画や画像にカーソルを合わせると、ポップアップのようなモノと出る）
    ・画面の要素がふわっと上がる
    ・GSAPやthree.js reactを使用したアニメーション

  • 設計構築

    要件定義を行い、そこからデザインツールでデザインを作成。
    デザインカンプをもとにHTMl及びCSSでコーティングし、アニメーションや作品の切り替わりの動的処理としてJavaScriptを使用。
    バックエンド側をAWSで構築を行い、サイトを公開。

レビュー

Reviews

  • 反省と改善

    反省として、初めて制作したこともあり、要件定義の部分にとても時間を要してしまった。その理由として、「要件定義のどこまでするのか」や「クライアントワークとの違い」が理解できておらず、それゆえ情報収集/思考/行動に時間かかってしまった。
    改善として、人によって明確な要件定義方法というのは決まっていないため、ある程度の必要な部分とそれに関する項目が選定し定義できていれば問題ないと考えた。今後は、初めの重要な「要件定義」に躓かないように改善し制作を行いたい。

  • 結果と振り返り

    結果として、想定しているサイトが制作できてよかったと感じる。その反面、制作中の工程や思考に無駄が多いと感じました。そのため、しっかりとした要件定義やデザインを行ない、無駄な考えや行動を少しでもなくせるように、効率良くインプットできるようにしたいと考ました。

デザインカンプ

Design Comp

  • SC版デザイン

  • PC版デザイン

戻る

2|4

次へ

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

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

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

ご連絡はこちら