新しい日記

新しい日記

必ず読むこと

UI

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

Sonic Pi

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

Xcode のアップデートが原因でgitリポジトリが作れなかったり

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

illustratorの遠近グリッド使い方

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

soundcloud の アートワーク読み込み時画像から考える UX

UX

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

今日のsvgその2

svg

今度は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; …

今日のsvg

svg

<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は最高

svg

引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけな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="…

Emmet参考

<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で、ちょっと気持ちいいコーディング…

いいかんじのweb参考

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

配色に役立つPhotoshop Tips

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

最近流行っている?

ページ全体が枠で囲われているようなデザイン。 例 <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で関数使う機会今の…

jQueryと互換性のある軽量ライブラリ 「zepto.js」

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

参考web

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

プラズマ

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

デザイナーとは

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

iPhone解像度まとめ

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構成…

模写

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

FRED PERRY風の月桂冠

楕円ベースで出来た葉っぱを並べてエンベロープかけて作る 葉っぱの作り方次第で違う雰囲気になるのでテスト 1,完全に同じ楕円をずらーと並べた これだとこうなる いかにもイラレで並べて作りました感 色で暖かく見えちゃいますが形はなんというかミニマムな…

いいかんじのweb参考

tebukulo: 吉祥寺を拠点に活動するデザイナーとライターのユニット ふんだんに動きが使われているけど仰々しくない。 サイト自体も軽めでストレスが少ない。 かわいい。

フォントについて知らなさすぎたので

フォントの知識 凝縮したページを発券した。 メトリクスとオプティカルの違いを知らずにとりあえず両方試していい感じに見えるほうを選んでたけど、今後は選び方を考えよう メトリクス:文字のカーニング情報に基づく オプティカル:文字の形状に基づく ちな…

いいかんじのweb参考

SOHO NEON | FRED PERRY JAPAN | フレッドペリー日本公式サイト SOHO NEON | FRED PERRY JAPAN | フレッドペリー日本公式サイト レスポンシブの参考に探してていいな〜と思ったもの 特にいいな〜と思ったのがメインロゴと、セクション1の背景が微妙にチカチ…

はてなブログでほしい機能

既に投稿した記事を下書きに戻したりしたい まだやれてないらしい

Photoshop でパスの境界線を描くときに気をつけること

手順 1,パスツールでパスを描きます(みづらい) 2,描画用のレイヤーを必ず用意すること これみたいにテキスト、塗りつぶしレイヤーとかしかないとできない 必ず用意する 3, Bを押してブラシツールを選択。描画したい線をブラシパネルで作る。 4, パスパネルか…

SASS記法例

.scssではなく.sassでプロジェクトつくるとき compass create --syntax sass とやると最初から.sassででてくる、便利 この記事がわかりやすかった <a href="http://howtohp.com/2011/09/19/compass/" data-mce-href="http://howtohp.com/2011/09/19/compass/">CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。</a> CSS書くならCompass使った方がいいよ。SASS…

PHP閉じタグ

PHP

ファイル全体が純粋な PHP コードである場合は、ファイルの最後の終了タグは省略するのがおすすめです。 終了タグの後に余分な空白や改行があると、予期せぬ挙動を引き起こす場合があるからです。 余分な空白や改行のせいで PHP が出力バッファリングを開始…

PHP省略タグについて

PHP

PHP では、短い形式の開始タグ も使えます (しかしこれはおすすめしません。というのも、この形式のタグは php.ini でshort_open_tag を有効にするか --enable-short-tags オプションつきで PHP を configure した場合でないと使えないからです)。 PHP: PHP…