http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/ XNG: GIFs, but better, and also magical | Clean Rinsegigazineでも紹介されてるから貼っとくついにGIFに変わる新しいアニメーション画像フォーマットが誕生 ついにGIFに変わる新…

幸せに生きるために知っておきたい心理学・脳科学の８つの研究データ - Literally 幸せに生きるために知っておきたい心理学・脳科学の８つの研究データ - Literally 逆に、通勤時間の長さによる不快感はいつまでも慣れないとのこと。 と書いてある。 私は大…

バナーは目に入らないのか？～新旧の知見 バナーは目に入らないのか？～新旧の知見 － U-Site2007年の記事だし、検証してるのがブログなので今は少し違う考察が得られるかもしれないけど。そう考えると前に考察やった通販サイト(ほとんどがバナーばかり)のサ…

PHPには三項演算子というものがあるのだって。始めて知りました。三項演算子 - 条件分岐 - PHP入門 三項演算子 - 条件分岐 - PHP入門 あと今日知って便利だなぁと思ったのが strstr(文字列A, 文字列B)文字列Aの中に文字列Bが含まれているかどうかをbooleanで…

UIわからなさすぎるUIの基本と、設計方法│UI改善で成果6倍！ UIの基本と、設計方法│UI改善で成果6倍！ これくらいは考えているつもりだけど出来てなかったらどうしようレスポンシブWebデザインで成功するUI／UXのポイント5つ レスポンシブWebデザインで成功…

たくさんの商品写真やカテゴリをまとめるため基本的に情報量が多いベルメゾンネット 全体幅950px サイドバー200px メイン746px(画像間違えて964pxとかいてしまった)中盤のバナーが大量にあるところグリッド計るのも面倒なくらいいろんなサイズ混じってるけど…

ポートフォリオのキービジュアルをsvg化したのはいいものの、ファイルサイズが大きく回線が遅いと読み込みに時間がかかるのが気にかかっていた。同じ画像をpngで書き出すと185KBだったのに対し、Illustratorからただ書き出しただけのsvgはなんと584KBと3倍以…

ノートルダム大学にてwebコミュニケーション・web開発におけるディレクションを研究するErik Runyon氏による自動送りカルーセルのクリック率が公開されている。Carousel Interaction Stats - June 2013 Update | Erik Runyon Carousel Interaction Stats - J…

CSSのグリッドシステムっていっぱいあるよね〜 これは1140pxで結構でかめのやつ1140px CSS Grid Retired — Andy Taylor 1140px CSS Grid Retired — Andy Taylor関係ないけどここのタイトルテキスト、 text-shadow: 1つめの影, 2つめの影;みたいにカンマで区…

CSSのアニメーションを使ってグリッチしたかのようなエフェクトをかけるテクGlitch Effect on Text / Images / SVG | CSS-Tricks Glitch Effect on Text / Images / SVG | CSS-Tricksアイデアだ

Google Design の新しいガイドライン、特にmaterial design のpdfを必ず読むこと。 Google Designhttp://static.googleusercontent.com/media/www.google.com/ja//design/material-design.pdf

面白そうなものを発見しましたSonic Piコード書いてシンセサイザーの音を制御出来るということでしょうか。サンプルにアーメンある。 sample :loop_amen, ...刻んだりとか出来るんだろうか〜！freeだしチャレンジしたい。

gitで新しくリモートリポジトリを作ろうとした所、 Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.というように言われた。調べたら何でも出てくる。Agreeing to the Xcode/iOS license... のエラーがでた時…

箱にマッピングするときなどに使うIllustratorで遠近グリッドによる立体表現 Part-1 - デザイン雑学 Illustratorで遠近グリッドによる立体表現 Part-1 - デザイン雑学 細かい調整が必要で結構難しい

最近のsoundcloud、アートワーク読み込み前のプレビュー画像がランダムなカラーのグラデーションになっているこんなかんじこれ、どれもsoundcloudのwebのカラートーン(オレンジ・チャコールグレー)と地味にマッチしてない色なのでこういうアートワークに見え…

