• Category Archives: デザイン / UIUX

2020年に予測される5つのUXトレンド – Qiita

2020年に予測される5つのUXトレンド - Qiita
«  結構言われとるヤツ。「デバイスの利用は絶え間なく増加しており、連続設計に対するビジネス需要がより大きくなります。これにより、複数デバイスを使用した場合の操作体験を改善することに重点が置かれるようになるでしょう」。
    

スミソニアン博物館など、収蔵品280万点の2D&3D画像を無償公開-改変も自由 – CNET

スミソニアン博物館など、収蔵品280万点の2D&3D画像を無償公開-改変も自由 - CNET
«  これは俺達のスミソニアン。「スミソニアン協会の管理している収蔵品は1億5000万点以上あり今回公開した280万点は全体の2%にも満たないという。今後は順次データを増やしていく計画」。
    

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック | コリス

モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック | コリス
«  CSSすげー。「以前まではdivやspanなど追加のHTMLやJSが必要でしたが、一切必要ありません。こういった実装はできないものと思っていたので驚きました」。
    

これは要チェック!19世紀~20世紀の数千点以上のイラストが無料ダウンロード可能に : カラパイア

これは要チェック!19世紀~20世紀の数千点以上のイラストが無料ダウンロード可能に : カラパイア
«  素晴らしい。ありがとうございます。「高解像度でデジタル化されたこのサイトは、(中略)最も有名な芸術家に関する当時の重要なテキストなどが学術資料として存在している場所」。
    

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス

Google Fontsのファイルサイズを簡単に軽量化できる!日本語フォントにも対応 | コリス
«  便利そうなのでメモ。どこかで使う。「パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます」。
    

UIのデザインは奥が深い!アイコンデザイン 7つの原則 | コリス

UIのデザインは奥が深い!アイコンデザイン 7つの原則 | コリス
«  頭の整理に。おさえたい。「Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です」「アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています」。
    

Google Earthから無料ダウンロードできる美しい壁紙1000枚がリリース!商用利用も可能に – PhotoshopVIP

Google Earthから無料ダウンロードできる美しい壁紙1000枚がリリース!商用利用も可能に - PhotoshopVIP
«  Google先生、ありがとうございます。「これらの画像は、人工衛星から見事に撮影された地球という惑星を、超リアルな鳥瞰図として提供されています」。
    

デザインの生産性向上のために気をつけたい5つのこと | UX MILK

デザインの生産性向上のために気をつけたい5つのこと | UX MILK
«  頭の整理に。「デザイン業界のスピード感は速く、多くのクライアントはデザインをできるだけ早く欲しがる中、より意識的なデザインフローを心掛けることで、前に進むことができるでしょう」。
    

「日本人の好むセンスがこれ」映画のポスター、楽天のページ、商品パッケージ… 『説明的でわかりやすい』ものにしないと売れないという話 – Togetter

「日本人の好むセンスがこれ」映画のポスター、楽天のページ、商品パッケージ… 『説明的でわかりやすい』ものにしないと売れないという話 - Togetter
«  この辺は日本の特異性があると思っている。「シンプルに大衆・多数派に刺さるものは『少しダサい』ものということ」。
    

ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload | コリス

ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload | コリス
«  検討案件。もう少し情報が欲しい感じ。「Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます」。
    

ディズニーワールドの体験から考えるUXのあるべき姿 | UX MILK

ディズニーワールドの体験から考えるUXのあるべき姿 | UX MILK
«  ディズニーランドに学べは魔法の合い言葉って婆っちゃが言ってた。「私たちは彼らの強みと挑戦から学ぶことで、より強固で、よりわかりやすく楽しい体験を私たちのユーザーに提供することができるはずです」。
    

CSSもこれなら簡単!ニューモーフィズムのスタイルシートを生成できるジェネレーター -Neumorphism.io | コリス

CSSもこれなら簡単!ニューモーフィズムのスタイルシートを生成できるジェネレーター -Neumorphism.io | コリス
«  気になってたヤツ。「要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーターを紹介」。
    

モバイル向けの美しいオンボーディングデザイン8選 | UX MILK

