studydesignのブックマーク - はてなブックマーク

グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ

生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。僕の入社の経緯や業務内容についてはこちらからご覧いただけます！デザインシステムとはデザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。古い物ですと1975年に

studydesign 2021/07/21

リンク

欧文フォントは歴史と紐づけるとまじでわかりやすい｜ありさん

欧文フォントは歴史と紐づけるとまじでわかりやすい 1,124 ありさん 2021年5月25日 18:54 ダウンロード copy #デザイン #フォント 1,124 3人がオススメしていますこの記事が気に入ったらサポートをしてみませんか？記事をサポート

studydesign 2021/05/28

文字を書くのに使用した道具の変遷や文字が生み出された場所や用途に関する考察が一切抜けてる。もっと勉強して内容を充実させてほしい。

リンク

Adobe Fontsに日本語フォントが大量追加！🎉 キリギリスや味明やルイカなど、Adobe CCユーザーは無料

Adobe CCユーザーに朗報です！🎉 Adobe Fontsにまたまた、191書体の大量の日本語フォントが追加されました。これでトータル436の日本語フォントが利用できます。 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。フォントのライセンス -Adobe Fonts 今年初めにも日本語フォントが大量に追加されましたが、さらに追加です！前回の分は、下記の記事をご覧ください。日本語フォントがAdobe Fontsに大量追加、砧書体制作所のフォント39種類が利用可能におそらく、4/10のフォントの日に向けたアップデートだと思いますが、まだまだ追加されるかもしれません。とりあえず、現在追加されてたものを紹介します。まずは、デザインシグナル。七種泰史氏のフォント。キリギリス・こころ

studydesign 2021/04/08

うれしい

リンク

UXの向上に欠かせないパフォーマンスの重要性

２. 作業を完了するのに時間がかかる作業時間が長くかかるほど、ユーザーはその作業を諦める傾向にあります。このことはコンバージョン率に悪影響を及ぼします。ローディングの時間が1秒遅れるとコンバージョン率が7％減少し、閲覧するページ数は11％減少します。実際に、ローディング時間が4秒以上かかるページでは、4人に1人がページを閉じてしまうでしょう。さらにモバイルの場合はもっと悪く、ローディング時間が5秒以上かかると、74％のユーザーが諦めます。︵出典︶作業を完了するのにユーザーが訪れなければいけないページが増えるのは、ユーザーに新しい機会が提供されますが、この問題を悪化させるだけです。ユーザーはローディング時間に対して強い先入観を持っているため、スピードが最適化されたサイトは、競争優位を得ることができます。しかしパフォーマンスが悪いことは、コンバージョンについてだけではなく、知覚の面でも

studydesign 2021/04/01

リンク

Debugging CSS

Browser DevTools help us a ton these days in debugging CSS, but there isn’t exactly a step-by-step guide about it that I know of. This book leans into that, showing off how to debug really practical and understandable CSS issues with the help of DevTools when appropriate. What’s in the book Introduction and Overview A bit of history about debugging and how it evolved over the years. Introduction t

studydesign 2020/11/03

リンク

【Photoshop入門】Webデザインをはじめよう！第1回デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

studydesign 2020/10/28

リンク

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説

CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。 CSS Variables 101 by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの変数（カスタムプロパティ）とは変数名の付け方 CSSの変数のスコープ CSSの変数のフォールバック CSSの変数の効果的な使用例インラインでCSSの変数を定義メディアクエリでCSSの変数を定義 CSSの変数の継承 CSSの変数のバリデーションの仕組み CSSの変数の興味深い発見デベロッパーツールで使用できる便利なテクニック終わりにはじめに CSSの変数（別名: カスタムプロパティ）がブ

studydesign 2020/10/28

リンク

2020年版！日本国内のWeb制作会社と実績が網羅されたWeb制作会社年鑑のPDFが、無料でダウンロードできます

