ポートフォリオサイト
Web制作講座課題｜設計・デザイン・コーディング
-
概要
Web制作講座の最終課題として、これまでの制作物をまとめたポートフォリオサイトを制作しました。
-
ターゲット
ポートフォリオサイトを見てくださる採用ご担当者様
-
目的
就職活動を行うにあたり、これまで制作したものやスキルや人となりをお伝えしたく制作しました。
-
制作期間
4ケ月
-
工夫したところ
■ビジュアル設計
ファーストビューには、自身をモチーフにしたオリジナルイラストを制作・配置しました。視覚的な印象づけと、サイト全体の世界観を伝えることを意識しています。
■構築・設計
WordPressを使用し、設計から構築まで一貫して行いました。
WORKSページはHTML・CSS・PHP（テンプレートタグ）でコーディングし、制作物はカスタム投稿機能を用いて管理・表示しています。
更新のしやすさと拡張性を考慮した設計です。
■機能面
CONTACTページにはContact Form 7を導入し、実務を想定したお問い合わせ機能を実装しています。
■UI/UX
全体として、ユーザーが迷わず目的の情報にたどり着けるよう、各ページに次の行動へつながる導線を設計しました。
初めてのサイト制作であったため、設計からデザイン、コーディングまで試行錯誤を重ねながら進めましたが、調べながら一つひとつ実装し、形にしました。 -
使用ツール
■デザイン：Canva
■イラスト：Inkscape
■コーディング：Visual Studio Code
■サイト構築：WordpressのテーマAstraをカスタマイズして制作(WORKSページのみHTML、CSS、PHPテンプレートタグ、jQueryにてコーディング)
■モックアップ・背景画像著作者：rawpixel.com／出典：Freepik
