Website Design
(自主制作)
KIMURA YUUSAKU ポートフォリオ
URL: https://kimurayuusaku.github.io/yuusakukimura.github.io/
About
制作の目的
ポートフォリオのサイトを制作しました。HTML/CSS/JavaScriptを使ってコーディングし、illustrator、Photoshopを使って素材やデザインを作成しました。作品や情報の見やすさ、伝わりやすさとデザイン性の両立を重視しました。
Process
デザインプロセス
Figmaで大枠のワイヤーフレームを考えたのち、Photoshopとillustratorを使って素材を作成しました。そしてHTML/CSS/JavaScriptを使ってコーディングしました。アニメーションが好きですのでホバーなどの細かい動きをこだわりました。
Tool
使用技術
- Figma (ワイヤーフレーム、プロトタイプ作成)
- Adobe Photoshop, Illustrator (デザイン作成)
- HTML, CSS(コーディング)
- JavaScript (アニメーション、インタラクションの実装)
デザインのポイント
スタイリッシュで洗練されたデザインを目指し、ダークモートン色#383838をメインに配色しました。情報の見やすさとポートフォリオならではの伝わりやすさを重視しました。
Webサイトの機能
JavaScriptとRSS機能を使って静的サイトでも機能するnote記事の自動更新を実装しました。Workセクションではカテゴリー機能を実装、ページ下部にはお問い合わせフォームを用意しています。 個別の作品紹介ページでは、動画の埋込みやスクロール機能を実装しました。
Visual
URL: https://kimurayuusaku.github.io/yuusakukimura.github.io/
