Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか｜rikika
まずはじめにこれは、デザインエンジニアとして生きてきた私Rikikaのポジショントークです。 エンジニアとデザイナーの垣根が少しでも低くなれば、最高のプロダクトが次々に生まれると信じています。気に入ってくれた方はフォローお願いします！ Server-Driven UI（SDUI）とは何かAirbnbのテックブログで出てきた、UIをサーバーサイドで定義し、クライアント側に返却するという手法です。 つまりクライアント側で状態管理やレンダリングのロジックを持たせずに、各プラットフォームでのUIの同一性をサーバー側で担保するというもの。 GhostPlatform というイケイケの名前で立ち上がったというプロジェクト、Airbnb社内ではかなり普及しているようです。 ※GuestとHostを大切にするためのシステムだからGhostらしい SDUIは何を解決しているのか例えば、コンポーネント間の並び
よりよい文書を書くための校正ツール「textlint」のSmartHR用ルールプリセットを公開しました！｜SmartHRオープン社内報｜株式会社SmartHR
おつかれさまです。プロダクトデザイングループのこぎそ（@kgsi）です。みんなのデザインシステムことSmartHR Design Systemプロジェクトの一環として、より良い文書を書くための校正ルール「textlint（テキストリント）」のSmartHR用ルールプリセットをオープンソースで公開しました！ SmartHR用ルールプリセット公開の背景 SmartHRのバリューには「一語一句に手間ひまかける」と、SmartHR Design Systemのデザイン原則の中でも「言葉からはじまるデザイン」と表されていますが、改めて、SmartHRは「言葉」をとても大切にしている会社ですよね。 UXライティングチームを中心に、日々文言ガイドラインが整備され、SmartHRの扱う言葉は進化しています。整備対象は各部署共通で使う文言から、ヘルプページ、プロダクトで使う文言まで多岐にわたっています。 ▲
CSS Variablesを使ってWeb LP制作のエンジニア作業時間を0にした話 - Mirrativ Tech Blog
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
どのようにPlatformチームの組織変更をしたか | メルカリエンジニアリング
Platform チームの@deeeeeeeetです． Platform チームは2年前にMercariがMicroservicesの移行を始めたときに一緒に立ち上げられたチームです．Platform チームはMicroservicesを動かすための基盤や開発や運用のためのツールセットなど提供しています．立ち上げ時は自分を含めて2-3人で始まったチームですが2年が経ち10人を超えるチームにまで成長しました． チームのメンバーが増えるほど1チームとして動くには限界がきており，またMicroservices化が進めば進むほどチームの負う責任範囲も広くなりCognitive load (認知負荷) も高くなっていました．これらの課題を解決するために組織変更を行い，Platform チームを複数の専門性に特化したチームに分割しました． 本記事ではチームのデザイン，チームが分離しても独立性を保ちつつ
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す | Recruit Tech Blog
こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹介します。また、各人で解釈が分かれがちなFLOCSSのレイヤ分けの一例と、FLOCSS導入後のCSSの開発体制についても併せてご紹介します。 FLOCSSとは？ CSSを書く際のファイル構成や命名規則などを取り決めたルールの1つです。CSSの命名規則というとBEM、OOCSS ( Object Oriented CSS )、といったものが有名なところして挙げられますが、FLOCSSはこれらの良いところを組み合わせたものとなります。Foundation Layout Objectと役割ごとにレイヤ（層）が分かれているのが特徴です。これにより、CSSコードの再利用・拡張がしやす
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
