ブクマしとくと役立つデザイン・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/
↑
こちらはボタン

アスペクト比

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 | NxWorld

画像のマウスオーバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。

www.nxworld.net

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

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

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。

www.nxworld.net

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種類（拡大表示を促すエフェクト）

CSS3 Hover Effects

www.alessioatzeni.com

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

Animations for Thumbnail Grids | Demo 1

Animations for Thumbnail Grids: Transition Inspiration for Thumbnail Grids

tympanus.net

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

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
↑
カラー性格分析