下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな？ ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか？ [Colourlovers] Jesus Diaz（原文／あんね）

人間がデジタル技術を開発して以来、開発され続けてきた画像の保存形式。 開発過程には、それこそ色々な種類がありました。 しかし、現代のブラウザや、一般的な利用者のニーズに合わせて、現在ではJPG、 PNG、 GIFが3強です。 もちろん、それぞれ長所と短所がありますが、それぞれどこがどう違うのでしょうか。 JPG（Joint Photographic Experts Group） JPGはジョイント・フォトグラフィック・エキスパート・グループ（Joint Photographic Experts Group）がプロのカメラマンの標準となるべく開発したファイルのタイプです。 ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮します。 この圧縮は非可逆圧縮です。つまり、一度圧縮してしまうと元には復元できないのです。しか

インターネットの力で 世界のビジネスを革新する Internet for Infinite Business Evolution ペンシルについて

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の

壮大な「自然風景」をモチーフにした iOS 7 の Parallax Effect（視差効果）に対応した最適サイズ【1536×1040ピクセル】の壁紙（Wallpaper）を収集しました！ 気に入った壁紙はリンク先から落としてチョ♪ エントリ時点では、iOS 7 の動いている iPhone 5 / iPhone 5s / iPhone 5c用の壁紙ですww Link: GO 70° NORTH | Lock screen, home screen Link: Parallax Wallpapers

jQuery Mobileのリンクが飛ばないー！な人はここ☆ 先日から「jQuery Mobile」で、モバイルサイトを作っとります。 困ったん・・・、をメモっていきますので。 困ったんな方は、ぜひ参考にしていただけると管理人よろこびます(o^^o) では、早速作っていきましょー！！ リンクボタンがなんでか飛ばないんです。 くるくるしてて飛ばないんですー。 aタグに data-ajax=”false” を追記すればOKです。 <a href=”xxx.html” data-ajax=”false”>XXX</a> 参考サイト：http://www.d-ic.com/blog/203 そんなわけで、無事にうごきましたん♪ はい次。 画像サイズをデバイスで変えたいのん さあさあお次は、デバイスで画像のサイズを変えたいの！という次なるステップへ。 以下のタグで、サイズを決めてあげてくだ

株式会社Ptmind（本社：東京都渋谷区　代表取締役社長：鄭 遠）は2014年8月18日、アクセス解析ツール「Pt engine」において、ネイティブアプリにおけるヒートマップ計測の技術開発に成功したこと、およびアプリ版ヒートマップのクローズドβ版の提供を世界での同時展開を開始したことを発表しました。 Pt engine は今まで、Webページにアクセスしたユーザーのクリック（スマートフォンではタッチ）や閲覧といった行動をサーモグラフィーで見える化するヒートマップ機能を提供してまいりました。すでに日本国内では4,500サイト以上でご利用をいただいており、ヒートマップツールでは日本最大級です。 このPt engineを提供する中で、様々なお客様からネイティブアプリでのヒートマップ計測をご要望いただいておりました。そこでPtmindではアプリにおけるヒートマップ研究を重ね、この度ネイティブアプ

My weblog space for web development and design.

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。 ソースは以下です。 <div> <img src="/sample/image/sample.gif" alt="sample" />abcdefg </div> div{ background:#F00; width:200px; } この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。 vertical-align－スタイルシートリファレンス つまりgとかjとか下にはみ出るアルファベ

Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.

サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>

ライブイベントやテーマパークなどでも利用され、一般的にも認知度の高くなってきたプロジェクションマッピング。 実際に見た事のある人も多いかと思います。 当メディアでもこれまで様々な例を紹介してきましたが、今回はなんとプロジェクションマッピングによる「化粧」。 人の顔にプロジェクターで様々な化粧をリアルタイムに施していく動画が公開され、海外で話題を呼んでいます。 化粧、、、どころか顔がものすごい変形しちゃってますね。 「Electronic Makeup（エレクトロニック・メイクアップ）」と呼ばれるこのアートはNobumichi Asai氏がデザイナーやフォトグラファー、プログラマーなど様々なスタッフとコラボレーションして生まれた作品。 最初にモデルの顔をスキャナーで読み取って物理的な特徴を捕え、瞬きや表情の変化に合わせてリアルタイムに「化粧」を描写しています。 通常、私たちが想像する化粧の遥

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..

NewsPicksの質が下がっている？ 最近、僕がハマっている「NewsPicks」というアプリがあります。これは、経済ニュースアプリで、竹中平蔵さんや、堀江貴文さん、グロービス堀社長などが実名でコメントしているところが刺激的です。 毎日何回も見ているのですが、コメントをつけるとlikeがついてそれがランキングになったりするので、めっちゃハマっています。これ系では、はてなブックマーク以来かも。NewsPicksとpressoは情報収集の必須アプリになりつつあります。 NewsPicksの特徴は、実名で投稿するのが基本になっているところです。はてなブックマークはID文化なので、この差は大きいです。 しかし、最近では「NewsPicksは質が低下したのでは？」という声をちらほら見るようになりました。 ちょっと前からnewspicksっていうアプリ使ってるんだけど人が増えてコメントの平均的な質が

前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない