マウスストーカー

パイアイコン Kaneko Natsumi

金子 菜摘
ポートフォリオサイト(本サイト)

Webサイト

自主制作

カードモックアップ01

概要説明

自身のポートフォリオサイトを制作いたしました。
サイト自体を「ケーキ」と捉え、学習中に感じたデザインの美しさ・楽しさを表現しました。
初めてグリッドレイアウトに挑戦してみました。

制作期間

企画・WF 3日
デザイン 5日
コーディング 3週間

使用ツール

Photoshop / Figma / HTML / CSS / JavaScript / GSAP

モックアップ写真 モックアップ写真

目的

(1)学習で培ったスキルを伝えるため。
(2)自分の人柄や考え方を伝えるため。

ターゲット

企業の現場担当の方や採用担当の方

情報設計

限られた時間の中で選考してくださっている採用担当者の方のニーズを考慮し、すぐに制作物を見ていただけるような設計を採用いたしました。バナーや小さな制作物はレイアウトを変え、WebサイトやLPとの差別化を図りました。 作品ページでは、下部に次の制作物をすぐ見れるような動線を採用し、サイト内を回遊しやすい設計づくりを心がけました。
また、参考サイト探しでは、シンプルでミニマルな作りのデザインのサイトを見て、自然と視線が流れ、情報が入って行きやすいようなレイアウトになるよう 余白感や写真を配置の仕方を意識をし制作しました。

デザイン

デザインでは、本サイトを「ケーキ」と見立てて、デザインに共通する魅力が伝わるように工夫をしました。背景の配色は、ケーキの断面図の整列的な美しさを表現しました。 また、テキストアニメーションやさまざまなフェードインを取り入れ、ケーキを食べた時に感じるいろんな食感の楽しさを演出しました。 グリッドレイアウトは、ショーケースの並ぶケーキや、ケーキそのものが整列的で美しく、同じようにデザインの美しさも価値があると感じ採用いたしました。 ハンバーガーメニューボタンも、グリッドを意識したデザインで統一感が出るよう工夫しています。