Pinned
【ご報告】
3月末をもって株式会社クリップを退職し、フリーランスとして独立いたします。
今後は、4WIDEとして活動していきます。
また、株式会社クリップとは外部パートナーとして、引き続き連携していきます。
ご依頼・ご相談など、お気軽にご連絡ください。
4wide.jp
00:00
Tomoya Okada
3,262 posts
Tomoya Okada
@__o_state
‘97 | Based in Aichi, Japan | 4WIDE | Web Creator
Joined January 2025
- 凄すぎて会社で話題になってました👀 個人制作モチベ上がったので、今年中に何か1つ作れたらいいなぁ貝印株式会社 デザイン部の特設サイトを 企画・制作しました。 刃物を中心とする117年間のものづくりで 育んだ美学を「触れる映像」で表現しました。 道具の使い心地を味わうように、 ぜひ画面を触ってお楽しみください。 kai-group.com/global/design/ AD: 林英和 TD: 岡部健二 @kenjiokabe .
00:00 - セクションに応じてドット絵が切り替わる演出が印象的👀 単純なクリップパスではなく、ドットとの親和性を感じさせる段上の切り替え方法がとても良いなと感じています！
00:00 - 🏷️GoogleFonts Previewサイト公開 .. GoogleFontを選択して、テキスト内容・サイズなどを調節しながらプレビューできるサイトを作りました。 デザインした文字サイズで実装してもらったら、「画面で見ると意外と文字サイズが大きかった、もしくは小さかった...」なんてことありませんか？
00:00 - 自作の制作補助サイトをまとめました。 少しでも制作のお役に立てれば幸いです。 .. ▼イージング確認・取得 ↪︎ easing.tomoyaokada.com ▼Google fonts Preview ↪︎ fonts.tomoyaokada.com ▼環境デバッグ ↪︎ debug.tomoyaokada.com ▼vh検証 ↪︎ verification-vh.vercel.app
- 【🏷️検証サイト】 vh,svh,dvh,lvhなどの挙動を確認できるサイトを作りました。おそらく既に世にはこういったサイトはあると思いますが、何かの役に立てば嬉しいです！ (ios26 Safariをどうにか攻略していきたい) ▼URL ↪︎ verification-vh.vercel.app
00:00 - イージング確認/取得サイト作りました⚙️ .. サクッとCSSに導入したい時に重宝できると思います！ 気に入ったものがあれば、cubic-bezier形式でコピーできます！ .. ▼URL ↪︎ easing.tomoyaokada.com
00:00 - デバッグ用サイトを作りました！⚙️ アクセスしたユーザーの各情報が確認できます。 「この環境だけバグがでる...」などの時に役立てば幸いです！ ※サムネイルの黒塗り部分に値が表示されます。 .. ▼URL ↪︎ debug.tomoyaokada.com
- 【デザインカンプ配布について】 .. 🏷️応募条件 このポストをRT&リプライ ※必ず規約などをご確認ください。 📝 詳細・利用規約などはこちら ↪︎ dot-push.com/media/kagu-des… 〆切は8/14まで！ 初学者・勉強中の方もぜひご応募ください！ .. #webデザイン
- 📃記事更新 .. 未経験からWeb制作を始めた方は沢山いると思います。私もその1人です。この記事は、未経験からWeb制作を始めた方や、Webデザインアワードに関心のある方の参考になればと思い、まとめました。 少しでも多くの方に届けられたら嬉しいです。
- 📝制作したサイトの見せ方について【事例付き】 .. 制作したサイトのスクショを撮ってそのまま掲載していませんか？ 実は、一手間加えるだけで更にサイトを綺麗に見せる事ができます👀 このポストでは代表的な4つの手法を紹介します！ .. 1. メイン画像 + 背景画像の構成にする
- デジタル感のある演出が実装されているサイト！ 昨今では、背景アニメーションに「流体」などリアルな質感のものが使用される機会が増えてきた印象です。 逆に今回のようなデジタルっぽさのあるものは、減ってきたように思えます。
00:00
