Introduction
個人のポートフォリオとして制作したWebサイトです。
以前用いていたFe.photosでの改善点などを踏まえ、コーポレートサイトなどと比較しても遜色ない、個人のポートフォリオや活動の紹介ページとして制作しました。
現在は個人ブランドとしても利用しており、名刺などの制作も進行中です。
Background
前作のポートフォリオでは不足していた点を解消するため、ポートフォリオの再構築を検討していました。具体的には、内容を自在に追加できる形態(CMSなど)への移行と、手軽に記事を書くことができるMarkdownの採用などです。本サイトではVuepressの導入によってそれらを強化したほか、ホスティングサービスの移行(Vercel)やTLDをマイナーな「.photos」から「.jp」ドメインへと取得し直し、それを契機に「withU」と銘打ち、リブランディングの上再発進させることになりました。
Service
今回は柔軟に「記事」を追加できる特性を生かして、Topicsなど各種のお知らせ項目を設けたほか、デザインもVuepress独自のものからほぼ全てを変更しました。
当初は一貫したシンプルさを特徴とし、「作品そのもの」が目立つようなデザイン(画像を強調するなど)を意識していました。しかしブラッシュアップしていく過程で、withUのモチーフでもある角丸の三角形の特徴を生かした「柔らかくシンプルなデザイン」として、その意匠を随所に反映させることで、シンプルさはそのままに、より特徴のあるデザインへと進化させることができました。
合わせて、演出なども、各項目に項目を合わせると、ズームイン / 縮小のアニメーションが再生されるようにCSSアニメーションを実装し、滑らかなアニメーションをつけることで、ポートフォリオに対するイメージや統一感を強化しました。その一方、自身の得意分野でもある「写真」を生かして、これまで全画面で画像を表示していたトップページについては、そのスタイルを踏襲した上で、他コンポーネントのデザインコンセプトを反映し窓から風景を眺めるようなデザインにしました。
現在は1枚の画像の埋め込みを行っていますが、今後動画またはスライドショーに置き換えを行い、コンテンツを強化する予定です。
Future
今後はwithUブランドを名刺などへも活用し、浸透や確立を図ります。また、技術的な側面においても、現在はパスが適切な設定ができていない(例:works/XX.htmlなどのように、階層構造になっていない(Vuepressの仕様のため、現時点では未修正))状態などもあるため、今後は、Webpackなどを学習した上で、それらの修正も図りたいと考えています。
さらには、今後はWebだけでなく、ペーパーのポートフォリオも作成するなど、各種媒体での展開も検討することで、より一層の活用を図る予定です。
Credit
UI / Logo Design: Harada Sora
Develop: Harada Sora
Tool: Adobe XD, Adobe Illustrator, Adobe Photoshop, VSCode, HTML, CSS, JavaSript, Vue.js, Vercel, and etc.
Year: 2020
