• Category Archives: デザイン / UIUX

グラデーションにできてしまう濃淡の縞に困らない!バンディングをおさえるJavaScriptライブラリ | コリス

グラデーションにできてしまう濃淡の縞に困らない!バンディングをおさえるJavaScriptライブラリ | コリス
«  ふあー、すごい。「画像に少量のノイズを加えることで一部のピクセルが少し明るくなり一部のピクセルが少し暗くなります。(中略)バンディングを視覚的に抑えることができます」。
    

無料で使える!ハイセンスな世界地図ベスト25|SeleQt

無料で使える!ハイセンスな世界地図ベスト25|SeleQt
«  いろいろと使えそうなので。「ビジネス戦略の展開や投資家へのプレゼン、また会社概要や所在地、連絡先などを提供する際にマップはよく使われます。また、海外向けのメディアやウェブサイトにも有効です」。
    

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス
«  便利そうなのでメモ。「flexboxで実装したレイアウトはもちろん、floatでもgridでもレイアウトの構造や階層を確認できるスタイルシート」。
    

AIはどうやってWebサイトやランディングページのUXを改善するのか | UX MILK

AIはどうやってWebサイトやランディングページのUXを改善するのか | UX MILK
«  良いですね。「AIを駆使して、サイトやLPにおける2つの重要なトレンドに集中することで、企業はユーザーが欲しいものを与えられるようになります。その2つとは画像とパーソナライズです」。
    

CSSの可能性は無限大!ウゴウゴルーガみたいに文字をジジジと波打つように震わせる -Squigglevision | コリス

CSSの可能性は無限大!ウゴウゴルーガみたいに文字をジジジと波打つように震わせる -Squigglevision | コリス
«  ヤバい。どこかで使うMax!「特許取得済みのコンピューターアニメーションの方法で、画像のエッジを波打つことにより画像をアニメーション化だそうです」。
    

UIデザイン用に最適化されたおすすめのフリーフォント!小さいサイズでもくっきり綺麗で、読みやすい -Inter | コリス

UIデザイン用に最適化されたおすすめのフリーフォント!小さいサイズでもくっきり綺麗で、読みやすい -Inter | コリス
«  なるほどー。用の美である。かっこいい。「スマホやデスクトップのスクリーンで表示するユーザーインターフェイス用に最適化されたフォントです」。
    

イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass | コリス

イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass | コリス
«  ポピュラスであるな。「HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます」。
    

ワイ「なに!?ジェネレーター関数を使えば複雑なCSSアニメーションも簡単やと!?」 – Qiita

ワイ「なに!?ジェネレーター関数を使えば複雑なCSSアニメーションも簡単やと!?」 - Qiita
«  暗井暗人(くらい・あんと)、好き。「クリックするとフワフワっとだんだん縦横に大きくなるボックスを作ってください。なお、発注元の都合でjQueryの使用はできません」。
    

中身は同じなのに…売り上げが去年の5倍になったクリームソーダの話「料理における『視覚』の重要性がわかる」「デザインの勝利」 – Togetter

中身は同じなのに…売り上げが去年の5倍になったクリームソーダの話「料理における『視覚』の重要性がわかる」「デザインの勝利」 - Togetter
«  考えさせられる。「見せ方は本当に大事」「これはしょうがない、デザインの勝利」「やはりモノは目と頭で食うんだなと思った」。
    

中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER

中川政七商店が「楽天撤退」1年でEC売上を急回復できた理由 | BUSINESS INSIDER
«  UI・UXの話としても面白い記事。「ただ、これはあくまでUIやUXの話。ここから先は、どれだけお客さまの心を動かすコンテンツをサイトに用意できるかにかかっています」。
    

HTMLでhtmlタグやheadタグを省略してもいい場合がある、必須ではないHTMLのタグ・属性値のまとめ | コリス

HTMLでhtmlタグやheadタグを省略してもいい場合がある、必須ではないHTMLのタグ・属性値のまとめ | コリス
«  そんな世界がきていたとは…。「Web制作者が知っておきたいHTMLで必須ではない『任意のタグ』『任意の属性値』『省略してもよい属性値』を紹介します」。
    

ダメなUXデザイナーが言いそうな10のセリフ | UX MILK

ダメなUXデザイナーが言いそうな10のセリフ | UX MILK
«  いくつか言ってるなぁ…。少し泣く。「優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います」。
    

これはすごい!形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans | コリス

これはすごい!形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans | コリス
«  どこかで使う。「アニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激される」。
    

ウェブ制作がすご楽に!便利な最新オンラインツール33個まとめ – PhotoshopVIP

