• Category Archives: デザイン / UIUX

簡単すぎて驚いた!ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow | コリス

簡単すぎて驚いた!ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow | コリス
«  ヤバいこれ超使いたい。Windows版、ガチで待っております。「現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています」。
    

世界を驚かせた天才的なデザインなエレベーターを集めてみた : 海外の万国反応記@海外の反応

世界を驚かせた天才的なデザインなエレベーターを集めてみた : 海外の万国反応記@海外の反応
«  デザインとアイディアの凄さ。あと、アートで落とし穴になってるエレベーターがヤバい。「やめろ、やめろ、やめろ、やめろ、やめろ」「これが代わりに階段を使わせるための手段か…」。
    

コマンドでpng画像を圧縮! pngquantの便利な使い方 | 株式会社LIG

コマンドでpng画像を圧縮! pngquantの便利な使い方 | 株式会社LIG
«  良さげ。たまにやたらデカいpngに遭遇することもあるし。「コマンドでできることは、なるべくコマンドでやっていきたいですよね。今後も、コマンドでできる処理をどんどん増やしていきたいです」。
    

textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト「short-and-sweet」 | かちびと.net

textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト「short-and-sweet」 | かちびと.net
«  便利そうなのでメモ。「非依存型で軽量。表示文字列はカスタムデータ属性で設定。文字数制限がある場合は表示して貰えるとありがたいですよね」。
    

Webデザインのアイデア満載!創造力をアップさせる最新サイト50選 – PhotoshopVIP

Webデザインのアイデア満載!創造力をアップさせる最新サイト50選 - PhotoshopVIP
«  いろいろと勉強になります。「レイアウトや配色、書体などの見た目はもちろん、サイトの雰囲気や印象などデザイントレンドの動向を知ることもできます」。
    

アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス

アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
«  どこかで使う。「WebサイトやスマホアプリのUIにぴったりなReact Springで実装されたアニメーションのアイデアをチェック」。
    

Webデザイナーの私はこんな風に情報収集しています | Webクリエイターボックス

Webデザイナーの私はこんな風に情報収集しています | Webクリエイターボックス
«  いつもお世話になっております。ありがたいリスト付き。「ただやみくもに、なんとなーく情報収集してみても、結局ダラダラしてしまいます。なので事前にルールを作っておくと続けやすいですよ」。
    

Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス

Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス
«  便利そうなのでメモ。「スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介」。
    

任天堂が新人研修で伝えている、あそび心のデザイン|娯楽のUI 公式レポート #1 | CAREER HACK

任天堂が新人研修で伝えている、あそび心のデザイン|娯楽のUI 公式レポート #1 | CAREER HACK
«  ああ、これは良い指針。勉強になります。できるならば、かくありたい。「教えるよりも体験してもらう」「ファーストインプレッションを大事にする」「体験は面白く」。
    

ワイ「ゲッ、通信制限かかったもうた。阿部寛のホームページでも見るか……」:キニ速

ワイ「ゲッ、通信制限かかったもうた。阿部寛のホームページでも見るか……」:キニ速
«  心が荒んだときは、ここを見るようにしている。「読み込みノータイム」「光の早さで出てくる阿部寛の顔」「軽すぎやろ」「みやすい」「ロストテクノロジーやん」「やっぱシンプルイズベストやな」。
    

デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 | NxWorld

デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 | NxWorld
«  勉強になります。「単独で使うよりも複数組み合わせて使うことが多く、さらに言えばデザイン時にはこれら4原則すべてを意識することが素敵なデザインを作り上げることに繋がります」。
    

どんどん簡単になっていく!最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

どんどん簡単になっていく!最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス
«  便利そうなのでメモ。「他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することも」。
    

[CSS] もうbutton要素で困らない!ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス

[CSS] もうbutton要素で困らない!ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ | コリス
«  本日のCSSすげー案件。「button要素はfont-sizeを適用するだけで変わり、『border: 0;』を適用するとブラウザごとに異なる見た目に」。
    

ロゴ丸フォントがかわいい!ロゴにも本文にもぴったり、丸めで縦長の日本語フリーフォント -コーポレート・ロゴ丸 | コリス

