• Category Archives: デザイン / UIUX

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる | コリス

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる | コリス
«  CSSのみ…だと…!?「フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです」。
    

コピペで簡単!サイト制作のアクセントになるパーティクル(粒子・分子)エフェクト・アニメーション14選!【CSS/JS】 – Web Design Facts

コピペで簡単!サイト制作のアクセントになるパーティクル(粒子・分子)エフェクト・アニメーション14選!【CSS/JS】 - Web Design Facts
«  かわいい。どこかで使う。「クリックで玉が弾けたり、動いたり、ドラッグで粒子を操作できたり面白いものが盛りだくさん」。
    

【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選! │ ジャングルオーシャン

【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選! │ ジャングルオーシャン
«  jQueryって何だかんだ便利なんよなぁ…。「今日はjQueryで実装するアコーディオンメニューのご紹介です。簡単すぎてあっという間に実装できてしまう」。
    

1925年刊行のレタリング文字集に、大正ロマン溢れるオシャレなフォントがぎっしり詰まっていて素敵 – Togetter

1925年刊行のレタリング文字集に、大正ロマン溢れるオシャレなフォントがぎっしり詰まっていて素敵 - Togetter
«  レタリングいいよいいよー。「オシャレすぎない大正??」「タイポグラフィーデザインの戦前の隠れた名」「ググったらアマゾン中古で16500円だった…」。
    

配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax | コリス

配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax | コリス
«  こういうのはありがたいです。「ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます」。
    

ネコ好きにはたまらない!商用利用無料のネコの写真素材がいっぱいある! -Pexels Cats | コリス

ネコ好きにはたまらない!商用利用無料のネコの写真素材がいっぱいある! -Pexels Cats | コリス
«  ニャ、ニャんだってー!!「Pexels Catsは元々、エイプリルフールのねたとして公開されたのですが、そのままカテゴリとして残ることになったようです」。
    

Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5・6月 | コリス

Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5・6月 | コリス
«  ナビゲーションの最適解が未だにわからない。「デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります」。
    

Webサイト内のフリクションを見つけて改善する7つの戦略 | UX MILK

Webサイト内のフリクションを見つけて改善する7つの戦略 | UX MILK
«  いらいらすることが極力ないようにはしたい。「フリクション(摩擦)とはユーザーが目標を達成するのを阻むすべての要因のこと。フリクションはユーザーとデザイナーの双方にとって重大な問題となります」。
    

「一般の人が思うデザイナー像と実際との違い」を示したイラストに「ほんとこれ」「職場に貼りたい」 – Togetter

「一般の人が思うデザイナー像と実際との違い」を示したイラストに「ほんとこれ」「職場に貼りたい」 - Togetter
«  まあ本当の本当にすごい人もいるけどね。「沢山調べて研究して考えてアイデアを取捨選択し、ようやく一つの結論に辿り着いているんです」。
    

シンプルなWebデザインを実現するための複雑な道のり | UX MILK

シンプルなWebデザインを実現するための複雑な道のり | UX MILK
«  削ぎ落とす。大事。「人々がデバイスやオンラインに多くの時間を費やすようになったことで、心理的に快適で、直感的で、視覚的に落ち着いている体験や真っすぐな体験がますます求められるようになりました」。
    

Bootstrapなどのフレームワークは使用せずに、Webサイトを実装した際に学んだCSSの4つのテクニック | コリス

Bootstrapなどのフレームワークは使用せずに、Webサイトを実装した際に学んだCSSの4つのテクニック | コリス
«  実践的。勉強になります。「新しいプロジェクトをゼロから始めることは、どれくらい経験豊かであっても、新しいことが学べる素晴らしいチャンスです」。
    

商用のデザインやイラストにも無料でガンガン使える!超高解像のフリーテクスチャ素材 -CC0 Textures | コリス

商用のデザインやイラストにも無料でガンガン使える!超高解像のフリーテクスチャ素材 -CC0 Textures | コリス
«  これはありがたい。「2000px、4000px、8000pxの超高解像度のテクスチャ素材」「ライセンスはCC0、クレジット表記なしで利用できます」。
    

無料で画像加工ができるサイト「Fotor」は高機能で簡単、いろんな用途に使えます | ゆうそうとITブログ

無料で画像加工ができるサイト「Fotor」は高機能で簡単、いろんな用途に使えます | ゆうそうとITブログ
«  あとで試す。ちょいちょい使えそうなので。「無料のソフトなどを探していましたが、今回ブラウザで画像加工ができる『Fotor』というサービスを利用」。
    

知ってると便利!HTML、CSS、JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ | コリス

知ってると便利!HTML、CSS、JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ | コリス
«  ショートカット、使いこなせるようになりたい。「最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります」。
    

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

超便利!確認しておきたい最新CSSツール、リソースガイド 2018年度 - PhotoshopVIP
«  これはありがたいまとめ。「2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツール。アイデアを形にできるツールが見つかりますよ」。
    

