このサイトでは、私がキャリアを通じて習得したほとんどの知識を活用しました。FIGMAでのアダプティブなウェブデザインと開発から、SEOとSSRの設定まで
このプロジェクトに費やした時間の大部分はデザインの作成に充てられました。
このウェブサイトを開発する際、私は自分自身のデザインを作成することにしました。デザインが私の主な分野ではないため、よりシンプルなアプローチを選びました。50以上の異なるウェブサイトのデザインを参考にし、それらが好きな理由を理解しようとしました。これらの参考資料を基に、私は自分のウェブサイトのデザインを作成しました。
このウェブサイトの約90%の画像、例えば背景、ロゴ、写真などは、Midjourneyを使用して作成されました。各画像はウェブサイトのスタイルとカラースキームを考慮して選ばれました。
ウェブサイトのカラースキームの変更を実装することにしました。なぜなら、なぜできないのでしょうか?
ウェブサイト用にサーバーサイドレンダリングが開発され、ユーザーだけでなく、スクリプトをうまく扱えないボットにも正確に表示されます。
このウェブサイトは4言語に対応しており、英語を含むすべてのページはサーバーサイドレンダリングを使用したプレレンダリングで正確に表示されます。
デザインと開発の両段階で、ウェブサイトはすべての一般的なデバイスに適応するように集中されていました。
ウェブサイトで実現したかった主なことは、感動を与えるスムーズなアニメーションです。
TikTokのような現代の人気アプリで実現されている無限スクロールがとても気に入りました。ユーザーは垂直に無限にスクロールできます。この機能をウェブサイトの主要ページにも実装することにしました。デスクトップでは、上または下に無限にスクロールできます。
ホームに戻るこれはウェブサイトのアニメーションの一部の例です。他のアニメーションにも注目していただければ幸いです。
このウェブサイトは、特に視覚障害者を含む、様々な能力を持つユーザーに適応するように設計されました。ariaの特別なシンタックスを使用しています。この機能は、例えばWindows用のNVDAのような読み上げソフトウェアを使ってテストできます。
このサイトでは、ユーザーが経験するエラーを監視し修正するためにSentryを使用しました。
ウェブサイト上のメトリクスを接続するために、特別な注意を払い、GTMを使用することにしました。
サイト制作における大きな部分はSEOに費やされました。最新のベストプラクティスを用いた大規模な最適化が行われました。
ヘッドのタイトルとメタタイトル/デスクリプションは、ユーザーがどのページにいるか、そのページの言語に基づいて動的に変更されます。
各ページはSEOに良い影響を与えるセマンティックなマークアップを使用して作成されました。
サイトの各ページに対してスキーマが作成され、検索エンジンにコンテキストを追加し、拡張されたスニペットが表示される可能性を高めています。
各ページには、検索エンジンにページ間の関係を伝えるカノニカルとオルタネートリンクが設定されています。
サイトのアイコンは、すべての一般的なデバイスに適応されています。サイトのロゴは20以上の異なるサイズに適応され、すべての一般的なデバイスで正確に表示されます。
ウェブアプリケーションに関するメタデータ、例えば名前、説明、アイコンなどの設定を含むJSONファイルで、ユーザーのプラットフォームでネイティブアプリのようにウェブアプリケーションを実行することを可能にします。
manifest.jsonを見る上記に挙げたもの以外にも、サイトには多くの他の設定が含まれており、検索エンジンがこのサイトをより効果的にインデックス化するのに役立ちます。
このサイトで徹底的なテストをしてくれた熟練のテスターK00paに心からの感謝を。
サイトコンテンツのアイディアに創造的な助けを提供してくれたLupa Nikoに感謝します。
サイトの初期テスト段階で重要な役割を果たしてくれた友人たちへの感謝の意を表します。