Vladislav ushmankin. Portfolio main image

このサイト

このサイトの詳細な説明

このサイトでは、私がキャリアを通じて習得したほとんどの知識を活用しました。FIGMAでのアダプティブなウェブデザインと開発から、SEOとSSRの設定まで

スタック

Angular
Typescript
Sentry
Figma
NestJS
SSR
1.

デザイン

このプロジェクトに費やした時間の大部分はデザインの作成に充てられました。

1.1.

Figma

このウェブサイトを開発する際、私は自分自身のデザインを作成することにしました。デザインが私の主な分野ではないため、よりシンプルなアプローチを選びました。50以上の異なるウェブサイトのデザインを参考にし、それらが好きな理由を理解しようとしました。これらの参考資料を基に、私は自分のウェブサイトのデザインを作成しました。

1.2.

AIイメージ

このウェブサイトの約90%の画像、例えば背景、ロゴ、写真などは、Midjourneyを使用して作成されました。各画像はウェブサイトのスタイルとカラースキームを考慮して選ばれました。

1.3.

ウェブサイトのライトテーマ

ウェブサイトのカラースキームの変更を実装することにしました。なぜなら、なぜできないのでしょうか?

2.

SSR

ウェブサイト用にサーバーサイドレンダリングが開発され、ユーザーだけでなく、スクリプトをうまく扱えないボットにも正確に表示されます。

3.

多言語対応

このウェブサイトは4言語に対応しており、英語を含むすべてのページはサーバーサイドレンダリングを使用したプレレンダリングで正確に表示されます。

4.

アダプティブ

デザインと開発の両段階で、ウェブサイトはすべての一般的なデバイスに適応するように集中されていました。

5.

アニメーション

ウェブサイトで実現したかった主なことは、感動を与えるスムーズなアニメーションです。

5.1.

無限スクロール

TikTokのような現代の人気アプリで実現されている無限スクロールがとても気に入りました。ユーザーは垂直に無限にスクロールできます。この機能をウェブサイトの主要ページにも実装することにしました。デスクトップでは、上または下に無限にスクロールできます。

ホームに戻る Portfolio animation demonstration. Vladislav Ushmankin
5.2.

「私についての詳細」ページでのブロックの固定

このページを訪れるPortfolio animation demonstration. Vladislav Ushmankin

これはウェブサイトのアニメーションの一部の例です。他のアニメーションにも注目していただければ幸いです。

6.

アクセシビリティ

このウェブサイトは、特に視覚障害者を含む、様々な能力を持つユーザーに適応するように設計されました。ariaの特別なシンタックスを使用しています。この機能は、例えばWindows用のNVDAのような読み上げソフトウェアを使ってテストできます。

7.

Sentry

このサイトでは、ユーザーが経験するエラーを監視し修正するためにSentryを使用しました。

8.

Google Tag Manager

ウェブサイト上のメトリクスを接続するために、特別な注意を払い、GTMを使用することにしました。

9.

SEO

サイト制作における大きな部分はSEOに費やされました。最新のベストプラクティスを用いた大規模な最適化が行われました。

9.1.

head Title, Description

ヘッドのタイトルとメタタイトル/デスクリプションは、ユーザーがどのページにいるか、そのページの言語に基づいて動的に変更されます。

9.2.

セマンティクス

各ページはSEOに良い影響を与えるセマンティックなマークアップを使用して作成されました。

9.3.

サイトマップ

サイト用に開発されたサイトマップには、SEOに必要な各ページとその言語バージョンへのリンクが含まれています。

サイトマップを見る
9.4.

Robots.txt

検索エンジンのボットが読み取るrobots.txtが開発されました。

robots.txtを見る
9.5.

スキーマ

サイトの各ページに対してスキーマが作成され、検索エンジンにコンテキストを追加し、拡張されたスニペットが表示される可能性を高めています。

メインページからのスキーマの例
9.6.

Canonical & alternates

各ページには、検索エンジンにページ間の関係を伝えるカノニカルとオルタネートリンクが設定されています。

このページの例
9.7.

404ページ

存在しないアドレスにアクセスした場合に表示される404ページがあります。

404ページを見る

このページには、5%の確率でアクティブになるイースターエッグがあります。

9.8.

Favicons&Touchアイコン

サイトのアイコンは、すべての一般的なデバイスに適応されています。サイトのロゴは20以上の異なるサイズに適応され、すべての一般的なデバイスで正確に表示されます。

このサイトのFaviconsとTouchアイコンの例
9.9.

Manifest.json

ウェブアプリケーションに関するメタデータ、例えば名前、説明、アイコンなどの設定を含むJSONファイルで、ユーザーのプラットフォームでネイティブアプリのようにウェブアプリケーションを実行することを可能にします。

manifest.jsonを見る
9.10.

その他

上記に挙げたもの以外にも、サイトには多くの他の設定が含まれており、検索エンジンがこのサイトをより効果的にインデックス化するのに役立ちます。

謝辞

  • このサイトで徹底的なテストをしてくれた熟練のテスターK00paに心からの感謝を。

  • サイトコンテンツのアイディアに創造的な助けを提供してくれたLupa Nikoに感謝します。

  • サイトの初期テスト段階で重要な役割を果たしてくれた友人たちへの感謝の意を表します。