ロゴ丸フォントがかわいい!ロゴにも本文にもぴったり、丸めで縦長の日本語フリーフォント -コーポレート・ロゴ丸 | コリス
«  どこかで使う。「太っちょで丸みを帯びているため、優しい雰囲気、温かい雰囲気をだしたい時にぴったり。ダークの背景にライトの文字でもいい感じ」。
    

グロ字でネットを染めろ!ついに公開されたJIS第2水準漢字対応のホラー腐肉系日本語フリーフォント -暗黒ゾン字 | コリス

グロ字でネットを染めろ!ついに公開されたJIS第2水準漢字対応のホラー腐肉系日本語フリーフォント -暗黒ゾン字 | コリス
«  ヤバいこれ、使いたい。「ライセンスは、個人でも商用でも無料で利用できます。無料商用可、無断使用可、印刷使用可、だいたいいいように可。苦情は不可」。
    

モバイルWebサイトの3つの落とし穴と解決策 | UX MILK

モバイルWebサイトの3つの落とし穴と解決策 | UX MILK
«  頭の整理に。「読み込みの遅さやサインインの壁、長い購入プロセスなど、アプリのよくある落とし穴を回避する方法を紹介」「テクノロジーがより高速な体験を可能にしたせいで、ユーザーの待つ意思は薄れてきています」。
    

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS、JavaScriptのツールを調査 | コリス

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS、JavaScriptのツールを調査 | コリス
«  やはり、Bootstrapは人気やね。「5000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります」。
    

パワポに使えるピクトグラムが汎用性が高い上、無料で使えてめちゃくちゃCOOL「いらすとや並のポテンシャル」 – Togetter

パワポに使えるピクトグラムが汎用性が高い上、無料で使えてめちゃくちゃCOOL「いらすとや並のポテンシャル」 - Togetter
«  素晴らしい。超使いたい。「既視感あったけどこれだ…」「使ったことあります!汎用性高いですよね」「プロポーズ失敗がライダーキックという結論」。
    

海外のデザイナーによる「単語で表すシンプルなロゴ」が深い! – がるシーク

海外のデザイナーによる「単語で表すシンプルなロゴ」が深い! - がるシーク
«  ベタかもやけど、Jazzのヤツ、良いと思いました。「何か自分でも1つロゴを作りたくなってきたんじゃないでしょうか?(笑)この方の作品は本当にアイデアの生み出し方が参考になります」。
    

特に使いみちのない機械「どれだけJPEG圧縮しづらいか」を表示してくれる測定器を作った人現る – Togetter

特に使いみちのない機械「どれだけJPEG圧縮しづらいか」を表示してくれる測定器を作った人現る - Togetter
«  これは素晴らしい発明。「いい景色の尺度が人間とJPEGでは違うよなあ、というのを感じられる。たとえば森は人間の目には優しいけどJPEG視点でみると大敵」。
    

Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ

Webデザインの参考にしたい、ファーストビューのアイデアその2 | コムテブログ
«  これはありがたいまとめ。ファーストビュー、難しい…。「今回は周辺に余白をつかったものなど、少し違うアプローチのファーストビューのアイデアをまとめました。提案前に見ておきましょう」。
    

【2018年版】アプリUXデザインのトレンド12選 | UX MILK

【2018年版】アプリUXデザインのトレンド12選 | UX MILK
«  勉強になります。「UXデザインにおいて成功するためには、デザイナーは先見の明を持ち、新たな課題に備えなければなりません。2018年において影響力がもっとも大きいであろうトレンドをリストアップしました」。
    

とにかくカッコいい。デザイン好きは必見、それが琳派! – いまトピ

とにかくカッコいい。デザイン好きは必見、それが琳派! - いまトピ
«  素晴らしい。「琳派の手法の一つでもあるのが、物の形を簡略化し、それらをパターンとして扱ったり、大胆な構図の中に取り入れたりするというところ。今でいうデザイン的な手法を江戸時代に確立している」。
    

デザインに役立つ!黄金比や白銀比の比率を計算してくれる5つのツール : creive

デザインに役立つ!黄金比や白銀比の比率を計算してくれる5つのツール : creive
«  どこかで使う。何かで使う。「何かのデザインを行う際は、そのレイアウトにする意味や理由をしっかりと考え、こういった比率を利用して綺麗なデザインにしてみてください」。