下記勉強会の発表資料です。 --------------------------------------------------------- 使いたくなる UI をつくる! フロントエンド 勉強会 : ATND http://atnd.org/events/42371 ---------------------------------------------------------Read less
今年のお盆は9連休の方も多いのではないでしょうか... / おすすめスライド デザイン編 / Webデザインのウソ・ホント ~ Web らしく...他...全21件 今年のお盆は9連休の方も多いのではないでしょうか? お休み中に時間を持て余すようでしたら、過去にご紹介したスライドを読み直してみませんか?きっと新たな発見があるはず。 そんなスライドを厳選してまとめました。まずはデザイン編から。
ブランドの顔としての役割を果たす「ロゴマーク」。 企業のロゴやサービスのロゴは、その会社やサービスのメッセージを発信するとても重要な意味を持ちます。そんなロゴのデザインを行う際に、数多くのロゴを見ることでデザインの引き出しを増やすことは必要不可欠。 そこで今回は、ロゴデザインが画像一覧で見られる海外や国内のギャラリーサイトを10個ほどご紹介します。会社やブランドのロゴ、かっこいいロゴからおしゃれなロゴまで、自分の目的に合った参考になるデザインが無料で見つかるのでぜひご活用ください。 参考になるロゴデザインが一覧でみられるWebサイト それではロゴデザインの参考になるWebサイトを10サイトほどご紹介します。ロゴ作成でお悩みの方はぜひ、訪れてみてください。 LogoPond LogoPondは、かっこいいロゴなどクオリティの高いロゴが集まる海外のギャラリーサイトです。 ロゴ作成時にインスピレ
お世話様です。ディレクターの鮫島です。 最近、よくUNIQLOのサラファインを着ているのですが、ふとした時に「あ、それサラファインっしょ」って言われるととても恥ずかしくなるのはなぜでしょう。僕はUNIQLOさんが大好きですよ。無印さんも。 ※ちなみに男性用は「シルキードライ」って言うらしいが、サラファインという言い方のほうが印象に残るのでサラファインで通します。 そんなサラファイン鮫島がお送りする本日の記事内容は 「打ち合わせの時に使える、認識を“目”で合わせるためのテクニック」です。 私自身ディレクターなのでお客様とは、ほぼ毎日打ち合わせをさせていただくのですが、イメージ合わせを口頭でしても、なかなか完璧に合わせることは難しいです。 打ち合わせの後で認識を合わせるために簡易な資料は作ったりするものの、それでは時間のロスだったりしてあまり効率的ではないので、私は打ち合わせの場で双方のイメー
有限会社いろはの代表取締役兼経営コンサルタント・竹内謙礼が、「ネットで売れるもの売れないもの 増補改訂版」(日本経済新聞出版社)を8月2日に発売するにあたり、楽天リサーチを活用して、スマートフォンユーザー100名に対して、アンケート調査を行った。 同調査では、スマートフォンで一般的に表示される「PCサイト」と、スマートフォンの画面の大きさに合わせて表示される「スマートフォン専用サイト」と、どちらが活用されているのかを中心に尋ねた。 まず、「スマートフォン専用サイト」と「PCサイト」、どちらが使いやすいか質問したところ、「スマートフォン専用サイト」と回答した人が39%だったのに対して、「PCサイト」と回答した人が45%と、6ポイント上回る結果となった。「特に意識はしていない」と回答した“どっちでもいい派”の人が16%いることから、6割以上の人がスマートフォン専用サイトに対して利便性を感じてい
最近、このブログのデザインを1から作りなおして、フラットデザインを取り入れて見ようかなと考えています。 フラットデザインはシンプルな分、ごまかしが効きません。使い所が難しいので何か見本やサンプルがあると助かりますよね。 勉強がてら、フラットデザインのサンプルとなるアイコンのリンクを集めてまとめてみました。 フラットデザインアイコンまとめ Free program icons on Behance Dribbble – Free Flat Icon Set by Barry Mccalvey 40 Social Media Flat Icons on Behance Weather app + psd on Behance My Desktop Icons – Free Download on Behance Dribbble – Freebie – Flat Credit Cards by
[対象: 中〜上級] さまざまなモバイル向けサイトの研究中に出くわした、ユーザビリティを大きく損ねる12個の要素をE-consultancyがブログで解説しました。 ユーザビリティの悪化だけではなく、なかにはGoogleのランキングを下げる原因にも繋がるスマートフォンサイトの構成ミスも含まれています。 モバイル対応が必須になっている現在のサイト運営において、とても参考になる記事なので紹介します。 なお直訳ではなく、僕なりの言葉で要点を説明します。 英語がわかる方は原文も読んでください。 モバイルサイトのユーザビリティを損ねる12個の欠陥 1. 突然デスクトップ向けサイトに切り替わる モバイル向けのページを閲覧していたのに、デスクトップ向けページに突然移動させられてしまうサイトは確かにありますね。 モバイル向けのデザインだったのに、ページを移動したら何の前触れもなくPC向けのデザインに切り替
CSS Checkbox | Cross Browser CSS Checkbox Generator | Free Checkbox CSS 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」。 豊富なピュアCSSでデザインされたチェックボックスを選んでダウンロードが可能です。 必要なものだけど選んで、HTMLとCSSをコピペで使えるようになっているみたいです。 クロスブラウザかつ、ピュアCSSということでとても使いやすそうです ちょっとオシャレなチェックボックスにしたい、という場合は参考にできそう 画像はこのサービスのサーバを直指定しているようなので、トラフィックの大きなサイトでは予め画像をダウンロードして使うとよいでしょう。 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」
GunosyのWEB・iPhoneデザインを手がけるなど、UIデザイン会社として存在感を発揮するGoodpatch。注目のUIデザイン会社は、どのようにしてメンバーの成長を促しているのか?そのカギは育成体制と特徴的な仕組みにあるという。 注目のUIデザイン会社 Gunosyのサイト・アプリデザインを手掛けたことでも注目を集めるUIデザイン会社《Goodpatch》。 彼らはUIデザインに特化したWEB・アプリの受託制作のみならず、自社サービスの開発やWEB/UIデザイナー必見のブログ「MEMOPATCH」も手掛けている。 さぞかし実績のあるデザイナーばかりが揃っているのかと思いきや、実際のところ、同社には未経験で入社したメンバーも少なくないそう。一体、彼らはいかにしてデザイナーの育成を行なっているのか? 代表の土屋尚史氏へのインタビューから、Goodpatchが実践する、育成体制・仕組みづ
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 (この記事はGoodUIから翻訳抜粋したものです) GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ:幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね(遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
エンジニアが立ち上げた会社と言えば、GoogleやAmazon、Facebookなどが有名ですが、デザイナーが立ち上げた会社と聞いて皆さんはどんな会社を思い浮かべますか?その優れたデザインで話題になったPinterestやPathなどのサービスは、デザイナーが共同創業者として名を連ねており、デザイナーが会社を立ち上げることは珍しくなくなってきました。そこで今回のMEMOPATCHでは、創業者(または共同創業者)がデザイナーのWebサービスを8つ紹介します! Pinterest https://pinterest.com/ デザイナーEvan Sharpは友人二人とサイドプロジェクトとしてPinterestを作りました。とはいえあくまでサイドプロジェクトであったため、その後Facebookでデザイナーとして働きはじめます。EvanはPinterestが気になっていたものの、当時のPinte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く