2018年、都内某所の上野。 社内にせまるPhpStorm、Atom、VSCodeの侵攻におののいた僕は、みずからの貧弱なVim力を嘆き、その力をアップデートしなければならぬ、とただただ神に祈っていました。 思えば僕は、Vimをまったく使いこなしてはいなかったのです。先日、Vim8.1がリリースされました。アップデートでもしてみようかな、よっこらしょいとキーを叩き、vimrcを開いたとき、ふいに気づいたのです。 そこに広がるのは愛のないコピペの嵐、辻褄を合わせるためだけの追記の設定、書いてあるものの覚えてもいないキーバインド――。黒いターミナルを見ながら、気づくとツーッと一条の涙が僕の頬を流れていたのでありました。このままでは……いけない。 昨今のIDEはマヂ凄いです。それはわかる。PhpStormの静的解析とかエグい。このタイミングでIDEに居を構えるのもいい。何も悪いことじゃないさ。で

こんにちは、デザイナーの藤田です！ 毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。 油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました！ よろしければ皆様もご覧ください。 2018年気になるWebデザイントレンド 画像を揺らす デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。 アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね！ http://www.themustafacelik.com/ http://culture.basicagency.com/ パララックス 手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は４〜５年

家庭内そうめん総消費量（DSS）が高いフロントエンドエンジニア、ザワです。「パフォーマンス最適化」というキーワードを耳にすることが多くなってきた昨今、フロントエンドエンジニアの方々は処理を書けるだけではなく、パフォーマーとしての役割も気にせざるを得なくなってきました。 今回は、そんなパフォーマーの入り口として、JavaScriptの処理時間を計ってみよう、まずは気にしてみることから始めよう、そんな回です。 では、早速始めましょう。Let’s do it! ※細かい仕様等は最後に紹介している参考URLから確認してみてください。 基本事項 User Timing APIとは JSの処理時間を計測するために有用なAPIです。 使う場面 「とりあえず処理書いたけど、すっごい重いなー。でもどこが重いのやら？」とか、「最近覚えた新しい構文で処理を書き換えてみたけど、実際どのくらい処理時間変わるのかなー

こんにちは、フロントエンドエンジニアのまろCです。 今回は「HUGO」という静的サイトジェネレータを使った簡単なブログを作ってみます。 HUGOとは http://gohugo.io/ 最近社内でもアツい、Go言語で作られた静的サイトジェネレータです。Octopressより高速にページを生成してくれます。 早速インストール 今回はMacにて動作させてみます。環境は、OSX 10.10.5です。 brew install hugo cd {project_dir} hugo new site maroc.com これで、サイトの雛形ができました。 . ├── archetypes ├── config.toml ├── content ├── data ├── layouts └── static cd maroc.com hugo 上記のようなディレクトリ構造になっているかと思います。 プ

どうもですよ、はやちですよ( ˇωˇ) 今回はsvgのアニメーションの操作がカンタンにできるSnap.svgをご紹介致します( ˘ω˘)☞三☞ｼｭｯｼｭｯ 導入方法 さっそく、導入からご紹介いたします。まず、こちらのサイト（↓）からダウンロードします。 snap.svg ダウンロードしたら、snap.svg-min.jsを読み込みます。 <script src="snap.svg-min.js"></script> タスクランナーでのご使用の方 npmでも公開されています。 https://www.npmjs.com/package/snapsvg npm install snapsvg　でインストールまたは bower install snap.svg　でインストールします。 使用するjsに読み込ませたら準備完了です( ˇωˇ)☝ import snapsvg from 'snapsvg

こんにちは。CTOのづやです。 最近のサイトはぐいんぐいんと動いてたりしますよね。私も負けずにぐいんぐいん動かしたいなと思っていたのですが、素で書くにはなかなか難易度が高そうです。 そんなとき、弊社のエンジニア・ハカセがPixi.jsというライブラリを教えてくれました。Canvasライブラリの中では最速とのこと。 そこで今回は、そのPixi.jsを初めて触って簡単にアニメーションを作成してみた話を紹介したいと思います。 Pixi.js http://www.pixijs.com/ Pixi.jsの基本 まずは公式サイトのダウンロードボタンを押し、遷移先のGitHubよりコードを落としてきます。 GitHub https://github.com/GoodBoyDigital/pixi.js ダウンロードした中のexamplesフォルダの中には、サンプルがたくさんあります。 1つ目のサンプル

こんにちは、ずんこです！ 東京はもう桜が咲いているのに、野尻湖周辺はまだまだ雪が残っています。朝晩はコートが手放せないくらいに寒いです。 そういえば、みなさんはAdobe Stockって使っていますか？ 「なんか便利そうなものが出たみたいだなぁ」とは思ってはいるけど……という方が多いのではないでしょうか。私もそんな一人でした。でも、今なら言えます。Adobe Stockを使ってないなんて絶っっ対に損をしていると！ だって、一発で画像を差し替えられるし、Creative Cloudと一緒に使えばリアルタイムで必要な人とデータ共有ができるんですよ？ 今回は、実際に使ってみて「なんて便利なんだ……！」と感じたことを全力でお伝えしようと思います。 Adobe Stockってどんなサービス？ Adobe Stockは、6000万点の高品質な画像やグラフィック、さらにはビデオやテンプレートが購入できる

