ポートフォリオの紹介
https://takujiito.github.io/Portfolio/
【自分の世界観をWEBサイトとして表現】
アイデアを0から形にするをテーマに、自分の好きな世界観を表現しようと考えました。
凝った世界観だからこそ、デザインやインタラクティブ面が高クオリティーでなければ破綻してしまう。
それが高難易度な制作となり、自分への課題・やりがいになると考え、チャレンジ精神からこのような作風に挑戦しました。
一般的なLPより工程が多く、未経験ではまず挑戦しない高難易度のポートフォリオに仕上げたと自負しています。特に以下の点に挑戦しました。
☆コンセプトに沿ったデザイン、UI設計、ユーザー体験の構築
☆オリジナルのSVGを用いた、高度なアニメーション表現
☆他サイトでは見られない演出、独自スクリプトの実装
結果、殆どの要素がオリジナル設計になり、AIを活用しつつ試行錯誤を繰り返して完成させました。
これらの経験により、デザイン～コーディングまでの課題解決力・自走力を大きく伸ばすことができ、ユーザーを自然に引き込むサイト設計力も磨かれました。
【弱さをユーザー体験へ変える】
制作物紹介するセクションでは、模写サイトしか実績がないので、世界観に対して弱いと感じました。
そこで、サムネにカーソルを合わせるだけで説明文とサイト画像が切り替わる演出を設計し、模写のみの弱さをユーザー体験に昇華させました。
//WORKセクション テキスト & 画像 フェード切替
const originalTitle = $('.site-title').html();
const originalText = $('.site-text').html();
function fadeSwitch($el, newContent, isHtml = false) {
$el.stop(true, true).fadeOut(200, function () {
if ($el.is('img')) {
$el.attr('src', newContent);
} else if (isHtml) {
$el.html(newContent);
} else {
$el.text(newContent);
}
$el.fadeIn(400);
});
}
$('.site-thumbnails li').on('mouseenter', function () {
const $this = $(this);
const desktopImg = $this.data('img-desktop');
const responsiveImg = $this.data('img-responsive');
const title = $this.data('title');
const text = $this.data('text')?.replace(/\n/g, '<br>');
if (desktopImg) {
fadeSwitch($('.desktop-img'), desktopImg);
}
if (responsiveImg) {
fadeSwitch($('.responsive-img'), responsiveImg);
}
if (title) {
fadeSwitch($('.site-title'), title);
}
if (text) {
fadeSwitch($('.site-text'), text, true);
}
});
$('.site-thumbnails').on('mouseleave', function () {
fadeSwitch($('.site-title'), originalTitle);
fadeSwitch($('.site-text'), originalText, true);
});【こだわったSVGアニメーション】
既存サイトで見かけたパスに沿って線が走るアニメーションを自分でも再現してみたく、SVGアニメーションにも挑戦しました。
例えば＜HTML＞のアイコン１つが、以下の要素から構成されています。
・fill用パス（黒い背景）
・stroke用パス（発光前の枠線）
・glow用パス（光が走るように見える線）上下2本
・文字
計4レイヤーのインラインSVG構成とし、stroke-dasharray / stroke-dashoffset を用いたCSSでの時間差アニメーションを制御しています。
各パーツには共通クラスを付与しており、色や速度調整などCSS側で一括でコントロールできる構成にしています。
<!-- アイコンHTML -->
<svg class="skill-word skill1" viewBox="0 0 290 80" xmlns="http://www.w3.org/2000/svg">
<path class="skill-fill" d="M255 10L280 40L255 70H35L10 40L35 10H255Z" fill="black" opacity="0.6" />
<path class="skill-stroke" d="M10 40 L35 10 L255 10 L280 40 L255 70 L35 70 L10 40 Z" fill="none"
stroke="white" stroke-width="2" />
<path class="glow-top glow1" d="M10 40 L35 10 L255 10 L280 40" fill="none" stroke="red" stroke-width="2"
stroke-dasharray="400" stroke-dashoffset="400" />
<path class="glow-bottom glow1" d="M10 40 L35 70 L255 70 L280 40" fill="none" stroke="red"
stroke-width="2" stroke-dasharray="400" stroke-dashoffset="400" />ーー
<text class="skill-text text1" x="50%" y="50%" dy="0.1rem" text-anchor="middle"
dominant-baseline="middle">
HTML
</text>
</svg>