ウェブ制作がすご楽に!便利な最新オンラインツール33個まとめ - PhotoshopVIP
«  便利そうなのでメモ。「面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると『これなしじゃ考えられない』、そんな便利ツールが揃います」。
    

意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法 | コリス

意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法 | コリス
«  どこかで使う。「テキストを省略表示する際に文末を3点リーダーにするline-clampプロパティの効果的な実装方法。数行のスタイルシートで簡単に実現できます」。
    

最近話題になったイケてるWebサービス・アプリ10選(2019年8月編) | creive

最近話題になったイケてるWebサービス・アプリ10選(2019年8月編) | creive
«  min.tさんは気になっている。「毎月恒例『最近話題になったイケてるWebサービス・アプリ』2019年8月編を紹介」「気になったWebサービスやアプリがあればぜひチェックしてみてくださいね」。
    

Webサイトのフッターをあなどってはいけない | UX MILK

Webサイトのフッターをあなどってはいけない | UX MILK
«  フッター、大切です。「フッターは想像以上にユーザー体験に効果的です。しかし、Webデザイン代理店の多くが、フッターのデザインをプロセスの最後に回していて、フッターの潜在能力を存分に活かしきれていません」。
    

Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス

Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス
«  便利そうなのでメモ。「ページ全体の構成を取得し、全体を把握できるマップを自動生成するスクリプトです。MITライセンスで、商用プロジェクトでも無料で利用できます」。
    

「急募 グラフィックデザイナー」説得力がありすぎる求人広告が話題 – Togetter

「急募 グラフィックデザイナー」説得力がありすぎる求人広告が話題 - Togetter
«  こういう訴求ができるようになりたい。「この訴求力。作者は名デザイナー」「デザイン力高い」「デザインを放棄してるように見せて、最低限のレイアウトは出来てるんだよなぁ…」。
    

Webデザイナーの為のページ表示速度最適化:測定基準、ツール、改善方法|SeleQt

Webデザイナーの為のページ表示速度最適化:測定基準、ツール、改善方法|SeleQt
«  ありがたいまとめ。頭の整理にも。「サイトのページ表示速度について理解するために最も重要なことは何ですか、そしてどのように改善できるのでしょうか」。
    

ユーザーのメンタルモデルを理解して、情報設計の改善を図る | UX MILK

ユーザーのメンタルモデルを理解して、情報設計の改善を図る | UX MILK
«  この辺は常に追いかけていかねば。「顧客がサイトのコンテンツを見て、どのように受け取るか?」「顧客には理解しにくいコンテンツはないか?」「顧客がサイトを訪問するとき何を求めているか?」。
    

UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由 | コリス

UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由 | コリス
«  この辺は探りまくりよね。「無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません」。
    

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna
«  あると思います。「基礎とは何か?を知ると学習の効率も上がります。そんなわけで今回は、模写する際にこんなところを観察すると良いですよ、というポイントをいくつかまとめてみました」。
    

質感や温度を表現するフォントとPhotoshopのレイヤースタイルをご紹介します! | 東京上野のWeb制作会社LIG

質感や温度を表現するフォントとPhotoshopのレイヤースタイルをご紹介します! | 東京上野のWeb制作会社LIG
«  わかりやすい。「フォントと色だけでも、見る人に与える印象が大きく変わってきます。とくにフォントはウエイトや色を変えるだけで、真逆のイメージになったりもします」。
    

Bootstrap ナビゲーションバー(Navbar)のカスタマイズ方法といろいろなデザインの実装例 | コリス

Bootstrap ナビゲーションバー(Navbar)のカスタマイズ方法といろいろなデザインの実装例 | コリス
«  どこかでやる。「カラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのデザインの実装例」。
    

人気上昇中!2019年に注目されているウェブデザイントレンド10個まとめ – PhotoshopVIP

人気上昇中!2019年に注目されているウェブデザイントレンド10個まとめ - PhotoshopVIP
«  おさえておかねば。「2019年のウェブデザインの動向としては、トレンドの組み合わせやデジタルエフェクトなど、ウェブサイトやブランドを魅力的にするものが多く含まれています」。
    

便利なのが登場!UIのデザイン、プロトタイプ、アニメーションがコードなしで、手軽に作成できるツール -Drama | コリス

便利なのが登場!UIのデザイン、プロトタイプ、アニメーションがコードなしで、手軽に作成できるツール -Drama | コリス
«  ガチ便利そうなのでメモ。「実際に試してみたところ、操作は非常に簡単で、動作も快適、さまざまなスマホアプリの構築に役立つと思います」。