最近、◯モチーフがイケてる!◯イイ感じのサイトまとめ! | 株式会社LIG

最近、◯モチーフがイケてる!◯イイ感じのサイトまとめ! | 株式会社LIG
«  地方から出てきて最初にOIOIの洗礼を受けたおっさんが通りますよっと。「丸いモチーフを起用してるサイトデザインが気になります!そんな『◯イイ』気になるサイトを集めてみましたのでご紹介します」。
    

UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう! | コリス

UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう! | コリス
«  勉強になります。「UIデザインに使用しているツール、ファイル、シンボル、レイヤー、ベクターグラフィックなど、どのようなワークフローが実践されているか」。
    

疑問符(?)や感嘆符(!)の後はなぜアケるの? アキは全角か半角か? | Web担当者Forum

疑問符(?)や感嘆符(!)の後はなぜアケるの? アキは全角か半角か? | Web担当者Forum
«  字数制限とかもあるしね。「ぶっちゃけ、どっちでもいい。そもそもWebではどんなデバイスでどうレンダリングされるか、どんなフォントを指定しているかによって見え方は変わる」。
    

専門家任せにしてませんか? チーム全員がUXを意識すべき理由 | UX MILK

専門家任せにしてませんか? チーム全員がUXを意識すべき理由 | UX MILK
«  これはありがたいテキスト化。「戦略は生命線です。何が有意義なUXであるかについて全員が戦略的に考えるようにできなければ、誰も欲しがらない、または使えないものを作っていることになります」。
    

フォントの形を変えて情報を隠ぺいする技術「FontCode」文字は文字に隠せ – CNET

フォントの形を変えて情報を隠ぺいする技術「FontCode」文字は文字に隠せ - CNET
«  スパイ漫画で見たヤツ。「任意の文章を利用し、構成するフォントの形状を微妙に変えることで別の情報を文章内に埋め込む技術。フォントの形状変化はわずかで、元文章の内容は改変されない」。
    

無料一括ダウンロード可!2867個のフラットデザインアイコンセット【商用可/フリー素材】 – Web Design Facts

無料一括ダウンロード可!2867個のフラットデザインアイコンセット【商用可/フリー素材】 - Web Design Facts
«  どこかで使う。「アイコンの数が2867個もあるので探すのが少し大変ですが、ほしいアイコンはほぼ必ず見つかります。またデザインもポップで可愛い」。
    

Web制作者が知っておくと便利!Chrome 67でアップデートされたデベロッパーツールの新機能 | コリス

Web制作者が知っておくと便利!Chrome 67でアップデートされたデベロッパーツールの新機能 | コリス
«  これはありがたい。「Chrome 67でアップデートされた新機能を紹介。Webの制作時に役立つ機能だけでなくUIも進化しており、さらに便利になりました」。
    

商用も可!無料で使える手書き風ガジェット系ベクター画像60種!(AI、EPS、PDF、SVG、PNG) – Web Design Facts

商用も可!無料で使える手書き風ガジェット系ベクター画像60種!(AI、EPS、PDF、SVG、PNG) - Web Design Facts
«  どこかで使う。「昨今スマホの普及によって使う状況は増えているかと思いますので、プレゼンやサイト、チラシなどで活用しましょう」。
    

簡易的なDOM操作をjQueryライクに行える超軽量ライブラリ・「nanoJS」 | かちびと.net

簡易的なDOM操作をjQueryライクに行える超軽量ライブラリ・「nanoJS」 | かちびと.net
«  なお、naonoJSに空目したのは内緒だ。「パフォーマンスを損なうほど重いjQueryを使うよりこの手の後発な軽量ライブラリを使うのも一つの手段として有効ですね」。
    

Webサイトはユーザーの疑問を解決するためにある | UX MILK

Webサイトはユーザーの疑問を解決するためにある | UX MILK
«  ありがたい指摘。たまに忘れる…。「Webサイトが強力なマーケティングツールであることは間違いありません」「しかし、他のチャネルとは異なるものであり、きちんと認識しなければ潜在顧客を遠ざけてしまう」。
    

UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方 | コリス

UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方 | コリス
«  こういう記事は本当にありがたい。とても助かります。「Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します」。
    

ロゴは左配置で決定?!使いやすいサイトのナビゲーション|SeleQt

ロゴは左配置で決定?!使いやすいサイトのナビゲーション|SeleQt
«  少しそんな気はしてたが、つい中央に寄せてしまう…。「ユーザーがサイトをスキャンすると視線が左に寄ります。左にロゴを置くと視覚的な視線に自然に入り、より多くのユーザーがブランドを覚えていられます」。
    

80’s リバイバルの流行に乗って昔のレコードジャケットからカラーパレット作ってみた | 株式会社LIG

80's リバイバルの流行に乗って昔のレコードジャケットからカラーパレット作ってみた | 株式会社LIG
«  これは良い。勉強になります。「音楽マジックがかかってるかもしれませんが、今見てもイケてる感じしますね。雰囲気が『合ってる』ことが一番大事だと思いました」。