いつもLIGブログをご覧いただきありがとうございます。本日はLIGブログ編集部から読者のみなさまにご報告があります。 すでにこちらのエントリを読んでご存知の方もいるかと思いますが、2017年3月末をもって創業者兼前代表の岩上がLIGを正式に離れ、GIGという会社をつくりました。 離れた理由は、働いていくなかで代表の吉原との考え方にずれが生じてきたからです。お互い「イケてるものを作りたい」という根っこの考え方は同じなのですが、”イケてるもの” に対する認識に次第にズレが生じてきました。バンドの解散でよくある音楽性の違いです。結果、現代表の吉原はLIGで、岩上は新しい会社GIGでそれぞれイケてるものを作るという結論にいたりました。 思えば、伝説のwebデザイナーの記事をきっかけにLIGを知った方も多いと思います。そして、たびたび記事に登場してはいじられている岩上のファンの方にはご報告が遅くなり

こんにちは。バックエンドエンジニアのヤスタカです。 みなさん、Docker（ドッカー）って使ってますか？ Docker は使いこなせれば、開発環境を他の作業者全員でシェアすることができたり、開発環境とまったく同じ環境で本番環境も構築できたりと、とても便利に使うことができます。その一方で、導入するまでの学習コストという点では、他の仮想環境を構築するツール Vagrant（ベイグラント）などと比較すると、やや敷居が高い気がします。 LIG でも開発フローに Docker を導入しはじめたので普段から Docker を使ってはいるのですが、なんとなくコマンドだけ覚えて使っている感が否めません。なので、これを機に Docker を超初歩の初歩からゆっくり学習していけるような内容の記事を書いていきたいと思います。 初回の Docker 入門では「まず Docker とはなんなのか」についてさらっと触

こんにちは！　野菜をこよなく愛する肉食系フロントエンドのザワです。 みなさん、良いスクロールライフを過ごしてますか？ 今回は、ずっとスクロールしていたい！　そう思わせてくれる、フィーリンGoodなスクロールアニメーションを集めてみました。 Femme Fatale Studio http://www.femmefatale.paris/en 少しマウスをコロコロすると、タイポと背景画像がアニメーションします。タイポはそれぞれのタイミングで動き始めますが、背景と同じタイミングで一連のアニメーションを終了します。快感ポイントはズバリ、タメの効いたイージングですね。「んぬ〜ん、スッ」、気持ち良いイージングはつい口ずさみたくなりますね。 Valaire: Oobopopop http://valaire.mu/ スクロールを続けていくと、縦に、時には横に、そして縦に、画面が展開されていきます。背景

Mac愛用エンジニアにオススメしたい！HTTPクライアントツール「Paw」を使ったAPI開発が便利すぎた こんにちは。長野オフィスのヤスタカです。 今年の野尻湖は豪雪で僕のジムニーが雪に埋もれて樹氷のようになっています。 これクルマだいじょうぶなのかな……。 今回は Mac で使える HTTP クライアントツール「 Paw 」を紹介したいと思います。 >> Paw ［ Mac App Store ］ 有料アプリで、49.99ドルするという購入するのに決心を要するアプリですが、実際に使ってみるととても使いやすいんです。たまに Sale で半額になっていることもあるので、僕はその際にすかさず購入しました。なので今回はそのいくつかの機能を紹介します。API を開発する際にも利用する際にもとても便利な機能満載で、HTTP リクエストの作成や、API サーバーからのレスポンスの確認など、いろいろと重

ゆたろです。どうもです。 皆さんは案件などで「水っぽい動き」を求められたことはありませんか？　ゼロから実装するとかなり時間がかかってしまいますが、プラグインを使えば簡単に実装することができます。 というわけで今回は、水っぽい表現をするプラグインの紹介と、それを使用したsampleソースを紹介していきます。 ▼目次 ぷよぷよ動く水玉風 jquery.morphing.js 水たまりの波紋風 jquery.ripples.js フラットデザインと相性抜群 raindrops.js まとめ ぷよぷよ動く水玉風 jquery.morphing.js jquery.morphing.jsは、要素に対して、ぷよぷよと動く円形のクリッピングマスクを作ってくれるプラグインです。 https://github.com/ANTON072/jquery.morphing.js html ダウンロードしたファイル

こんにちは、ツーブロックファンのキャシー（CK_livi）です。 8月某日に出勤していたLIG男性社員56人を調べたところ、27人が何らかの形でヘアスタイルにツーブロックを取り入れていました。パーセンテージで表すと、なんと48.2142857%！　LIG男性社員の約半数がツーブロックと言っても過言ではありません。 なぜこんなに流行っているのでしょうか。 ツーブロックを得意とする都内の美容師さんに話を伺ってみました。 人物紹介：登坂貴幸 人形町駅近に新しくオープンした美容院「Nico-Hulu」の美容師。 髪型を見ただけでその人の性格が大体わかる。とにかくツーブロックが得意で、ツーブロックを語り始めると止まらない。

