• Category Archives: デザイン / UIUX

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス
«  便利そうなのでメモ。ガチのヤツ。「チートシートは高解像度版も無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です」。
    

これなら分かりやすい!Webサイトのデザイン仕様書・指示書の作り方 | コリス

これなら分かりやすい!Webサイトのデザイン仕様書・指示書の作り方 | コリス
«  あとで読む。「ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など」。
    

JavaScriptを使用しないシンプルで高速なWebページを作れるOSS・「imml」 | かちびと.net

JavaScriptを使用しないシンプルで高速なWebページを作れるOSS・「imml」 | かちびと.net
«  あとで試す。「immlはシンプルで高速なJS不使用のWebページを作れるOSSです。単純にMarkdownライクな記法で書いたものをHTMLでエクスポート、というもの」。
    

イラレで作る!『醤油ラーメン』の作り方|しろ|note

イラレで作る!『醤油ラーメン』の作り方|しろ|note
«  ためになる。イラレ使いではないけど。「イラレで麺類のイラストを描くのが苦手だったので、ややリアルな麺のイラストが描けるか試行錯誤して描いてみました。他の具材もなるべくイラレの機能で簡単に作れるようにしています」。
    

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

欧文フォントは歴史と紐づけるとまじでわかりやすい|ありさん|note
«  こういうのはありがたいです。面白いし。もっと詳しい版があったら知りたい。「フォントが生まれた背景や理由を知ることで判断基準ができ、デザインに背景や思いを重ねることができます」。
    

CSSの進化がすごすぎる!新しいレスポンシブデザインの実装方法を解説 | コリス

CSSの進化がすごすぎる!新しいレスポンシブデザインの実装方法を解説 | コリス
«  CSSがこんなになって、おっさんは泣いておる…。すごいところまで来ちゃったな。「これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します」。
    

「UIとしては失敗していると思う」看板を見たお客はみんな間違える?渋谷のダイソーの看板で考えるデザインの難しさ – Togetter

「UIとしては失敗していると思う」看板を見たお客はみんな間違える?渋谷のダイソーの看板で考えるデザインの難しさ - Togetter
«  UIではないとは思うけど。「この罠にかかって上に上がった」「個人的にはダイソーのロゴ好きなんだけど」「オッサンなのでエキサイトバイクが浮かぶ」。
    

全部まとめられていて便利!iPhone・iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes | コリス

全部まとめられていて便利!iPhone・iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes | コリス
«  頭の整理に。「2021年最新モデルのiPad Proから、2007年のiPhoneまで、最新機種から初代までのデバイスのサイズが網羅」。
    

アイデアを増やす!Webデザイン制作で参考にしたい最新サイト50個まとめ – PhotoshopVIP

アイデアを増やす!Webデザイン制作で参考にしたい最新サイト50個まとめ - PhotoshopVIP
«  Yamauchi No.10 Family Office はヤバい。「任天堂の創業家・山内家一族によるゲーム世界をそのまま表現したようなサイト。ボクセルアートによるアニメーションが随所に」。
    

最新版HTMLテンプレート、最近の実装に合わせた基本構造に使用するすべての要素とその役割も解説 | コリス

最新版HTMLテンプレート、最近の実装に合わせた基本構造に使用するすべての要素とその役割も解説 | コリス
«  頭の整理に。「HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます」。
    

ローソンの商品パッケージデザインが変更「分かりやすくなった」と好評、変更の理由を聞いてみた – ねとらぼ

ローソンの商品パッケージデザインが変更「分かりやすくなった」と好評、変更の理由を聞いてみた - ねとらぼ
«  なるほど、わかりやすい。「デザインを変更した商品数は現在約530品で、前回パッケージを変更したプライベートブランド商品の約8割にあたります」。
    

ロゴデザインをつくる PART.01 -書体篇-|小池 政幸 / TSUMIKI INC.

