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…

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

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

      Takumi HASE…

      • Bookmarks 2021.10.25

        まえがきまた、更新頻度が落ちつつありますが、いつもどおりデザイン目線というよりは実装社目線のレビューです。 株式会社真面目（majime inc.）リリース自体は結構前なのですが、実装のレベルが高すぎると思いました。個人的な好みもありますが、イージングのスピード感などがちょうどよく、全体を通して不自然さを感じさせないサイトでした。お手本にしたい。 どんなにデザイナーさんが静止状態でいいデザインをしても、実装して動きをつけたら野暮ったい、、みたいなサイトって結構あると思うん

        Takumi HASE…

        • bookmarks 2021.07.08

          まえがき今回も前回に引き続きDeveloper目線の分析を多めに。今回はあとがきもあるよ。 BAKE INC.フォントとサイト全体で採用している三角形のモチーフから、全体的にジオメトリックな雰囲気 (大好物)。 各所に散りばめられている三角形はSVGで実現されていて、マスクやアニメーションなどに効果的に使用されています。ページ遷移は三角形の角度に合わせた(?) 斜め方向という斬新さ。 全体的なアニメーションの速度感が絶妙で、大胆な演出なのにやりすぎておらず上質な印象を受

          Takumi HASE…
        • 固定された記事

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

        Takumi HASEGAWA (unshift Inc.)

        マガジン

        • bookmarks by unshift
          24本

        記事

          bookmarks 2021.05.18

          まえがき例によって間が空きまくってしまいましたが、このbookmarksの記事についてちょっと考え直しました。 今までは完全に自分用のブックマーク代わりとして使用しており、まぁついでだから公開してもいいか、くらいのノリでnoteに公開していましたが、せっかく公開しているのだから、もうちょっと自分の考察も言語化して載せたほうが自分のためになるなぁと思い、今回からメモも2~3行ではなく、できる限り考察を入れていきたいと思います。 また、考察も自分の強み (演出・開発) を生か

          Takumi HASE…

          bookmarks 2021.05.18

          Takumi HASEGAWA (unshift Inc.)

          bookmarks 2020.09.01

          気づけば9月、、もう今年も残り4ヶ月ですね。。 ぶにぶにと有機的な動きからソリッドな矩形に遷移する動きって意外とあまりなかったのかも。 Labページの見せ方、コンテンツも良い。かわいいのにかっこいい。 さまざまな形のマスク処理がユニーク。しかも動作も軽い。 文字のアニメーションが軽快。 事例ページの横スクロールタイムライン表示では、スクロール位置が可視化されていて、それがデザインのアクセントにもなっている。あまりみたことのない表現。 シンプルな色使い、タイポグラフィの

          Takumi HASE…

          bookmarks 2020.09.01

          Takumi HASEGAWA (unshift Inc.)

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

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

          Takumi HASE…

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

          Takumi HASEGAWA (unshift Inc.)

          bookmarks 2020.06.08

          WebGLのWebサイトへの溶け込み方が異常。 全体的にWebGLを使用しているのに、そこまで重くない。 重そうなポストエフェクトを使用しているのにも関わらず。。 全面WebGLでレトロな表現。今まで見たことない。新しい。 ブラウン管テレビっぽい歪みがいい。 珍しいフォント。かわいい。 丸めてめくる！ 横スクロールの動きが軽快。背景の両端の処理の細かい演出がいい。 派手な演出をしているわけではないが、 フォント選び、マイクロインタラクション、フェードのスピード感な

          Takumi HASE…

          bookmarks 2020.06.08

          Takumi HASEGAWA (unshift Inc.)

          bookmarks 2020.04.03

          インプットが追いついていない、、仕事に追われていてもいいデザインを観ることは絶対に大事なので時間を取らなくては、、 3Dの演出、スクロール時の演出など 色々盛り込んでいるけど完成度がかなり高い、、 イラストの量、クオリティと、それを違和感なく溶け込ませる実装力。 このコンテンツ量でマイクロインタラクションや 細かいところまでしっかり作り込まれている。 遷移スピードも早いので、サクサク見れる。 PC版のメインビジュアルのインタラクションと スクロール時の演出が印象的。斬

          Takumi HASE…

          bookmarks 2020.04.03

          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.)

          bookmarks 2020.02.20

          大胆なタイポグラフィのデザインと、 遷移時のカーブとか、マイクロインタラクションとか 細かいところまでとても気が利いているのが良い。 トップのKVも面白いけど ところどころに散りばめられているキューブがアクセントになっているし 演出のアイディアとしても今まで見たことがない感じで良い。。 よくあるアニメーションだけど、速度感や色使いがとても小気味よい。 ドラッグで操作できる自由度の高いデザイン。 スマホで閲覧した際もPC同じ体験で破綻なく操作できる。 KVのモーショング

          Takumi HASE…

          bookmarks 2020.02.20

          Takumi HASEGAWA (unshift Inc.)

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

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

          Takumi HASE…

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

          Takumi HASEGAWA (unshift Inc.)

          bookmarks 2020.01.22

          まずタイポグラフィがめちゃくちゃかっこいい上に、mask-imageを使ったテキストアニメーションが斬新でcool。 worksの一覧でロゴがズラッと並んでいるのが素敵。動きも軽快で完成度の高いコーポレートサイト。 トップや実績の大胆なインタラクションが目を引くけど、それ以外にも所々に散りばめられている気の利くマイクロインタラクションがとてもいい。 デザインやインタラクションのクオリティもさることながら、スクールしまくったときの可愛いギミックも最高。 実績の一覧の見せ

          Takumi HASE…

          bookmarks 2020.01.22

          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.)