WORKS
WEBSITE
ポートフォリオサイト
DESIGN
CODING
-
制作期間
デザイン:約3週間
コーディング:約3週間 - 使用ツール Photoshop , figma , VScode
- コンセプト これからがスタート地点、今こそ黎明期。
-
ターゲット層
webデザイン会社の、担当者様へ
自分を知っていただく機会のある方へ -
設計時の
注意点 レイアウト崩れがないようレスポンシブを意識
コンセプトにあったアニメーションの実装
stickyコンテナの挑戦
WSSリニューアルサイト
DESIGN
CODING
-
制作期間
デザイン:30時間
コーディング:60時間 -
使用ツール
Photoshop , figma , VScode ,
ChatGPT(人物画像生成) - コンセプト 「本気の半年、未来を変える。」
-
ターゲット層
webデザイン業界に強い興味を持つ
20代~30代の男女。 -
設計時の
注意点 コーポレートカラー・カラーバランスと
ゴール＝説明会の応募者増加のため
アクセスしやすいように設計。 - リンク WSS（ウェブスタディサッポロ） サイト
ReVOLT-esports（架空）
チームサイト
DESIGN
CODING
-
制作期間
デザイン:40時間
コーディング:20時間 -
使用ツール
Photoshop , figma ,
VScode
Google Gemini(人物画像生成) -
コンセプト
若手選手を育て、世界を”痺れ”させ
刺激を発信するe-sportsチーム -
ターゲット層
10代~20代のe-sports競技シーンに
興味がある人を中心にゲームだけではなく
イベントやグッズにも興味がある人 -
設計時の
注意点 jQueryを使った機能の実装。
チームカラーをメインカラーにイメージした
レイアウトで、UIを使いやすいように意識。 - リンク R-Volt esports サイト
Cafe azito リニューアルサイト
DESIGN
CODING
- 制作期間 デザイン:6時間
- 使用ツール figma
- コンセプト 潮風を感じる、非日常を味わえるカフェ
- ターゲット層 10代～30代の男女、カップル・家族向け
-
設計時の
注意点 整列、対比に注意。情報量を詰めすぎないように。 - リンク cafe azzitoリニューアルサイト サイト
フレンチレストラン KAMUY サイト
DESIGN
CODING
- 制作期間 デザイン:4時間
- 使用ツール Photoshop,figma
- コンセプト 北海道の食と文化を取り入れた高級感のあるレストラン。
- ターゲット層 20代～50代の贅沢な食を求める人。
-
設計時の
注意点 ジャンプ率、余白を活かしたレイアウト。
テキストでのあいらい。 - リンク フレンチレストラン KAMUY
メキシカン料理 ホームページ
DESIGN
CODING
- 制作期間 デザイン:60時間 コーディング:30時間
- 使用ツール Photoshop,figma,vscode
- コンセプト 非日常的な、エキゾチックなレストラン。
-
ターゲット層
20代~40代の男女の社会人。
仕事帰りや、休日前の楽しみに。 -
設計時の
注意点 複雑なレイヤー構造の整理。
アニメーションなどで店舗イメージを表現。 - リンク Conno Locoサイト
banner
LLOY'S Coffee 広告バナー
DESIGN
- 制作期間 デザイン:8時間
- 使用ツール Photoshop
- コンセプト お店の一杯を、家で好きな時間に楽しめる。
- ターゲット層 10代～30代の一人でもカフェを利用する女性。
-
設計時の
注意点 目線の流れに意識したレイアウトを意識。
オンライン販売の広告とわかりやすいように。
ホラー映画（架空）広告ポスター
DESIGN
- 制作期間 デザイン:8時間
- 使用ツール Photoshop,figma
- コンセプト メインキラーのインパクトで恐怖を感じる。
-
ターゲット層
カジュアルホラー好きから、
マニアックなホラー好きまで -
設計時の
注意点 メインキラーと、キャッチフレーズの対比で
和製ホラーの繊細なイメージ
シンメトリーなレイアウトで全体を見やすいように。
季節限定甘酒 広告バナー
DESIGN
- 制作期間 デザイン:6時間
- 使用ツール Photoshop
- コンセプト 季節限定の毎日の健康を彩る甘酒。
- ターゲット層 30代～40代の健康を意識した女性向け。
-
設計時の
注意点 季節（桜）をイメージを強くなるよう配色。
キャッチコピーとサブキャッチの対比。
スープカレー 広告（架空）バナー
DESIGN
- 制作期間 デザイン:2時間
- 使用ツール Photoshop,figma
- コンセプト 人気店のNo.1カレーを使った周知に向けた広告
-
ターゲット層
幅広い年齢層の男女。
外食でカレーをあまり食べない人向け。 -
設計時の
注意点 カレーを中心に、ロゴ・キャッチ・
あしらいのバランスを考慮
店を知ってもらうためのきっかけとして、
余計な情報はいれすぎないように。
Other
react ウェザーアプリ
React.js
- 制作期間 4時間
- 使用ツール VScode,GitHub,Netlify
- コンセプト React.jsを使用した制作練習
- 参考書籍 はじめてつくるReactアプリ / 三好アキ
- リンク React Weatherアプリ
React ToDo 管理アプリ
React.js
- 制作期間 3時間
- 使用ツール VScode,Netlify
- コンセプト React.jsを使用した制作練習
- 参考サイト React を使ってシンプルな TODO 管理アプリを作る
- リンク React ToDo 管理アプリ
KeyBlocker
Vibe Coading
- 制作期間 1時間
- 使用ツール Cursor,GPT,figma
-
使用用途
特定のソフトウェアがアクティブ時
特定のキー入力を無効化する。 -
コンセプト
Cursorを使ったバイブコーディングの実践。
普段使いを便利にするアプリ制作。