2012年上半期、チェックしておきたいUIデザインをdribbbleから紹介します。 ほとんどのものがPSDファイルをダウンロードできるので、勉強になりますよ。
最近かつて以上にウェブサービスにとってデザインが重要だ、ということがいわれることが多くなってきた気もします。PinterestやFlipboard等、いわゆる次世代ウェブデザインを代表するようなサービスも大人気ですが、もちろんそれだけはありません。今回から新たに登場する米国の人気デザインブログspyrestudiosから、最近のスタートアップでデザインが素晴らしいサイトを35まとめた記事を紹介します。 — SEO Japan 何年か前までは誰もがWeb2.0の流行について話していた。インターネットではMySpace、Friendster、Facebook、Twitter、そして最近ではFoursquareやPinterestに続く新しいスタートアップが次々に登場している。テクスタートアップの世界では、新しいアイデアにこと切れることはない。 ウェブデザインに関しても同じことがいえる。今回、最
広告は本当のところ見られたのか、そしてドコに注目が集まったのか、知る必要があります。 ヒートマップとアイ・トラッキングの技術が向上した結果、人々の視線の行方を正確に知ることができるようになりました。広告会社には不都合な真実かもしれませんが、Business Insiderの「16 Heatmaps That Reveal Exactly Where People Look」という記事を厳選して紹介します。 1. H&Mの水着広告 男性は水着姿の女性モデルを凝視します。一方、女性はモデル周辺の広告メッセージにも視線を十分に配ります。 2. 美女のヌードと靴 男性は全然、靴に興味を示していません。靴しか身につけてないのに・・・ 3. 視線で誘導 女性モデルの視線が商品に向いてると、読者の視線も商品へ誘導されます。 4. バナーブラインドネス サイト閲覧者は当然、記事を読みますし、バナー広告をほ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 シリコンバレーに来て45日が経ちました。今日はいつもと趣向を変えて、こちらで聞いた、デザインやUI/UXが美しいWebサービスやアプリの一部を紹介してみたいと思います。 Chill http://chill.com/ デザインのイケてるサービスを聞くと、かなりの確率でこのサービスの名前が挙がりました。動画の上に投稿者のプロフィール画像が円形に表示されているのが素敵です。詳細ページの「Thoughts?」ボタンの動きが秀逸。色々参考になるサイトだと思います。 ChillのようにPinterest風デザインは、今まさにトレンドのようで、教えてもらったサイトの中でも本家に負けず劣らずのデザイン性を持ったサービスも多いです。女性ウケが良いことと、画像をファーストビューでたくさん
umjammer です、 弊社の Android 案件の成果物として、リッチなUIを簡単に使用することができるUIコンポーネント群、名付けて「KLab iPhoroid UI」をここに発表します。 Android 案件を進めていく上で、お客様から言われる要件の一つとして「iPhone と同じようなUIにしてもらえませんでしょうか?」というのがあります。やはりスマートフォンと言えば iPhone というイメージが世間では強いのでしょうか? Android には Android UI のポリシーが云々というのはありますが、そこはお客様の要望なので… そして Android のデフォルトで用意されている UI のみでは iPhone の様なリッチな UI & UX を再現するのは困難です。 サードパーティーも頑張って様々なリッチな UI を WEB に発表していますが、イメージの多用、メモリ管理
ウェブサイトやちょっとしたワンポイントに使える高品質なアイコン集が「ArtDesigner.lv」にて公開されています。それぞれアイコンセットはCCライセンスで配布されており、ライセンスの範疇であれば無料で利用することができます。商用利用もOKなので、助かる人は多いはず。 Lovely Website icons Pack#1 | Artdesigner.lv 中身はこのような8種類のアイコンがPNGで収録されています。 Lovely Website icons Pack#2 | Artdesigner.lv こちらも中身は8種類のPNGファイル WEB UI Treasure Chest v 1.0 | Artdesigner.lv 種類が多彩で、しかもPSDファイルで提供されています。文字などはレイヤーで重ねられているので、ほかの文字に変えたい場合にも簡単に編集することができます。 S
2011年も残すところあと少しになりました。2011年にはてなブックマークをたくさん集めた記事の中から、Webデベロッパー向けに限定して厳選してお届けします。 ウェブデザイン入門 ウェブサイトにおける視覚面に対し、整理・再構築・意匠等を施す。グラフィックデザイン的な要素を多く含む一方で、インタラクティブな要素を持つウェブの性格上、情報デザインあるいは工業デザイン的なスキルも求められる。ウェブサイト全体の情報設計、見た目を中心とするグラフィックデザインやGUIの設計、ウェブアプリケーションのUI設計構築など多岐に渡る。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ – YATのBlog デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)*ホームページを
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト! ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
@fladdictさんが監訳されたことで話題の、オライリー本『iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン』、早速会社で購入してもらって読みました。読み終わってまず思ったのは、これはiPhone開発に携わるすべての人に必読の本になるだろうということです。エンジニア、デザイナー、企画者と分担が分かれている場合は、全員が読むといいのではないでしょうか。この本はiPhone開発に必要な共通言語を提供してくれます。それも、コードを使わずに。 本書から得られる内容としては大きくふたつあると思います。ひとつはiPhone開発のプロセスを解説書としての側面。もうひとつはiPhoneのUIカタログとしての側面です。 アプリ開発プロセスの解説書 この本に書かれている開発プロセスは、ベストプラクティスと言えるものになっていると思います。ユーザーニーズを探ること、シンプルさを追求するこ
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
Appleは買ってきて開けるまでの過程を明確に他社製品と差別化しており、ユーザー体験の満足度を向上させ、所有欲を満たすようにできています。これら一連のパッケージングデザインは単なるインパクト狙いや俗に言うAppleの哲学、要するに創業者であるスティーブ・ジョブズの美学だけに基づいたものではなく、徹底的にユーザビリティをまず考慮しており、その上で成り立たせているものであるということが、実際の具体的なパッケージングデザインを見るとよく理解できます。 というわけで、「iPad 2」の場合、Appleがどのような工夫をしてパッケージングデザインを行っているのかを見てみましょう。 パッケージングデザインのフォトレビューは以下から。 これがiPad 2のパッケージ このようにしてパカッと開く方式になっており、箱の上や横からスライドさせて商品を出す方式ではありません。これは箱を開けることでiPad 2の
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
素晴らしいアプリのことを「神アプリ」と安直に言うのは嫌いなんです。なんか安っぽく聞こえるじゃないですか。 だがあえて言いましょう。PictShareは神アプリ。少なくとも、私にとっては。 Evernoteでログを漁ってみたところ、「PictShareすげえええ」と1月4日につぶやいておりました。 あの「そら案内」などで知られる@itok_twit さん作成の「PictShare」は、複数の写真を様々な写真共有サービスに簡単にアップロードできるアプリです。 PictShare – multiple photos uploader 1.4.1 iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要 カテゴリ: ソーシャルネットワーキング 価格: ¥230 更新: 2011/03/22 リリース後すぐに購入し、「すげえええ」とつぶやいているにも関わらず、なぜか私、
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く