
lynn-19930 / Pixabay
仕事をしていて調べたものをまとめています。デザインやUI制作に関わる便利情報のリンク集です。多分ブックマークしておくと、いざという時役に立つ、はず。
- メッセージエリア
- バリデーションチェック対応事例①
- html5でバリデーションチェック対応
- CSSのみでフキダシ表示(バリデーションチェック用)
- CSSのみでフキダシ/ボタンデザイン生成(自動生成|ジェネレーター)
- アスペクト比
- SVGファイルの取扱いについて
- ワイヤーフレームいろいろ
- インフォグラフィックまとめ
- スマホUIまとめ
- UXデザインまとめサイト
- CSSのみでできるボタンエフェクト20種類
- CSSのみでできるキャプションエフェクト18種類
- CSSのみでできるテキストリンクエフェクト15種類
- CSSのみでできるヘッダーテキストエフェクト21種類
- CSSのみでできるローディングアニメーション11種類
- CSSのみでできる画像エフェクト5種類(拡大表示を促すエフェクト)
- インパクト大な6マスカルーセルエフェクト
- 画像が折り曲がったりめくれたりするインパクト大エフェクト
- CSSだけでできるマル画像にインパクト大エフェクト20種類
- インパクト大な画像のいろんな動きのエフェクト
- いろんな動きのアニメーション(多分、文字でも画像でも)
- スクロール時にオブジェクトを下からフェードインするエフェクト(CSS & JS)
- スクロールしてトップへ戻るボタン
- 3Dエフェクト
- GoJS?ツリー構造のUIを表現するのに最適?動的動作可
- CSSでできるエフェクトいろいろ
- 画面サイズ早見表(iPhone、iPad)
- アイコン | WEBアイコン
- カラー心理学
メッセージエリア
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://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/
↑
こちらはボタン
アスペクト比
http://gadget-initiative.com/glossary/display_resolution_aspect_ratio
↑
レスポンシブ対応には重要
[ 4:3 ]
VGA 680 X 480
SVGA 800 X 600
XGA 1024 X 768
UXGA 1600 X 1200
QXGA 2048 X 1536 (iPad 2012)
[ 16:9 ]
HD 1280 X 720
WXGA 1366 X 768
WXGA++ 1600 X 900
WQHD 2560 X 1440 (スマートフォン 2014〜)
Full-HD 1920 X 1080
WUXGA 1920 x 1200
4K 3840 x 2160
5K UHD 5120 x 2880 (iMac 2014)
8K UHD 7680 x 4320
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のみでできるテキストリンクエフェクト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種類(拡大表示を促すエフェクト)
インパクト大な6マスカルーセルエフェクト
画像が折り曲がったりめくれたりするインパクト大エフェクト
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アイコン
自分で作ったアイコンをアイコンフォント化
できるサービス
カラー心理学
http://iro-color.com/episode/about-color/blue.html
↑
とても分かりやすいカラー心理学
https://matome.naver.jp/odai/2133288985088975701
↑
カラー性格分析
mori
最新記事 by mori (全て見る)
- 先進性を感じるWEBサイト - 2018年5月18日
- adwordsのRLSAってみんなどう使ってる?CPA効果改善の切り札 - 2018年4月17日
- 新人研修に行きたくない もう辞めて転職したい - 2018年4月6日
- 労働基準監督署GO!? 有給が取得できない場合にすること - 2018年3月25日
- ヘリノックスだけじゃないアウトドアチェアおすすめ│キャンプやイベントで大活躍の椅子たち - 2018年3月25日
コメント