ポートフォリオサイト

Web

たかのえみポートフォリオサイトの画像

  • 概要

    Web制作講座の最終課題として、これまでの制作物をまとめたポートフォリオサイトを制作しました。
    2025年12月の公開後も、閲覧者の視点で、改善を重ねています。

  • ターゲット

    ポートフォリオサイトをご覧になる、採用ご担当者様。

  • 目的

    就職活動を行うにあたり、これまで制作したものやスキルや人となりをお伝えしたく制作しました。

  • 制作期間

    4ケ月

  • 工夫したところ

    【ビジュアル設計】
    ファーストビューには、自身をモチーフにしたオリジナルイラストと、キャッチコピー「あそび心を、デザインに。」を配置しました。
    視覚的な印象づけと、サイト全体の世界観を伝えることを意識しています。

    【構築・設計】
    WordPressを使用し、設計から構築まで一貫して行いました。
    WORKSページはHTML・CSS・PHP（テンプレートタグ）でコーディングし、制作物はカスタム投稿機能を用いて管理・表示しています。
    更新のしやすさと拡張性を考慮した設計です。

    【機能面】
    CONTACTページにはContact Form 7を導入し、実務を想定したお問い合わせ機能を実装しています。

    【UI/UX】
    ユーザーが迷わず、目的の情報にたどり着けるよう、各ページに、次の行動へつながる導線を設計しました。
    作品にカーソルを合わせると「詳細を見る」と表示するなど、操作がわかりやすい工夫もしています。
    PC、スマートフォンの両方で見やすいよう、表示を整えています。

    【改善】
    公開後も、作品ごとの詳細ページに、依頼の背景や制作の意図を加えるなど、「見る人に、何がどう伝わるか」を意識して、改善を続けています。

    【制作の進め方】
    初めてのサイト制作で、設計からデザイン、コーディングまで、試行錯誤を重ねました。
    調べながら、一つひとつ実装し、形にしました。

  • 使用ツール

    ●デザイン：Canva
    ●イラスト：Inkscape
    ●コーディング：Visual Studio Code
    ●サイト構築：WordPressのテーマAstraをカスタマイズして制作(WORKSページのみHTML、CSS、PHPテンプレートタグ、jQueryにてコーディング)
    ●モックアップ・背景画像著作者：rawpixel.com／出典：Freepik

image1の画像
BACK
上部へスクロール