« ありがたいまとめ。こういう一覧は便利。「CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説」。
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ | コリス
Category Archives: デザイン / UIUX
FigmaでWebサイトやスマホアプリのデザインシステムを制作する手順を解説 | コリス
« とりあえずメモ。「カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説」。
グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス
« 長年の謎が…。そういうことなんですね…。「真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です」。
ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note
« オサレ系。「CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるように」。
【解説】インフォグラフィックの作り方｜櫻田潤 VISUALTHINKING｜note
« 勉強になります。「インフォグラフィックの価値であり魅力なのは、情報を整理して伝えるという「機能的価値」と、見て楽しいといった「情緒的価値」の両方をバランスよく備えている点です」。
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3 | コリス
« 頭の整理に。「デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います」。
CSSのmargin-block-start、margin-inline-endなど、論理プロパティの使い方を徹底解説 | コリス
« 頭の整理に。「CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します」。
UXの向上に欠かせないパフォーマンスの重要性 | UX MILK
« まあ速いのは正義ってトコはあると思うんよね。「進行しているできごとの裏で起こっていることも、ビジュアルと同じくらい重要です。クライアントに対して、私たちはこれを説得する必要があります」。
買ったばかりのバルミューダが母にカスタマイズされてこうなった「オシャレと便利は仲良くなれない」 – Togetter
« 定期ですが、考えさせられる。「視認性の悪さを現場利用者による運用でカバーした例」「色を合わせてるのスゴい！おかん！」「老眼には勝てないのよね」。
2021年版、CSS Gridでどのように配置されるかをまとめたチートシート | コリス
« 正直、つかめてないところがあるのでありがたいです。「コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます」。
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス
« 一旦どこかで使ってみる。tableなのね。「HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです」。
Web制作の効率、生産性アップ！話題の最新オンラインツール33個まとめ – PhotoshopVIP
« 便利そうなのでメモ。「これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます」「カテゴリごとに整理している」。
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ | コリス
« どこかで使う。「CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、すぐに利用できます」。
Adobeの新機能「スーパー解像度」がすごすぎる！小さな写真画像でも驚くほど美しく拡大できる | コリス
« 試したい。「現在のところ、スーパー解像度が利用できるのはAdobe Camera Raw v.13.2のみですが、Lightroomなどにも近日実装される予定となっています」。
「Photoshop」、AIで写真を鮮明なまま拡大可能に – CNET
« 気になる。「写真の編集管理用ソフトウェア、Lightroom・Lightroom Classicにも近く搭載」「壁に飾るために大きくプリントしたい場合、解像度が増せば輪郭がきれいに表示されディテールも失われない」。
Webページ全体をキャプチャして画像として保存する4つの方法 – Naifix
« Screenpressoさんにはお世話になりました。便利です。「なかにはキャプチャ後に簡単な画像編集加工までできるツールもあるので、資料作成やデザインサンプルの紹介などで重宝すると思います」。
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」 | かちびと.net
« おさえておきたい。「しっかりしたドキュメントも用意されていますので多少の学習コストで使いこなせる程度ではないかなぁという印象でした。覚えておいても損はないんじゃないでしょうか」。
商用可能！日本観光がテーマの無料ピクトグラム280個セットExperience Japan Pictogram – PhotoshopVIP
« 使いたかった…。「日本らしい文化や観光体験を世界中に知ってもらうきっかけにもなりそうな、他のアイコンセットでは見かけない日本独自のスタイル」。
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
« これはありがたいまとめ。「Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説しています」。
これぞプロのデザイン！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ | コリス
« あとで見直さねば。「デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたら」。
【2021最新版】ノンデザイナーだからこそ知っておきたかった10のサイト – Qiita
« O-DANさん、お世話になっております。「普段私が資料作りなどの際に利用しているデザインの参考サイト、フリーのイラストサイト、配色のサイトを紹介。今回紹介するサイトは全て無料で利用できます」。
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」 | かちびと.net
« どこかで使う。「非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます」。
無料で商用利用やトレースOKな写真素材がてんこもりな絵師のための「Blank Phostock」 – GIGAZINE
« どこかで使う。「クレジット表記不要で編集・加工も可能。著作権は放棄されていませんが再配布や販売がなければ写真素材のレイヤーがある状態でPSDファイルを公開してもOK」。
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス
« あとで試す。「それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね」。
2020年用、日本語のフリーフォント417種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 コリス
« 日本語フォント、ありがとうございます。「Webデザイン、アプリ、動画、紙のデザイン、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる」。
CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ – PhotoshopVIP
« あとで試す。「リアルタイムによるプレビュー、確認が可能で、生成されたCSSコードをコピーするだけで利用できる、知っておくと差がつく利用機会の多いCSSプロパティが揃います」。
これは使わないと！レンダリングのパフォーマンスが向上する、CSSの新しいプロパティ「content-visibility」 | コリス
« Chromium 85でリリースとか。「ページの読み込みパフォーマンスを向上させるために最も影響があるCSSの新しいプロパティの1つかもしれません」。
Adobe CCユーザーに朗報！日本語フォントがAdobe Fontsに大量追加、砧書体制作所のフォント39種類が利用可能に | コリス
« あとで確認。「Adobe CCのユーザーなら追加料金なしで利用できます。商用利用もOK」「中国語、韓国語など、アジア圏のフォントが大量に増えています」。
2021年版、Flexboxでどのように配置されるかをまとめたチートシート | コリス
« ありがたいまとめ。あとで試す。「コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます」。
CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス
« タイムリーなのでメモ。「CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています」「要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニック」。