ポートフォリオ

サイトについて

私のポートフォリオサイトです。自分自身の制作実績やスキル、どんな人物なのかを知ってもらうために制作しました。
このポートフォリオサイトで、初めて WordPressの自作のテーマ制作に挑戦しました。

制作期間

ワイヤーフレームとデザイン：2日
コーディング：3日
WordPress化：3日

制作範囲

ワイヤーフレーム/デザイン/コーディング

使用ツール

PhotoShop/Figma/VS Code/WordPress

使用言語

HTML/SCSS/Java Script/PHP

デザインで意識したところ

Figmaのデザインのリンクはこちら
まず、制作実績を見てもらえるようにファーストビューの下に、最新の4件の制作実績を載せています。
自分がシンプルなデザインが好きだということと、見やすさを重視して、シンプルなデザインにしました。
また、見やすくするために余白などは多めに取り、窮屈な印象を与えないようにしています。
文字のフォントサイズやフォントの種類などできる限り少ない数に絞り、統一感を持たせています。
サイトに安心感や落ち着きなどの印象を与えたいと考えて、#617C95をメインカラーにしました。
青色の補色が、暖色系なので、#D8825Eをアクセントカラーに選びました。

このサイトはほぼすべての余白や、要素のサイズ、フォントサイズなど8の倍数でデザインしています。

コーディングで意識したところ

デザインがシンプルだと感じていたので、Java Scriptを使用し一部だけですが、スクロールしたら要素がふわっと現れるようにサイトに動きをつけました。
今回は、 WordPress化させると考えていたので、トップページや下層ページのファイルをルート直下に並列に配置し、投稿個別ページの更新可能な部分は、HTMLタグに個別のクラス名をつけないなどの、 WordPress化しやすいHTMLファイルの制作を意識していました。
固定ページのほとんどの文章やプロフィール写真は サイト公開後もWordPressで編集できるようにカスタムフィールドを使用しています。
制作実績のカテゴリーのボタンを押すと、カテゴリーだけがまとまってるアーカイブページに行き、必要な情報を探しやすいようにしています。