七索 : Webコーダー

建築設計→Web制作｜HTML｜CSS(Sass)｜JavaScript(jQuery)｜Wordpress｜Blender｜英語学習中｜2000｜名古屋→埼玉→m??｜二級建築士｜麻雀・旅行(44/47)・神社仏閣巡り・カメラ｜

[七索 : Webコーダー @7_so_zu]

デザフェス参戦🥷
やっぱりデザインって無限だな〜って感じる楽しい空間すぎた！！

これからはじめましての人と会う機会が若干増えそうな気もしているので、いいアイテムを仕入れられた…😏

↓戦利品

[七索 : Webコーダー @7_so_zu]

ひとまずわい完成👏👏

なにかのなにかは柄の一つ。
ポイントはしっかり盲牌できるように柄は凹凸になっている点。

こいつがいつかサイトに出現するかも⁇

いい気分転換になったなのでまた明日から↗︎↗︎

[七索 : Webコーダー @7_so_zu]

お久しぶりに。
なにかのなにか作成中。

[七索 : Webコーダー @7_so_zu]

七対狙ってたのに二暗刻になったときくらいワクワクしてきた😎

[七索 : Webコーダー @7_so_zu]

< −− 制作実績 −− >
本プロジェクトの実装を担当しました！

主にアニメーション実装を担当し、違和感を徹底的に排除した自然な動きを追求し、ユーザーの操作や視線の流れを妨げない、ストレスフリーなインタラクションに実装。

また、複数名での開発でもスムーズに進行できるよう、積極的にコミュニケーションを取り、齟齬が生じないよう徹底しました。

< −− PARTNER −− >
// Director
ユウセイ (@Aonagi_web) さん
// Designer
あお (@sakuao_Dz) さん
える (@hikichi_design) さん
// Coder
たくみ (@taku_kinacat) さん

[ユウセイ｜デザイン×コーディング @Aonagi_web]

【実績公開】
国内唯一のプラント防災コンサルティング会社「株式会社FPEC様」の公式サイトをフルリニューアルさせていただきました🏭🏭🏭

■URL：https://t.co/2o1NiyiK4n
■規模：58ページ
■期間：約3ヶ月
■担当：企画提案 / ディレクション / デザイン / 実装

複雑化していた旧システム（Joomla）を解体し、モダンなWordPress環境へ完全移行。全58ページに及ぶ情報設計、デザイン、多言語対応までチームで連携し一気通貫で制作しています💫

専門性の高い情報も一つひとつ噛み砕き、対話を重ねて再定義。現代にマッチしたモダンなデザインと、企業の「信頼」を可視化する導線設計を両立させました🌀

💡制作のこだわり
・複雑化した導線設計を一から再構築
・JoomlaからモダンなWordPress環境へ移行
・全ページ多言語対応（TranslatePress）
・最短ルートで目的へ導くナビゲーション
・カタログページにカート機能を実装
・専門性と信頼を両立したデザイン刷新

企業の顔を任せていただき、身の引き締まる想いでした！

#Web制作 #Webデザイン

[七索 : Webコーダー @7_so_zu]

@8760stories 👀

[七索 : Webコーダー @7_so_zu]

@oriehaaan パワー〜〜ーーーーー〜ー………

[七索 : Webコーダー @7_so_zu]

人生初秋田旅完👹

1日目は、温泉から始まりプリン号による送迎🧈🚗
(ゆるマニアックしりとりあり)
そしてもくもく会からの飲み会→スナック🎤
色々な初体験・みなさんのお人柄もあり、とても楽しいオフ会でした✨

2日目は久しぶりのがっつり建築巡り！
ずー〜〜〜ーーーっと行きたかった中嶋記念図書館にも行けたし、安藤建築・新居建築・谷口建築も探訪でき大満足！
麗な図書館と雑な図書館、対極な二つを同じ日に見れたのが個人的に最高に良かった・・・

これにて「47都道府県旅」も44/47を終え、残すはあと3県！！
今年中には制覇を💪
そして海外旅を解禁するんや！

[七索 : Webコーダー @7_so_zu]

@undot_7 よくご存知で！！
中嶋記念図書館の内観は実際に訪れてからのお楽しみです😎
控えめに言って最高でした。。。

[七索 : Webコーダー @7_so_zu]

フィグ・マエムシピーさんとカー・ソルくんに裏でベースをコーディングしてもらいつつ、自分はイラレカンプと格闘中🤛

自分がもう一人いる気持ちになりつつ、まだ練度が・・・
経験値まだ足りてないな。。
もっと一緒に戦って、パーティーの総合的な戦闘力上げな

それにしても新しいデザインツールは時間はかかりつつも刺激的ですな〜

[七索 : Webコーダー @7_so_zu]

ふと勉強し始めて、今日で1000日継続😎

これからはもっと加速させるために、さらに意図を持って学びながら方向性を変えていこう🏃‍♂️‍➡️

[七索 : Webコーダー @7_so_zu]

@sayuri_iradeza さゆりさん、あけてましたおめでとうございます〜🎍🎊

だじゃれんさが凄すぎてついていけないです笑

まだまだあげていきますよ〜ー🏋️🏋️🏋️
今年もよろしくお願いします🀄️

