マガジン
記事一覧
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。
X (Twitter)で「動くWebサイト 嫌い」で検索
Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそう
新年のご挨拶と法人化のご報告 (主に新ロゴの話)
あけましておめでとうございます。
タイトルにもあるとおり、
昨年11月に事業を法人化しました。今まで使用してきた屋号であるunshiftはそのまま継承し、これからは株式会社unshiftとしてよろしくお願いいたします。
知らない方のために何をしているかを説明すると
デジタルコンテンツ (主にWebサイト)のフロントエンドの受託開発をメインでやっています。ポートフォリオは↓
※リニューアル前な
bookmarks 2021.07.08
まえがき今回も前回に引き続きDeveloper目線の分析を多めに。今回はあとがきもあるよ。
BAKE INC.フォントとサイト全体で採用している三角形のモチーフから、全体的にジオメトリックな雰囲気 (大好物)。
各所に散りばめられている三角形はSVGで実現されていて、マスクやアニメーションなどに効果的に使用されています。ページ遷移は三角形の角度に合わせた(?) 斜め方向という斬新さ。
全体的
bookmarks 2021.05.18
まえがき例によって間が空きまくってしまいましたが、このbookmarksの記事についてちょっと考え直しました。
今までは完全に自分用のブックマーク代わりとして使用しており、まぁついでだから公開してもいいか、くらいのノリでnoteに公開していましたが、せっかく公開しているのだから、もうちょっと自分の考察も言語化して載せたほうが自分のためになるなぁと思い、今回からメモも2~3行ではなく、できる限り考
bookmarks 2020.09.01
気づけば9月、、もう今年も残り4ヶ月ですね。。
ぶにぶにと有機的な動きからソリッドな矩形に遷移する動きって意外とあまりなかったのかも。
Labページの見せ方、コンテンツも良い。かわいいのにかっこいい。
さまざまな形のマスク処理がユニーク。しかも動作も軽い。
文字のアニメーションが軽快。
事例ページの横スクロールタイムライン表示では、スクロール位置が可視化されていて、それがデザインのアクセント
bookmarks 2020.06.08
WebGLのWebサイトへの溶け込み方が異常。
全体的にWebGLを使用しているのに、そこまで重くない。
重そうなポストエフェクトを使用しているのにも関わらず。。
全面WebGLでレトロな表現。今まで見たことない。新しい。
ブラウン管テレビっぽい歪みがいい。
珍しいフォント。かわいい。
丸めてめくる！
横スクロールの動きが軽快。背景の両端の処理の細かい演出がいい。
派手な演出をしている
bookmarks 2020.04.03
インプットが追いついていない、、仕事に追われていてもいいデザインを観ることは絶対に大事なので時間を取らなくては、、
3Dの演出、スクロール時の演出など
色々盛り込んでいるけど完成度がかなり高い、、
イラストの量、クオリティと、それを違和感なく溶け込ませる実装力。
このコンテンツ量でマイクロインタラクションや
細かいところまでしっかり作り込まれている。
遷移スピードも早いので、サクサク見れる。
three.jsファイルサイズ軽量化計画
three.jsを使用したプロジェクトのファイルサイズを
できるだけ小さくしたい
three.jsは大変便利なWebGLのフレームワークですが、その他機能差ゆえ、minifyされたthree.min.jsですら600KBを超える大きなフレームワークです。
Webサイトで使用することを考えると、読み込むファイルのファイルサイズが大きいほどページが表示されるまでに時間がかかってしまいます。
とりわけ
bookmarks 2020.02.20
大胆なタイポグラフィのデザインと、
遷移時のカーブとか、マイクロインタラクションとか
細かいところまでとても気が利いているのが良い。
トップのKVも面白いけど
ところどころに散りばめられているキューブがアクセントになっているし
演出のアイディアとしても今まで見たことがない感じで良い。。
よくあるアニメーションだけど、速度感や色使いがとても小気味よい。
ドラッグで操作できる自由度の高いデザイン
IFTTTでSlackとTwitterを連携させて、ギャラリーサイト漁りが快適に。
みなさん、個人Slack使ってますが？
最近、ちょっとしたメモやtodo登録、RSS feedを個人のSlackのワークスペースに統合したらすごい快適になったのですが、その中でも「おお、これは良い発見をした！」というのがあったのでご紹介します。
日々のギャラリーサイト閲覧を楽にできたらいいな普段、不定期的に以下のギャラリーサイト (一部抜粋)を回って、気になったサイトがあったらピックアップし、
bookmarks 2020.01.22
まずタイポグラフィがめちゃくちゃかっこいい上に、mask-imageを使ったテキストアニメーションが斬新でcool。
worksの一覧でロゴがズラッと並んでいるのが素敵。動きも軽快で完成度の高いコーポレートサイト。
トップや実績の大胆なインタラクションが目を引くけど、それ以外にも所々に散りばめられている気の利くマイクロインタラクションがとてもいい。
デザインやインタラクションのクオリティもさ
gulpやめました (やっと)。
2020.03.13 更新
以下gulpをやめて、自作のタスクランナー的なものを作った話です。結構長いです。
まず最初にリポジトリへのリンクを載せておきます。
そもそもなぜずっとgulpを使っていたかNuxtやcreate react appのようにモダンな環境がある中でそういうものが使えないプロジェクトが多々あるので、割とどんなプロジェクトにも対応できるような汎用的な環境をつくってずっと運
three.jsでマーチングキューブによるメタボール表現を実装してみた (モバイルでも動くよ)
※これはWebGL Advent Calendar 2019の16日目の記事です。
もともとはThree.js Advent Calendar 2019に書こうと思っていたんですが、すでに埋まっていたので。
前々からWebGLをレイマーチングではなく、ポリゴンによるメタボール表現をやってみたかったんですが、調べていたらどうやらマーチングキューブというものを使えばできるというところまでたどり着いた