LIGのFacebookページにInstant Articlesを導入！クリック・シェア・リーチすべて向上しました。 こんにちは！　マーケターのすみーです。 2016年の１月にFacebookが発表した「Instant Articles」（インスタント アーティクルズ）はご存知ですか？　「インスタント記事」とも呼ばれているFacebookの新しいシステムです。 Facebookをスマホで見ているときに、以下のような投稿を見たことはありませんか？ この稲妻マークが付いている投稿は「Instant Articlesに対応している」ということです。 Instant Articlesとは Instant Articlesはモバイル向けのプラットフォームで、媒体側がこれを導入することにより、ユーザーはリンク先に飛ばなくてもFacebookブラウザ上でコンテンツを閲覧することが可能になります。 通常の

Our passion is to nurture branding, enhance the user experience and improve the world. Our core principle as a creative production is "life is good". ブランドを、ユーザーの生活を、世界をよりよくするために。 私たちはLife is good.の理念を掲げる クリエイティブプロダクションです。

こんにちは！ 都会生活に飽きてきたので、そろそろ長野あたりに移住したいトギーです。 長野といえば、LIGが運営するゲストハウス『LAMP』。週末はたくさんのお客さんで賑わっていますが、長期休暇のない春や秋のローシーズンの平日にはまだまだ部屋に空きがあります。 もしかして、平日のLAMPの稼働率を上げる施策を考えたら、私、長野に異動できるんじゃ……？　根拠はありませんがそんな気がしてきたので、長野への観光客を増やす方法を考えてみることにします。 インバウンドで人気な観光スポット知る 今観光ビジネスをやるなら、目を付けるべきはやっぱり外国人旅行者。 出典：日本政府観光局「統計データ（訪日外客数）」より作成 今急速に増えている訪日外国人が、平日にLAMPに泊まってくれたら最高です。 そこでまず知るべきは、外国人が好きな日本の観光スポット。外国人観光客は日本のどんな場所を訪れているのでしょうか？　

こんにちは、デザイナーのぺちこです。 以前、デザイナーもりたの、デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみたという記事が公開されましたね！　こんな風に、最近LIGのデザイナー＆フロントエンド間では、いかにお互いの仕事をスムーズにするかという話題が増えています。 まだまだ模索中ではありますが、今回は、これを知っておけばお互いにとってハッピーなのでは？というPhotoshopの機能や工夫の豆知識をご紹介したいなと思います。 フロントエンドの方にぜひ知ってもらいたい！というのはもちろんですが、デザイナーの方もこれを読んで気遣いがチラ見えするPSDを作れるようになったら、明日から職場の空気が和やかになるかもしれませんね。 その気遣い、伝わってないかも。 デザイナーは普段Photoshopを使っていて自分の使いやすいようにプラグインを入れていたり、さまざまな機能を駆使してい

みなさん、ヒモになりたくありませんか？　僕はなりたいです。 そこで今回はヒモ生活をやっていた方を見つけたので、家にインタビューしに行きます。 飯野さんは演劇活動を続けながら、年収1000万を超える女性と付き合いだし、六畳一間のアパートから彼女が住む目黒区のおしゃれマンションに転がり込みました。バイト生活の売れない役者がどうやってそんなドリームを掴めたのか？　今日はそこのところを聞きます。 「いらっしゃい。上がりなよ」 「今日よろしくお願いします」 「シャンパン用意しておいたから」 「シャンパン？」 「そう。取材を受けるんだから、ちゃんとおもてなししようと思って」 「そんなインタビュー聞いたことないですよ」 「まぁ、せっかく買ったんだから飲んでよ。俺の金じゃないけどさ」 「はぁ……」 「チョコレートも買ったよ。俺の金じゃないけど」 「いただきます」 「すごいところ住んでるな」と驚いた ─ 良

こんにちは、LIGのヨシキ（@moriri_nyo）です。 みなさんはQ＆Aサイトで質問に回答したことはありますか？　あれって、真剣に回答したらどれぐらい人の悩みを解決できるものだと思いますか？ 本日は「教えて!goo」で24時間ぶっ続けで質問回答をやってみて、いくつ「ベストアンサー」が取得できるかにチャレンジしてみたいと思います。年末ですしね。 一緒にやってくれる友達を呼びました とはいえ、ずっと一人で24時間質問回答やるというのも寂しいので、友達を呼ぶことにしました。 アルファツイッタラーとして有名なカツセマサヒコ（@katsuse_m）さんです。 Twitterでフォロワーさんと毎日18時間ぐらいやりとりしているというカツセさんは、この企画に最適な人材。 オファー当初こそ「バカなの！？」と冷たい反応のカツセさんでしたが、「この企画、Twitterで実況していいよ」といった途端、「ネタ

こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは