ひととつなぐ、ものづくり

ポートフォリオサイトweb site|portfolio

担当範囲
デザイン / コーディング
制作期間
2021.2(約3ヶ月)
使用ツール
VSCode / XD / Illustrator / Photoshop / Procreate
使用言語
HTML / CSS / SCSS /jQuery / PHP

ポイント

自身のポートフォリオサイトを制作。
今のわたしにできることやスキルを知ってもらえる場所であること、活動していくうえで引き続き育てていけるポートフォリオであることを大切にしました。

学習と並走しすこしずつつくっていたため、長期間に及ぶ制作に。
表現したいことを諦めずトライアル&エラーの繰り返しだったので、思い出深いサイトになりました。

デザイン

「シンプルだけど遊びごころのあるデザイン」「自分らしさを妥協しない」のふたつがコンセプト。
ポートフォリオ内の素材はなるべく自作しよう!と思い、イラストを用いるチャレンジもしてみました。

とくにこだわったポイントはグローバルナビゲーション(ヘッダーメニュー)。
どのデバイス表示でもデザイン性が損なわれないようにすることと、メニュー名に英語と日本語どちらも記載し、ぱっと見て目的地に辿りつける工夫をしました。

テーマカラーには、ここ数年お気に入りのくすみオレンジをメインに、自然が好きというところから淡いグリーンをアクセントに取り入れ自分らしさも表現。
どこか親しみのあるあたたかい雰囲気を目指しました。

コーディング

モバイルファーストを意識した実装を心がけ、メンテナンス性も考えSass/SCSSを使用しています。
ヘッダー部分のなみなみはSVGを背景指定にして実装。
重なる要素のデザインが多く、レスポンシブ時の見え方など実機で検証しながら気をつけました。

ところどころにエフェクトを用いて動きを取り入れ、シンプルななかにもちょっとした遊びごころを。
お問い合わせフォームはGoogleフォームを採用しています。