TKROH’S PORTFOLIO

【プロジェクトの背景】

　これまで多くの案件に携わってきたものの、それらを体系的に整理し、効果的にアピールする場がありませんでした。案件ごとに異なるスタイルでデザインを行うため、統一感を持たせながら個々の作品が引き立つようなレイアウトを追求しました。また、Webデザイナーとしてのブランディングも重要であり、単なる実績紹介ではなく、「デザインのこだわりや技術力」を視覚的に伝えるサイトが必要でした。

　モダンな雰囲気を持たせつつ、作品の画像が際立つデザインを実現するため、無彩色を基調にしたカラースキームを採用しました。ただし、シンプルすぎると無機質な印象になってしまうため、背景にモルタル調の質感を取り入れることを決めました。私自身がモルタル調のデザインが好きということもあり、これをWeb上で再現することに挑戦しました。

　また、ポートフォリオはデザイン性だけでなく、閲覧者がストレスなく操作できることも重要です。そのため、情報を整理し、直感的にナビゲートできる構成を考える必要がありました。特に、クライアント様が実績をスムーズに確認できるよう、作品ページの導線を意識したデザイン設計を行いました。

【担当業務】

• デザイン作成
• サイト作成

【制作年月】

2025年2月

【工夫したポイント】

　サイトの印象を左右するアニメーションには特にこだわり、視線を自然に誘導するための動きを入念に設計しました。単なるフェードインではなく、各要素がページにダイナミックに溶け込むような演出を施しました。

・タイトルが左右からフェードインし、視線を集める構造
・「TKROH’S PORTFOLIO WEB DESIGNER」のテキストをスクロールさせ、動きのあるブランディングを実現
・各セクションが左右からスライドインし、リズム感のある流れを作る
・コンテンツ部分は下からフェードインし、ストレスなく情報を取得できるように工夫

　また、グローバルナビゲーションの配置にも配慮しました。通常、PCサイトではナビゲーションをヘッダーに固定することが多いですが、デザインの一体感を損なわないよう、PCでもハンバーガーメニューを採用。これにより、メニューの存在感を抑えつつ、必要なときに素早くアクセスできる仕様にしました。

　さらに、大画面ディスプレイの普及に伴い、2560px以上のディスプレイでも適切なレイアウトを維持できるように調整。当初は1920pxを基準に設計していましたが、大画面では余白が広がりすぎてしまうため、各セクションのコンテンツ幅や配置を柔軟に変更できるようレスポンシブデザインを強化しました。

　最も苦労したのは、動きのあるデザインとパフォーマンスの両立です。アニメーションや背景表現を多用すると、サイトの読み込み速度が低下し、ユーザビリティを損なうリスクがあります。そのため、不要なリソースの削減や、画像の最適化を徹底し、視覚的なインパクトとスムーズな動作を両立させました。

　特に、モルタル調の再現には想像以上に苦労しました。静的な背景画像を使わずに、CSSとJavaScriptのみでモルタルの質感を表現したかったため、さまざまなアプローチを試しました。単純にノイズを加えるだけでは、平坦な印象になってしまい、リアルな質感を出すことができませんでした。試行錯誤の末、CSSのグラデーションとノイズテクスチャを組み合わせ、JavaScriptでランダムな動きを加えることで、モルタル特有の微妙なムラや奥行きを再現することに成功しました。さらに、わずかに動きを持たせることで、サイト全体に静的すぎない柔らかな躍動感を与え、モダンで洗練された印象を演出しました。

　結果として、作品の魅力を最大限に引き出しながら、スムーズで洗練されたポートフォリオサイトが完成しました。単なる作品紹介ではなく、閲覧者にデザインの意図やこだわりがしっかり伝わるよう設計したことが、最大のポイントです。