手がけたもの

My Work

デザインポートフォリオ

自主制作 | サイト

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

サイトURL

サイトはこちら

全体概要

Overview

デザインを見る

  • 概要

    就職活動及び個人デザイン用制作を掲載するためのポートフォリオを制作しました。

  • 制作期間

    3ヶ月程

  • 制作担当

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

情報設計

Information Architecture

  • 問題と課題

    問題として、独自の展開できるサイトがなく、デザインに関しての掲載できるも場所がない。職業訓練へ通ったという証として、現段階で何をできるかを表す「モノ」がないがない。
    課題として、今の段階で持っている知識や技術、学んだことを生かしてして、独自にデザイン用ポートフォリオを制作する。情報が整理され視覚的に見やすくなっており、シンプルだが動きのあるサイトを制作、そして「何ができるか」を簡潔に記載されているようなサイト

  • 目的

    自分自身のオリジナルデザインによるポートフォリオサイトを制作・運用する。それにより、就職活動におけるスキルや実績を効果的にアピール、個人の仕事の受注につなげること。

  • ターゲット

    中小企業(BtoB)および個人(BtoC)など、Web制作依頼の可能性があるユーザー。

  • コンセプト

    ①サイトコンセプト
    シンプルだが動きのある全体像で、情報（データや作品）が整理され、何ができるかを簡潔記載されているようなサイト。
    また、構成や記載内容などから自分らしさを表現したサイト。
    （即時情報把握、伝達性が高い、情報整理、視覚化、IA）
    ②デザインコンセプト
    全体的に明るく余白を保ちつつも堅くなく、シンプルながらアクセント（部分的に特徴）があるデザイン。
    　また、明るくスタイリッシュで「何ができるか」をアクティブに表現した分かりやすいしたイメージ。

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

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

  • ディレクション

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

企画書

Proposal

全体的に明るく、見やすい企画書を制作しました。また独自性を表現させるために、少しアクセントを入れることで、より目を向けてもらいたい部分を強調させるようにしています。

制作工程

Creation Steps

デザイン設計

Design

  • カラー

    ・メインカラー：＃#FFFFFF
    ・ベースカラー：＃252525
    ・アクセントカラー：＃30D5C8

  • レイアウト

    シングルカラムレイアウトを中心とし、一部グリッドレイアウトを使用

  • トンマナ

    ・PCCS：トーン=ブライト or ストロング
    　※カラーキーワードは「能動的/動的」、「活発」、「鮮やか」
    ‧フォント：【和⽂】M PLUS 1p、【英字】Roboto
    　※基本的には日本語を優先とし、そこから英文を選択。

プログラム設計

Program

  • 機能

    ・要素に応じたアニメーションを実装
    　※GSAPやthree.js reactを使用したアニメーション
    ・項目や部分に応じたアニメーションや擬似要素の実装
    ・スクロールトリガーアニメーション（GSAP / ScrollTrigger）
    ・コンタクトフォーム（PHP実装）及びメールアドレスの実装
    ・メディア（画像や動画の切り替え処理）
    ・画像スライドショー
    ・PHPでのコンタクトフォームを実装

  • 設計構築

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

レビュー

Reviews

  • 反省と改善

    反省として、全体的に制作時間を長くなってしまった。差別化やデザインの部分的な落とし込みに時間がかかったことで、色々と影響がありました。
    制作に取り組み時間はとても長かったですが、その中身は考え過ぎて、全く手が動かせてません。
    また、キーワードに執着し過ぎて、一つの物事や考えに集中し時間をかけすぎました。それによりその他の工程や制作が疎かになった。
    改善として、制作との向き合い方を学ぶ必要があると考えました。
    制作での各工程の行き詰まりや思考力が低下した時の対処方を学ぶことで短期間で良いアイデアが思い浮かぶ可能性もあると今回を通して感じました。

  • 結果と振り返り

    結果として、理想のサイトが完成して良かったと感じます。また、個人のこだわりや思い、コンセプトをしっかり表現できて良かったと思いました。
    ですが、もっと要件を詰め込めたのではないかと思う部分もあります。要件を詰め、それをデザインの観点や技術的な部分から表現できれば、さらに良かったのだろうなとしみじみ思いました。
    今後は、デザインの視点から表現の幅を増やし、そこからコーディングやプログラムなどの技術を使用してインプットしたものを表に出すことができれば良いと考えました。

デザインカンプ

Design Comp

  • SC版デザイン

  • PC版デザイン

戻る

1|4

次へ

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

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

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

ご連絡はこちら