こんにちは！制作部 デザイナーの森本です。 最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。 そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。 今回は最近使ってみて一番シンプルで使いやすいと感じたジェネレーターサイト「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を利用できない状況だったりしますよね。   わたしは、「会社や自宅に着いてからじっくり見よう…。」と保留にして、そのまま忘れてしまった経験がよくあります笑   できれば、

フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。 viewportについて まず初めにviewportに関して説明します。 viewportはHTMLメタ要素の一つです。これを指定することにより、スマホ/タブレットで表示される際の描画領域幅やスケールを決定できます。 viewportは以下のようなタグで指定できます。 < meta name = 'viewport' content

こんにちは。制作部の西野です。 このmediba Creator × Engineer ブログの立ち上げ担当をしておりました。 9月でブログの開設から1年になりますので、少し早いですが振り返りをしようと思います。 ブログ立ち上げの背景 このブログは、medibaのエンジニア、デザイナーが最近経験したこと、興味があって調べたこと、学んだことを投稿しているブログです。 medibaの開発のことをもっと知ってもらいたい サービスを開発、運用する上で貯めたナレッジを社内外に共有したい 技術を広めることで社会貢献に

　こんにちは。初めまして！メディア開発本部 エンジニアの東です。2年目のサーバサイドのエンジニアで、サイトのパフォーマンスチューニングをやっています。本日はWebページのパフォーマンスを知る一つの手段である、ページの表示完了までのウォーターフォール図についてその見方を紹介したいと思います。 Webページが表示されるまで Webページは、ブラウザから表示完了までにサーバへリクエストを送り、ページを構成するための要素（CSS, javascriptファイル, 画像など）をリクエストし、場合によっては更にリクエ

みなさま、こんにちは！エンジニアの東です。 フロントエンドの開発は不慣れな私はCSSの扱いもまだまだ未熟です。 というのも、私は、自身の業務では、CSSはなかなか触る機会がないです。 それもあって、私はCSSには苦手意識がありまして・・・特にfloatの扱いがうまくできないんですよね・・・！floatを使ってコンテンツを配置しようとすると大体レイアウトが崩れて、混乱します。 そんな私でも、floatの代替として使える非常に便利なものがありましたのでそちらを紹介したいと思います。 それは、 CSS3 Fle

エンジニアの荒井です。現在VASILYでは サマーインターンシップ を開催しています。募集開始後、さっそく多くの方からご応募いただいています。 インターンコースのひとつにフロントエンド開発コースがあるのですが、HTMLを書くのか、サーバーサイド言語を書くのか等、業務範囲に興味がある方が多いようです。そこで今回は、VASILYフロントエンドチームの役割と、インターンシップの内容について紹介したいと思います。 VASILYでのフロントエンドエンジニアの役割 はじめにVASILY内でのフロントエンドエンジニアの