Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

【2026年賀状サイト】社内プロジェクトで年賀状サイトを制作しました。私は、コンセプト設計・デザイン制作・サイト実装を担当しています。馬の群れで行動する習性に着目して、「午」が集まり様々な文字に変化していく様子をWeb上で表現しています🐎 ▼URL ↪︎

Tomoya Okada

3,628 subscribers

10,278 views • 6 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

以前お知らせしていて、レスポンシブ実装のサンプル集サイトを公開しました。 Webサイト制作のプロジェクトにおいて、レスポンシブの仕様のすり合わせは、口頭やテキストベースコミュニケーションはなにより、デザインカンプがあってたとしても実際に挙動を確認しないと難しいと常々感じていました。それを打破するためにこのサイトを制作しました。同じコンテンツを4つの実装方法で見せることにより、違いを確認しながら仕様を検討できます。また、「解説モード」なるものもつけてみました。各要素やセクションに詳細の解説をつけています。画面収録だともたついてわかりにくいんですが、右下にブレイクポイントのインジケータもつけていて、いまどの状態なのかを確認もできます。はじめは個人用に制作するつもりでしたが、使ってみたいという声をちらほら頂いたので、公開することにしました。 Webサイト制作のプロジェクトのコミュニケーションツールとしてお役に立てたら嬉しいです。初学者の方もどういう実装の方法があるのかを学習できるサイトにもなっております。ぜひご活用ください。

以前お知らせしていて、レスポンシブ実装のサンプル集サイトを公開しました。 Webサイト制作のプロジェクトにおいて、レスポンシブの仕様のすり合わせは、口頭やテキストベースコミュニケーションはなにより、デザインカンプがあってたとしても実際に挙動を確認しないと難しいと常々感じていました。それを打破するためにこのサイトを制作しました。同じコンテンツを4つの実装方法で見せることにより、違いを確認しながら仕様を検討できます。また、「解説モード」なるものもつけてみました。各要素やセクションに詳細の解説をつけています。画面収録だともたついてわかりにくいんですが、右下にブレイクポイントのインジケータもつけていて、いまどの状態なのかを確認もできます。はじめは個人用に制作するつもりでしたが、使ってみたいという声をちらほら頂いたので、公開することにしました。 Webサイト制作のプロジェクトのコミュニケーションツールとしてお役に立てたら嬉しいです。初学者の方もどういう実装の方法があるのかを学習できるサイトにもなっております。ぜひご活用ください。

Takumi HASEGAWA (unshift Inc.)

178,200 views • 2 years ago

非常勤講師をしていた文化服装学院 FPコースの卒業制作サイトをルナさんがデザインしました！同校卒業生でもあるルナさん。担当クラスのらしさをいい感じに表現してくれました。講師は今年で退任しますが、最後に良いプレゼントになったのでは。 #StudioChallenge_Loop

非常勤講師をしていた文化服装学院 FPコースの卒業制作サイトをルナさんがデザインしました！同校卒業生でもあるルナさん。担当クラスのらしさをいい感じに表現してくれました。講師は今年で退任しますが、最後に良いプレゼントになったのでは。 #StudioChallenge_Loop

犬飼崇｜NEWTOWN

101,042 views • 4 months ago

【お知らせ】 WEBサイトをリニューアルしました💥 コンセプトメイクからデザイン〜実装まで、boko さんに制作していただきました。サウンドUIは SKYTOPIA さんです。使うごとに愛着が湧く、拡張性の高いツールのようなサイトを作っていただきました！

【お知らせ】 WEBサイトをリニューアルしました💥 コンセプトメイクからデザイン〜実装まで、boko さんに制作していただきました。サウンドUIは SKYTOPIA さんです。使うごとに愛着が湧く、拡張性の高いツールのようなサイトを作っていただきました！

田村育歩 / TAMURA Ikuho

13,633 views • 2 months ago

(New Case) 1年ぶりにポートフォリオサイトをリニューアルしました。事業サイトとは役割を分け、自主制作と写真を管理する場として構成しています。一覧性を重視し、制作物などを記録しやすい設計としています。そして、これを機にVercelからCloudflareに移行しました。

(New Case) 1年ぶりにポートフォリオサイトをリニューアルしました。事業サイトとは役割を分け、自主制作と写真を管理する場として構成しています。一覧性を重視し、制作物などを記録しやすい設計としています。そして、これを機にVercelからCloudflareに移行しました。

Tomoya Okada

16,601 views • 1 month ago

Codex、、、これはダメやろ！！！既存サイトのURL渡して「完全再現して」って言ったら、画像生成フル活用しつつ、Codex自身がサイトをスクショ撮って、Higgsfieldを完コピしてきやがりました… ただ、他社サイトをコピーして、、、ってよくないけど、参考にしたいUI/UXがあれば、Codexで一瞬で作れてしまいますわな！ ※さすがにそのまま掲載するのはまずいので、名前とデザインを少しだけ変更して作成👇

