personal work
ポートフォリオ
01
Information
- 制作種別
- personal work
- 制作期間
- 6週間
- 使用技術
- HTML / CSS / JavaScript / WordPress / PHP / Figma
- 担当範囲
- デザイン / コーディング / WordPressテーマ制作 / レスポンシブ対応 / サーバー公開
02
Overview
転職活動に向けて、自身のスキルや制作実績を伝えるためのポートフォリオサイトを制作しました。
デザインからコーディング、WordPress化、サーバーへの公開まで一貫して行っています。
シンプルな構成の中でも印象に残るサイトを目指し、大きなタイポグラフィや写真を活かしたレイアウト、ライムグリーンをアクセントカラーとして取り入れました。
Worksはカスタム投稿として管理し、作品を追加・更新しやすい構成にしています。また、PCだけでなくスマートフォンやタブレットでもレイアウトが崩れないよう、レスポンシブ対応も行いました。
03
Full Page
04
Coding Point
実装で意識したこと
・WordPressを利用し、制作実績を継続的に追加できるオリジナルテーマとして構築しました。
・Worksにはカスタム投稿タイプとカスタムフィールドを使用し、制作期間・担当範囲・使用技術・制作時のポイントなどを管理画面から入力できるようにしています。
・画面幅によってレイアウトや文字サイズ、画像位置が自然に変化するようレスポンシブ対応を行いました。
・JavaScriptではスクロールに応じたヘッダーの変化やBack to Topボタン、PC環境でのカスタムカーソルなどを実装し、シンプルなデザインの中に動きを加えています。
さらに404ページもオリジナルで作成し、サイト全体のデザインが途切れないようにしました。
05
Problem & Solution
PROBLEM
苦戦した点
PC・タブレット・スマートフォンそれぞれでデザインのバランスを保つことに苦戦しました。
特にファーストビューの文字と画像の位置関係や、Career・Strengthsなど文字量の多いコンテンツでは、画面幅によって横にはみ出したり、余白が大きくなったりする問題が発生しました。
また、Local環境から本番サーバーへWordPressを移行した際には、パーマリンクによる404エラーやSSL、独自ドメインの設定など、ローカル環境では発生しない問題にも直面しました。
SOLUTION
解決方法
ブラウザのDeveloper Toolsを使用して複数の画面幅で表示を確認し、要素ごとにレスポンシブの調整を行いました。
clamp() や %、vw などを使い分けながら、単純にサイズを縮小するのではなく、それぞれの画面幅で見やすいレイアウトになるよう調整しました。
横スクロールが発生した際には、要素のwidth・padding・positionなどを確認し、原因となっている要素を特定して修正しました。
本番公開ではWordPressの移行だけでなく、独自ドメインの設定、SSL化、パーマリンクの再設定、404ページの設置まで行い、実際に公開できる状態まで構築しました。
06