[B! webdesign] rskyのブックマーク

UX に真面目に取り組める組織づくりについてのスライドを公開しました - つきあたりを右に

と、いうわけで転職しました本来の職種は相変わらず﹁前例の無い事をなんとか形にして﹂をなんとかするデベロッパとしてですが、﹁UX Developer として組織的に UXとかそういうの強くして﹂というのも兼任しておりますで、入社して1週間経って、早々と﹁じゃあ、出来る UXデザイナー/ディレクター/エンジニアを社外から引っ張るとか、採用募るとか、属人性の高い他力本願にしないで、組織として体制を整える方向で行きましょうよ﹂ということで作ったのがこのスライドですこのスライドについて昨今、割とどのソフトウェア・Webサービス開発の現場でも﹁UI/UX デザイナーを募集します﹂と求人出しています。しかし、求人出してるところって、そもそもそういう人材が不在で、受け入れ態勢整ってない事多いのが実情です。そして、その後どうなるかというと、その人の属人性に大きく依存した働きのみが期待さ

rsky 2012/12/17

リンク

Guy Podjarny「Responsive Web Designなサイトは遅い、と言っておこう」 - 以下斜め読んだ内容

Guy's Pod 2012.10.9のブログエントリ追記元エントリが更新されてたので、修正 Guyのプレゼン動画聞き齧った内容も少し反映 Guy's Pod » Blog Archive » Responsive Web Design is bad for performance. There, I said it. 世界のトラフィックの数割を捌くAkamaiの中の人によるResponsive Web Designネタ Guyはモバイル向け速度計測ツール作ってたblaze.ioのCTOだった人 blaze.io自体は2月にakamaiに買収された RWDに期待してる、人にも勧めてるけど認めるべき事実としてRWDは遅い、最適化してもどうにもならない部分残るその上でRWDでいくのに必要なこと、考えるべきこと、etc.を綴ったエントリ RWDが引き起こす速度低下は軽減できるがゼロにはな

rsky 2012/10/11

“RWDに期待してる、人にも勧めてる。けど認めるべき事実としてRWDは遅い、最適化してもどうにもならない部分残る”

webdesign

リンク

要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話

2012 年9月26日追記しました。要約エントリー。元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5のページにある﹁スライドしてアンロック﹂のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。︵ミスなどの指摘は @lowply までお願いします︶もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは﹁再生ボタン﹂を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった2

rsky 2012/09/26

Retina MBPのページではMotion JPEGもどきだったのがiPhone 5のページではスプライトのようなものを使うようになったんだな。流石というか常識というか、ちゃんと各要素が8x8ピクセルのJPEGブロックにアライメントされている

リンク

iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch

Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.

rsky 2012/09/20

リンク

レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン︵RWD︶で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。プロジェクトの概要大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました‥ 今回、新しい試みを行った背景には、このウェブサイトが﹁大学のウェブサイト﹂であることが大きな要因の一つとし

rsky 2012/05/02

webdesign

リンク

Adobeアカデミックストア

Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A

rsky 2012/03/08

リンク

アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール

モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。アドビシステムズのAdobe Labsが公開した﹁Adobe Shadow﹂は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。同じように、Android用ShadowもChromeブラウザとペアにすることができ

rsky 2012/03/08

リンク

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas

rsky 2012/02/14

リンク

http://www.99lime.com/

rsky 2012/01/21

リンク

Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime

結構参考になったので備忘録がてらご紹介。Webサイトの制作スピードをより向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態で済むように設計されたスターターキット、というかフレームワークです。制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。いろいろ

rsky 2012/01/21

リンク

TypeKitから始まるウェブ文字革命

今月はじめに John が来日したときに﹁フォント関連で近々発表があるんだよね﹂と言っていたのですが、ついに全貌が明らかになったようです。Jeffrey Veen を中心に TypeKit というプロジェクトが立ち上がる模様です。既に WebKit, Opera 10, Firefox 3.1 3.5 でサポートされている @font-face。利用者のパソコンにあるなしに関係なく指定のフォントが使えるようになります。つまり、今まで仕方なく画像文字にしていた部分もテキストで処理可能になる可能性があります。 @font-faceでまず問題になるのが著作権に侵害しないかどうかという部分です。多くのフォントはウェブ上での配布を禁じていますし、@font-face の許可をしていないフォントもあります。法的な問題や DRM を気にせず安心して @font-face を使った文字表現をするために生ま

rsky 2010/05/29

リンク

GoogleがWebフォントサービスを開始 - フォントブログ

Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可

rsky 2010/05/29

リンク

国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net

日本のWebデザインってあまりトレンドというのは無いような気がします。なんと言うか見易さとか実用性メインでデザインは結構シンプルだったりしますし、日本人に合ってるのかもしれないですね。そんな訳で日本人の感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。僕自身がいいと思ったサイトを厳選してご紹介します。順不同。サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、２次配布は不可。