« 便利そうなのでメモ。「アイコンを扱うすべての人のために構築された無料ツールです。複数のマシンでもアイコンを一元管理できるので、チームで使用するのにも適しています」。
アイコンの管理が簡単に！たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager | コリス
Category Archives: デザイン / UIUX
新海カントク『面白い分析ですね』新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 – Togetter
« これは素晴らしい可視化。「新海誠監督のすごさは、明度彩度を落としている領域の色を多用しているのにも関わらず、あの鮮やかな色合の画面を作っている事だ」。
便利で爆速！ウェブ制作向け最新オンラインツール、無料素材37個まとめ – PhotoshopVIP
« メモ。ありがたい。「これらのツールやサービスを利用すれば面倒な作業をラクにこなし作業の効率化をアップできるでしょう。『なぜ今まで使っていなかったのか』、そんな気持ちにさせる便利ツール」。
CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場 | コリス
« メモ。「アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位が登場」。
よりよいスキャナビリティのためのUIデザイン | UX MILK
« 考えなければ。「スキャナビリティとは、ユーザーが読み取りやすいようにコンテンツを並べるアプローチ」「ユーザーがどのようにコンテンツを読むかに合わせてインターフェイスを十分に最適化することが重要です」。
CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス
« 勉強になります。「グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説」。
生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 ? GitHub
« これは確かに。「単語の間にスペースが挟まることで、検索、音声読み上げ、翻訳などに支障が出る」「機械を通じた人間向けの変換結果全てに悪影響を及ぼす」。
幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator | コリス
« ええやん。使い勝手よさそう。「グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます」。
CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス
« 便利そうなのでメモ。どこかでやってみたい。「headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です」。
CSSは奥が深い！Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ | コリス
« Facebookの中の方々も大変なんやな、って。「CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います」。
ランディングページをつくるときに考慮すべき10のこと | UX MILK
« 頭の整理に。「デザインのテクニックや、コピーに対するうまい言葉選びについてではありません。そうではなく、いまあるサイトを継続的にテストし、修正を繰り返すことで、少しずつ効果を上げていくものなのです」。
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize | コリス
« ドラグアンドドロップで動かせるところも良さそう。「さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています」。
無料の白地図について | 白地図専門店
« ありがとうございます。「もともとは有料サービス向けに作成したものを簡素化し、手軽にご利用いただけるよう変換した、有料の白地図の簡易版です。有料の白地図があるため、簡易版は無料で提供することが可能となりました」。
CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス
« いろいろ応用できそう。「ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます」。
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ – PhotoshopVIP
« どこかで使う。「これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう」。
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet | コリス
« 悩むので。「ページやアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介」。
プロのUIデザイナーに学ぶ、既存のデザインのクオリティを高めるデザイン知識とテクニックのまとめ | コリス
« おさえたい。「既存のUIデザインをどのような手順で改善すればよいのか、UIのクオリティを高め、ビジュアルをよくするためのデザイン知識とテクニックを紹介します」。
CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス
« 使える…！！「autoを使った要素のサイズ指定、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど」。
サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス
« 知らんかった、こんなんできるんや…。「HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます」。
Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較 | コリス
« 勉強しておきます。「Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します」。
box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 – ICS MEDIA
« いろいろと勉強になります。「この記事では影を表現するためのさまざまな技術・手法を説明しながら、その技術で実現できる表現のバリエーションも合わせて紹介します」。
スマホの写真を有名絵画みたいに変身させるGoogle’s Art Transferが優秀 | ナゾロジー
« 良さげ。あとでやる。「自分が所持している画像を、有名な画家たちのタッチで再表現することができます」「自画像を作りたい人、オリジナルのアイコンを作りたい人にもおすすめです」。
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker | コリス
« どこかで使う。「依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています」。
知っておくと便利！ビューポートを基準にした単位「vw、vh、vmin、vmax」を使ったCSSのテクニックのまとめ | コリス
« ありがたいです。「フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど」。
Bootstrap 5ではIE10に加え、IE11のサポート終了も判明、IE11に対応させる方法が用意 | コリス
« いよいよか。「先日、Bootstrap 5のリリースについて紹介しましたが、IE10のサポート終了だけでなく、IE11のサポートも終了することに決まったようです」。
UXリサーチの各種テクニックとその活用法 | UX MILK
« この辺は追いかけないといけない。「適切なUXリサーチの方法を選択し、それらをコツコツと導入していくことで、デザイナーは顧客と企業の両方に、より効果的なプロダクトを提供することが可能になるでしょう」。
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス
« メモ。「すべてのブラウザとデバイスで見栄えするようにデザインされています。CSSリセットの拡張版みたいなもので、さまざまなプロジェクトで利用できます」。
切迫感を正しく演出するには | UX MILK
« 見せ方よね、この辺は。「切迫感を出すことは、本質的には間違ってはいないことがおわかりいただけたでしょうか。ユーザーが急かされたりプレッシャーだと感じることがなければ、より満足してもらえるアプローチと言えます」。
Google Arts ＆ Cultureで世界2500の美術館にGO！ – PhotoshopVIP
« 良いですね。「自宅で過ごす時間が増えたことで、どう過ごしたらいいのか戸惑いを感じている人も多いと思います。そんなときにおすすめしたいのがデジタル美術館です」。
CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス
« どこかで使う。「IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニック」。