Figma の Component Properties を学ぶ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。 この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。 公式のチュートリアルはこちら↓ Component Properties とは？Component Properties (コンポーネントプロパティ) は名前の通り UI コンポーネントにプロパティを設定することができる機能です。プロパティは以下の3つを設定することができます。 Boolean プロパティ (要素の表示・非表示を切り替えられる) Text プロパティ (テキストをプロパティとして管理
なぜNateeは3年半前からTikTokに全張りできたのか｜小島領剣_Nateeの代表
「私たちはいつも、今後2年で起こる変化を過大評価し、今後10年で起こる変化を過小評価してしまう。無為に過ごしてはいけないんだ。」＿＿ビル・ゲイツ 今年は月に1本noteを書くと決めたものの、こんなにハードルが高いと思わなかった。。毎月月末にひぃひぃ言いながらカタカタ文字を綴っています。 今日は改めてNateeの本業である「TikTok」についての記事を書いてみようと思います。ご存じない方もいらっしゃると思うので先に自己紹介をさせていただくと、2018年11月にNateeという会社を創業しまして、それ以来一貫して「TikTokのクリエイターさんを活用したプロモーション支援」をやり続けて早3年4ヶ月になります。 従業員は17名ですが、月次の売上もようやく1億円を超えて、まだまだ成長しているスタートアップです。 今でこそ日経に「TikTok売れ」なんて取り上げられていたり、テレビでもTikTok
noteの虚空ボタンを顕現させる社内勉強会を開催しました｜sawa / swnjp
デザイナーの沢登です。 以前、コンテンツに関するアクセシビリティ勉強会をPRチーム森本さんに開催してもらいましたが、今回もアクセシビリティアドバイザーのfreee 伊原さんに協力いただきエンジニア向けの勉強会を開催しました。当日参加されたみなさん、伊原さん、ありがとうございました！ この記事では、目的や結果をオープン社内報でお届けします。 ❓ オープン社内報とは 一般的には社員しか見ることのできない「社内報」をだれでも見られるように公開することで、会社の中の様子を感じとってもらう記事企画です。 当日の勉強会資料 勉強会資料を確認 なぜやったのかアクセシビリティチームには、エンジニア・CS・ディレクターなど様々な職種・メンバーがサイドプロジェクトとして関わっています。しかし、ウェブエンジニアのアサインは深谷さん1人となっており、ウェブ版noteを1人でアクセシビリティ向上を行っていくことに限
Figmaのリファクタリングからはじめるデザインシステムの構築｜TORAJIRO
こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！） 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率
Webタイポグラフィの制作の変遷と現代的常識｜生明義秀 (Gishu Azami, Yoshi)
2021年2月17日に、株式会社ビー・エヌ・エヌから発行される 『オンスクリーン タイポグラフィ － 事例と論説から考えるWebの文字表現』にて、共著者として私が執筆した拙稿の冒頭部をここに紹介する。 ぜひ、本書も一度、手に取っていただきたい。 ISBN：978-4-8025-1207-7 定価：本体3,000円＋税 仕様：B5判変型／192ページ 発売日：2021年02月17日 著者：伊藤庄平、佐藤好彦、守友彩子、桝田草一、カワセタケヒロ、ハマダナヲミ、きむみんよん、関口浩之、生明義秀 デザイン：田中良治（Semitransparent Design） 出版社オフィシャルウェブサイト http://www.bnn.co.jp/books/10844/?fbclid=IwAR06VHN2CHhwF9YVh9PKpnBwv68yN1KluwPw0sW93DsOY8O2u6x0vYx1WYA
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
「源ノ角ゴシックとNoto Sansならトラブルないと思ってました」的 AdobeXDで使うフォントの話｜Risa Yuguchi
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか？ 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
ウェブの文字づめについて｜佐藤好彦(yoshihiko)
９月９日にオンラインで開かれた『FONTPLUS DAY Vol.27 〜佐藤好彦さんとフォントおじさんのウェブタイポグラフィ対談〜』に出演させていただきました。そこで紹介しました文字づめについて、まとめておきます。 見出しの文字づめこれは2017年のType&の時にお話したものですが、前回のFONTPLUS DAYで、Illustratorでレイアウトしたデータをそのまま表示したいというご意見があったので、改めてお話しました。 必要なデータは、gitHubの以下のページからダウンロードできます。 こちらのgetKerning.jsは、Illustrator用のスクリプトで、文字づめをした文字列を選択して、［ファイル→スクリプト→その他のスクリプト］でこのスクリプトを選ぶと、文字づめ情報をemに換算した配列データにして取り出すことができます。 HTMLに、JQueryとkerningTex
SonyのカメラをWebカメラとして使う方法【追加購入物無し！】｜Tetsu K
在宅勤務期間でWebカメラの購入を検討をしている方，そしてカメラを持っているのに写真を撮っていない方に朗報です．実はSonyのカメラ：αシリーズをWebカメラとしてzoomやteamsを使うことができるんです！ しかも追加で物品を購入する必要は全くありません！ 【2020年8月20日追記】ソニー公式のWEBカメラ化ソフトが発表されました。リンクはこちらです。
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
Webアクセシビリティガイドラインのコントラスト比について色相環を使って視覚化してみた。｜brightflavor@育休中Webデザイナー×グラフィックレコーダー
2-PCCS色相環の各色を背景色にした時、レベルAA達成になる色合いは？さて、コントラスト比は4.5:1で作るのがベストと改めて確認できたので、ここから色の勉強や色彩検定などで必ず出てくる色相環をベースに作ってみることにします。 ■前提として ・「PCCS色相環」の24色のカラーコードを基準色として利用。 ※RGB値（16進数）のコードは下記サイトより。 ・文字は白（#FFFFFF）。 ・色相環24色を背景色とし、HSVの「明度」を変化させ、どこまで明度を落とすとレベルAA（コントラスト比 4.5:1）達成になるかをみる。 ・測定に使用したアプリは「カラー・コントラスト・アナライザー」 結果、こうなりました。 色相環で表すとこんな感じに。 こうしてみると、レベルAA達成の時点でダーク寄りの色合いになってしまうのが、よくわかると思います。特に、朱色（v4）から緑（v12）のあたりまでの色は、
Sony α7ⅢをUSB接続でWebカメラにしてみた｜yuta ishizaka
弊社でもSIGMA fpでリモート飲み会に参加している人がいて、とてもイイ感じに映っていました。なんだか羨ましい。 なんとか自分の手持ちのα7ⅢもWebカメラとして使えないかな？とHDMIキャプチャボードを探すなどしていたのですが、キャプチャボードはそこそこ値段がはるし、なによりみなさん同じことをお考えなのか在庫が枯渇しているもよう。 どうしたもんかなぁと半ば諦めつつ色々調べていたところ、実はUSB接続といくつかのフリーソフトだけでWebカメラ化が可能らしいということがわかりました。 実際にやってみたところうまくいったので、やり方を書いておきます。 必要なものカメラ イイ感じに映るカメラを用意しましょう。 ただし、後述しますがどんなカメラでも使えるわけではないようです。 PCでリモートビュー表示が可能であることが最低限の条件で、あとは機種によって出来たり出来なかったりするようなので、試して
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
僕の理想のデスク環境ができたので自慢させてください。｜宇野雄 / note inc. CDO
みなさんのデスク周りはスッキリしていますか？ 雑念なくクリエイティビティが発揮できる環境になっていますか？ 🤔 👆こんな顔になってしまった方、まずはGo Andoさんによる神noteを御覧ください。話はそれからだ。 思えば僕が机周りを整理しようと思ったのは去年の冬。それまではガラステーブルでオシャレ感の演出にいそしんでいたのですが、ガラステーブルって冬冷たいんですよね。。なので温かみのある天然木のテーブルにしようというところからこの話はスタートします。 せっかくならば机を変えるだけではなく、その周りの機器なども10年来のものが多かったので全てまるっと見直しちゃおう！ってことで、様々なガジェットともにご紹介していきます。 机まず机は自作します。基本ですよね？やっぱり部屋にピッタリの机にしたいですから。 テーブルの天板といえばみんな大好きマルトクショップ。ウォールナット材にしようと思ってい
【転職エントリ】Googleに入社します｜Lillian
はじめに この記事には、Googleのオンサイト面接に向けて勉強した内容が記載されていますが、それらはすべて面接を受ける直前に書いておいたものです。このエントリを読むことで面接で聞かれた内容が予測されてしまわないようにそのようにさせていただきました。ご了承お願いします。 この記事について 令和元年に医師を退職し、ソフトウェアエンジニアに転職します。 自分にとって大きな転機であったのと、とても大変な道のりであったので、私という人間が辿った道筋を最初から最後までちゃんとまとめておきたいと思いこの記事を書くことにしました。 私のような他業種から未経験での転職を目指されている方にとっても、何らかの参考になる内容であれば幸いです。 私の生い立ち 私は小さい頃からテレビゲームが大好きで、学校から帰るとずっと家でゲームをしている子でした。あまりにもゲームが好きだったので、遊ぶだけではなく自分で作ってみた
Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方｜スマートキャンプ デザインブログ
まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP）の作成プロセスも過去に紹介しています。気になる方はあわせてお読みください。 Figma と Atomic Design の採用デザインツールは「Figma」、考え方は「Atomic Design」を採用しました。 Atomic Designをデザインに落とし込む際、コンポーネント単位での管理がしやすいFigmaが便利だと考えました。 Figmaに関する記事には、チュートリアルやテンプレートなどの内容は多く見かけますが、実務での採用・運用を主にした記事は少ないため、スマートキャンプでの例を紹介します。 ※本記事内で紹介する画面キャプチャは開発中のものや、記事用に独自に編集したものも含まれます。 Atomic Design についてAtomic Desig
#YJMS2019 パネルディスカッション② 「DOUBT!THE MEDIA」イベントレポート｜ほったりょうと｜note
登壇者のみなさま 株式会社クラシコム 代表取締役 青木 耕平 さん dely株式会社 代表取締役 堀江 裕介 さん 新R25 編集長 渡辺 将基 さん モデレーター：アジャイルメディア・ネットワーク株式会社 取締役CMO 徳力 基彦 さん 徳力さん「非常識になってしまった『マーケティングの常識』ってどんなこと？」 青木さん「生活者をデータから理解できると思っているか否か。自分たちは無理だと思っている。無理なので、自分自身を深掘るしかないと思っている。自分に似ている人も多少なりともいると思っている」 鈴木さん「生活者・読者のキャラクターは定性的にはもっている。ただ、それをデータ化して証拠を出せと言われると難しい」 青木さん「マーケティングを財務として扱っているきらいいがあると思う。マーケティングを説明責任を果たすためのテクノロジーばかり発展している気がする。本質的にニーズやインサイトを深掘る
ヤフーのマーケティングサミットで考えた「1ページビューの重み」と「データで分かるという誤解」｜徳力基彦（tokuriki）
実は、当初はヤフーさんの社内会議室で100人ぐらいでやるもんだと思い込んでいたんですが（汗）、750人の巨大な会場で、アドテックを彷彿とさせるような雰囲気での開催でした。 しかも、イベントのテーマが「そのマーケティングを疑え！」で私が担当するセッションが「そのメディアを疑え！」という非常に過激なテーマ設定。 ただ、私は以前に企画者であるヤフーの井上さんから、「マーケティングは死んだのか」というテーマのモデレーターを振られた経験があることもありますし、パネリストが、クラシコムの青木さん、delyの堀江さん、新R25の渡辺さんという、前から話を聞いてみたかった3人だったので、即答でお引き受けした次第です。 当日の内容については、さすがヤフーさんの一大イベントと言うことで、いろんな業界のインフルエンサーが様々な形でまとめてくれているので、そちらをご覧頂ければと思いますが。 個人的にも、非常に印象
大企業でしか働いたことのない40歳オッさんがスタートアップへ行った話｜萩原 雅裕｜経営アドバイザー
スタートアップには興味あるけど、今さらなぁ…とか 自分はもう若くないので、スタートアップなんて無理だよな…とか そんな環境で自分がやっていけるか不安だ…とか そんな風に思っている方、きっと多いんじゃないだろうか。 最近はずいぶん市民権を得てきたものの、なんだかんだ言ってもスタートアップへ転職する人ってまだまだ少ない。 そこで転職経験はあったものの大企業でしか働いたことのなかったオッさんが、スタートアップ的な環境へ行っても何とかなったよ、という話を書いてみようと思う。 結論を先に言ってしまえば、 人間その気になれば何でもできる。 追い込まれればどうにかしようとする。そしてどうにかなる。 これに尽きる。 むしろ40くらいのオッさんなら、どうにかできる度合いは意外と大きい。 という激励のメッセージを「自分はもう若くない」「自分には無理なんじゃないか」と思っている同士へ送りたい。 この投稿で「自分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe XDの情報をキャッチアップするURLのまとめ｜えび🍤
