デザインを
正確に再現します
Web Coder
YAMA’s Portfolio
SKILLS
実装スキル
-
無限斜めスライダー
左右に配置した要素が途切れずに流れ、画面に常に動きが残る構成にしています。視線が自然に横へ移り、待ちや引っかかりを感じにくい動きになるよう細かく整えました。速度や間隔は、内容の邪魔をしないことを最優先にしています。
-
ピン留め
スクロールに合わせて情報が切り替わる構成とし、操作に応じて内容が自然に更新されるよう実装しています。すべてを一度に見せず、必要な情報が順に現れる設計にすることで、読み進める負担を抑えました。構造と動きが分断されないよう、切り替えのタイミングを詰めています。
-
ローディングアニメーション
左右に分けた二つの要素が反対方向から入り、視線を中央へ集める動きを採用しています。派手さよりも、待ち時間のストレスを感じさせないことを重視し、動きのテンポを調整しました。読み込み中であることが直感的に伝わる構成を意識しています。
-
カーソル追従画像
リンクにホバーすると、関連する画像がカーソル付近に現れ、動きに合わせてなめらかに追従します。即座に反応させるのではなく、わずかな遅れを持たせることで、やわらかく自然な動きに整えました。
-
マウスストーカー
マウス操作への反応は、最小限の動きで表現しています。反応は返しつつも主張しすぎないことで、集中を妨げないことを優先しました。装飾ではなく、操作感を補助する役割として位置づけています。
-
カウントアップ
数値が変わる過程を滑らかに見せ、情報の変化を自然に理解できるようにしています。一瞬で切り替えず、途中を見せることで視線が留まりやすくなる点を意識しました。テンポは読み取りやすさを基準に整えています。
SERVICE
できること
-
コーディング
公開後の更新や軽微な修正を前提に、崩れにくく拡張しやすい実装を行います。デザインを再現するだけでなく、要素追加や差し替えが発生しても大きな手戻りが出ない構造を意識しています。制作途中や公開後も、あとから触る方が迷わない状態を整えます。
-
WordPress構築
運用や機能追加を見据えたテーマ構築を行います。更新箇所や管理画面の扱いやすさを整理し、特定の人に依存しない形で実装します。将来的な改修や引き継ぎもスムーズに行える構成を意識しています。
-
既存HPの修正
部分的な修正であっても、全体構造を把握したうえで対応します。影響範囲を見極めながら進めることで、直した箇所以外が崩れるリスクを防ぎます。場当たり的な修正ではなく、全体を踏まえた対応を行います。
使用言語
-
HTML
-
CSS
-
SCSS
-
JavaScript
-
jQuery
-
GSAP
-
PHP
使用ツール
-
Figma
-
Adobe XD
-
Photoshop
-
Illustrator
STRENGTHS
強み
仕様未確定段階での
進め方
SPデザインが未確定の場合でも、PCデザインや既存トンマナを基準に構成や見せ方を想定し、先行して対応します。方向性に影響する部分については、必ず確認を取りながら進めます。
判断範囲を分けて進める
実装
余白や文字サイズなど、ほかの箇所と比べて一部だけ異なる部分があれば、全体の整合性を見ながらこちらで判断し、調整して対応します。一方で、デザインの方向性に関わる変更や、判断が必要になる内容については、独断では進めません。想定できる選択肢と実装への影響を整理したうえで、ご相談しながら決めていきます。
引き継ぎを前提にした
進行
途中から参加する場合や、一部の工程のみを担当する場合でも支障が出にくいよう、進め方を意識しています。作業内容や判断の背景は、後から見返せる形で記録を残します。個人で完結させるのではなく、全体の流れに合わせて柔軟に対応します。