初めまして。フロントエンドエンジニアの謝花（ジャハナ）です。 入社して8ヶ月ほど経ちましてこうして初めてブログを書きます。 沖縄を離れて長い年月が経ちますが、東京では「ジャハナ」が人名だと認識されず未だに苦しんでおります。（電話ごしだと100%聞き取ってもらえません） そんなこんなで楽しくお仕事させていただいているのですが、最近とあるプロジェクトでHTTP/2を取り入れ、モバイルサイトのページ表示速度の高速化に取り組みましたので、そのお話をフロントエンドの視点からお話します。 表示速度が遅い！ 改善したい

はじめに 皆さん、こんにちは、今年の4月に入社したプログラミング未経験者のr_yxkxrx13です。 プログラミング超初心者！！ という方は、プログラミングの学習を始める前に何を準備して取り組めば分からない…ということが多いと思います。 プログラミング未経験である私が今まで取り組んだプログラミングの学習方法を紹介したいと思います。 はじめに プログラミング学習方法 コンピュータとネットワークの基礎学習サイト プログラミング学習サイト 書籍学習 プログラミング学習の取り組み方 終わりに プログラミング学習方

こんにちは。制作部の苅部です。 今回は、サービス横断でのWebパフォーマンス改善を1年間続けた中で指標としてSpeed Indexを採用した振り返りを書き残しておこうと思います。 Speed Indexとは 時間ごとの描画面積で算出される値で、体感速度の指標として参考にすることができます。 UX向上としてのWebパフォーマンス改善を考える時に、他の指標よりも役に立ちます。 DOMContentLoadedやwindow.onload、First Paintといったいくつもの指標はあくまで説明変数で、Spe

LIFULL FinTechの島田です。 LIFULL FinTechで運用する LIFULL保険相談サイト の一部ページにAMP（アンプ）を導入しました。 その際に検討した内容とリリース後しばらく運用してみて得られたAMPに関する知見を共有いたします。 AMP（Accelerated Mobile Pages） AMPはGoogle社とtwitter社が共同で推進しているプロジェクトです。 もともとはネットワーク環境や端末のハードウェアリソースが足りない地域向けにデザインされたものと言われています。 A

こんにちは、フロントエンドエンジニアの権守です。 既にお気づきの方も多いと思われますが、こちらのテックブログは今月から装いを新たにしています。これは 先日行った弊社コーポレートサイトのリニューアル に合わせたものです。 この記事では、今回行ったコーポレートサイトリニューアルについて実装面から紹介します。 特徴 今回のリニューアルの特徴は以下の3つです。 Vue.jsによるSPA (Single Page Application)としての実装 レスポンシブ対応 アニメーションによるリッチな表現 それぞれにつ

こんにちは！制作部 デザイナーの森本です。 最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。 そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。 今回は最近使ってみて一番シンプルで使いやすいと感じたジェネレーターサイト「IcoMoon」を使い、 SVGからアイコンフォントを作成していきます。 IcoMoonとは？ SVG形式のアイコンデー

2017年6月7日、第4回目となるFashion Tech meetupを開催しました。今回はVASILYが主催となり、バックエンドチーム、フロントエンドチーム、データチームが業務で行っている開発・運用のノウハウを発表しました。 本記事で弊社の登壇資料を公開しますので、ご参加できなかった方、Fashion Tech meetupを初めて知った方、是非ご一読ください。 メインセッション VASILY流CSSコーディング メインセッションの最初はフロントエンド担当の権守がCSSコーディングについて発表しました

エニグモ でWEBエンジニアをやっております、大宮です。 今回は、先日英語版 BUYMA で行った、AMP対応についてまとめた記事をお届けしたいと思います。 そもそもAMPとは？ Acceralated Mobile Pages の略です。 その名称が示す通り、モバイル端末で高速なWebページを表示させるためのプロジェクト、またはそのための フレームワーク (AMP HTML)の事です。 フレームワーク は Google と Twitter により共同開発されています。2016年の2月にローンチされて以降

こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介します。 はじめに RetinaディスプレイなどのDPR（Device Pixel Ratio）の高いディスプレイの普及に伴い、Webサービス側でもその対応が必要となっています。基本的には高解像

フロントエンジニアの苅部です。 medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。 先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。 Optimizeの特徴 1. 無償版でも十分使える 無償版でもほとんどの機能が利用できるため、予算のないプロジェクトでもすぐに実践的なA/Bテストが開始できます。 実際にOptimizeを使ってA/Bテスト

こんにちは、制作部 松本です。 私はこれまでCSSレイアウトで display プロパティ用いる際、 inline-block や table 、 最近では flexbox を使用してきました。 今でも float を多用している方はあまりいないのではないかと思います。 本記事では、よりフレキシブルなレイアウトが実現できる grid について紹介します。 grid は複雑なため、まだ体系的に全ての機能を説明できるほど私の理解も追いついていないので、今回はざっくりとした紹介となります。 対応ブラウザ 201

こんにちは、Webフロントエンドエンジニアの権守です。 フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。 ツールの利用 PerfectPixel 既に利用されている方も多いかもしれませんが、デザインとのピクセルずれの確認には PerfectPixel がオススメです。 Perfect

フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1年半ほど前にCSSコーディング規約を設けました。若干のルール追加を伴いながら、現在まで問題なく運用できています。本記事ではフロントエンドで運用しているCSSのコーディング規約に関して紹介します。 導入環境 本記事では以下の環境を前提にしています。 Ruby o

こんにちは、Webフロントエンドエンジニアの権守です。今回は弊社で開発中のサービスで実装した商品画像の拡大プレビュー機能の実装について紹介します。 概要 新サービスの商品詳細ページに次の動画のような拡大プレビュー機能を実装しました。 このように拡大プレビュー機能があることで、デザインの細部や生地感がわかり、ユーザにとってよりよい体験を与えることができると思います。 仕様 今回、機能を実装する上で満たさなければいけなかった仕様です。 画像をマウスオーバーした際に横に拡大プレビューを表示する 元の画像はカルー

こんにちは。 新卒2年目デザイナーのshinoです。   制作職、特にデザイナー・コーダーのみなさんは、通勤時間などのスキマ時間にスマホでウェブサイトを見て、「あ！このデザインいいな！」「この配色ステキだなあ」「このサイト、どうやってコーディングしているんだろう？」と思ったことがあるのではないでしょうか。   ただ、そういうときほど、PCを利用できない状況だったりしますよね。   わたしは、「会社や自宅に着いてからじっくり見よう…。」と保留にして、そのまま忘れてしまった経験がよくあります笑   できれば、