昨年、当ブログでも紹介して好評だった﹁Web制作会社年鑑電子版1冊まるごと無料﹂キャンペーンが、今年も実施されています。無料期間は、2020年12月15日まで。﹁Web制作会社年鑑2020﹂のPDF、電子版が無料でダウンロードできます。定価4,800円が完全に無料です。総ページ数は400ページ、日本国内のWeb制作会社とその実績が網羅されており、Web制作者必携の1冊です。自社や他社の実績を確認したり、Webサイトやスマホアプリのアイデアを見つけたり、転職時の参考資料やクライアントとして制作会社を探す時にも役立ちます。

studydesign 2020/10/28

リンク

デザインシステムの作り方徹底ガイド参考にしたい導入事例まとめ

この記事では、デザインシステムを作成するときの基本ガイドをまとめています。この記事は3つのパートで構成されています。デザインシステムを理解する︵デザインシステムとは何か、いつ作るべきか？︶デザインシステムの作成︵作成プロセスとやっておきたい項目︶デザインシステムの具体的なサンプル例︵デザイナーとデベロッパー、それぞれの観点より︶デザインシステム追加の検討事項︵その他のコンセプトや参考文献など︶ *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、﹁プロダクト︵Product︶﹂という言葉を使用しています。この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイルデザインシステムを理解しようデザインシステムとは？デザインシステ

studydesign 2020/10/13

リンク

CSSで期待通りに表示されない根本的な原因の見つけ方

CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。はじめに CSSの基本的なバグドロップダウンメニューの配置 HTMLの置換要素オーバーフロー要素とインラインブロック要素インラインブロック兄弟間のスペースまとめはじめに

studydesign 2020/10/09

リンク

グラフを作ってデータを可視化する時に「見やすい色」を選ぶコツまとめ

ウェブデザインやグラフィックデザインにおいて色の選択は非常に重要かつ難しい作業ですが、デザイナーでなくともグラフを作る際などに色の選択をする必要に迫られることがあります。データを分かりやすく可視化するためには、どのような色の組みあわせを選択すべきなのか、プロでなくともプロのようなグラフを作れるようになるポイントを、ビジュアルコミュニケーションを専門とするLisa Charlotte Rostさんがまとめています。 How to pick more beautiful colors for your data visualizations | Charta ble https://blog.datawrapper.de/beautifulcolors/ ◆色相をあれこれピックアップしすぎないカラーホイール上の色を大別すると、赤・オレンジ・黄・緑・青・紫の6つの色相となりますが、データを可視化

studydesign 2020/09/10

color
色

リンク

【図解入門】シンプルな図の作り方｜櫻田潤🎨インフォグラフィック・エディター｜note

3年前に、図解の基本をまとめた本﹃図で考える。シンプルになる。﹄を書きました。その内容から、エッセンスを抽出したのが本 noteになります。︵1︶﹁幕の内図解﹂と﹁イチオシ図解﹂図には、大きく分けて、2つのアプローチがあります。ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。たとえば、桃太郎の話を﹁幕の内図解﹂のアプローチでまとめてみたのが、つぎの図です。登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。この図を使って、人に説明しようとすると、﹁まず、お婆さんですが……﹂﹁つづいて、お爺さんですが……﹂といった具合に、﹁お婆さん﹂﹁お爺さん﹂﹁桃太郎﹂それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。相手がじっくり聞く耳を持っ

studydesign 2020/08/30

リンク

ディズニー直伝！Webデザインでアニメーションの基本原理を応用する方法

この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。ディズニー社の現場で長年培われた、アニメーションの基本原則12個︵英: 12 Principles of Animation︶は、﹁生命を吹き込むイリュージョン: ディズニーアニメーション︵英: The Illusion of Life: Disney Animation︶﹂として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめた

studydesign 2020/08/20

リンク

たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。上下中央揃え: place-it ems: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-it ems: centerを使えば、思ったよりに簡単に実現できます。まず、display: gridを記述したら、一緒にplace-it ems: centerを同じ要素に追加します。place-it emsは、align-it emsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-it emsとjustify-it emsの両方がcenterとして設定されます。 .paren

studydesign 2020/08/20

リンク

新しいデザインの教科書

【ご挨拶】 / 【目次】 / settings / 解釈が変わる写真 / ラインスケッチ / 感覚の変換による観察 / 蓋の分類 / 新しい分け方の基準 / バランスによる新しい価値 / 約束事を共有することで、読みとけるようになる四コマ漫画 / 丸を取り出す / ｷﾘﾄﾘﾑｼ / レイアウトが解釈を生み出す / モノをコントロールするための身体言語 / space / 「解釈が変わる写真」野中大

studydesign 2020/08/12

リンク

社内UIライブラリの変遷 - STORES Product Blog

heyのSTORESでECの開発をしている@nkobaです。この記事ではフロントエンドで使用しているUIライブラリについて発信していきます！社内UIライブラリとは STORESのECではSTORES.jp-Front-Commonというフロントエンドライブラリを作成しています。その一部としてUIライブラリが含まれており、これを社内プロダクトで利用することで開発効率を向上させたり、ユーザーにとっての触り心地を担保しています。基本的にSTORESのECではブランド、デザイン、使い心地などを表現するために、ほぼ全てのUIは自作しています。社内UIライブラリで主に使用している技術は以下になります。 Vue.js Storybook REG-SUIT Jest コンポーネントライブラリの実際実際に使われているページ導入期背景私がフロントエンドチームに加わったのは2018年の末頃でし

studydesign 2020/07/31

リンク

2020年の11の必見のフロントエンドトレンド - Qiita

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された﹃ 11 Must-Know FrontEnd Trends for 2020 ﹄の和訳です。本記事は原著者から許可を得た上で記事を公開しています。ランチ中のフロントエンドトークでスマートに見られる方法！チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。たぶんね。だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

studydesign 2020/07/29

リンク

デザインで「人間が感覚的に見分けやすい色」を選ぶ方法をデータ可視化のプロが解説

ある特定の色を表現するために利用される色空間には、RGBやHSV、HSLなどがあり、それぞれの色空間で色を表現する方法が異なります。データ可視化ツールのDatawrapperでCTOを務めるGregorAisch氏が、﹁人間が感じる色﹂に基づいて色を使い分けるには、色空間が重要であると自身のブログで語っています。 How To Avoid Equidistant HSV Colors https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/ Take Care of your Choropleth Maps https://www.vis4.net/blog/2011/12/choropleth-maps/ Aisch氏が色の選択の重要性に気づくきっかけとなったのは、﹁The Guardian﹂が公開していたアメリカの

studydesign 2020/06/29

リンク

Adobe XDの使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書

Adobe XDを使用してワイヤーフレーム、プロトタイプ、デザインカンプなど、WebページのUIを設計するワークフローに沿って学べる解説書を紹介します。ワイヤーフレームを作るにあたっての準備から、実際の作り方、コンポーネント管理、画面遷移設計、プロトタイプ共有、デザインスペック共有など、Adobe XDの実践的な使い方を基礎からしっかり学べます。 Adobe XDの解説書を探していた人には、間違いのない決定版の一冊です！本書はWeb制作に携わるすべての人、ディレクター、デザイナー、コーダーにお勧めの本です。Adobe XDをまだ使用したことがない、すでに使用しているけどもっと使いこなしたい、そんな人にぴったりの一冊です。発売されて間もないのに、Amazonで☆5レビューが早くもかなりついています。

studydesign 2020/06/12

リンク

ウェブサイト作成のよくある間違いと解決テクニックまとめ【保存版】

この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上）パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い論理的に分割されたブロックの周りには、同じサイズのパディ

studydesign 2020/06/01

リンク

はてなブックマーク

タグ

studydesignのブックマーク (329)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス