ブクマしとくと役立つデザイン・UI リンク集

UIデザイン

lynn-19930 / Pixabay

仕事をしていて調べたものをまとめています。デザインやUI制作に関わる便利情報のリンク集です。多分ブックマークしておくと、いざという時役に立つ、はず。

目次
  1. メッセージエリア
  2. バリデーションチェック対応事例①
  3. html5でバリデーションチェック対応
  4. CSSのみでフキダシ表示(バリデーションチェック用)
  5. CSSのみでフキダシ/ボタンデザイン生成(自動生成|ジェネレーター)
  6. アスペクト比
  7. SVGファイルの取扱いについて
  8. ワイヤーフレームいろいろ
  9. インフォグラフィックまとめ
  10. スマホUIまとめ
  11. UXデザインまとめサイト
  12. CSSのみでできるボタンエフェクト20種類
  13. CSSのみでできるキャプションエフェクト18種類
  14. CSSのみでできるテキストリンクエフェクト15種類
  15. CSSのみでできるヘッダーテキストエフェクト21種類
  16. CSSのみでできるローディングアニメーション11種類
  17. CSSのみでできる画像エフェクト5種類(拡大表示を促すエフェクト)
  18. インパクト大な6マスカルーセルエフェクト
  19. 画像が折り曲がったりめくれたりするインパクト大エフェクト
  20. CSSだけでできるマル画像にインパクト大エフェクト20種類
  21. インパクト大な画像のいろんな動きのエフェクト
  22. いろんな動きのアニメーション(多分、文字でも画像でも)
  23. スクロール時にオブジェクトを下からフェードインするエフェクト(CSS & JS)
  24. スクロールしてトップへ戻るボタン
  25. 3Dエフェクト
  26. GoJS?ツリー構造のUIを表現するのに最適?動的動作可
  27. CSSでできるエフェクトいろいろ
  28. 画面サイズ早見表(iPhone、iPad)
  29. アイコン | WEBアイコン
  30. カラー心理学
    1. mori
      1. 最新記事 by mori (全て見る)

メッセージエリア

http://www.jankoatwarpspeed.com/css-message-boxes-for-different-message-types/

海外では一般駅なデザインサンプル

バリデーションチェック対応事例①

http://mamion.net/2014/12/%E7%9A%87%E6%BD%A4%E3%81%AE%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8C%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E7%90%86%E7%94%B1/

シニア対応のバリデーションチェックは視認性など、かなり手を入れてある

http://digitalidentity.co.jp/service/efo/points.html

業者のバリデーションチェック。confirm画面で文字を大きくしているあたりはJTBと同じ手法を使っていてわかりやすい

html5でバリデーションチェック対応

http://www.girliemac.com/blog/2012/12/01/html5-form-validation-jp/

html5の仕様でJSを使わなくてもバリデーションチェックが実装できる例

http://i26.jp/blog/%E3%80%90html5%E3%80%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4/

JSで補助???

http://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c

html5で実装する時は注意が必要。JSで問題を回避

http://phiary.me/client-side-validation/

デモ付き。これが最も現実的か?

CSSのみでフキダシ表示(バリデーションチェック用)

https://zxcvbnmnbvcxz.com/demonstration/pure-css3-balloons.php

Balloon4以外は文言が長くなっても可変対応可能

http://miauler.net/blog/archives/2013/07/11_1356.html

▲の作り方は参考になる

CSSのみでフキダシ/ボタンデザイン生成(自動生成|ジェネレーター)

http://www.cssarrowplease.com/

フキダシをこんなに楽にコードを出力してくれるなら、自動で出力してもらうほうが楽?

http://grad3.ecoloniq.jp/

こちらはボタン

アスペクト比

SVGファイルの取扱いについて

http://qiita.com/ka215/items/f9834dca40bb3d7e9c8b

SVGを貼り付けるには3つの方法がある
illustrator等で書き出したSVGファイルは、imgタグで画像を貼るみたいに扱える

http://qiita.com/yamamiweb/items/011d6b264a5af568783b

こちらも解説

ワイヤーフレームいろいろ

http://coliss.com/articles/build-websites/operation/work/wireframes-and-flowcharts-for-web-site.html

各種クールなワイヤーフレームあり

インフォグラフィックまとめ

https://liginc.co.jp/news/46707

インフォグラフィックのまとめサイト。なんかカッコイイ

スマホUIまとめ

http://liskul.com/cr_spdesign36-5195

各種スマホUIのメリット/デメリットを検証したまとめサイト

