Takumi HASEGAWA (unshift Inc.)

Front-end / creative developer | unshift In…

Takumi HASEGAWA (unshift Inc.)

Front-end / creative developer | unshift Inc. founder. https://unshift.co.jp/ | Facebook Pageはこちら → https://fb.com/unshift.jp/
  • 固定された記事

Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。

まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト　嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただき

Takumi HASE…

    • よりよい作業環境を求めて。

      まえがき以前、ケーブルが見えない作業環境を作ったよという記事を書いたんですが、昇降デスクを購入してから環境がかなり変わったので、記録に残してみます。 今までの作業環境以前執筆した記事の状態からはキーボードやマウスなどはちょこちょこ変わってはいますが、それほど大きく変わっていません。 完成したデスク買い足したものFlexiSpot E7H (昇降デスクのフレームのみ) Dell ウルトラワイドディスプレイ (S3423DWC) エルゴトロン モニターアーム エルゴト

      Takumi HASE…

      • 新年のご挨拶と法人化のご報告 (主に新ロゴの話)

        あけましておめでとうございます。 タイトルにもあるとおり、 昨年11月に事業を法人化しました。今まで使用してきた屋号であるunshiftはそのまま継承し、これからは株式会社unshiftとしてよろしくお願いいたします。 知らない方のために何をしているかを説明すると デジタルコンテンツ (主にWebサイト)のフロントエンドの受託開発をメインでやっています。ポートフォリオは↓ ※リニューアル前なので旧ロゴです。 法人化のご報告 & 新年のご挨拶のサイトを制作いたしました。

        Takumi HASE…

        • 不要なケーブルが見えないスッキリしたデスクを目指して

          まえがき私はフリーランスのディベロッパーをしており、普段は自宅かシェアオフィスで作業をしています。(最近はずっと自宅で作業しています。) 自宅でも作業できる環境はあるのですが、自宅の作業環境にあまり満足しておらず、Go Andoさんの「デスクをスッキリさせるマガジン」の記事の中にあるようなスッキリさっぱりした作業環境に憧れつつも、記事を眺めているだけにとどまっていました。 なので、シェアオフィスに席を置かせてもらってからは、自宅であまり作業せずにほぼオフィスで作業するよう

          Takumi HASE…
        • 固定された記事

        Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。

        Takumi HASEGAWA (unshift Inc.)

          three.jsファイルサイズ軽量化計画

          three.jsを使用したプロジェクトのファイルサイズを できるだけ小さくしたい three.jsは大変便利なWebGLのフレームワークですが、その他機能差ゆえ、minifyされたthree.min.jsですら600KBを超える大きなフレームワークです。 Webサイトで使用することを考えると、読み込むファイルのファイルサイズが大きいほどページが表示されるまでに時間がかかってしまいます。 とりわけモバイルデバイスでネットワークの状況がいまいち不安定だったりすると、ローディング

          Takumi HASE…

          three.jsファイルサイズ軽量化計画

          Takumi HASEGAWA (unshift Inc.)

          IFTTTでSlackとTwitterを連携させて、ギャラリーサイト漁りが快適に。

          みなさん、個人Slack使ってますが？ 最近、ちょっとしたメモやtodo登録、RSS feedを個人のSlackのワークスペースに統合したらすごい快適になったのですが、その中でも「おお、これは良い発見をした！」というのがあったのでご紹介します。 日々のギャラリーサイト閲覧を楽にできたらいいな普段、不定期的に以下のギャラリーサイト (一部抜粋)を回って、気になったサイトがあったらピックアップし、メモを添えてnoteにブックマーク集記事としてアップしています (マガジンにもし

          Takumi HASE…

          IFTTTでSlackとTwitterを連携させて、ギャラリーサイト漁りが快適に。

          Takumi HASEGAWA (unshift Inc.)

          gulpやめました (やっと)。

          2020.03.13 更新 以下gulpをやめて、自作のタスクランナー的なものを作った話です。結構長いです。 まず最初にリポジトリへのリンクを載せておきます。 そもそもなぜずっとgulpを使っていたかNuxtやcreate react appのようにモダンな環境がある中でそういうものが使えないプロジェクトが多々あるので、割とどんなプロジェクトにも対応できるような汎用的な環境をつくってずっと運用していました。 具体的には以下のような構成です。(一部機能省略) ・ソース

          Takumi HASE…

          gulpやめました (やっと)。

          Takumi HASEGAWA (unshift Inc.)

          model-viewerを使ってAR年賀状をつくってみた話

          2020年最初の投稿です。あけましておめでとうございます。 相変わらずnoteを活用しきれていないです。 ・・・ フリーランスとして独立してからなんだかんだで毎年、年賀コンテンツをつくっておりまして、今年で4回目となりました。 構想段階から今年はWebAR的なものをやりたいなと思っていました。というわけでできたのがコレ。 タイトルの通り、model-viewerという3Dモデルを表示するためのフレームワークを使用しています。 model-viewerとはmodel-

          Takumi HASE…

          model-viewerを使ってAR年賀状をつくってみた話

          Takumi HASEGAWA (unshift Inc.)

          three.jsでマーチングキューブによるメタボール表現を実装してみた (モバイルでも動くよ)

          ※これはWebGL Advent Calendar 2019の16日目の記事です。 もともとはThree.js Advent Calendar 2019に書こうと思っていたんですが、すでに埋まっていたので。 前々からWebGLをレイマーチングではなく、ポリゴンによるメタボール表現をやってみたかったんですが、調べていたらどうやらマーチングキューブというものを使えばできるというところまでたどり着いたので、やってみました。 どうやら以下のアルゴリズムが有名らしいです。 しかし

          Takumi HASE…

          three.jsでマーチングキューブによるメタボール表現を実装してみた (モバイルでも動くよ)

          Takumi HASEGAWA (unshift Inc.)

          ポートフォリオサイトをリニューアルしました！ (技術的な解説あります)

          はじめに1年以上前から考えていた、ポートフォリオサイトのリニューアルがやっとできました。 といっても今回はまだシンプル版のリリースで そのうちWebGLを組み込んだリッチ版をリリース予定です。 以下のサイトが以前のポートフォリオで、機能的にはまだ生きているんですが3年前に作ったもので技術も古く、あまり見せたくなくなってしまったのでこのサイトは更新せずに、お仕事のリリース報告などはSNS上でしていました。 が、やはりポートフォリオサイト上でしっかり残していきたいと思い、サ

          Takumi HASE…

          ポートフォリオサイトをリニューアルしました！ (技術的な解説あります)

          Takumi HASEGAWA (unshift Inc.)

          今年も年賀コンテンツ的なものを作ってみました2019

          あけましておめでとうございます！今年も年賀コンテンツを作ってみました。 スマホの場合はタップ、PCの場合はキーを叩くと、どんどん文字が出てきますので、やってみてください。 そこはかとなくハリーポッター風です。なんで今ハリーポッターなのかは自分でもよくわかりませんが、作品内の魔法である「姿あらわし / 姿くらまし (Disapparition / Apparition)」のエフェクトが好きなので、作ってみただけです。昨年はファンタスティック・ビーストの2作目も公開されてまし

          Takumi HASE…

          今年も年賀コンテンツ的なものを作ってみました2019

          Takumi HASEGAWA (unshift Inc.)

          SonyのFES Watch Uのデザインコンペイベントに応募したら採用されました。

          タイトルの通り、FES Watch Uのデザインコンペイベントに応募したら採用されました。 このサイト上だとデザインの全貌がわかりにくいので、以下に経緯と応募時のエントリーシートなどを掲載しております。 ・・・ SonyのFES Watchがどれくらいの知名度があるのかよくわかっていませんが、数年前のTokyo Design Weekで初めて実機を見てから、ずっと気になってました。 FES Watchは文字盤とベルトが電子ペーパーでできている腕時計です。専用のスマート

          Takumi HASE…

          SonyのFES Watch Uのデザインコンペイベントに応募したら採用されました。

          Takumi HASEGAWA (unshift Inc.)

          スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2

          Part1の続きです。Part1はこちら↓ 今回は ・少し厄介なランドスケープ時のViewportの高さの話 ・かゆいところに手が届きそうで届かないCSSのvw/vhの話 ・これまた厄介なアプリ内ブラウザ (WebView)でのvhの話 の三本立てでお送りしたいと思います。 ・・・ 少し厄介なランドスケープ時のViewportの高さの話Webコンテンツ閲覧中に、スマートフォンを横向きで使うシチュエーションって個人的にはそんなにないですが、全画面 (html, bodyの

          Takumi HASE…

          スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2

          Takumi HASEGAWA (unshift Inc.)

          スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1

          はじめにデザイナーさんからスマホのサイトのデザインデータを頂いて眺めていたら、以下のようなことをふと思いました。 基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なか

          Takumi HASE…

          スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1

          Takumi HASEGAWA (unshift Inc.)

          トロコイドを使ってクリエイティブコーディングをしてみた。

          さて、まずはトロコイドは何？というところですが、困ったときのWikipediaですね。 トロコイド (trochoid) とは、円をある曲線（円や直線はその特殊な場合）にそってすべらないように転がしたとき、その円の内部または外部の定点が描く曲線。 とのことです。Wikipediaのページにgifアニもついてるので、わかりやすいかと思います。 そして、今回作ったものはこちら。 2D Line drawing by trochoid (2d branch)3D Line

          Takumi HASE…

          トロコイドを使ってクリエイティブコーディングをしてみた。

          Takumi HASEGAWA (unshift Inc.)

          2Dの流体 (stable fluids) の表現を使ってクリエイティブコーディングをしてみた。

          今回は、2Dの流体 (stable fluids) を使用したクリエイティブコーディングのお話です。以下のサイトのmenu画面の背景のような表現ですね。 個人的には非常に思い出深い表現で、というのもフリーランスの一発目のお仕事が、この表現を使用したものだったからです。 もうすでにリニューアルされてしまっていますが、水曜日のカンパネラのオフィシャルサイトの背景にこの表現を使用していました。 当時、デザイナーさんに「こういうのやりたい」と参考サイトを見せられて、「できますよ

          Takumi HASE…

          2Dの流体 (stable fluids) の表現を使ってクリエイティブコーディングをしてみた。

          Takumi HASEGAWA (unshift Inc.)