ロゴデザインをつくる PART.01 -書体篇-|小池 政幸 / TSUMIKI INC.
«  勉強になります。「いつもどのようにロゴを作っているのかを自分の整理とアップデートを兼ねて簡単な流れをまとめてみました。すこし長くなるので3つのパートに分けて説明していきたいと思います」。
    

実際に効果が期待できる、あまり見ないCTAの具体例 |SEO Japan

実際に効果が期待できる、あまり見ないCTAの具体例 |SEO Japan
«  どこかで試す。ありがとうございます。「今回の記事は、画一的な事例を紹介するのではなく、風変わりであるものの大きな効果を得られたコール・トゥ・アクションの事例を紹介する記事となります」。
    

【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス
«  頭の整理に。「CSS Flexboxで実装するWebページでよく見かける」「コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます」。
    

Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス
«  CSSリセット、ありがとうございます。「各ブラウザの最後から5つ前までのバージョンをサポートしアクセシビリティにも配慮されておりCSSのテクニックや学びも満載」。
    

アドビの「源ノ角ゴシック」がバリアブルフォントに対応 ウェイトを自由に調整可能 – CNET

アドビの「源ノ角ゴシック」がバリアブルフォントに対応 ウェイトを自由に調整可能 - CNET
«  良いですね。「今回のバリアブルフォント対応により、既存の7ウェイト(Extra LightからHeavyまで)以外に、最小値から最大値までの範囲内であれば、自由に設定できるようになる」。
    

CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ | コリス

CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ | コリス
«  ありがたいまとめ。こういう一覧は便利。「CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説」。
    

FigmaでWebサイトやスマホアプリのデザインシステムを制作する手順を解説 | コリス

FigmaでWebサイトやスマホアプリのデザインシステムを制作する手順を解説 | コリス
«  とりあえずメモ。「カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説」。
    

グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス

グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法 | コリス
«  長年の謎が…。そういうことなんですね…。「真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です」。
    

ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note

ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装する | Pulp Note
«  オサレ系。「CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるように」。
    

【解説】インフォグラフィックの作り方|櫻田潤 VISUALTHINKING|note

【解説】インフォグラフィックの作り方|櫻田潤 VISUALTHINKING|note
«  勉強になります。「インフォグラフィックの価値であり魅力なのは、情報を整理して伝えるという「機能的価値」と、見て楽しいといった「情緒的価値」の両方をバランスよく備えている点です」。
    

プロのUIデザイナーに学ぶ!UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3 | コリス

プロのUIデザイナーに学ぶ!UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3 | コリス
«  頭の整理に。「デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います」。
    

買ったばかりのバルミューダが母にカスタマイズされてこうなった「オシャレと便利は仲良くなれない」 – Togetter

買ったばかりのバルミューダが母にカスタマイズされてこうなった「オシャレと便利は仲良くなれない」 - Togetter
«  定期ですが、考えさせられる。「視認性の悪さを現場利用者による運用でカバーした例」「色を合わせてるのスゴい!おかん!」「老眼には勝てないのよね」。
    

2021年版、CSS Gridでどのように配置されるかをまとめたチートシート | コリス

2021年版、CSS Gridでどのように配置されるかをまとめたチートシート | コリス
«  正直、つかめてないところがあるのでありがたいです。「コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます」。
    

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス
«  一旦どこかで使ってみる。tableなのね。「HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです」。
    

Web制作の効率、生産性アップ!話題の最新オンラインツール33個まとめ – PhotoshopVIP

Web制作の効率、生産性アップ!話題の最新オンラインツール33個まとめ - PhotoshopVIP
«  便利そうなのでメモ。「これらのツールをうまく活用することで、面倒な作業も短時間で行い、より円滑にプロジェクトを進めることができます」「カテゴリごとに整理している」。
    

Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ | コリス

Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ | コリス
«  どこかで使う。「CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、すぐに利用できます」。