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

lynn-19930 / Pixabay

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

この記事の目次

スポンサーリンク

メッセージエリア

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/

こちらもイロイロ

CSSのみでできるキャプションエフェクト18種類

CSSのみで実装するキャプションエフェクト 20

CSSのみでできるテキストリンクエフェクト15種類

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

CSSのみでできるヘッダーテキストエフェクト21種類

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

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

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

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

 

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

http://tobiasahlin.com/spinkit/

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

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

http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html

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

https://tympanus.net/Development/ThumbnailGridAnimations/index.html#

 

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

 

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

カラー性格分析

UIデザイン

Posted by mori