• Category Archives: デザイン / UIUX

簡単で便利なのが揃ってる!CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

簡単で便利なのが揃ってる!CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス
«  便利そうなのでメモ。「ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです」。
    

slackのロゴが変更。前のデザインはクセ者だったんだって | ギズモード

slackのロゴが変更。前のデザインはクセ者だったんだって | ギズモード
«  あら、そうやったのね。「見た目がおかしくなりがちで取り扱いが難しいデザインだった」「解決するため、いくつかのバージョンを作ったものの……統一感がなくなってしまうという事態に」。
    

WordPress:簡易的なGutenbergブロックを作成できるプラグイン「Block Lab」 | NxWorld

WordPress:簡易的なGutenbergブロックを作成できるプラグイン「Block Lab」 | NxWorld
«  あとで試す。「正直デフォルトのブロックで可能なことができなかったりと物足りないと感じた部分も多かったんですが、せっかく試したのでその備忘録も兼ねて」。
    

最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック | コリス

最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック | コリス
«  やはりグラデーションの需要はあるんよ。「ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます」。
    

無償で使える高品質な画像を公開するストックフォトのアグリゲーターサイト・「Pixel Mob」 | かちびと.net

無償で使える高品質な画像を公開するストックフォトのアグリゲーターサイト・「Pixel Mob」 | かちびと.net
«  便利そうなのでメモ。「無償で使える高品質な写真素材を提供するストックフォトで公開されている写真を複合して閲覧できるアグリケーターサイトです」。
    

可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 東京上野のWeb制作会社LIG

可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 東京上野のWeb制作会社LIG
«  A列車で行こうIII信者には大好物です。「物体を斜め上から見下ろしたような図形で、Webだけでなくインテリアの俯瞰図にも使用されています」。
    

YouTubeのiOSアプリに左右スワイプ追加へ-ナビゲーション強化の努力を振り返る | TechCrunch

YouTubeのiOSアプリに左右スワイプ追加へ-ナビゲーション強化の努力を振り返る | TechCrunch
«  70%まできたのかー。「モバイル・アプリでの再生コントロールが容易になる。モバイルは今やYouTubeのビデオ視聴の70%を占めるまでになっているという」。
    

2019年、UIとUXデザインのトレンドを解説!デザインのテクニックやツール、ブラウザ、フォントも進化している | コリス

2019年、UIとUXデザインのトレンドを解説!デザインのテクニックやツール、ブラウザ、フォントも進化している | コリス
«  勉強になります。「昨年まではスマホ中心のトレンドが多かったですが、今年のキーワードは『コンテキスト』です。トレンドを確認しておきましょう」。
    

2019年の注目トレンド早わかりガイド!ウェブやグラフィック、ロゴなど各ポイントをまとめてチェック – PhotoshopVIP

2019年の注目トレンド早わかりガイド!ウェブやグラフィック、ロゴなど各ポイントをまとめてチェック - PhotoshopVIP
«  流行色として、リビング・コーラル(サンゴ色)には少し期待している。「2019年に注目したい各デザイントレンドをポイントごとにまとめてご紹介します」。
    

超便利!2019年に注目したい最新CSSツール、リソースガイド100個まとめ – PhotoshopVIP

超便利!2019年に注目したい最新CSSツール、リソースガイド100個まとめ - PhotoshopVIP
«  便利そうなのでメモ。「これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています」。
    

デザイナーが選ぶ好きなフォント1位は? – 2位DIN、3位Helvetica | マイナビニュース

デザイナーが選ぶ好きなフォント1位は? - 2位DIN、3位Helvetica | マイナビニュース
«  メイリオは? ねぇ、メイリオは、どこ…? 「2位は『DIN』がランクイン。2020年東京オリンピック・パラリンピックの 『TOKYO 2020』のロゴに使用されている」。
    

必見!粒質テクスチャ背景が印象的なWEBデザイン例20選|SeleQt

必見!粒質テクスチャ背景が印象的なWEBデザイン例20選|SeleQt
«  どこかで使う。「ミニアムなフラットスタイルデザインがトレンドとなっている一方で、デザイナーの中には、微妙なテクスチャを使用してデザインの色のブロックを排除するものもあります」。
    

