私はSFスタイルのポートフォリオウェブサイトを構築しました。

私がそれをした主な理由は3つあります。

1. 私は子供の頃から、マイノリティリポート、攻殻機動隊、その他多くのSF映画の美しいインターフェースに夢中になっています。

3.新しいフレームワークSvelteを学びたかった。

ステップ1：適切なインスピレーションを見つける

私は自分のウェブサイトにどのようなビジュアルを入れたいかを考えることから始めました。

私が興味を持ったビジュアルのいくつかは、非常に滑らかで複雑なビジュアルモチーフを作成した角のある線でした。また、これらのデザインのいくつかが背骨の形に並んでいるのも気に入りました。

探求したい3つのモチーフを特定しました。

1. ユーザーに視覚的な興味をそそり、マウスの位置に反応する複雑な「ヒーロー」ヘッダーを作成します。
2. マウスオーバーすると拡張する脊椎モチーフインターフェイス
3. 「Findme」インターフェースとして機能する「Map」デザイン。

いくつかの調査の後、私はより最小限の方向に進み、代わりに暗い背景を使用することにしました。

プロトタイプ

スパインインターフェイスの初期のデザインは、スライドショーコントローラーのように機能しました。

プロトタイプはうまく機能しました。それは私が望んでいた多くの相互作用を含み、そこにある多くのポートフォリオとは異なり、デザイン言語では「未来的」でした。

しかし、それはあまり使い勝手が良くありませんでした。ヒーローセクションは、さまざまな画面間であまりうまくスケーリングされず、各領域に対して行わなければならない多くの磨きがありました。

私もタイプトリートメントのファンではありませんでした。それは少し大きすぎて、私の好みにはバランスが取れていませんでした。

ヒーローセクション

ヒーローセクションのやり方を考え直すことにしました。アイアンマンのような映画などの参考文献を振り返り、流動性が低く複雑なものが必要だと判断しました。

視差効果とCSSアニメーションを組み合わせて、3Dインターフェースのような錯覚を作り出すことができました。

矢印はIllustratorで設計されており、ホバー時にトレース効果を作成するためにSVGアニメーションを使用しました。その結果、ページの読み込み時に得られる非常に洗練された一連のインタラクションが実現しました。

スパインインターフェイス

未来的でありながら実際に機能するインターフェースを作成することは、すでに困難な作業です。プロトタイプを持っていることで、他の人にそれをテストさせ、彼らがそれについてどのように感じているかを知らせてくれました。

Spine Controllerに関する一般的なフィードバックの1つは、クールであるにもかかわらず、あまりユーザーフレンドリーではないというものでした。

いくつかの再設計に苦労した後、私はおそらくそれが最初から最も機能的なインターフェースではなかったことを認めなければなりませんでした。

次に、セレクターの動作を維持しながら、インターフェイスを再利用してメニューに組み込むことにしました。

新しいメニューははるかに使いやすく、背景画像と重ならないようになったので、色を追加してさらに目立たせることができました。

ケーススタディセクション

ポートフォリオの詳細の一部に機密情報が含まれている可能性があるため、パスワードでロックしました。

地図

SVGアニメーションを使用して、マウスをWebサイト上に置いたときに地形をトレースする効果を作成することができました。これにより、地図が「公開」されているように見えました。その後、より興味をそそるアニメーションを作成するために、それらをパルスおよび遅延させるいくつかのマーカーを追加しました。

Svelteの使用（私の技術者向け）

なじみのない人にとって、SvelteはReactやVueのように機能するフレームワークです。ただし、ブラウザではなく、コンパイラのステップでほとんどの作業を実行します。

私がSvelteを選んだ主な理由は、Reactに比べてはるかに書きやすいからです。Reactは、UIを簡単に再利用できるようにする、インターフェースに関するコンポーネントの考え方を実際に推進しました。ただし、それは私たちが書かなければならないコードの量を膨らませ、JSXを使用して特定のものを書く方法を変えることさえあります。

SvelteはJSXを使用しないため、作成する必要のあるコードの量を減らすだけでなく、HTMLからReactを使用することに伴う多くの違いを取り除きます。

フロントエンド開発に興味がある場合は、それを確認することを強くお勧めします。

https://svelte.dev/

最終的な考え

このウェブサイトは、私が約1年間取り組んできたものです。私は徐々にそれに取り組み、最終製品を作成するのに役立つアイデア、技術、テクノロジーを探しました。私が学んだ最も重要な教訓は、プロトタイピングの重要性であり、実際のユーザーに使用可能な製品を提供し、それとどのように相互作用するかを確認することでした。

将来的には、スクロールロックや遅延読み込みなどの生活の質の機能を追加することで、サイトをさらに拡張する予定ですが、今のところ、結果にはかなり満足しています。