ノーコードでWebサイトが制作できるSTUDIOでは、作成したWebサイトに簡単にアニメーションを加えることができます。Webサイトにアニメーションを追加することで、特定のセクションや要素を目立たせ閲...
ノーコードでWebサイトが制作できるSTUDIOでは、作成したWebサイトに簡単にアニメーションを加えることができます。Webサイトにアニメーションを追加することで、特定のセクションや要素を目立たせ閲...
STUDIOのアニメーション設定にはループさせる機能がありませんが、2023年1月に追加されたカルーセルの自動再生機能を応用することで、一定速度で要素が無限ループするデザインを実装することができます。...
これは フェンリル デザインとテクノロジー Advent Calendar 2022 12日目の記事です。 「〇〇なら知っておきたい」なんてタイトル、我ながら「大げさだなあ」と思ってしまいます。 それでもそんなタイトルにしたのは、「iOSの文字が小さくなることを知らないままアプリのデザインに携わり、泣きを見た私みたくなってほしくない」という思いがあるからです。半年前の自分に出会えるなら、「絶対に知ってほしい」と伝えたいぐらい、これは重大な問題です。 という訳で、「iOSの文字が小さくなる問題」について、啓蒙していきたい気持ちを込めて書き記します。 「そんなことも知らなかったの？」と笑われてもいいので、私のような思いをする人間を生み出さないためにも、本当に知ってほしいと思います。 iOSの文字が小さくなる問題とは問題の概要一言でいうと「指定通りのフォントサイズで実装したにも関わらず、実際に仕
HEX Contrast Ratio Calculator HEXの2色（前景色と背景色）のカラーセットからコントラスト比を計算し、WCAG2.2が定める基準を達成しているかを検証します。 コードとの変換
本書は 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] - 表紙画像に、このコ
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは？ そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。（すべて記述するとかなり長く
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。 なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。 検索する限りでは意外と日本企業が公開しているファイルは少ない。 なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。 FALCON by SPEEDA コンポーネントごとにページを分けている VariantsはDefaultやLargeなどアッパーキャメルケースを採用 *書体はHiragino Kaku Gothic Proを指定 SmartHR UI by SmartHR 全コンポー
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
こんにちは。 ホットペッパービューティーのデザインディレクターの若松です。 ホットペッパービューティーでは、プロダクト領域におけるデザインチームのリーダーを担当しています。 デザインディレクターの主な役割は「プロダクトのデザインマネジメント」ですが、一言でデザインマネジメントといっても、プロダクトのUIデザインやディレクション、デザイン品質向上に向けた戦略策定や案件推進、デザインチームの統括など、あらゆるデザイン関連業務を行っています。 サービスの紹介 ホットペッパービューティーとは、国内最大級のヘア・ネイル・アイ・リラクゼーション・エステサロンが検索・予約できる総合美容メディアです。ユーザーは、フリーペーパー・ウェブサイト・スマートフォンアプリから利用できます。 国内最大級の掲載サロン数により、多くのサロンの中から自分のなりたいイメージを叶えてくれるサロンを探すことができます。また、ウェ
"Rebuild your mental model of web frontend programming." Web フロントエンドやそれにまつわるプログラミングにとりかかる上でもっておきたいメンタルモデルについて考える本です。 新しい知識は提供しませんが、Web フロントエンドの学び直し・向き直りをすることで楽しさ・自信を提供したいと考えています。 Web フロントエンドにおいて考えたいことは何なのか。 特定技術に左右されず、持っておくと良さそうなメンタルモデルとはどういったものなのか。 React, Angular を例に取り上げて 2 つの特徴を洗い出し、Web フロントエンドのコンポーネント志向と持っておくとよさそうなメンタルモデルについて考えます。 誤り・ご指摘やご意見があればフィードバックいただけると嬉しいです。
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
みんなの銀行：日本初の「デジタルバンク」として 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億円、
こんにちは、くだくらげです。 私はSketchもFigmaも両方使って仕事していますが、最近になって両アプリともOpenType Featureへの対応をアップデートに入れてきていることはご存知でしょうか？ 私はこの部分について前々から注目していたわけですが、その理由はSF Symbolsとの関係が大きいのではないかと睨んでいます。SF Symbolsがリリースされた直後の時期は、IllustratorやSketchでしかOpenType Featureを使うことができませんでした。この頃Sketchも一応利用できるという程度でした（正直現状も使いやすいとも思えないですが…）。それが2019年9月、10月辺りでFigmaもOpenType Featureサポートし、Sketchもその辺りの改善を加えてきました。 ということで、UIツールを提供している各社もサポートし気にしているであろうSF
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く