2018年総まとめ : Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ | コリス

2018年総まとめ : Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ | コリス
«  今年もお世話になりました。「Pocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです」。
    

2019年はこの色で決まり!デザイナーが使いたいトレンドカラー8個まとめ – PhotoshopVIP

2019年はこの色で決まり!デザイナーが使いたいトレンドカラー8個まとめ - PhotoshopVIP
«  色の使い方は永遠の課題なので。「清潔感のある落ち着いたナチュラルカラーから、鮮やかで活気のある色調まで、さまざまな色のトレンドを見ていきましょう」。
    

商用可で完全無料!2018年公開のフリーフォント素材132個総まとめ – PhotoshopVIP

商用可で完全無料!2018年公開のフリーフォント素材132個総まとめ - PhotoshopVIP
«  日本語フォント、ありがとうございます。「2018年は、たくさんのフリーフォントが公開された年となり、紹介した素材も666個と、フォント好きにとっては当たり年と言えるでしょう」。
    

フォントの管理に!インストール済みのフォントを一覧表示できる、Win・Mac・Linux対応の無料アプリ -Fontviewer | コリス

フォントの管理に!インストール済みのフォントを一覧表示できる、Win・Mac・Linux対応の無料アプリ -Fontviewer | コリス
«  便利そうなのでメモ。「先日リリースされたばかりの国産アプリで、もちろん日本語フォントに対応」「個人でも商用でも無料で利用できます」。
    

CSSスニペット:CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

CSSスニペット:CSSで要素を斜めに2分割して境界線を透過 | かちびと.net
«  いうてもどこかで使いたい。「素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそう」「css-masksのブラウザ対応状況です。まだ実用には注意が必要そうですね」。
    

画像内の人物のみを自動で綺麗に切り取ってくれるWebアプリ・「remove.bg」 | かちびと.net

画像内の人物のみを自動で綺麗に切り取ってくれるWebアプリ・「remove.bg」 | かちびと.net
«  便利そうなのでメモ。「その画像内の人物だけを切り取り、背景を透過してpngでダウンロードできる、というもの。何度か試してみましたが、なかなかの精度でした」。
    

Web制作者がチェックしておきたい!2018年、CSSベースのフレームワークのまとめ | コリス

Web制作者がチェックしておきたい!2018年、CSSベースのフレームワークのまとめ | コリス
«  手書き風 PaperCSS、どこかで使いたい。「CSSベースの新着のフレームワークをはじめ、定番フレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介」。
    

【総まとめ】2018年公開のすごいPhotoshopチュートリアル、作り方厳選60個 – PhotoshopVIP

【総まとめ】2018年公開のすごいPhotoshopチュートリアル、作り方厳選60個 - PhotoshopVIP
«  勉強になります。「これからPhotoshopを始めてみようという人にもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみては」。
    

通知の最適化に役立つモバイル通知コンセプト4選 | UX MILK

通知の最適化に役立つモバイル通知コンセプト4選 | UX MILK
«  うーん、良い通知と良くない通知の差ってどこかなぁ。「いくつかの興味深いモバイル通知コンセプトを共有したい。ただし、あくまでもコンセプトであり、最終的な解決策ではないことをここに強調しておきます」。
    

デザインの基本 : フォントのカーニングとは、カーニングの基本的なやり方 | コリス

デザインの基本 : フォントのカーニングとは、カーニングの基本的なやり方 | コリス
«  めっちゃわかりやすく丁寧な解説。ありがとうございます。「文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します」。
    

Webサイト制作におけるワークフローを邪魔しない超シンプルなCSSデバッグ・「DebuCSSer」 | かちびと.net

Webサイト制作におけるワークフローを邪魔しない超シンプルなCSSデバッグ・「DebuCSSer」 | かちびと.net
«  便利そうなのでメモ。「制作時のワークフローを邪魔しない、という点を重視しているようで手軽にアウトラインや要素のID、class、高さや幅を確認できる」。