数あるポートフォリオの中から、ご覧いただきありがとうございます。
Webコーダーとして活動している、中島拓矢です。週に70時間程度稼働しています。
<aside>
Webコーダー
**居住地：**京都府
**稼働時間：**平日・土日祝日8:00~19:00
メール：info@webcreator-n-takuya.com
SNS：X(旧Twitter)
</aside>
※下に「最新の制作実績アニメーション実装例」や「実現可能アニメーション」も載せております。
＊サイト制作時のポイントは以下に記述しています。 ＊ユーザーに優しい設計にし、アニメーションにもこだわって制作しています。是非ご覧ください。
<aside>
●サイト情報
【URL】https://webcreator-n-takuya.com/wakaba/
【Basic認証】ID：demo Pass：demo
【制作期間】：約1週間
【使用言語/ツール】CSS / JavaScript / jQuery / GSAP
【担当範囲】コーディング
</aside>
<aside>
FV%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.gif)
FV部分は、アニメーションの指定が複数あり、ひとつひとつ出現するタイミングを確認しながら実装しました。ユーザーが待たされているという感覚がないよう、2秒以内で表示されるように調整しています。更に、ボタンやボタン上テキストに、ユーザーの目を引くような動きも実装しております。
</aside>
<aside>
Tab%E3%82%AD%E3%83%BC%E6%93%8D%E4%BD%9C%E3%82%A2%E3%83%8B%E3%83%A1.gif)
キーボードを使用するユーザーであっても、Tabキーの操作で選択箇所が**「ひと目見て分かる」**ように、ボーダーやアウトライン、opacity等を調整することで、ユーザーに優しい操作設計にしています。お問い合わせフォームには、必須項目にバリデーション機能を実装しています。利用者が入力内容のミスにもすぐに気付けるような工夫を凝らしています。
【補足】動画はChromeで操作している様子です。Chrome標準のアウトラインが無くても、選択箇所が伝わるように制作しています。
</aside>
<aside>
%E6%99%82%E9%96%93%E5%B7%AE%E3%83%95%E3%82%A7%E3%83%BC%E3%83%88%E3%82%99%E3%82%A4%E3%83%B3%E8%A1%A8%E7%A4%BA%E5%8E%9F%E6%9C%AC.gif)
.gif)
必要箇所に、コンテンツが画面内に入ってきた時にフェードイン表示するよう実装しています。JavaScriptを用いて、フェードインのタイミングを調整し、視線誘導をする効果もあります。PC表示では時間差を維持する一方で、SP表示では時間差だとユーザーにとって見づらい表現となってしまうため、入ってきたコンテンツごとにフェードイン表示する工夫をしています。
</aside>
※ 最新の制作で使用したアニメーションは、以下に整理しています。
FV%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.gif)
時間差出現アニメーション
%E6%99%82%E9%96%93%E5%B7%AE%E3%83%95%E3%82%A7%E3%83%BC%E3%83%88%E3%82%99%E3%82%A4%E3%83%B3%E8%A1%A8%E7%A4%BA%E5%8E%9F%E6%9C%AC.gif)
左からフェードイン
%E8%83%8C%E6%99%AF%E3%83%8F%E3%82%9A%E3%83%A9%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B9.gif)
背景パララックス
%E3%82%B5%E3%82%A4%E3%83%88%E3%82%99%E5%9B%BA%E5%AE%9A%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB.gif)
サイド固定スクロール
%E3%82%B9%E3%83%A9%E3%82%A4%E3%82%BF%E3%82%99%E3%83%BC.gif)
スライダー