©︎ 2025 SATOSHI KAWASHIMA Portfolio.
ポートフォリオサイト(自主制作)
- 概要
- figmaのデザインカンプからのコーディング。
WordPress 7ページ。
構成：トップページ、下層5ページ、サンクスページ。
デザインを忠実に再現することや、どんな画面幅でも表示崩れがない構造を意識してリキッドレイアウトでコーディングしました。
保守しやすいようにCSSはBEMとFLOCSSを採用しています。
正しいHTMLのマークアップや、構造化マークアップを施すことでSEO対策を意識しました。
gulpを使用し、Sassのコンパイル・jsやcssのファイルの圧縮・HTMLのフォーマット・画像のコピーを自動化してスムーズに構築することを意識しています。
今まで写真編集でPhotoshopを触っていた経験を活かし、自身でモックアップ画像の作成も行いました。
更新しやすいように、Works一覧とフォトギャラリーはカスタム投稿とカスタムフィールドを使用しています。
プラグインを使用してサイトマップの作成や、セキュリティ対策としてreCAPTCHAを導入しました。
google analyticsで検索パフォーマンスの分析やgoogle search consoleでWebサイトへの辿り着き方を確認できるようにするなど、改善点も洗い出しやすいように意識しています。
Code Detail
HTML
CSS
JS
HTML
CSS
JS
HTML
CSS
JS