ポートフォリオ

Visit Website>>>https://ryozen-portfolio.com/

Website / Portfolio Site / 自主制作

ポートフォリオサイト

Overview

概要
WEBサイト、バナーの制作物を掲載したポートフォリオサイトを制作しました。
自身の制作物だけでなく、デザインやコーディングに対する考え方や強みも伝わる構成を意識しています。
コンセプト
シンプルな構成と線を基調にしたデザイン
余白や線を活かしたシンプルなデザインをベースに、掲載する制作物が自然に馴染むよう意識して制作しました。
また、採用担当者の方に自身の強みや制作物、考え方が伝わりやすいよう、情報の見やすさや整理も意識しています。
目的
就職活動を行うにあたり、自身の経歴や強み、またこれまでの制作物や思考を伝えるため。
ターゲット
Web制作会社の採用担当者の方々
制作期間
企画
2日間
構成
3日間
デザイン設計 / デザインカンプ
4日間
コーディング
3週間
使用ツール
Figma / Photoshop / Illustrator / HTML / CSS / JavaScript（jQuery）
ポートフォリオサイトのOGP画像

OGP IMAGE

Details

企画 / 構成
制作物をメインに見せるため、TOPページではFVの直後に制作物一覧を配置し、その後に簡易的なABOUTセクションを設けた構成にしました。
また、ABOUTページでは自己紹介や経歴だけでなく、スキルや強みのセクションを加えることで、使用できるツールやスキル感、自身の人物像が伝わりやすい構成を意識しています。
サイト全体を通して、情報整理や見やすさを意識し、採用担当者の方に自身のことや制作物が伝わりやすいよう制作しました。
デザイン
WEBサイトからバナーまで、作品ごとに雰囲気が異なるため、どの制作物でも違和感なく馴染むよう、グレーを基調とした配色と余白を活かしたシンプルなデザインで統一しました。
また、サイト全体で線や〇△□のモチーフを使用し、統一感を意識しています。
デザインに取り入れた線は装飾としてだけでなく、視線誘導としての役割も意識して制作しました。
コーディング
サイト全体では見やすさを重視し、過度なアニメーションは使用せず、シンプルな実装を意識しました。
その中で唯一の大きなアニメーションとして、TOPページのFVにローディングアニメーションを実装しています。
ローディング画面で「Ryozen」の “O” が転がり、そのままFV内の「RYOZEN」の “O” として繋がる演出を取り入れ、ただ動きを付けるだけではなく、ストーリー性を持たせたアニメーションとして制作しました。
また、hover時には下線が表示されるアニメーションを取り入れ、サイト全体の線を基調としたデザインとの統一感も意識しています。

PC size

ポートフォリオサイトのPCサイズ表示

SP size

ポートフォリオサイトのスマホサイズ表示
View Website
All Works