HTML5 Please - Use the n... / CSS3 Click Chart | CSS3 ... / Mobile Web Resources | M...他...全5件
UI(ユーザーインターフェイス)は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Huma
今回の記事はUIデザイナの Morino@WWDC2013参加中 に寄稿いただきました! Appleの公式サイトに iOS 7 を紹介するビデオが公開されましたね。 http://www.apple.com/ios/ios7/ 特に前半の4分間でジョナサン・アイブ氏により語られているiOS 7の説明部分に、今回の大きなデザイン変更の様々な要点が含まれており、これからのアプリ設計のあるべき方向性が示唆されています。 これらをよく理解しておくことが非常に重要だと感じていますので、自分自身の復習のためとみなさんへの展開の意味で、書き起こし&和訳を行いました。 デザイナのみならずアプリ開発者の皆様にも有用かと思いますので、ぜひご参照ください。 iOS 7 Video - 書き起こし & 和訳 ※ 画像はすべて iOS 7 Video の中からの抜粋です We have always thought
CSS3には拡大、縮小、移動、傾斜、回転を行えるtransformプロパティがあります。 このtransformは2D, 3Dどちらにも対応しています。 ASのtransform.matrix(Matrix)も得意では無かったのですが、復習がてらのメモです。 W3C: CSS Transforms transform(matrix)で最適化 DOMElementのアニメーションでパフォーマンスを良くするためにはtransformを使った方が良いと、あるセミナーでGoogleの中の人とMozillaの中の人が言ってたので間違いないでしょう。 て言うか信じてます、試しては無いです。伝聞で申し訳ないです。 でもカクカク動いてたiPhone上でのアニメーションをtransformに変えたらかなりスムーズに動くようになったので効果はあると思っています。 追記 – スマホのアニメーションが改善されたっ
こんにちは!このブログを作って2ヶ月が経ちました(^^) 少し間が空きましたが、サイト制作日記を書いてみます! 今回は2chまとめサイトにありがちなスクロールするとサイドバーの広告が追いかけてくるようなものを作ってみました。 まとめ記事じゃなくて申し訳ありません(>_<)たまーーーに。ほんとたまーーーーーに、こんなサイト制作日記たるものを書いちゃいます。ご容赦くださいm(__)m 何のことだ?って人は当ブログの右サイドバーを見てください。Amazonの広告が追いかけてくるはずです。 これ難しそうに見えて、めちゃくちゃ簡単に実装できるので是非ここでコードを盗っていってください(^^) jqueryを使う 簡単に実装するためにjqueryを使います!jqueryとはjavascriptライブラリです(^^) このjqueryを使うためには下準備が必要になります。 本家のhttp://jquer
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも! 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
アイコン全種 サイズは30px, 60pxが用意されており、フォーマットは下記の3種類が揃っています。 .eps .ai .psd PSDを開くとこんな感じです。 デザインはシンプルなので、さまざまな背景にマッチします。
はじめに Webデザインを行う上で一番使われているソフトといったら、やはりAdobe Photoshopでしょうかね。僕も仕事で使うことはよくあるんですが、やはり画像の補正やら修正・レタッチ、合成などがほとんどで、オブジェクトを作って配置していくということをPhotoshop上で行うことに慣れていません。 そして、僕自身仕事で一番使うのはやはりAdobe Illustratorです。印刷物のデザインをメインにやってきましたので、自ずとそうなってしまいます。しかし、IllustratorはWebデザインには向いていないとよく言われます。そう言われるにはたくさんの理由があるのだと思うのですが、線にアンチエイリアスがかかるときがあることや、そもそもIllustratorの操作に慣れていないという声もよく聞きました。 ですので、今回こちらの記事では、僕のようなスタイルの人がWebデザインをIllu
汚した感じのグランジデザインにはまりそうなストロークを描くPhotoshopのブラシをBlog.SpoonGraphicsから紹介します。
前回の記事の中で、IllustratorのプラグインであるScriptographerを紹介しました。ScriptographerはIllustratorのプラグインで、Javascriptのようなプログラムを通してアートボードにオブジェクトを配置したり加工できるようになります。今回はScriptographerを利用して制作したアルゴリズミックなタイポグラフィ表現とコードを紹介します。コードは公開しています。 「作曲家の個展2011―三輪眞弘」 今年10月、サントリーホールにてに行われるコンサート、「作曲家の個展2011―三輪眞弘」のビジュアルイメージに、Scriptographerで作ったアルゴリズムタイポグラフィーを制作しました。 三輪氏は、2004年オーケストラのための「村松ギヤ・エンジンによるボレロ」で芥川作曲賞、2007年音楽についての独自の方法論「逆シミュレーション音楽」がア
東京喰種:re PV - YouTube9 years ago “富野セリフの特徴(例文は作品中の抜粋とは限りません) 1 語尾が変 例「あなたに分かる?」→「あなたに分かって?」 2 回りくどい 例「あの東京タワーに・・・」→「あの東京タワーってやつに・・・」 3 突然自己紹介 例「中尉!退却しましょう!」「こんなところで退けるか!」 →「中尉!退却しましょう!」「私はマシュマー・セロだ!!こんなところで退けるか!」 間違った例「私はリリーナ・ドーリアン・・・あなたは?」 4 男が女言葉 例「右舷!弾幕薄いぞ!何をやってるんだ!」→「右舷!弾幕薄いぞ!何やってんの!」 「悲しいけどこれ、戦争なんだよな!」→「悲しいけどこれ、戦争なのよね!」 5 不自然にフルネーム 例「小渕さん!大変だ!アメリカが宣戦布告してきた」→「小渕圭三さん!大変だ!アメリカが宣戦布告してきた」 6 脈絡なき独り言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く