« どこかで使う。「WebサイトやスマホアプリのUIにぴったりなReact Springで実装されたアニメーションのアイデアをチェック」。
アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
Category Archives: デザイン / UIUX
Webデザイナーの私はこんな風に情報収集しています | Webクリエイターボックス
« いつもお世話になっております。ありがたいリスト付き。「ただやみくもに、なんとなーく情報収集してみても、結局ダラダラしてしまいます。なので事前にルールを作っておくと続けやすいですよ」。
ログアウトのUXを軽視してはならない | UX MILK
« 意外と見てますよね。ここが注力されているかどうか。「ログアウトが陳腐なものであってはなりません。ログアウトのプロセスは、ユーザーを引き込み、ブランドを支持してもらい、UXを最適化するチャンスになり得ます」。
黄金比を使ってロゴデザインをしてみよう | Goodpatch Blog
« 勉強になります。「多数の有名なロゴにもデザインの調和を保つために黄金比が取り入れられています。Appleの林檎のロゴやTwitterの鳥のロゴなどは黄金比を用いて作られていると言われています」。
Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス
« 便利そうなのでメモ。「スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介」。
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | CAREER HACK
« ああ、これは良い指針。勉強になります。できるならば、かくありたい。「教えるよりも体験してもらう」「ファーストインプレッションを大事にする」「体験は面白く」。
ワイ「ゲッ、通信制限かかったもうた。阿部寛のホームページでも見るか……」：キニ速
« 心が荒んだときは、ここを見るようにしている。「読み込みノータイム」「光の早さで出てくる阿部寛の顔」「軽すぎやろ」「みやすい」「ロストテクノロジーやん」「やっぱシンプルイズベストやな」。
フル/レスポンシブAMP（アンプ）のWordPressテーマはどう？ | Ocadweb
« あとで試す。まだ制約が多くて、ってのはあるけど、使ってみたい。「今回、フル/レスポンシブAMP（アンプ）とフル/レスポンシブAMP（アンプ）のWordPressテーマのご紹介」。
デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 | NxWorld
« 勉強になります。「単独で使うよりも複数組み合わせて使うことが多く、さらに言えばデザイン時にはこれら4原則すべてを意識することが素敵なデザインを作り上げることに繋がります」。
どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス
« 便利そうなのでメモ。「他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することも」。
[CSS] もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス
![[CSS] もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス](https://naonews.jp/wp-content/uploads/1526593883651-320x160.jpg)
« 本日のCSSすげー案件。「button要素はfont-sizeを適用するだけで変わり、『border: 0;』を適用するとブラウザごとに異なる見た目に」。
ロゴ丸フォントがかわいい！ロゴにも本文にもぴったり、丸めで縦長の日本語フリーフォント -コーポレート・ロゴ丸 | コリス
« どこかで使う。「太っちょで丸みを帯びているため、優しい雰囲気、温かい雰囲気をだしたい時にぴったり。ダークの背景にライトの文字でもいい感じ」。
グロ字でネットを染めろ！ついに公開されたJIS第2水準漢字対応のホラー腐肉系日本語フリーフォント -暗黒ゾン字 | コリス
« ヤバいこれ、使いたい。「ライセンスは、個人でも商用でも無料で利用できます。無料商用可、無断使用可、印刷使用可、だいたいいいように可。苦情は不可」。
モバイルWebサイトの3つの落とし穴と解決策 | UX MILK
« 頭の整理に。「読み込みの遅さやサインインの壁、長い購入プロセスなど、アプリのよくある落とし穴を回避する方法を紹介」「テクノロジーがより高速な体験を可能にしたせいで、ユーザーの待つ意思は薄れてきています」。
若い世代が知らない2000年代のHTMLコーディングの地獄 – ICS MEDIA
« おっさん、朝から少し泣く。「主にIE6が全盛期だった2000年代のウェブサイト制作を振り返ります。懐かさに浸ったり、そうでない方は現代に通じる温故知新な情報として参照ください」。
CSSスニペット：CSSのみでMasonryライクな段組レイアウト | かちびと.net
« 便利そうなのでメモ。「Pinterestのようなレイアウトは、column-widthを使ったCSSのみで簡単に実装可能。column-countも併用すればカラム数の指定も」。
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS、JavaScriptのツールを調査 | コリス
« やはり、Bootstrapは人気やね。「5000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります」。
パワポに使えるピクトグラムが汎用性が高い上、無料で使えてめちゃくちゃCOOL「いらすとや並のポテンシャル」 – Togetter
« 素晴らしい。超使いたい。「既視感あったけどこれだ…」「使ったことあります！汎用性高いですよね」「プロポーズ失敗がライダーキックという結論」。
海外のデザイナーによる「単語で表すシンプルなロゴ」が深い！ – がるシーク
« ベタかもやけど、Jazzのヤツ、良いと思いました。「何か自分でも1つロゴを作りたくなってきたんじゃないでしょうか？（笑）この方の作品は本当にアイデアの生み出し方が参考になります」。
特に使いみちのない機械「どれだけJPEG圧縮しづらいか」を表示してくれる測定器を作った人現る – Togetter
« これは素晴らしい発明。「いい景色の尺度が人間とJPEGでは違うよなあ、というのを感じられる。たとえば森は人間の目には優しいけどJPEG視点でみると大敵」。
Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ
« これはありがたいまとめ。ファーストビュー、難しい…。「今回は周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう」。
【2018年版】アプリUXデザインのトレンド12選 | UX MILK
« 勉強になります。「UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。2018年において影響力がもっとも大きいであろうトレンドをリストアップしました」。
とにかくカッコいい。デザイン好きは必見、それが琳派！ – いまトピ
« 素晴らしい。「琳派の手法の一つでもあるのが、物の形を簡略化し、それらをパターンとして扱ったり、大胆な構図の中に取り入れたりするというところ。今でいうデザイン的な手法を江戸時代に確立している」。
Googleの「マテリアルデザイン」がアップデート｜SeleQt
« 頭の整理に。「Googleはマテリアルデザインをさらに他のビジュアル言語以上のものにしたいと考えています。そしてGoogleでは、デザインと開発のワークフローを改善するためのツールを構築しています」。
デザインに役立つ！黄金比や白銀比の比率を計算してくれる5つのツール ： creive
« どこかで使う。何かで使う。「何かのデザインを行う際は、そのレイアウトにする意味や理由をしっかりと考え、こういった比率を利用して綺麗なデザインにしてみてください」。
コーディングをするときに鼻血がでるほど便利なwebツールリスト（随時更新予定） – Qiita
« 勉強になります。コメント欄の方にも便利そうなツールがいろいろと。「普段お世話になっているwebツール達の紹介です」。
CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS・JavaScriptのまとめ | コリス
« CSSすげーってなるヤツ。「CSSだけでも実装できるようになりました。IEは例のごとく非対応ですがポリフィルがあるので利用できます」。
ダッシュボードで上手に情報を可視化するためのガイドライン | UX MILK
« 最近はスマホ対応も必須やから、大変さが増している。「端的に言うと、情報の可視化とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです」。
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ | コリス
« CSS、素晴らしいね。「最近のサイトやアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します」。
複数のストックフォトサイトを一括でまとめて検索できるブックマークレット・「STOCK PHOTO SEARCH」 | かちびと.net
« 便利そうなのでメモ。いろいろとやってみたい。「ポップアップするのでブラウザで許可しないと起動しませんのでご注意下さい」。