前衛的！スポーツブランドのサイトが最近イケてる件
こんにちは、スニーカーが好きなまろCです。 今回は、スポーツブランドが作るサイトがやばい件ということでまとめます。 プロダクト自体の魅力や世界観がしっかりしているから、Webでもそれが“限界に挑戦する”という表現として現 […]
View ArticleScrollMagicで簡単実装！「ふわっ」と文字が現れるスクロールアニメーション
こんにちは、まろCです。 今回は、ScrollMagicを使ったアニメーション表現をご紹介します。 スクロールにあわせて文字が出てくる表現は、その文字に目を向けさせて、読み手を引き込む効果があります。また、easingを […]
View Article遊べる！海外のヤバイサイト紹介
こんにちは、まろCです。 サイトの進化がヤバイです。 日々インターネットをパトロールしていると大きな驚きに出会います。 今回は、遊べる！とおもった海外のサイトをご紹介したいと思います。 紹介の基準は、マウスでグリグリした […]
View Article最高のアンサーにまたアンサーしたい。エレファントストーンさまの制作について綴る。
こんにちは。普段は擬音をアニメーションに変換する作業を行っているまろCです。 今回、日頃からお世話になっている映像制作会社のエレファントストーン様の新規メディアサイト『bacter』のフロントエンド、バックエンドを担当さ […]
View Article株式会社DDホールディングスのサイトを制作したので、フロントエンド的振り返りをしてみた
こんにちは。まろCです。 今回は制作した案件について、フロントエンドでどう実装したか振り返りを行いたいと思います。 お客様は株式会社DDホールディングス。ホールディングス化する際のwebサイト制作のお手伝いをさせていただ […]
View Article鯛茶漬け専門店「鯛茶STAND」のサイトを制作したので、フロントエンド的こだわりを解説します
こんにちは。まろCです。 鯛茶漬け専門店「鯛茶STAND」のサイト制作でフロントエンド、バックエンドを担当しました。 こちらのサイトです。 https://taicha-stand.liginc.co.jp 鯛茶STAN […]
View Article【実例付き】サイト内のgoogle mapに、複数のカスタムピンを落とす方法
こんにちは。まろCです。 今回は、サイト内のgoogle mapに複数のカスタムピンとポップアップの情報を載せる方法を、実例をもとに紹介していきたいと思います。 その方法を利用して制作した案件 https: […]
View Articleスクロールイベントやマウスホイールイベントをlodashのthrottleで間引いていい感じにしよう
こんにちは、まろCです。 今日は、スクロールでギュインギュイン動くサイトを作るときに、そのイベントの制御をうまいことやってみようという記事になります。 ※以降イベントはスクロールインベントまたはマウスホイールイベントとし […]
View Articleグルーピングでカッコいいサイトを探す「黒xfitレイアウト」
こんにちは。フロントエンドエンジニアのまろCです。 今回は黒くて、画面いっぱいのfitレイアウトのサイトでオシャンティスを感じたサイトを紹介したいと思います。 Ankoku Toshi Jutsu https://www […]
View Articleグルーピングでオシャンティスなサイトを探す「白x左右分割レイアウト」
こんにちは。フロントエンドエンジニアのまろCです。 今回は「白くて、左右分割したレイアウト」のサイトで、オシャンティスなサイトをご紹介したいと思います。 DROP tokyo http://droptokyo.com/ […]
View Articleフロントエンドが参考にしたいwebサイト5選 2016年8月版！
こんにちは、まろCです。ギラギラの夏過ごしていますか？ 今回はフロントエンドエンジニアの視点で、アニメーションなどの表現で参考にしたいサイトを5つ紹介したいと思います。どのサイトも素晴らしいですが、見た目だけではなく、そ […]
View Articleサイトジェネレータ「HUGO」を使って静的サイトを作成しよう
こんにちは、フロントエンドエンジニアのまろCです。 今回は「HUGO」という静的サイトジェネレータを使った簡単なブログを作ってみます。 HUGOとは http://gohugo.io/ 最近社内でもアツい、Go言語で作ら […]
View Article【PC/SPモダンブラウザ全対応】SVGで画像をナナメにクリッピングマスクする方法
こんにちは。まろCです。 今回は、SVGで画像をクリッピングマスクするときに、ほとんどのブラウザできれいに表示される方法をご紹介したいと思います。案件でこのデザインが上がってきたときに調べた情報を共有します。 SVGでク […]
View Articleフロントエンドエンジニアが参考にしたいwebサイト5選 【2016年9月版】
こんにちは、まろCです。 前回に引き続き、アニメーションの参考になりそうな良いサイトを見つけましたので、ご紹介したいと思います。 Kygo Life – Music Meets Fashion URL: ht […]
View Articleargon.jsを使ってARをためしてみよう【導入編】
こんにちは、まろCです。毎日寒いので鍋しています。 今回は、面白そうなJavaScriptのフレームワークを見つけたのでご紹介します！webの技術でARの世界を簡単に体験できるやつです。 それが argon.js です […]
View Article担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる
こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このよう […]
View Articleインタラクティブってなんだろう、2016年のwebはそんな年
こんにちは、まろCです。2016年を振り返るといろんなwebサイトがありました。 印象的なのは、映像を絡めて心に突き刺さる演出をしている点です。 作り手がwebに動きを求めた結果、より良いユーザー体験が生まれ、話題となる […]
View Article【社畜必見】カスタマイズした「Amazon Dash Button」で定時Dash帰宅したった
こんにちは。フロントエンドエンジニアのまろCです。 みなさん「Amazon Dash Button」はご存知ですか？ Amazonが発売している、特定の商品をボタンひとつで注文できるガジェットです。 面白そうだったので、 […]
View ArticleBitbucketにpushしたらチャットワークに通知できるようにしてみよう
こんにちは、まろCです。 フロントエンドとして仕事をしていると、たとえば、パートナー様にコーディングしたHTMLを渡すことが多々あります。 そういう場合、HTMLとシステムは別管理のケースだったりします。そんなとき、この […]
View Article採用サイトって面白い！最近そう感じたサイト5選
こんにちは、フロントエンドエンジニアのまろCです。 採用サイトって、ターゲットが明確で、企業の想いもシンプルなことが多いと感じます。だからこそ、コーポレートサイトよりも大胆な発想で、アニメーションやちょっとしたギミックで […]
View Article