Works

制作実績

Webサイト制作Portfolio Site

Webサイト GitHub

これまでの制作物についてまとめたポートフォリオサイトです。制作の際は採用担当者様の視点を意識し、統一性のあるデザインや、コード整理など様々なことを意識しながら取り組みました。

About

制作概要

制作背景: Web業界へのキャリアチェンジに向け、これまで制作した作品やスキルだけでなく、自身の人柄や考え方も伝えられるポートフォリオサイトとして制作しました。

強み・特徴: 制作実績やスキル紹介に加え、「私について」のページを設けることで、私自身の人柄やWeb制作に対する想いも伝えられる構成としています。

ターゲット: Web制作会社・事業会社の採用担当者様

取り組み: 制作物だけでなく人物像も伝わるサイトを目指し、シンプルで見やすいデザインと分かりやすい情報設計を意識しました。

Point

制作のポイント

制作事例を最優先とした情報設計

採用担当者様が最も確認したい情報は“どのような制作物を作れるのか”だと考え、制作事例をファーストビュー直後に配置しました。
また、その後にスキル一覧やプロフィールを設置することで、技術力だけでなく人物像についても段階的に理解していただける情報設計を意識しています。

統一感と保守性を意識したコーディング

フォントサイズやカラーなどを変数で管理し、ユーティリティクラスも活用することで、サイト全体に統一感を持たせました。
また、モバイルファーストで実装を進めることで、スマートフォンからPCまでレイアウトが自然に変化するレスポンシブ対応をおこなっています。
制作後の修正や機能追加にも対応しやすいよう、保守性を意識したコーディングを心がけました。

人柄を反映したサイトデザイン

ポートフォリオサイトは制作物だけでなく、制作者自身の人柄や価値観も伝える場だと考えています。
そこで全体は誠実さや落ち着きを表現できるグレーブルーを基調とし、プロフィールページでは「人に寄り添う」という自身の価値観を表現するため、温かみのあるオレンジをアクセントカラーとして採用しました。
色彩設計を通して、技術面だけでなく人物像も伝わるデザインを目指しています。

独自ドメイン・サーバーを利用した本番公開

本サイトは、独自ドメインを取得し、レンタルサーバーへのアップロードをおこなったうえで公開しています。
コーディングだけでなく、ドメイン管理やサーバー設定など公開環境の構築も経験することでWebサイトが利用者へ届くまでの工程について理解を深めました。

Others

その他制作実績

カフェサイト制作課題

メンタリングサービス「Hello Mentor」の課題として制作。デザインカンプをもとにHTML/CSSで実装しました。

写真家PFサイト制作課題