Portfolio

制作期間
1ヶ月
担当
デザイン・コーディング
使用ソフト・スキル
  • Photoshop,
  • Illustrator,
  • Xd,
  • VScode
  • HTML,
  • CSS(Sass),
  • jQuery,
  • WordPress
制作内容
初のポートフォリオサイト。就職活動のために制作しました。Webサイト、ロゴ、バナー等を掲載。 デザイン、コーディングを行いました。必要な情報を分かりやすくまとめる事、見て楽しい事を意識して制作しました。
サイトURL
http://takuma-sakai.net
PortFolioのトップページの画像
コンセプトシート
Port Folioのコンセプトシート
デザインのポイント

■ 導線を考える

TOPページは、「何が出来る人なのか」が最も知りたい情報であると仮定し、WORKSページを最上部に配置しました。 興味を持って頂く事でABOUTページへ。この流れを意識しました。

■ TOPページ

メインビジュアルでは、自分の住む名古屋市中区の写真を使用し、「この地から新たに挑戦していきたい」という気持ちを込めキャッチコピーと合わせました。
WORKSは、最も見て貰いたい物2つを大きくレイアウトし、次点となる物をスライダーで表示し、残りはボタンで誘導。という形をとりました。
他の制作物はスライダーでジャンルの違うもの表示し、ピックアップしたいものを集めました。

portfolioのトップビュー
portfolioのスライダーを表す写真

■ WORKS ー 個別ページ

WORKSの個別ページでは、「何ができるか」を知ってもらうため、制作物の情報を分かりやすくまとめました。
制作する事への熱量が伝わればと思っています。

■ ABOUTページ

  • ・より深く自分の事を知ってもらう事で、一緒に仕事をしてみたいと思ってもらえるよう情報をレイアウトしました。
  • ・LIFEのセクションには、レイアウトが単調で飽きてしまわない工夫として自作のアイコンを設置しました。
チャレンジする気持ちを表す剣のアイコン

■ 全体のデザイン

「見やすく」を心がけ、白を基調にキーカラーとして、黄色を使用しました。
ロゴのキーカラーを使用しておりロゴに込めた想いをポートフォリオサイトにも反映しました。
シンプルなデザインの分、余白、ジャンプ率、コントラストを意識しメリハリのあるデザインにしました。

Portfolioのページへ
portfolioスマホ画面の画像
portfolioのPC画面の画像
portfolioのスマホ画面の画像
portfolioのスマホ画面の画像

Portfolioのページへ

Works

Contact