Codex、、、これはダメやろ！！！既存サイトのURL渡して「完全再現して」って言ったら、画像生成フル活用しつつ、Codex自身がサイトをスクショ撮って、Higgsfieldを完コピしてきやがりました… ただ、他社サイトをコピーして、、、ってよくないけど、参考にしたいUI/UXがあれば、Codexで一瞬で作れてしまいますわな！ ※さすがにそのまま掲載するのはまずいので、名前とデザインを少しだけ変更して作成👇

mana｜株式会社MakeAI CEO

243,905 views • 2 months ago

事務サービスのプロフェッショナルを目指して SOMPOビジネスサービス株式会社さまの採用サイトのリニューアルをお手伝いしました。仕事環境や働き方、福利厚生など、採用におけるポイントを分かりやすく伝えるサイトになっています。neccoでは、情報設計、デザイン、実装まで担当しました🎉

事務サービスのプロフェッショナルを目指して SOMPOビジネスサービス株式会社さまの採用サイトのリニューアルをお手伝いしました。仕事環境や働き方、福利厚生など、採用におけるポイントを分かりやすく伝えるサイトになっています。neccoでは、情報設計、デザイン、実装まで担当しました🎉

necco inc.

40,717 views • 3 months ago

【祝!! RTお願いします！】本をつくる印刷屋､15年ぶりにWEBリニューアルしました！受注産業･クライアントワークが生業の私たちですが、70年やってこれたのは、間違いなくお客様のおかげです。そのすばらしい印刷物という作品を見ていただきたく、WEBサイトをフルモデルチェンジをしました。オンタイムでも見れるしオフタイムも見たくなる、いつでも寄り添えるサイトを目指しました！

【祝!! RTお願いします！】本をつくる印刷屋､15年ぶりにWEBリニューアルしました！受注産業･クライアントワークが生業の私たちですが、70年やってこれたのは、間違いなくお客様のおかげです。そのすばらしい印刷物という作品を見ていただきたく、WEBサイトをフルモデルチェンジをしました。オンタイムでも見れるしオフタイムも見たくなる、いつでも寄り添えるサイトを目指しました！

藤原隆充 | 藤原印刷（兄）

89,700 views • 1 year ago

【お知らせ】ポートフォリオWebサイトを作成しました！！過去に担当させていただいた制作物や制作フローを記載しています。

【お知らせ】ポートフォリオWebサイトを作成しました！！過去に担当させていただいた制作物や制作フローを記載しています。

ナカノ

17,876 views • 3 months ago

【制作事例】難波宮公園の新しい商業施設「なノにわ」のWebサイトを制作しました。人々が楽しむ賑やかな様子をイラストとアニメーションで表現、歴史的な場所である特性を活かし現代から過去へタイムスリップするような演出をしています。

【制作事例】難波宮公園の新しい商業施設「なノにわ」のWebサイトを制作しました。人々が楽しむ賑やかな様子をイラストとアニメーションで表現、歴史的な場所である特性を活かし現代から過去へタイムスリップするような演出をしています。

STARRYWORKS inc.

48,572 views • 1 year ago

【トヨタファイナンス様デザインチームサイト】既存の金融機関とは一線を画したモビリティー金融サービスの提供を目指し、自由で便利な移動体験の実現を支援しているトヨタファイナンスデザインチームのWebサイトを制作しました。STUDIOを使って実装しています。

【トヨタファイナンス様デザインチームサイト】既存の金融機関とは一線を画したモビリティー金融サービスの提供を目指し、自由で便利な移動体験の実現を支援しているトヨタファイナンスデザインチームのWebサイトを制作しました。STUDIOを使って実装しています。

STUDIO DETAILS Inc. / スタジオディテイルズ

425,095 views • 2 years ago

国内のWeb制作に関わる人が全員見ると言われているギャラリーサイト S5-Style (Webデザイン｢ひとこと紹介｣) がサービスサイトとして生まれ変わりました。大変光栄なことにそのS5-Styleのリニューアルプロジェクトにおいて、フロントエンドの実装を担当させていただきました。サービスサイトとしての使いやすさはもちろんのこと、田渕さん (田渕将吾 (Shogo Tabuchi))が作るサイトということで美しさを損なわないように、UI周りの動きは丁寧に実装しました。リニューアル前とは異なり、ユーザーがS5−Styleに掲載するサイトを登録することもできるんですが、今回は「Good Web Design」という概念があり、これはS5-Styleに登録されているサイトの中でも田渕さんが特に良いと思ったサイトが「Good Web Design」なサイトとして掲載される形になります (リニューアル前の掲載サイトと同じ扱い)。また、「Design Set」というブックマークをまとめておけるフォルダを作ることができ、他のユーザーが作ったDesign Setをフォローすることもできます。フリーミアムなプラン展開となっておりまして、無料のBasicプランでは1ユーザーが作成できるDesign Setが2つまでとなっています (※他にも制限あり) が、無料でお手軽に使い始めることができます。Proプランにアップグレードすることで、制限がすべてなくなるので、ガッツリ活用したい方はぜひ。 #s5style #nextjs

