ポートフォリオや連絡先をまとめたポートフォリオサイトの作成を行いました。

URL

https://rgh122400.cloudfree.jp/index.html

担当

デザイン・コーディング

サイトの目的

作品置き場とポートフォリオ掲載

ターゲット

作品に興味を持ったクライアント

デザインについて

メインカラーを中心に、スキルや作品をシンプルにまとめました。後半の作品例では背景一面に作品画像を表示し、インパクトを出して印象に残るようにしました。
また、SNSからのサイトにアクセスするターゲットを想定し、パソコン・タブレット・スマートフォン向けのレスポンシブ対応をしています。 ポートフォリオや作品置き場のページにはパララックスを取り入れています。一方でコンタクトページは文章の見やすさを重視して特に動きは入れず、シンプルにしています。

コーディングについて

ポートフォリオページには画像が多数載るため、画像の読み込み時間中の離脱を防ぐよう、jQueryで動きのあるローディング画面を追加しました。また、レスポンシブ対応を行い、各デバイスからで見た場合でも違和感がないようデザインカンプ時点で設定した余白を守るようにコーディングしています。

スクリーンショット