webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」
TOP > Design > webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」 ハイクオリティなデザインを手がけるのには、いろいろなデザインリサーチや構成の企画立てなど、たくさんの工程が必要になってきます。しかし時にはコスト面や納期面で困難な状況に陥ることも。今回はそんな時に参考にしたい、フリーUIキット10種「10 Fresh And Free UI Kits For Designers」を紹介したいと思います。 Dribbble – Freebie PSD: Flat UI Kit by Marcel Akiyama デザイン形成時に役立ってくれるUIデザインが揃っており、欲しいデザインや目的に合わせて選ぶことができるようになっています。 詳しくは以下 Download Flat
おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
NHKの選挙速報サイトから学ぶ「ユーザー視点」設計 | マミオン有限会社-パソコン・数学研修、法人研修
7月21日（日）は、参議院選挙の投票日でした。 下の画像は、一般の選挙速報サイトの中から、代表して4つ（Yahoo、読売、朝日、MSN産経）のトップページを集めてみたものです。 選挙は掲載すべき情報がとても多いので、どこのサイトもかなりゴチャゴチャした印象を受けるのではないでしょうか？ しかし一方で、見やすさ、使いやすさの面で抜きんでており、完成度が非常に高いなと感じたのが、こちらのNHKの選挙速報サイトです。 今回は、このNHKの特設サイトから学べる「ユーザー視点」が感じられるポイントについて、まとめてみたいと思います。 ディスクロージャーでスッキリとサイトのトップには、開票結果を反映させた勢力図が掲載されています。各党首の顔写真付きなので、前述の一般サイトに比べてイメージを膨らめやすいですね。 そして勢力図の下部にある「OPEN」をクリックすると、今まで見たことがないようなデザインのイ
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
『UI設計〜ディレクションの質を高める7つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
経験デザイン 12回目 ペーパープロトタイプ | 経験デザイン研究所
夏休み明け初回の講座は「ペーパープロトタイプ」。 夏休み前にリ・デザインしたサイトをペーパープロトタイプで作ります。 今回１年生が学んでくれれば良いことは、良いサイトをデザインすることではなく、ペーパープロトタイプを作る経験をすること。 後期の課題で「ぺーパープロト作れ〜。」と言われたら、何も教わらずにサラサラ作れるようになっておいてもらうことです。 そういう意味では、２年生のものも見ているので勘は良いですね。 おお、このくらいラフで結構。FLASHの部分が蛇腹になっているのが笑える。 プロトタイピング出来るように、パラパラめくれます。 授業終了時に、未完成でも壁に貼って帰る。いつでもジーッと見て考えることが大切。そうすることがプロトタイプを作る目的でもある。
理想的なサイトマップの形と標準書式 | blog / bookslope
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」に参加してきました。 当時の模様は、公式サイトのエントリーでご覧いただけますしTwitterでも中継 (?) されていたようで「buzztter」で見ることができます。ミクシィでも感想トピックスが立ち上がっているようです。 第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」 終了いたしました (WebSig24/7) また、当日のスライドもSlideshareで公開されています。 第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」 View more presentations from websig. この中での課題定義については、以前gihyo.jpで書いていたエントリー「サイトマップと情報の構造化」も参考にしていただけたようで、以下のように定義付
経験デザインのスタート | 経験デザイン研究所
金曜日より1年生Web科の「経験デザイン」の授業が始まりました。HCDプロセスの調査と分析の手法を、１年生の早い段階から学んでもらおうというものです。 初回は、導入としてイームズ夫妻の「POWERS OF TEN」を見せて、その世界観をダイアグラム化してもらいます。 最近ではPOWERS OF TENは字幕付きがYouTubeで見れるので、導入しやすいと思います。昔は苦労したのですが。
効果的なプロトタイプを早く作るコツ
プロトタイプを作るのは重要ですが、作るためにおおくの時間を割きたくないところ。特に作ったあとも何回か調整をするわけですから、あまり作り込むわけにはいきません。しかし、あまりに単純な見た目だと情報共有が難しくなります。自分が使い慣れているツールを使うのは第一歩ですが、ちょっとしたことを気をつけることで、効果的なプロトタイプを早く作れるようになります。 スゴいコツだ！というのはありませんが、心がけてるだけでも少しばかり早く作れるようになりますよ。 使えるパレットを用意する よく使う UI 要素やコメントを付けるためのパーツはパレットにしておくと効率的。以前紹介した、OmniGraffle用とPowerPoint用を利用すると手軽です。 テンプレートを用意する OmniGraffle では、通常のファイルを新規作成が出来るだけでなく、テンプレートを作成することが出来ます。単位をピクセルにし、グリ
[紹介] 大企業でUIに関わる人に読んでもらいたい「DESIGN IT! magazine vol. 2」 - F.Ko-Jiの「一秒後は未来」
Top/書籍/[紹介] 大企業でUIに関わる人に読んでもらいたい「DESIGN IT! magazine vol. 2」 ソシオメディア社より「DESIGN IT! magazine」の第2号をいただきましたので紹介します。 DESIGN IT! magazineは、どちらかというと大企業でWebを担当している人や、製品の設計/デザインをプロデュースしている人向けではないかと思います。vol. 2の主な内容は以下の通りです。 ◆特集記事 本誌が注目する分野や業界の「いま」を詳しくお届けします。 ○Feature-1：ユーザーエクスペリエンスの価格 -経験価値の徹底解明 ○Feature-2：UIから考えるビジネスに効くSOA -経営層をはじめ企業全体を巻き込もう ◆注目記事 ○EYES デザインとITとの領域で先端をいく経営者や現場リーダー達のインタビューを紹介します。 ・3Dインタフェー
![[紹介] 大企業でUIに関わる人に読んでもらいたい「DESIGN IT! magazine vol. 2」 - F.Ko-Jiの「一秒後は未来」](https://cdn-ak-scissors.b.st-hatena.com/image/square/d152a6d1035917c8306f3ebf560d411b6ecc5984/height=288;version=1;width=512/https%3A%2F%2Fblog.fkoji.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fdesign-it-magazine-vol-2.jpg)
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、サイトの目的にかかわらず必要になることが多い、企業サイトの申し込みフォームについて、フォレスターが調査した「なぜ途中で申し込みをあきらめてしまうのか」の概要と、申し込みフォームが使いづらい具体的な原因の1つ「フォームのラベルやボタンの位置やデザイン」とその解決方法を解説しました。 今回は、その続編として、申し込みフォームをより使いやすくするために注意するべき具体的なチェック点や
フォーム作成時に心がけること ――ユーザーは直感的に理解してくれない | Moz - SEOとインバウンドマーケティングの実践情報
今日は検索エンジンマーケティングの話題を取り上げる予定だったけど、少しズルをして、登録フォームとユーザビリティについて書こうと思う。 でも、自分のサイトのランディングページに登録フォームなど、何らかの登録に関する要素があれば、今回のテーマはぴったりのアドバイスになるはず。 さて、私は2008年こそ筋金入りの人間になるという目標のため、クリスティーン（Christine）の強い勧めもあって、ブリティッシュ・コロンビア州（カナダ）のビクトリアで開催されるトライアスロン大会「New Balance Half Iron Man」に参加を申し込むことにしたの。クリスティーンとMansteryGuestと私は嘔吐するまで泳ぎ、自転車をこぎ、走るつもりよ。 さてお楽しみの時間。私は登録ページにアクセスし、必要な情報を書き込み、フォームを送信したの。送信後のページを見ていたら、いくつか間違いを犯してしまっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインの件まとめ | Parallelminds
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
高校Webサイト・ベストプラクティス 制作に入る | 経験デザイン研究所
ワイヤーフレームコミュニケーション研究会 | EXDESIGN
UIパターンいろいろ - DesignWalker
ウェブサービスを作るときはBlank Slateを工夫しよう | IDEA*IDEA