今度はsvg+cssを使ったアニメを練習してみた。sampleたのしい。 コードは以下svg <svg> <path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text id="text" font-size="8" dx="0" dy="0"> <textPath xlink:href="#path"> testtesttesttest </textPath> </text> </svg> css #path { stroke:#808080; fill:none; stroke-width:1; …

<path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> このパスの上にテキストを描画しましたコードこんなかんじ <path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text font-size="8" dx="0" dy="0"> <textPath xlink:href="#textTest"> testtesttesttest </textPath> </text> strokeもnoneに…</path></path>

引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけなSVG 基本は以下で学ぶ &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html" data-mce-href="…

<a href="http://leko.jp/archives/442" data-mce-href="http://leko.jp/archives/442">Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG</a> Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG はじめてのEmmet with Sublime Text2 from Sadaaki HIRAI 【便利ツール】Emmetで、ちょっと気持ちいいコーディング…

Blocks — Productivity tools for designers and developers 水彩画風の滲みの上に白の単純なラインだけでイラストが浮かんでいるのがかわいい。 イラスト画像はsvgだ。 あとレスポンシブでもある。 最初にも最後にもフォームがある構成もなんかしらの機会で…

配色パターンからWebデザインを考える 配色パターンからWebデザインを考える | Webクリエイターボックス これのぴったりの配色を考えるのところが何気にPhotoshop Tipsな気がする 2. 彩度のバリエーションを表示 ５色の上部に白で塗りつぶしたレイヤーを重ね…

ページ全体が枠で囲われているようなデザイン。 例 <a href="http://t-p-n.jp/" data-mce-href="http://t-p-n.jp/">風ノウタ / IRONNATS(アイアンナッツ) | 岡山市にあるレストランウエディングのお店</a> 風ノウタ(kazenouta) / アイアンナッツ(IRONNATS) | 岡山市にあるレストランウエディングのお店 <a href="http://litalico.co.jp/" data-mce-href="http://litalico.co.jp/">株式会社LITALICO（りた</a>…

覗いて見たらマジ未知な知識ばっかりやった。 フロント作業の効率化 from Yuto Yoshinari zen-codingの次期バージョンことEmmet、あとで調べよう、めっちゃ便利そう あとsassじゃなくてstylus使ってるのか〜 関数も定義出来るとか…でもCSSで関数使う機会今の…

なんてものがあるらしいです。 Zepto.js: the aerogel-weight jQuery-compatible JavaScript library Zepto.js: the aerogel-weight jQuery-compatible JavaScript library IE対応とか関係ないもの(ex:スマホ向け)とかに good とのこと

モチイエ女子web モチイエ女子web｜女子と住がもっと近づくwebサイト コンテンツは置いといて、各パーツが全部綺麗に8の倍数で揃っていてきれい。 8の倍数を指標にして設計するとやりやすそうというのはこちらでも言及済み。 『デザインは8の倍数でできてい…

「人類は200歳まで生きられる」 がん細胞を死滅させ、食糧問題までも解決する“プラズマ”の可能性とは？ | ログミー[o_O] 「人類は200歳まで生きられる」 がん細胞を死滅させ、食糧問題までも解決する“プラズマ”の可能性とは？ | ログミー[o_O] プラズマすご…

デザイナーという人達の仕事 デザイナーという人達の仕事 | freshtrax | btrax スタッフブログ 良記事。 デザイナーというと、絵を描いて形だけを決める仕事だと勘違いしている人が多いのだが、実はそれらは最終アウトプットのごく一部であり、本来デザイナ…

Objective-C - iPhone6/iPhone6 Plusの画面対応について - Qiita Objective-C - iPhone6/iPhone6 Plusの画面対応について - Qiita これより iPhone4siPhone5/5siPhone6iPhone6 Plus デバイスピクセル 640 x 960 640 x 1136 750 x 1334 1080 x 1920(1242 x 22…

ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは - GIGAZINE 工学倫理でやったフールプルーフを思い出した なんの流れで出てきたのか忘れたけど、UI構成…

ワイヤーフレームとメインビジュアルとロゴだけでもめっちゃ時間かかった 【見本】 ちょっとバグってる 【模写】 メインビジュアルのフォント、全然違うんだけど、文字間隔の取り方が特徴的だったのでそれを完コピしたのとネオンぽいエフェクトがやっぱりで…