« 勉強になります。「UXとUIという言葉は依然として混同されていて、それはすぐには終わりそうにないことを覚えておいてください」「理解しあえることこそが重要です。UIもUXも効率的な理解に依存しているのですから」。
UXデザインとUIデザインの3つの大きな違い | UX MILK
Category Archives: デザイン / UIUX
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider | コリス
« これ、良いんやないかなぁ。「他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です」。
イヌをネコに変形！映画やテレビでよく見かけるモーフィングを作成できるオンラインツール -HyperMorph 3000 | コリス
« うっわ、これヤバい。「似たような形状だけでなく、全く異なる形状でもある物体から別の物体に変形させることができ、いろいろ楽しめると思います」。
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方 | コリス
« な、なんだってー！！「今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。scroll-snapプロパティの基礎知識と便利な使い方を紹介」。
ホームページの公開作業を甘くみてはいけない。公開前後にやるべき12のこと | 東京上野のWeb制作会社LIG
« 頭の整理に。faviconは忘れがち。「制作経験が無い方には知られていないかもしれませんが、公開作業はイメージされているほど簡単な作業ではありません」。
商用利用無料！書道家「ダ山竹電」先生によるSVGの筆書き素材 -カリ蔵（カリグラ） | コリス
« これはすごい。「筆書き素材は、カスタマイズしてダウンロードできるのも大きな特徴です。サイズやカラーを変更したり、文字にもいくつかのバリエーションが用意されています」。
リアルタイムにデザインを編集できるWordPressプラグイン「The Divi Builder」 | DesignDevelop
« これは…！！可能性を感じる…。「この『Divi』はブラウザ上で自由にデザインカスタマイズやテンプレート側の修正が行えるというものです」。
[CSS] クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス
![[CSS] クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス](https://naonews.jp/wp-content/uploads/1536711551170-320x160.jpg)
« あります。あるあるあるある。「a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います」。
43のローダーをまとめた・「43 loaders」 | かちびと.net
« いろいろと試してみたい。「CSSといってもアニメーションはJSで制御していますのでピュアCSSでやるなら書き足す必要があります。シンプルなものからユニークなものまで揃っている印象でした」。
CSSとJavaScriptのアニメーションのパフォーマンスを上げる！サイトの収益性を高めたいなら今すぐ取り組むべきこと｜SeleQt
« 考えたい。「技術的なパフォーマンスがCVにどのように影響するかをチェックすることに加えて、アニメーションが収益に与える影響に注目しましょう」。
こんなのあったんだ！ 意外と知らないHTMLの要素をご紹介します | 東京上野のWeb制作会社LIG
« 使いたいんやけどなぁ。「 全部『div』でマークアープしても見た目は担保できてしまうHTMLですが『知れば知るほど奥が深くて参っちゃうなあ』というのが本音です」。
心理学から分かる！リデザインが嫌われる理由とその対策【ユーザーの習慣に配慮して…】｜SeleQt
« 10年くらい前に、このテキストに出会いたかった。「人々は『変化』を気に入りません。なぜなら変化には努力が必要であり、人々は変化から期待すべきものが何か見えていないからです」。
手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」 | DesignDevelop
« 未来感ある。「ユーザーが手書きのワイヤーフレームをアップデートすると、画像識別と文字認識サービスを併用し、生成してくれるというもの」。
HTMLとCSSによるボタン作成の方法｜buttonタグやsubmit、linkでの作り方も | creive
« 頭の整理に。「なんとなくわかっている、それがボタン機能。実は、状況に応じてボタンの使い方は変えます。今回は情報を整理しボタンについての正しい知識を提供します」。
デザインの一貫性の重要性とは | UX MILK
« こういう考え方、好きです。「すべての製品に完璧に対応する万能なコンポーネントはない。デザインシステムに成長の余地を残すことによって、どのような製品ニーズにも、それに合わせてコンポーネントを微調整できる」。
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に | コリス
« これはステキなブラウザの在り方。「表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます」。
モバイルではメニューを画面下に表示すべき理由 | UX MILK
« 親指にとってのスィートスポットをうまく活用しましょう、っていう話。「親指は、モバイルデバイスを操作する際にもっとも使用される指です。よってメニューフォームは、親指の動きに合わせる必要があります」。
シャドウの色はブラックとは限らない、さまざまなカラーにあった適切なシャドウの色が分かるオンラインツール | コリス
« こういうの良いなぁ。「シャドウの色はブラックとは限りません。グレーであればグレー系シャドウ、レッドであればレッド系シャドウがぴったりです」。
明朝体、横画がなくても読める説でいろいろな漢字の横画を消してみたら…「無いはずの横画がうっすら見える」「横画は重要度が低い」 – Togetter
« これはなるほど。「加藤一二三が加藤になってしまうのが難点」「横画の終わりに山がつくので山の数と位置で読めると思いますよ」。
エラーメッセージはフォームのどこに表示するべきか | UX MILK
« UIの構成による気もする。「ユーザーが期待する場所にエラーメッセージを配置しましょう。エラーメッセージはユーザーの読解の流れに沿っているべきです。そうすることで少ない認知負荷で間違いを修正できます」。
[CSS] 知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス
![[CSS] 知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス](https://naonews.jp/wp-content/uploads/1535493784006-320x160.jpg)
« 便利そうなのでメモ。「CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します」。
jpg画像の圧縮（プラグインなど）は何を使うのが一番良いの？比較してみた – NO TITLE
« 勉強になります。「画像圧縮をする方法はいくつかありますが、比較してみました。WordPressでサイトを運営しているという前提ですが、プラグイン以外の方法も調べています」。
CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック | コリス
« 確かに、なんとなくしかわかってなかった。勉強になります。「ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つテクニックです」。
WordPressのショートコードを簡単に作成・管理できる便利なプラグイン -Snippy | コリス
« あ、これヤバい。すごい。泣いちゃうかも。「独自のカスタムショートコードを素早く作成できます。function.phpを編集する必要はなく管理画面で簡単に作成できます」。
最近はもうHelveticaだけではない！2018年、実際に使用されている人気が高い英語フォントの組み合わせ | コリス
« 日本向けやったらメイリオにしてしまう癖…。「実際にWebサイトで使用されている人気が高いフォントとその組み合わせを調査した資料がアップされていた」。
憶測で失敗しないためのパーソナライズ戦略 | UX MILK
« そう、できれば日々検証を続けたい。「パーソナライズを修正できるようにする。ユーザーがパーソナライズの設定を上書きできるようにすべきです。データに基づいていても、間違いは起きるものです」。
[CSS] テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス
![[CSS] テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス](https://naonews.jp/wp-content/uploads/1534855322599-320x160.jpg)
« モヤモヤの解消系テクニックや。「これをしたいと思った人は少なくないと思います。先頭行の余計な余白を取り除き、ぴたっと揃えることができます」。
SVGだから快適！スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック | コリス
« どこかで使いたい。相性良さげなところ、ありそう。「コピペで利用するのも楽しいですが、こういう仕組みを考えるのも楽しいですよね」。
文字や背景にピュアブラックを使ってはいけない理由 | UX MILK
« わかります。でもたまに使ってしまうんよねぇ…。「ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます」。
【HTMLでの改行】正しい改行コードの使い方【brタグ以外も】 | creive
« 改行道は奥深い。「HTML上でのタグを使った改行はそのデメリットを理解して使わないと作業効率を落としかねません。できるだけCSSで改行を調整し、できるだけタグを使わない改行を行いたいものです」。