Yurisa9862’s Portfolio website (2nd ver.)

拙者(Yurisa9862)のポートフォリオサイト。(今ご覧になっているこのサイトのことです。)

以前に作ったポートフォリオサイトのデザインをもとに、新たに作成。

本サイトはAdobe XDでのデザインカンプ作成からコーディング、WordPressでの実装までを一貫して行った、計6ページのWebサイトとなっている。

もちろん、サイトはレスポンシブ対応。

サイトデザインなどに関して

シンプルなデザインにしつつも、温かさ・柔らかさも感じられるようなサイトにしたかったので、サイトの背景色はベージュ寄りの白( ■  #fbfbf5 )を主に用いた。

そのほか、サイトの背景色に用いたのは、 ■  #eff0f2 と #141313 。

アクセントカラーとしては、ピンク(主に #cc00cc)と黄緑( #00C11E)を用いている。
パーツ(ボタン、ヘッダー等)には上記カラーの他に  ■  #fcfcfc を使用。

気をつけた点

  • サイトは極力シンプルな構造(およびデザイン)にすることと、閲覧者が見やすいサイトになるように、デザインの段階から工夫と修正を行った。
  • 色覚障害をもつ人も快適に閲覧できるサイトにするべく、ツールを使用しつつ、見え方の確認を随時行っていった。

作業実施箇所

  • 構成、ライティング
  • デザイン(デザインカンプ作成)
  • コーディング
  • WordPress化作業
  • サイトのアップロード
  • サイトロゴ、サイトアイコン作成

※サイトロゴ、サイトアイコンについては、こちらの投稿にて別途詳しく書いている。

使用言語や使用ツール

  • HTML5&CSS3
  • Sass (scss)
  • jQuery
  • JavaScript
  • PHP
  • WordPress
  • (Adobe) Illustrator …サイトロゴ、サイトアイコン作成のために使用
  • (〃) Photoshop …モックアップ作成に使用
  • (〃) XD …デザインカンプ作成に使用
  • Visual Studio Code
  • LocalbyFlywheel
  • Advanced Custom Fields PRO

screenshot_xddatas1
XDを使ったデザインカンプ制作(制作途中)の様子

ページ数

6ページ

制作期間

約1ヶ月半

ScreenShot_yurisa9862-2nd-portfolio(pc)
ScreenShot_yurisa9862-2nd-portfolio(sp)

※注:当サイトは随時修正・変更を加えているため、上記画像と実際のサイトのデザインが異なっている場合がある。

利用素材、参考にしたものなど