国内のWeb制作に関わる人が全員見ると言われているギャラリーサイト S5-Style (Webデザイン｢ひとこと紹介｣) がサービスサイトとして生まれ変わりました。大変光栄なことにそのS5-Styleのリニューアルプロジェクトにおいて、フロントエンドの実装を担当させていただきました。サービスサイトとしての使いやすさはもちろんのこと、田渕さん (田渕将吾 (Shogo Tabuchi))が作るサイトということで美しさを損なわないように、UI周りの動きは丁寧に実装しました。リニューアル前とは異なり、ユーザーがS5−Styleに掲載するサイトを登録することもできるんですが、今回は「Good Web Design」という概念があり、これはS5-Styleに登録されているサイトの中でも田渕さんが特に良いと思ったサイトが「Good Web Design」なサイトとして掲載される形になります (リニューアル前の掲載サイトと同じ扱い)。また、「Design Set」というブックマークをまとめておけるフォルダを作ることができ、他のユーザーが作ったDesign Setをフォローすることもできます。フリーミアムなプラン展開となっておりまして、無料のBasicプランでは1ユーザーが作成できるDesign Setが2つまでとなっています (※他にも制限あり) が、無料でお手軽に使い始めることができます。Proプランにアップグレードすることで、制限がすべてなくなるので、ガッツリ活用したい方はぜひ。 #s5style #nextjs

Takumi HASEGAWA (unshift Inc.)

27,579 views • 1 year ago

【Studioで初のテレビCMを公開📺】 11月16日から福岡限定でテレビCMを放映します！先行して関西では11月4日からタクシーとTVerにてCMを放映しています。今回のCMは、Webサイトの担当者が日々の業務で直面しているWebサイト制作の難しさをユーモアを加えて表現しつつ、そういった課題をStudioなら解決できることを描いています。

【Studioで初のテレビCMを公開📺】 11月16日から福岡限定でテレビCMを放映します！先行して関西では11月4日からタクシーとTVerにてCMを放映しています。今回のCMは、Webサイトの担当者が日々の業務で直面しているWebサイト制作の難しさをユーモアを加えて表現しつつ、そういった課題をStudioなら解決できることを描いています。

Studio | Web制作を、ノーコードで。

89,539 views • 1 year ago

「Portfolio Site / ポートフォリオサイト」的な自分のサイトを制作しました！👾 MediaPipe × WebGL（Three.js）を使い、 TouchDesigner のように「指のハンド操作」でクリックやスクロールができるインタラクティブな Web サイトです。 Webサイトにおける次世代UXの1つとして、どう表現できるかに挑戦しました。（もちろん、普通のWebサイトとしても閲覧できます！）たくさんの人に見て触って体験してもらえると嬉しいです！🙌 URL: #webgl #threejs #touchdesigner #mediapipe #blender

「Portfolio Site / ポートフォリオサイト」的な自分のサイトを制作しました！👾 MediaPipe × WebGL（Three.js）を使い、 TouchDesigner のように「指のハンド操作」でクリックやスクロールができるインタラクティブな Web サイトです。 Webサイトにおける次世代UXの1つとして、どう表現できるかに挑戦しました。（もちろん、普通のWebサイトとしても閲覧できます！）たくさんの人に見て触って体験してもらえると嬉しいです！🙌 URL: #webgl #threejs #touchdesigner #mediapipe #blender

Shoya Kajita

87,947 views • 6 months ago

内装仕上げ工事を行う「NINE-C（ナインシー）」さまのWebサイトを制作させていただきました。お客さまに満足いただける価値を常に考え、行動し続けるNINE-Cさまの前向きで力強い姿勢を言葉で表現しました。また、Webサイトの特徴であるアニメーションを豊富に取り入れたデザインとすることで、挑戦心を感じることができるデザインを目指しました。

内装仕上げ工事を行う「NINE-C（ナインシー）」さまのWebサイトを制作させていただきました。お客さまに満足いただける価値を常に考え、行動し続けるNINE-Cさまの前向きで力強い姿勢を言葉で表現しました。また、Webサイトの特徴であるアニメーションを豊富に取り入れたデザインとすることで、挑戦心を感じることができるデザインを目指しました。

