• Category Archives: デザイン / UIUX

アイコンの管理が簡単に!たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager | コリス

アイコンの管理が簡単に!たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager | コリス
«  便利そうなのでメモ。「アイコンを扱うすべての人のために構築された無料ツールです。複数のマシンでもアイコンを一元管理できるので、チームで使用するのにも適しています」。
    

新海カントク『面白い分析ですね』新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 – Togetter

新海カントク『面白い分析ですね』新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 - Togetter
«  これは素晴らしい可視化。「新海誠監督のすごさは、明度彩度を落としている領域の色を多用しているのにも関わらず、あの鮮やかな色合の画面を作っている事だ」。
    

便利で爆速!ウェブ制作向け最新オンラインツール、無料素材37個まとめ – PhotoshopVIP

便利で爆速!ウェブ制作向け最新オンラインツール、無料素材37個まとめ - PhotoshopVIP
«  メモ。ありがたい。「これらのツールやサービスを利用すれば面倒な作業をラクにこなし作業の効率化をアップできるでしょう。『なぜ今まで使っていなかったのか』、そんな気持ちにさせる便利ツール」。
    

CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場 | コリス

CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場 | コリス
«  メモ。「アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか?テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位が登場」。
    

よりよいスキャナビリティのためのUIデザイン | UX MILK

よりよいスキャナビリティのためのUIデザイン | UX MILK
«  考えなければ。「スキャナビリティとは、ユーザーが読み取りやすいようにコンテンツを並べるアプローチ」「ユーザーがどのようにコンテンツを読むかに合わせてインターフェイスを十分に最適化することが重要です」。
    

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス
«  勉強になります。「グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説」。
    

生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 ? GitHub

生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 ? GitHub
«  これは確かに。「単語の間にスペースが挟まることで、検索、音声読み上げ、翻訳などに支障が出る」「機械を通じた人間向けの変換結果全てに悪影響を及ぼす」。
    

幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator | コリス

幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator | コリス
«  ええやん。使い勝手よさそう。「グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます」。
    

CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ | Webクリエイターボックス

CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ | Webクリエイターボックス
«  便利そうなのでメモ。どこかでやってみたい。「headタグ内にCSSファイルを読み込む記述を追加するだけでOK!学習コストもかからずとっても便利です」。
    

CSSは奥が深い!Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ | コリス

CSSは奥が深い!Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ | コリス
«  Facebookの中の方々も大変なんやな、って。「CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います」。
    

ランディングページをつくるときに考慮すべき10のこと | UX MILK

ランディングページをつくるときに考慮すべき10のこと | UX MILK
«  頭の整理に。「デザインのテクニックや、コピーに対するうまい言葉選びについてではありません。そうではなく、いまあるサイトを継続的にテストし、修正を繰り返すことで、少しずつ効果を上げていくものなのです」。
    

レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize | コリス

レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize | コリス
«  ドラグアンドドロップで動かせるところも良さそう。「さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています」。
    

CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス

CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス
«  いろいろ応用できそう。「ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます」。
    

最先端Webテクはこれ!コピペできるHTML/CSSスニペット77個まとめ – PhotoshopVIP

最先端Webテクはこれ!コピペできるHTML/CSSスニペット77個まとめ - PhotoshopVIP
«  どこかで使う。「これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう」。
    

これでもうCSSのクラス名は迷わない!BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet | コリス

これでもうCSSのクラス名は迷わない!BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet | コリス
«  悩むので。「ページやアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介」。
    

プロのUIデザイナーに学ぶ、既存のデザインのクオリティを高めるデザイン知識とテクニックのまとめ | コリス

プロのUIデザイナーに学ぶ、既存のデザインのクオリティを高めるデザイン知識とテクニックのまとめ | コリス
«  おさえたい。「既存のUIデザインをどのような手順で改善すればよいのか、UIのクオリティを高め、ビジュアルをよくするためのデザイン知識とテクニックを紹介します」。
    

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス
«  使える…!!「autoを使った要素のサイズ指定、FlexboxやGridで知っておくと便利なautoの使い方、overflowにおけるautoなど」。
    

サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス

サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス
«  知らんかった、こんなんできるんや…。「HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます」。
    

Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較 | コリス

Bootstrap 5の新しいアイコンとFont Awesomeアイコンのそれぞれの使い方と使いやすさを比較 | コリス
«  勉強しておきます。「Bootstrap 5用に最近リリースされたSVGアイコンとFont Awesomeアイコンの使い方と使いやすさを比較した記事を紹介します」。
    

box-shadowだけじゃない!CSSでできる色々な影の表現と意外に知らない落とし穴 – ICS MEDIA

box-shadowだけじゃない!CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA
«  いろいろと勉強になります。「この記事では影を表現するためのさまざまな技術・手法を説明しながら、その技術で実現できる表現のバリエーションも合わせて紹介します」。
    

スマホの写真を有名絵画みたいに変身させるGoogle’s Art Transferが優秀 | ナゾロジー

スマホの写真を有名絵画みたいに変身させるGoogle’s Art Transferが優秀 | ナゾロジー
«  良さげ。あとでやる。「自分が所持している画像を、有名な画家たちのタッチで再表現することができます」「自画像を作りたい人、オリジナルのアイコンを作りたい人にもおすすめです」。
    

日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker | コリス

日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker | コリス
«  どこかで使う。「依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています」。
    

知っておくと便利!ビューポートを基準にした単位「vw、vh、vmin、vmax」を使ったCSSのテクニックのまとめ | コリス

知っておくと便利!ビューポートを基準にした単位「vw、vh、vmin、vmax」を使ったCSSのテクニックのまとめ | コリス
«  ありがたいです。「フォントのサイズ指定、高さいっぱいのコンテンツ、フッタを最下部に配置、デバイスに応じた画像配置、記事は固定幅だけど画像は幅いっぱいなど」。
    

Bootstrap 5ではIE10に加え、IE11のサポート終了も判明、IE11に対応させる方法が用意 | コリス

Bootstrap 5ではIE10に加え、IE11のサポート終了も判明、IE11に対応させる方法が用意 | コリス
«  いよいよか。「先日、Bootstrap 5のリリースについて紹介しましたが、IE10のサポート終了だけでなく、IE11のサポートも終了することに決まったようです」。
    

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス

必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css | コリス
«  メモ。「すべてのブラウザとデバイスで見栄えするようにデザインされています。CSSリセットの拡張版みたいなもので、さまざまなプロジェクトで利用できます」。
    

CSSのみで実装できる!テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス

CSSのみで実装できる!テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス
«  どこかで使う。「IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニック」。