UXデザインまとめサイト

http://archeco.co.jp/ux-design/

archecoが情報発信しているUI UXデザインについてのサイト

CSSのみでできるボタンエフェクト20種類

https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

CSSでボタンエフェクトいろいろ20種類と参考サイト

https://tympanus.net/Development/IconHoverEffects/

こちらアイコンボタンエフェクトのイロイロ

https://tympanus.net/Development/CreativeButtons/

こちらもイロイロ

https://tympanus.net/Development/CreativeLinkEffects/

3D的な動きをしたり視覚的にインパクトあり!

https://tympanus.net/codrops/2013/08/06/creative-link-effects/

上記、クリエイティブリンクエフェクトの実装解説とソースコードのダウンロード先リンク

 

CSSのみでできるローディングアニメーション11種類

http://tobiasahlin.com/spinkit/

これをどのタイミングまで見せるかが問題

CSSのみでできる画像エフェクト5種類(拡大表示を促すエフェクト)

CSS3 Hover Effects

インパクト大な6マスカルーセルエフェクト

Animations for Thumbnail Grids | Demo 1
Animations for Thumbnail Grids: Transition Inspiration for Thumbnail Grids

 

画像が折り曲がったりめくれたりするインパクト大エフェクト

 

https://tympanus.net/Tutorials/3DHoverEffects/index5.html

折り曲がるエフェクトはインパクト大!jQueryあり

CSSだけでできるマル画像にインパクト大エフェクト20種類

http://gudh.github.io/ihover/dist/index.html

サンプルはマル画像だが、四角でも可能(回転することが多いので、正方形のほうが良いかも)

インパクト大な画像のいろんな動きのエフェクト

https://minimamente.com/example/magic_animations/

動きは派手だが、どのイベントで呼ぶかが問題

いろんな動きのアニメーション(多分、文字でも画像でも)

https://daneden.github.io/animate.css/

多数ありすぎ。どうしてもインパクトを付けたい箇所に使いたい(プルダウンで選択するので、確認がめんどくさい)

http://anicollection.github.io/#/

こっちのほうが分かりやすいかも。パレット状に配置されてエフェクトが確認できる

 

さまざまなカルーセルを表現できるSlick(jQuery)

http://kenwheeler.github.io/slick/

14種類のカルーセルを表現するslick

http://cly7796.net/wp/javascript/plugin-slick/

Slickオプション指定

http://gimmicklog.main.jp/jquery/549/

Slickの扱い方

スクロール時にオブジェクトを下からフェードインするエフェクト(CSS & JS)

http://imasashi.net/element-fadein.html

下からフェードインするエフェクト。CSSとJSを使用しているので、JSキャンセルのユーザーには効かない。

スクロールしてトップへ戻るボタン

http://www.webopixel.net/javascript/538.html

ボタン出現時は、下からポップアップやフェードインなど、数種あり

3Dエフェクト

https://tympanus.net/Development/3DEffectMobileShowcase/index.html

3Dでアニメーションするインターフェース
どうやって動いているのか、要調査!

GoJS?ツリー構造のUIを表現するのに最適?動的動作可

https://gojs.net/latest/samples/index.html

マインドマップやサイトマップなど、ツリー構造のビジュアル表現に向いてる?
オブジェクトの位置をリアルタイムに変えられるので、ビジネスツールの開発に使えそう!

CSSでできるエフェクトいろいろ

https://lopan.jp/css-animation/

やさしい解説つき

画面サイズ早見表(iPhone、iPad)

http://qiita.com/tomohisaota/items/f8857d01f328e34fb551

iPhone、iPadの解像度、画面サイズの早見表

アイコン | WEBアイコン

■Googleマテリアルアイコン記述方法

a[target=”_blank”]:after {
font-family: “Material Icons”; / Googleマテリアルアイコン /
content: “\E3E0”; / _blank用アイコンコード /
}


※末尾4桁16進コードの先頭にバックスラッシュ(Macならoption + ¥)を指定する。当然、aタグにtarget=”_blank”を忘れずに!

 

■国内外さまざまなWEBアイコン

https://www.nxworld.net/tips/free-icon-font-sets.html

 

自分で作ったアイコンをアイコンフォント化
できるサービス

https://icomoon.io/app/#/select

カラー心理学

http://iro-color.com/episode/about-color/blue.html

とても分かりやすいカラー心理学

https://matome.naver.jp/odai/2133288985088975701

カラー性格分析

コメント