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 • 8 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,355 views • 2 years ago

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

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

犬飼崇｜NEWTOWN

101,042 views • 6 months ago

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

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

田村育歩 / TAMURA Ikuho

13,633 views • 4 months ago

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

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

Tomoya Okada

16,601 views • 2 months ago

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

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

mana｜株式会社MakeAI CEO

254,530 views • 4 months ago

東京舞台芸術祭のWebサイトを制作しました。4つの催しを軸としてプログラムを一覧で見ることができる。身体性や感情のエネルギーを表す円が広がる動きをサイトの動きの基調としています。告知画像を入れたビジュアルにして更新されると印象が変わるようなWebらしい見え方。VIはNEWが制作しています。

東京舞台芸術祭のWebサイトを制作しました。4つの催しを軸としてプログラムを一覧で見ることができる。身体性や感情のエネルギーを表す円が広がる動きをサイトの動きの基調としています。告知画像を入れたビジュアルにして更新されると印象が変わるようなWebらしい見え方。VIはNEWが制作しています。

shianbrown

28,631 views • 1 month ago

【制作実績】リニューアルを担当させていただいた、麺処「にぼし香」さまの公式サイトが公開となりました🍜 サイト設計・デザイン・STUDIOでの実装まで、まるっとお任せいただきました✨ ▶︎ 今回のリニューアルの目的は、ブランドのコンセプトやこだわりを打ち出し、お店自体のファンを増やすこと。コンセプトである、江戸時代から庶民に愛されてきた“煮干し”や“蕎麦前文化”の継承、そして高級寿司屋のような「質の高さ」と「品のある佇まい」。こうした点をサイトから感じていただけるようデザイン設計を行いました。もちろん見た目だけでなく、競合リサーチを踏まえたサイト・コンテンツ設計も重要視し、制作を進めています。 STUDIOを使用した実装面では、パララックスを活用することで江戸の町にあかりが灯るような世界観を表現🏮。テキスト部分を照らすハイライト効果も期待しているため、文章までじっくりと読み込んでいただけたら嬉しいです。ーーーーー ▶︎担当範囲：サイト設計・デザイン・実装（STUDIO） ▶︎制作時間：設計+デザイン40h / 実装30h ▶︎使用ツール：figma / Photoshop / STUDIO ▶︎イメージキーワード：伝統的・和・職人・気品ある・落ちついたーーーーーブランドストーリーや経営者様の想いを知ることで、ますますにぼし香ファンになってしまった私です🥹皆様ぜひぜひお店に足を運んでみてくださいね✨

【制作実績】リニューアルを担当させていただいた、麺処「にぼし香」さまの公式サイトが公開となりました🍜 サイト設計・デザイン・STUDIOでの実装まで、まるっとお任せいただきました✨ ▶︎ 今回のリニューアルの目的は、ブランドのコンセプトやこだわりを打ち出し、お店自体のファンを増やすこと。コンセプトである、江戸時代から庶民に愛されてきた“煮干し”や“蕎麦前文化”の継承、そして高級寿司屋のような「質の高さ」と「品のある佇まい」。こうした点をサイトから感じていただけるようデザイン設計を行いました。もちろん見た目だけでなく、競合リサーチを踏まえたサイト・コンテンツ設計も重要視し、制作を進めています。 STUDIOを使用した実装面では、パララックスを活用することで江戸の町にあかりが灯るような世界観を表現🏮。テキスト部分を照らすハイライト効果も期待しているため、文章までじっくりと読み込んでいただけたら嬉しいです。ーーーーー ▶︎担当範囲：サイト設計・デザイン・実装（STUDIO） ▶︎制作時間：設計+デザイン40h / 実装30h ▶︎使用ツール：figma / Photoshop / STUDIO ▶︎イメージキーワード：伝統的・和・職人・気品ある・落ちついたーーーーーブランドストーリーや経営者様の想いを知ることで、ますますにぼし香ファンになってしまった私です🥹皆様ぜひぜひお店に足を運んでみてくださいね✨

なり｜デザイン × マーケ支援

28,916 views • 2 years ago

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

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

necco inc.

40,865 views • 5 months ago

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

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

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

89,700 views • 1 year ago

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

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

ナカノ

17,876 views • 5 months ago

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

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

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

425,319 views • 2 years 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 • 8 months ago

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

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

KAWAI

146,223 views • 6 months ago

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

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

古性のち

106,531 views • 4 months ago

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

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

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

3,108,272 views • 4 months ago