ポートフォリオサイト
デザイン、コーディングでポートフォリオサイトを作成しました。
Figmaでデザインし、コーディングしました。
Figmaで作成したデザインカンプはこちら
ポイント
・Figmaでデザイン
・モックアップ
・WordPewss化
・レスポンシブ
・Googleフォントの使用
・JQueryとCSSで動きをつける
意識したこと
ポートフォリオサイトということで、特にこれといった決まりがないなか、信頼感のある青のカラーを選択しました。
ポートフォリオサイトは、企業の担当者やお客様に見てもらう機会が増えるサイトだと思うのと、作り手の僕自身が男性であるので、青のカラーを採用しました。
次に、だだ単色の青を使うだけだと、洗練された感じが出ないので、グラデーションをポイントで使いました。
背景や、カテゴリーのタグに、薄く入れることよって、少し洗練された感じをだし、ファーストビューのメイン画像ともテイストが合う感じにしました。
また、お問い合わせフォームのタグやボタンには、少し色を入れて、目立つように作りました。
その他にこだわったポイントは、Workセクションのモックアップにこだわりました。
というのも、
「いかに、自分の作った作品を見てもらうことができるのか？」
「いかに、パッと見たときに目をひくか？」
「綺麗にまとまっているという印象をもってもらえるのか？」
「クリックして、記事ページにとんでもらえるのか？」
というようなことを考えてつくりました。
モックアップでのPCとSPでの見せ方はもちろんですが、背景の青のグラデーションも全部統一して揃えました。
背景まで、青のグラデーションで揃えることによって、「統一感」をだし、パット見たときに、綺麗にまとまっているという印象を与えることができると思い、この部分を意識してつくりました。
使用言語
HTML/CSS/jQuery/