spicato Inc.

12,276 views • 1 year ago

spicatoさんのコーポレートサイトリニューアルプロジェクトにおいて、テクニカルディレクションとフロントエンドの実装を担当いたしました。まずデザインを初めてみたときに「ああ〜かわいい〜」となり、実装しながらもずっと「ああ〜かわいい〜」となっていました。こんなspicatoさんらしい素敵なサイト制作に携われて大変うれしいです！

spicatoさんのコーポレートサイトリニューアルプロジェクトにおいて、テクニカルディレクションとフロントエンドの実装を担当いたしました。まずデザインを初めてみたときに「ああ〜かわいい〜」となり、実装しながらもずっと「ああ〜かわいい〜」となっていました。こんなspicatoさんらしい素敵なサイト制作に携われて大変うれしいです！

Takumi HASEGAWA (unshift Inc.)

27,208 views • 1 year ago

Claude codeでちまちまと、チャットのみで作ったポートフォリオサイトがほぼ完成しました💻 わたしは指示だけだして家事をしたり寝ているあいだに好みのサイトができている未来に感動してます...実際のサイトも可愛いので見てもらえたら嬉しいです:

Claude codeでちまちまと、チャットのみで作ったポートフォリオサイトがほぼ完成しました💻 わたしは指示だけだして家事をしたり寝ているあいだに好みのサイトができている未来に感動してます...実際のサイトも可愛いので見てもらえたら嬉しいです:

古性のち

105,997 views • 2 months ago

【文字のアニメーション100選】 Webサイトに動きが欲しい。でも、何て指示すれば良いの？そんな疑問を解決するサイトを作りました。アニメーション名・デモ・コードコピーを100個掲載しています。もうアニメーションを指示する際に迷うことはなくなると思います。（100個から1個を選ぶ大変さはあるかもw）私の公式サイト（プロフィールに記載）のToolページに追加予定。ぜひブックマークをしてお待ちいただけると幸いです。お楽しみに。（今後も続々とちょっと便利なサイトを公開していきます🧰）

【文字のアニメーション100選】 Webサイトに動きが欲しい。でも、何て指示すれば良いの？そんな疑問を解決するサイトを作りました。アニメーション名・デモ・コードコピーを100個掲載しています。もうアニメーションを指示する際に迷うことはなくなると思います。（100個から1個を選ぶ大変さはあるかもw）私の公式サイト（プロフィールに記載）のToolページに追加予定。ぜひブックマークをしてお待ちいただけると幸いです。お楽しみに。（今後も続々とちょっと便利なサイトを公開していきます🧰）

KAWAI

145,781 views • 5 months ago

当サイト＆アカウントは、長谷川あかりさんのレシピが大好きな妻からの、「色んなサイトにレシピが掲載されていて探しにくい…」という悩みを解決するべく、エンジニアの私が作ったまとめサイトです。随時アップデートしていきますので、よろしくお願いいたします！

当サイト＆アカウントは、長谷川あかりさんのレシピが大好きな妻からの、「色んなサイトにレシピが掲載されていて探しにくい…」という悩みを解決するべく、エンジニアの私が作ったまとめサイトです。随時アップデートしていきますので、よろしくお願いいたします！

長谷川あかりさんのレシピまとめ

3,063,339 views • 2 months ago

株式会社アールビーズの創業50周年記念プロジェクトにおいて、株式会社カヤックさまを通じて記念Webサイトのデザイン・実装を担当いたしました。月刊『ランナーズ』・ランニングポータルサイト「RUNNET」を展開する株式会社アールビーズの歩みや、記念キャラクター・スローガン・各種コンテンツを楽しく伝える構成を設計。キャラクターやコンセプトを活かした世界観をStudioで構築し、ポップなイラストに連動したリズミカルなアニメーションで実装しました。サイト体験を通じて「走る楽しさ」と50年の歴史が自然に伝わるストーリーとし、公開後は月間約15,000PVを記録するなど、多くのランナーの来訪につながりました。

株式会社アールビーズの創業50周年記念プロジェクトにおいて、株式会社カヤックさまを通じて記念Webサイトのデザイン・実装を担当いたしました。月刊『ランナーズ』・ランニングポータルサイト「RUNNET」を展開する株式会社アールビーズの歩みや、記念キャラクター・スローガン・各種コンテンツを楽しく伝える構成を設計。キャラクターやコンセプトを活かした世界観をStudioで構築し、ポップなイラストに連動したリズミカルなアニメーションで実装しました。サイト体験を通じて「走る楽しさ」と50年の歴史が自然に伝わるストーリーとし、公開後は月間約15,000PVを記録するなど、多くのランナーの来訪につながりました。

spicato Inc.

14,130 views • 4 months ago