[七索 : Webコーダー @7_so_zu]

GsapのscrollTriggerでstartで設定した位置が途中からずれる事象が発生。

【-- 原因 --】
画像を囲うdivタグに「max-width: max-content;」を付与していた。
max-contentやfit-contentはその要素に直接的にアニメーションを付与しているかに関わらずstart位置の計算でずれが起きやすい。

ずれが生じるタイミングに関しては768pxで画像とテキストが横並びから縦並びになるタイミングのため、一概に768px前後でズレるのではなく、レイアウトが変わるタイミングが正しいと思う。
今回はたまたま768pxでレイアウトが変わったからそれに伴って、startで設定した位置がずれた。

画像は読み込み方が少し特殊?
imgタグは画像をロードするまで画像のスペースは0になる。
横並びの時は、画像が遅れて読み込まれてもテキスト分の高さが存在する(テキスト部分高さ≧画像高さ)ためstartで設定した位置がずれなかった。
ただ縦並びになると画像部分の高さがなかったこと(画像20px+テキスト20px→画像0px+テキスト20px)になってしまい、startで設定した位置を計算する際にずれが生じた。

【-- 改善 --】
「max-width: 100%;」に変更で改善。

【-- 原因解明方法 --】
Gsapのスペルミスや構文のミスがないかAIも使い確認
　↓
setTimeoutやrefreshを使い計算のタイミングをずらしてみるが改善なし
　↓
scrollTriggerで指定したクラス周りのHTMLやCSSを見直す
　↓
アニメーションに関係ない部分をコメントアウトで一個ずつ消していくローラー作戦で原因がありそうな部分のHTMLを特定
　↓
(aspect-ratioやimgタグのwidth属性とheight属性は指定していた)
　↓
画像によるレイアウトシフトによってズレる可能性があることを聞き、特定したHTML内で画像周りのCSSを修正

そもそもなんで普段あまり使わないmax-width: max-content;を使っていたんや・・？
でも普段使わない指定をしたおかげでこの工程が生まれて、またレベルが上がってしまった😎
#DailyAnimation

[七索 : Webコーダー @7_so_zu]

@hiromu_wbung オタクネタ大歓迎です🫶
楽しみにしてます！！

[七索 : Webコーダー @7_so_zu]

最近ずっとイージングがなぁ〜と思っていたところ、イージングについて感覚的に気持ちいいを言語化して説明されていて、タイムリーすぎて超絶感動したのとともに腑に落ちるところが多すぎた・・・

ひろむさんのアニメーションはイージングに違和感が一切なくて気持ち良すぎるな(上から目線とかではなく純度100%の尊敬の意)と思えていたのはこういうことだったのかと。。

他のメインどころのコンテンツをすっ飛ばして見入ってしまったので、メインどころは年末年始にじっくりやっていこう、楽しみや〜ー

[ひろむ | 提案オタク @hiromu_wbung]

【講座公開いたします！】

Webアニメーションを武器に、
「楽しさ」と「収入」を両立させるための講座です

公開タイミングがズレてしまったので、
割引期間は少し長めに
【2025/12/26 23:59まで】にしています🙌

詳細は下記からご確認ください！！
https://t.co/7AePrCbxKu

[七索 : Webコーダー @7_so_zu]

@megn_342 megさん、ありがとうございます！
こういう動きのヒントは意外と日常生活に潜んでいたりするので、普段の生活の中でこの動き使えそうだな〜とか考えるのも楽しいですよ✨

[七索 : Webコーダー @7_so_zu]

@naga_design ありがとうございます〜

追加しても破綻しない設計にしているので気が向いたら是非！

もう間も無くです👀

[七索 : Webコーダー @7_so_zu]

ちょっと実験。

swiper使ってやれば実装自体は容易な気もするけど、ページネーションやprev/nextボタンがないデザイン。

重要なセクションなだけに、ページネーションやprev/nextボタンなしswiperだと他の実績がスクロールで通過されてしまうのではないかと懸念。

ページネーションやprev/nextボタンがあったほうがいいのではと提案するのも一つの手な気もするが、少し違うアプローチ。
(このサイト全体の雰囲気にページネーションやprev/nextボタンはないほうがスタイリッシュで合うと思ったし、こう実装するのを見透かされているまである)

目に留まるようにGsapを使って強制横スクロールで、スクロールに合わせて実績の拡大縮小・透明度変化。
#DailyAnimation

[七索 : Webコーダー @7_so_zu]

@Naomidesign123 なおみさん、ありがとございます！
こだわりの扉です🚪

[七索 : Webコーダー @7_so_zu]

建築系なので、建築に紐つくアニメーションを思考。

扉は引き戸よりも開き戸のほうが日常生活では馴染みがあるし、以前引き戸を作ったこともあり別案を作成。

アローアイコンをドアノブに見立て、扉（背景色）が奥に開くように実装。
ボーダーを二重でかけることによって、ドア枠を表現し、よりリアルな扉感を演出。

文字はあえて扉には追従しないことによって視認性をごくわずかながら上げる。
文字追従の有無は個人的な好みの割合が増えてしまうような気もする・・

(うーむ、ただもうちょい・・)
#DailyAnimation