3つの実装例で学ぶ、STUDIOアニメーションの作り方
STUDIOアニメーションの基本をマスターしよう！ | STUDIO Blog
3つの実装例で学ぶ、STUDIOアニメーションの作り方
STUDIOの自動カルーセルを使って無限ループ・スライドショーを実装する方法
STUDIOのアニメーション設定にはループさせる機能がありませんが、2023年1月に追加されたカルーセルの自動再生機能を応用することで、一定速度で要素が無限ループするデザインを実装することができます。...
アプリUIデザイナーなら知っておきたい、iOSの文字が小さくなる問題｜tamamomo
これは フェンリル デザインとテクノロジー Advent Calendar 2022 12日目の記事です。 「〇〇なら知っておきたい」なんてタイトル、我ながら「大げさだなあ」と思ってしまいます。 それでもそんなタイトルにしたのは、「iOSの文字が小さくなることを知らないままアプリのデザインに携わり、泣きを見た私みたくなってほしくない」という思いがあるからです。半年前の自分に出会えるなら、「絶対に知ってほしい」と伝えたいぐらい、これは重大な問題です。 という訳で、「iOSの文字が小さくなる問題」について、啓蒙していきたい気持ちを込めて書き記します。 「そんなことも知らなかったの？」と笑われてもいいので、私のような思いをする人間を生み出さないためにも、本当に知ってほしいと思います。 iOSの文字が小さくなる問題とは問題の概要一言でいうと「指定通りのフォントサイズで実装したにも関わらず、実際に仕
HEX Contrast Ratio Calculator
HEXの2色（前景色と背景色）のカラーセットからコントラスト比を計算し、WCAG2.1が定める基準を達成しているかを判定します。
Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
初公開！「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
Figmaに公開されている日本のデザインシステム系ファイル
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
BtoBサイトを成功に導く180のチェックリスト | knowledge / baigie
このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
ホットペッパービューティーアプリにて、長年できていなかったデザイン改善が実現できた理由｜リクルート プロダクトデザイン室
こんにちは。 ホットペッパービューティーのデザインディレクターの若松です。 ホットペッパービューティーでは、プロダクト領域におけるデザインチームのリーダーを担当しています。 デザインディレクターの主な役割は「プロダクトのデザインマネジメント」ですが、一言でデザインマネジメントといっても、プロダクトのUIデザインやディレクション、デザイン品質向上に向けた戦略策定や案件推進、デザインチームの統括など、あらゆるデザイン関連業務を行っています。 サービスの紹介 ホットペッパービューティーとは、国内最大級のヘア・ネイル・アイ・リラクゼーション・エステサロンが検索・予約できる総合美容メディアです。ユーザーは、フリーペーパー・ウェブサイト・スマートフォンアプリから利用できます。 国内最大級の掲載サロン数により、多くのサロンの中から自分のなりたいイメージを叶えてくれるサロンを探すことができます。また、ウェ
Just WebFrontend - 学び直しとメンタルモデル再構築
"Rebuild your mental model of web frontend programming." Web フロントエンドやそれにまつわるプログラミングにとりかかる上でもっておきたいメンタルモデルについて考える本です。 新しい知識は提供しませんが、Web フロントエンドの学び直し・向き直りをすることで楽しさ・自信を提供したいと考えています。 Web フロントエンドにおいて考えたいことは何なのか。 特定技術に左右されず、持っておくと良さそうなメンタルモデルとはどういったものなのか。 React, Angular を例に取り上げて 2 つの特徴を洗い出し、Web フロントエンドのコンポーネント志向と持っておくとよさそうなメンタルモデルについて考えます。 誤り・ご指摘やご意見があればフィードバックいただけると嬉しいです。
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
みんなの銀行：日本初の「デジタルバンク」として Google Cloud に勘定系を構築。Cloud Spanner で銀行基幹システムで求められる可用性を実現 | Google Cloud Blog
みんなの銀行：日本初の「デジタルバンク」として Google Cloud に勘定系を構築。Cloud Spanner で銀行基幹システムで求められる可用性を実現 2021 年 5 月にサービス提供を開始した「みんなの銀行」は、デジタル ネイティブ世代をターゲットとしたスマートフォン専業銀行。金融にまつわる煩わしさを排除し、ゼロベースでこれからの銀行に求められる機能を開発・提供していくと打ち出しています。そんな同行の大きな技術的トピックの 1 つが、勘定系システムにパブリッククラウドを採用したこと。これはもちろん国内初*の試みです。ここではサービス開始後の手応えをシステム構築をリードしてきた皆さんにお伺いしました。 利用している Google Cloud ソリューション： Google Cloud Databases、Stream Analytics 利用している Google Cloud
中田の質問箱です
みずほ関係者の方でしょうか。連日のように繰り返されるシステム障害とその批判を目の当たりにして疲弊しているのだろうとお察しします。ただ、仰っている内容はどれも妥当性に乏しいので、公言されるとますます批判の声が強まってしまうことが危惧されます。ご自身の反論が有効かどうかを検証する有力な方法は「他の2メガバンクではこのロジックは通用するか？」という考え方です。以下、すべてこのアプローチでご説明します。 まず「銀行リテールの利益は250億円しかなく赤字のこともあるのだから莫大な設備投資をすることは株主にとって妥当ではない」というのは論理が全く逆で、莫大な設備投資をしたのですからもっと稼がなければならないのに稼げていないことが問題なのです。MUFGやSMFGをご覧頂ければ銀行リテールだけでも1,000億円単位で儲けていることがわかるでしょう。しかもシステム統合に要した費用はMUFGで3,300億円、
SF Symbolsの使い方とカスタマイズの仕方 - くらげだらけ
こんにちは、くだくらげです。 私はSketchもFigmaも両方使って仕事していますが、最近になって両アプリともOpenType Featureへの対応をアップデートに入れてきていることはご存知でしょうか？ 私はこの部分について前々から注目していたわけですが、その理由はSF Symbolsとの関係が大きいのではないかと睨んでいます。SF Symbolsがリリースされた直後の時期は、IllustratorやSketchでしかOpenType Featureを使うことができませんでした。この頃Sketchも一応利用できるという程度でした（正直現状も使いやすいとも思えないですが…）。それが2019年9月、10月辺りでFigmaもOpenType Featureサポートし、Sketchもその辺りの改善を加えてきました。 ということで、UIツールを提供している各社もサポートし気にしているであろうSF
記者に「プログラミングのスキル」って必要なの？ちなみにNHKニュースの画像生成も記者がコードを書いてます｜NHK取材ノート
記者に「プログラミングのスキル」って必要なの？ちなみにNHKニュースの画像生成も記者がコードを書いてます 新型コロナウイルスの新規感染者の数を示す日本地図に、毎日厳しい視線を送る男がいる。 コロナの感染拡大の今後が懸念されるが、地図がきちんと描画されているかも気になってしまう。 それはこの「新型コロナ感染者数マップ作画システム」をプログラミングしたのが彼だから。 ちなみに彼は技術部局のエンジニアではなく、いつもはテレビで解説している記者だったりする。 このシステム、記者が作りましたこんにちは、NHK解説委員の三輪誠司といいます。専門はITやサイバーセキュリティで、主に「シブ5時」や「くらし解説」などでニュースの解説を担当しています。 新型コロナウイルスの「感染者数マップ作画システム」は、1週間で作成しました。 言語はJava、地図はSVGで、ブラウザの画面をそのまま放送で使っています。SV
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Guideline - Component Standardization
Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた! - Qiita
政府統一Webサイト、暫定版を12月までに公開 製作事業者決定