モバイル向けの美しいオンボーディングデザイン8選 | UX MILK
«  意外と見落とされがち。「オンボーディングの使命は、ユーザーにインターフェイスの操作方法を教え、プロダクトを最大限に活用することです。つまり、(中略)メッセージを効果的に配信することができるのです」。
    

Web制作にすごい役立つ!無料で使える便利なオンラインツールのまとめ -Tiny Helpers | コリス

Web制作にすごい役立つ!無料で使える便利なオンラインツールのまとめ -Tiny Helpers | コリス
«  便利そうなのでメモ。「CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つツールをまとめたTiny Helpers」。
    

北欧のUXデザイナーが日本の文化から学んだこと | UX MILK

北欧のUXデザイナーが日本の文化から学んだこと | UX MILK
«  こういう視点からの指摘は特にありがたいですよね。「デジタルデザインにこのような大きな違いがあるため、西洋と同じビジュアル的なスタイルを日本のデジタルデザインに当てはめることはできないと思います」。
    

GoogleやAppleも!すでにVue.jsを採用している企業サイト・プロジェクトのまとめ | コリス

GoogleやAppleも!すでにVue.jsを採用している企業サイト・プロジェクトのまとめ | コリス
«  おさえておかねば。「Vue.jsの人気がすごいですね。いくつかの企業はすでにVue.jsを使い始めており、一部はメインのプロダクトに、一部は二次的なプロジェクトに使用しています」。
    

ダークモードの検証が簡単にできるようになった!Chrome 79 デベロッパーツールの新機能 | コリス

ダークモードの検証が簡単にできるようになった!Chrome 79 デベロッパーツールの新機能 | コリス
«  便利そうなのでメモ。「ダークモード対応する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です」。
    

Webデザインにおける適切なスクロール方法とは? | UX MILK

Webデザインにおける適切なスクロール方法とは? | UX MILK
«  この辺、難しい。「ただし、覚えておくべきこととして、大きなブロックのコンテンツやマルチメディアは、ページの読み込み速度を遅らせます」「また、Webサイトのフッターも削除しなければなりません」。
    

WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技 | コリス

WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技 | コリス
«  アイテム間に4remのギャップを確保、なるほど。「幅の異なるアイテムを行に配置し間にギャップがある場合、アイテムが同じ行に収まらなくなるタイミングを判断するのが難しい場合があります」。
    

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス
«  なるほど、こういう入れ方もあるのね。「ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね」。
    

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス
«  あります。ありますあります。「画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか」。
    

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン(margin: auto;)の便利な使い方 | コリス

CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン(margin: auto;)の便利な使い方 | コリス
«  どこかで使う。「ナビゲーションを実装する時、左端に詰めて配置したいけど1つだけ右端に配置したい、そんな時はFlexboxでオートマージンを使用すると簡単」。
    

フローが煩雑なUber Eatsの注文プロセスはどうすればよかったのか | UX MILK

フローが煩雑なUber Eatsの注文プロセスはどうすればよかったのか | UX MILK
«  まあでもこの辺は試行錯誤ですよ。「重要な機能を他のプロセスの中に隠さない、お金の支払いに関するところは慎重かつ透明に、フローがおかしくないかをパンくずテストでチェックする」。
    

同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit | コリス

同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit | コリス
«  勉強になります。もっと早く欲しかった。「CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います」。
    

CSSは奥が深い!グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス

CSSは奥が深い!グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス
«  勉強になります。「このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます」。
    

Webデザインの観点からのサステイナビリティ | UX MILK

Webデザインの観点からのサステイナビリティ | UX MILK
«  感慨深い。「よりクリーンで環境に優しいWebサイトを構築できるだけでなく、ユーザーの満足度を高め、収益を向上させることもできます。問題は大きいかもしれませんが、小さな変化を積み重ねて改善していけます」。
    

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス
«  CSSリセット、ありがとうございます。ウェルカム最新版。「現在の制作環境に合わせて制作された新しいCSSリセットの中から特に注目すべき、CSSリセットを紹介します。CSSのテクニックや知見も満載です」。
    

超便利!確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度 – PhotoshopVIP

超便利!確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度 - PhotoshopVIP
«  保存版的なリスト。便利そうなのでメモ。「これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容」。