withU

UI(web) Design, Develop(FrontEnd)

About

前作のポートフォリオで不足していた点を解消するために、ポートフォリオの再構築を検討していました。
具体的には、内容を自在に追加できる「ブログ」のような形へ改変したり、項目を自由に書き足せ、手軽に記事を書くことができるMarkdownの採用などです。
そのため、これを機に、技術的な面としてVuepressの導入やホスティングサービスをVercelに移行したほか、マイナーなTLDである「.photos」から「.jp」ドメインを取得し直し、新たに「withU」と銘打ち、Topicsなど各種のお知らせ項目を設けることで、コーポレートサイトのような仕上がりにしました。

Concept

このポートフォリオの特徴として、一貫たシンプルさを特徴とし、「作品そのもの」が目立つようなデザインを心がけていましたが、しなしながら言い換えてみれば、あまり特徴のないデザインでした。そのため、ブラッシュアップしていく過程で、withUのモチーフでもある角丸の三角形の特徴を生かし、そのデザインを随所に反映した、柔らかくシンプルなデザインに再構成を行い、シンプルさはそのままに、特徴のあるデザインとしました。
合わせて、演出なども、各項目に項目を合わせると、ズームイン / 縮小のアニメーションが再生されるようにCSSアニメーションを実装し、滑らかなアニメーションをつけることで、ポートフォリオに対するイメージや統一感を強化しました。
これまでPhotograpyを強調するように、これまで全画面で写真を表示していたトップページについては、そのスタイルを踏襲した上で、他コンポーネントのデザインコンセプトを反映し窓から風景を眺めるようなデザインにしました。
現在は1枚の画像の埋め込みを行っていますが、今後動画またはスライドショーに置き換えを行い、コンテンツを強化する予定です。

Future

今後は、Webpackなどを学習した上で、各記事ページにアクセスする際のパスを修正したり(注:works/XX.htmlなどのように、階層構造になっていないため)、コンテンツの充実を図りながら、さらなる改善を図りたいと考えています。それらと合わせて、今後はWebだけでなく、ペーパーのポートフォリオも作成するなど、各種媒体で展開を行なっていきたいと考えています。
なお、前作のポートフォリオについてはこちらからご覧いただけます。

Detail

制作年:2020
担当:UIデザイン | フロントエンド開発(HTML, CSS, JavaScript, Vue.js(Vuepress))
クライアント:自主制作
スキル:Adobe XD, Adobe Illustrator, Adobe Photoshop, VSCode, HTML, CSS, JavaSript, Vue.js, Vercel, and etc.

(C) 2020- Sora Harada. All rights reserved.